Add a setup to unit-test single components, especially fields

package.json

@@ -57,6 +57,8 @@
 		"@sveltejs/kit": "^2.5.10",
 		"@sveltejs/package": "^2.3.1",
 		"@sveltejs/vite-plugin-svelte": "^3.1.0",
+		"@testing-library/jest-dom": "^6.4.5",
+		"@testing-library/svelte": "^5.1.0",
 		"@types/node": "^20.12.12",
 		"@types/uuid": "^9.0.8",
 		"@typescript-eslint/eslint-plugin": "^7.10.0",

src/lib/themes/carbon/Columns/Columns.test.ts

@@ -0,0 +1,64 @@
+import { describe, it, expect } from 'vitest';
+import {render} from '@testing-library/svelte'
+import '@testing-library/jest-dom';
+import { testOptions } from '$lib/TestOptions';
+import {
+    CallbackStateProcessor,
+    CallbackStateProvider,
+    Columns,
+    CrudDefinition,
+    DashboardDefinition,
+    initLocale,
+    TextField,
+    View
+} from "$lib";
+import ComponentToTest from "./Columns.svelte";
+import TextComponent from "../ViewFieldsComponents/DefaultField.svelte";
+
+describe(
+    'Columns component',
+    () => {
+        it('can instantiate the component', async () => {
+            const props = mockComponentProps(new Columns('columns', 'Columns label', [
+                {
+                    name: 'column_1',
+                    label: 'Column 1',
+                    fields: [new TextField('text', 'Text field')]
+                },
+            ]));
+
+            const rendered = render(ComponentToTest, props);
+
+            const h2 = rendered.container.querySelector('h2');
+            expect(h2).toBeDefined();
+            expect(h2?.innerHTML).toStrictEqual('Column 1');
+        });
+    },
+    testOptions,
+);
+
+function mockComponentProps(field: Columns) {
+    const dashboard = new DashboardDefinition({
+        adminConfig: {},
+        cruds: [
+            new CrudDefinition<string>({
+                name: 'test_field',
+                label: { singular: 'Test Field', plural: 'Test Fields' },
+                operations: [new View([field])],
+                stateProvider: new CallbackStateProvider<string>(() => Promise.resolve(null)),
+                stateProcessor: new CallbackStateProcessor<string>(() => {})
+            }),
+        ]
+    });
+
+    initLocale('fr');
+
+    return {
+        FieldComponent: TextComponent,
+        field: field,
+        operation: (dashboard.cruds[0] as CrudDefinition<string>).options.operations[0],
+        entityObject: {test_field: 'default_value'},
+        value: 'default_value',
+        theme: dashboard.adminConfig.theme,
+    };
+}

src/lib/themes/carbon/ViewFieldsComponents/ArrayField.test.ts

@@ -0,0 +1,63 @@
+import { describe, it, expect } from 'vitest';
+import {render} from '@testing-library/svelte'
+import '@testing-library/jest-dom';
+import { testOptions } from '$lib/TestOptions';
+import {
+    CallbackStateProcessor,
+    CallbackStateProvider,
+    ArrayField,
+    CrudDefinition,
+    DashboardDefinition,
+    initLocale,
+    TextField,
+    View
+} from "$lib";
+import ComponentToTest from "./ArrayField.svelte";
+
+describe(
+    'ArrayField component',
+    () => {
+        it('can instantiate the component', async () => {
+            const props = mockComponentProps(new ArrayField('array', 'Array label', new TextField('text', 'Text field')));
+
+            const rendered = render(ComponentToTest, props);
+
+            const label = rendered.container.querySelector('div > strong');
+            expect(label).toBeDefined();
+            expect(label?.innerHTML).toStrictEqual('Text field');
+            const valueElement = label?.parentElement?.nextElementSibling;
+            console.info('+=====================+');
+            expect(valueElement).toBeDefined();
+            expect(valueElement?.childNodes).toBeDefined();
+            expect(valueElement?.childNodes[0]).toBeInstanceOf(Text);
+            const textNode: Text = valueElement?.childNodes[0] as Text;
+            expect(textNode.wholeText).toStrictEqual('default_value');
+        });
+    },
+    testOptions,
+);
+
+function mockComponentProps(field: ArrayField<TextField>) {
+    const dashboard = new DashboardDefinition({
+        adminConfig: {},
+        cruds: [
+            new CrudDefinition<string>({
+                name: 'test_field',
+                label: { singular: 'Test Field', plural: 'Test Fields' },
+                operations: [new View([field])],
+                stateProvider: new CallbackStateProvider<string>(() => Promise.resolve(null)),
+                stateProcessor: new CallbackStateProcessor<string>(() => {})
+            }),
+        ]
+    });
+
+    initLocale('fr');
+
+    return {
+        field: field,
+        value: ['default_value'],
+        operation: (dashboard.cruds[0] as CrudDefinition<string>).options.operations[0],
+        entityObject: {test_field: ['default_value']},
+        theme: dashboard.adminConfig.theme,
+    };
+}

src/lib/themes/carbon/ViewFieldsComponents/CheckboxField.test.ts

@@ -0,0 +1,33 @@
+import { describe, it, expect } from 'vitest';
+import {render} from '@testing-library/svelte'
+import '@testing-library/jest-dom';
+import { testOptions } from '$lib/TestOptions';
+import ComponentToTest from "./CheckboxField.svelte";
+
+describe(
+    'CheckboxField component',
+    () => {
+        it('can instantiate the component with value "true"', async () => {
+            const rendered = render(ComponentToTest, {
+                value: true,
+            });
+
+            const svg = rendered.container.querySelector('svg') as SVGSVGElement;
+            expect(svg).toBeDefined();
+            expect(svg).toBeInstanceOf(SVGSVGElement);
+            expect(svg.style.color).toBe('rgb(0, 170, 0)')
+        });
+
+        it('can instantiate the component with value "false"', async () => {
+            const rendered = render(ComponentToTest, {
+                value: false,
+            });
+
+            const svg = rendered.container.querySelector('svg') as SVGSVGElement;
+            expect(svg).toBeDefined();
+            expect(svg).toBeInstanceOf(SVGSVGElement);
+            expect(svg.style.color).toBe('rgb(170, 0, 0)')
+        });
+    },
+    testOptions,
+);

vite.config.ts

@@ -1,12 +1,14 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 import { configDefaults } from 'vitest/config';
+import { svelteTesting } from '@testing-library/svelte/vite'
 
 export default defineConfig({
-	plugins: [sveltekit()],
+	plugins: [sveltekit(), svelteTesting()],
 	test: {
 		include: ['src/**/*.{test,spec}.ts'],
 		exclude: [...configDefaults.exclude, '**/build/**', '**/.svelte-kit/**', '**/dist/**'],
+		globals: true,
     	environment: 'jsdom',
 		coverage: {
 			exclude: [