diff --git a/packages/design-system/src/components/N8nCheckbox/Checkbox.vue b/packages/design-system/src/components/N8nCheckbox/Checkbox.vue index 28b704ecceeab..1568aea764c73 100644 --- a/packages/design-system/src/components/N8nCheckbox/Checkbox.vue +++ b/packages/design-system/src/components/N8nCheckbox/Checkbox.vue @@ -8,7 +8,9 @@ :value="value" @change="onChange" > + { + describe('N8nCheckbox', () => { + it('should render without label and child content', () => { + const { container } = render(N8nCheckbox); + expect(container).toMatchSnapshot(); + }); + + it('should render with label', () => { + const { container } = render(N8nCheckbox, { props: { label: 'Checkbox' } }); + expect(container).toMatchSnapshot(); + }); + + it('should render with child', () => { + const { container } = render(N8nCheckbox, { + slots: { default: 'Bold text' }, + }); + expect(container).toMatchSnapshot(); + }); + + it('should render with both child and label', () => { + const { container } = render(N8nCheckbox, { + props: { label: 'Checkbox' }, + slots: { default: 'Bold text' }, + }); + expect(container).toMatchSnapshot(); + }); + }); +}); diff --git a/packages/design-system/src/components/N8nCheckbox/__tests__/__snapshots__/Checkbox.spec.ts.snap b/packages/design-system/src/components/N8nCheckbox/__tests__/__snapshots__/Checkbox.spec.ts.snap new file mode 100644 index 0000000000000..9a7a248acca0d --- /dev/null +++ b/packages/design-system/src/components/N8nCheckbox/__tests__/__snapshots__/Checkbox.spec.ts.snap @@ -0,0 +1,158 @@ +// Vitest Snapshot v1 + +exports[`components > N8nCheckbox > should render with both child and label 1`] = ` +
+ +
+`; + +exports[`components > N8nCheckbox > should render with child 1`] = ` +
+ +
+`; + +exports[`components > N8nCheckbox > should render with label 1`] = ` +
+ +
+`; + +exports[`components > N8nCheckbox > should render without label and child content 1`] = ` +
+ +
+`; diff --git a/packages/design-system/src/components/index.ts b/packages/design-system/src/components/index.ts index 22683c0296de4..32fdfd9e0cf7c 100644 --- a/packages/design-system/src/components/index.ts +++ b/packages/design-system/src/components/index.ts @@ -47,3 +47,4 @@ export { default as N8nUserSelect } from './N8nUserSelect'; export { default as N8nUsersList } from './N8nUsersList'; export { default as N8nResizeWrapper } from './N8nResizeWrapper'; export { default as N8nRecycleScroller } from './N8nRecycleScroller'; +export { default as N8nCheckbox } from './N8nCheckbox'; diff --git a/packages/design-system/src/plugin.ts b/packages/design-system/src/plugin.ts index 0a9a47021014b..71d7ff4df772d 100644 --- a/packages/design-system/src/plugin.ts +++ b/packages/design-system/src/plugin.ts @@ -50,6 +50,7 @@ import { N8nUsersList, N8nResizeWrapper, N8nRecycleScroller, + N8nCheckbox, } from './components'; export const N8nPlugin: PluginObject<{}> = { @@ -103,5 +104,6 @@ export const N8nPlugin: PluginObject<{}> = { app.component('n8n-user-select', N8nUserSelect); app.component('n8n-resize-wrapper', N8nResizeWrapper); app.component('n8n-recycle-scroller', N8nRecycleScroller); + app.component('n8n-checkbox', N8nCheckbox); }, };