qc-trousse-sdg 1.4.0 → 1.4.2

package/rollup.config.js

@@ -13,6 +13,7 @@ import fs from "fs";
 import buildHtmlDoc from './plugins/buildHtmlDoc.js';
 import buildDevDoc from "./plugins/buildDevDoc"; // adapte le chemin si besoin
 import buildTestFixtures from "./plugins/buildTestFixtures";
+import buildSvelteTests from "./plugins/buildSvelteTests";
 
 
 const
@@ -221,6 +222,10 @@ if (!build_process) {
             buildTestFixtures({
                 input: 'src/doc/_test.html'
             }),
+            buildSvelteTests({
+                input: 'tests',
+                ignorePathsFile: 'buildSvelteTestsIgnore.json'
+            }),
             svelte(svelteOptions),
             resolve({
                 browser: true,

package/src/sdg/components/DropdownList/DropdownListButton/DropdownListButton.svelte

@@ -25,19 +25,18 @@
     bind:this={button}
     {...rest}
 >
-    <span class="qc-dropdown-text">
-        {#if selectedOptionsText.length > 0}
-            <span class="qc-dropdown-choice">{@html selectedOptionsText}</span>
-        {:else}
-            <span class="qc-dropdown-placeholder">{@html placeholder}</span>
-        {/if}
-    </span>
+    {#if selectedOptionsText.length > 0}
+        <span class="qc-dropdown-choice">{@html selectedOptionsText}</span>
+    {:else}
+        <span class="qc-dropdown-placeholder">{@html placeholder}</span>
+    {/if}
 
-    <span class={["qc-dropdown-button-icon", expanded && "qc-dropdown-button-icon-expanded"]}>
+    <span class={["qc-dropdown-button-icon"]}>
         <Icon
             type="chevron-up-thin"
             color={disabled ? "grey-regular" : "blue-piv"}
             size="sm"
+            rotate={expanded ? 0 : 180}
         />
     </span>
 </button>

package/src/sdg/components/DropdownList/DropdownListButton/_dropdownListButton.scss

@@ -30,12 +30,6 @@ $min-height: 40;
   }
 }
 
-.qc-dropdown-text {
-  display: flex;
-  justify-items: start;
-  overflow: hidden;
-}
-
 %dropdown-placeholder-text {
   display: block;
   justify-content: start;
@@ -56,10 +50,6 @@ $min-height: 40;
 }
 
 .qc-dropdown-button-icon {
-  align-items: center;
-  rotate: 180deg;
+  display: flex;
+  align-content: center;
 }
-
-.qc-dropdown-button-icon-expanded {
-  transform: rotate(180deg);
-}

package/src/sdg/components/TextField/TextField.svelte

@@ -9,14 +9,14 @@
 
     let {
         label = '',
-        required = $bindable(),
+        required = $bindable(false),
         description,
         size,
         maxlength,
         maxlengthReached = $bindable(false),
         invalidAtSubmit = $bindable(false),
-        value = "",
-        invalid = $bindable(),
+        value = $bindable(""),
+        invalid = $bindable(false),
         invalidText,
         describedBy = $bindable([]),
         labelElement = $bindable(),
@@ -71,6 +71,8 @@
         }
     })
 
+
+
     $effect(() => {
         charCountText = ''
         if (!maxlength) return;
@@ -107,8 +109,8 @@
             ].filter(Boolean)
             .join(' ')
         )
-        if (invalid) input.setAttribute('aria-invalid', invalid)
-        if (required) input.setAttribute('aria-required', required)
+        input.setAttribute('aria-invalid', invalid)
+        input.setAttribute('aria-required', required)
     })
 
 </script>

package/src/sdg/components/TextField/TextFieldWC.svelte

@@ -20,7 +20,7 @@
     setContext('webComponentMode', true)
 
     let {
-            invalid,
+            invalid = $bindable(false),
             invalidText,
             label,
             description,

package/src/sdg/qc-sdg-test.js

@@ -1,6 +1,6 @@
 export * from './bases/Icon/Test/IconEmbeddedTest.svelte';
 export * from './components/TextField/Test/TextFieldEmbededTest.svelte';
-export * from "./components/DropdownList/Test/DropdownListEmbeddedTest.svelte";
+export * from "./components/DropdownList/Test/DropdownListSvelteTest.svelte";
 export * from "./components/ChoiceGroup/Test/ChoiceGroupeEmbededTest.svelte";
 export * from "./components/ToggleSwitch/Test/ToggleSwitchEmbeddedTest.svelte";
 export * from "./components/PivHeader/Test/pivHeaderEmbeddedTest.svelte";

package/tests/buildSvelteTestsIgnore.json

@@ -0,0 +1,4 @@
+[
+  "**/button-baseline.spec.ts",
+  "**/dropdown-list-baseline.spec.ts"
+]

package/tests/{button.spec.ts → button-baseline.spec.ts}

@@ -2,10 +2,10 @@ import { test, expect } from '@playwright/test';
 import path = require('path');
 
 /* test des composants web de la trousse */
-test('button ref', {
+test('button baseline', {
     tag: ['@baseline', '@button']
 }, async ({ page }) => {
-    const htmlFilePath = path.resolve(__dirname, '../public/button.test.html');
+    const htmlFilePath = path.resolve(__dirname, '../public/buttonBaseline.test.html');
     await page.goto(`file://${htmlFilePath}`);
     await expect(page).toHaveScreenshot('button.png', { fullPage: true });
 });

package/tests/choice-group-baseline.spec.ts

@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test';
+import path = require('path');
+
+test('choice-group radios baseline', {
+    tag: ['@baseline', '@radios']
+}, async ({ page }) => {
+    const htmlFilePath = path.resolve(__dirname, '../public/radiosBaseline.test.html');
+      // Navigue vers le fichier en utilisant le protocole file://
+      await page.goto(`file://${htmlFilePath}`);
+      await expect(page).toHaveScreenshot('radios.png', {fullPage: true});
+});
+
+test('choice-group checkbox baseline', {
+    tag: ['@baseline', '@checkbox']
+}, async ({ page }) => {
+    const htmlFilePath = path.resolve(__dirname, '../public/checkboxBaseline.test.html');
+      // Navigue vers le fichier en utilisant le protocole file://
+      await page.goto(`file://${htmlFilePath}`);
+      await expect(page).toHaveScreenshot('checkbox.png',{fullPage: true});
+});

package/tests/choice-group-svelte.spec.ts

@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test';
+import path = require('path');
+
+test('choice-group radios svelte', {
+    tag: ['@svelte', '@radios']
+}, async ({ page }) => {
+    const htmlFilePath = path.resolve(__dirname, '../public/radiosSvelte.test.html');
+      // Navigue vers le fichier en utilisant le protocole file://
+      await page.goto(`file://${htmlFilePath}`);
+      await expect(page).toHaveScreenshot('radios.png', {fullPage: true});
+});
+
+test('choice-group checkbox svelte', {
+    tag: ['@svelte', '@checkbox']
+}, async ({ page }) => {
+    const htmlFilePath = path.resolve(__dirname, '../public/checkboxSvelte.test.html');
+      // Navigue vers le fichier en utilisant le protocole file://
+      await page.goto(`file://${htmlFilePath}`);
+      await expect(page).toHaveScreenshot('checkbox.png',{fullPage: true});
+});

package/tests/{dropdown-list.spec.ts → dropdown-list-baseline.spec.ts}

@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test';
 import path = require('path');
 
 test.beforeEach(async ({ page }) => {
-    const htmlFilePath = path.resolve(__dirname, '../public/dropdownList.test.html');
+    const htmlFilePath = path.resolve(__dirname, '../public/dropdownListBaseline.test.html');
     await page.goto(`file://${htmlFilePath}`);
 });
 

package/tests/{icon.spec.ts → icon-baseline.spec.ts}

@@ -5,15 +5,7 @@ import path = require('path');
 test('icon ref', {
     tag: ['@baseline', '@icon']
 }, async ({ page }) => {
-    const htmlFilePath = path.resolve(__dirname, '../public/icon.test.html');
+    const htmlFilePath = path.resolve(__dirname, '../public/iconBaseline.test.html');
     await page.goto(`file://${htmlFilePath}`);
     await expect(page).toHaveScreenshot('icon.png', { fullPage: true });
 });
-
-test('icon svelte', {
-    tag: ['@svelte', '@icon']
-}, async ({ page }) => {
-    const htmlFilePath = path.resolve(__dirname, '../public/iconEmbedded.test.html');
-    await page.goto(`file://${htmlFilePath}`);
-    await expect(page).toHaveScreenshot('icon.png', { fullPage: true });
-});

package/tests/icon-svelte.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test';
+import path = require('path');
+
+
+test('icon ref', {
+    tag: ['@svelte', '@icon']
+}, async ({ page }) => {
+    const htmlFilePath = path.resolve(__dirname, '../public/iconSvelte.test.html');
+    await page.goto(`file://${htmlFilePath}`);
+    await expect(page).toHaveScreenshot('icon.png', { fullPage: true });
+});

package/tests/piv-header-baseline.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test';
+import path = require('path');
+
+
+test('pivHeader baseline', {
+    tag: ['@baseline', '@piv-header']
+}, async ({ page }) => {
+    const htmlFilePath = path.resolve(__dirname, '../public/pivHeaderBaseline.test.html');
+    await page.goto(`file://${htmlFilePath}`);
+    await expect(page).toHaveScreenshot('pivHeader.png', { fullPage: true });
+});

package/tests/piv-header-svelte.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test';
+import path = require('path');
+
+
+test('pivHeader svelte', {
+    tag: ['@svelte', '@piv-header']
+}, async ({ page }) => {
+    const htmlFilePath = path.resolve(__dirname, '../public/pivHeaderSvelte.test.html');
+    await page.goto(`file://${htmlFilePath}`);
+    await expect(page).toHaveScreenshot('pivHeader.png', { fullPage: true });
+});

package/tests/textfield-baseline.spec.ts

@@ -0,0 +1,28 @@
+import { test, expect } from '@playwright/test';
+import path = require('path');
+
+test.beforeEach(async ({ page }) => {
+    const htmlFilePath = path.resolve(__dirname, '../public/textFieldBaseline.test.html');
+    await page.goto(`file://${htmlFilePath}`);
+})
+
+/* test des composants web de la trousse */
+test('textfield baseline', {
+    tag: ['@baseline', '@textfield']
+}, async ({ page }) => {
+    await expect(page).toHaveScreenshot('textField.png', {fullPage: true});
+});
+
+test.describe('Aria', () => {
+    test('aria-required', async ({ page }) => {
+        await expect(page.getByRole('textbox', { name: 'Large', exact: true })).toHaveAttribute('aria-required', 'true');
+    });
+
+    test('aria-invalid', async ({ page }) => {
+        await expect(page.getByRole('textbox', { name: 'Moyen', exact: true })).toHaveAttribute('aria-invalid', 'true');
+
+        await page.getByRole('textbox', { name: 'Moyen' }).click();
+        await page.getByRole('textbox', { name: 'Moyen' }).fill('1');
+        await expect(page.getByRole('textbox', { name: 'Moyen', exact: true })).toHaveAttribute('aria-invalid', 'false');
+    });
+});

package/tests/textfield-svelte.spec.ts

@@ -0,0 +1,28 @@
+import { test, expect } from '@playwright/test';
+import path = require('path');
+
+test.beforeEach(async ({ page }) => {
+    const htmlFilePath = path.resolve(__dirname, '../public/textFieldSvelte.test.html');
+    await page.goto(`file://${htmlFilePath}`);
+})
+
+/* test des composants web de la trousse */
+test('textfield svelte', {
+    tag: ['@svelte', '@textfield']
+}, async ({ page }) => {
+    await expect(page).toHaveScreenshot('textField.png', {fullPage: true});
+});
+
+test.describe('Aria', () => {
+    test('aria-required', async ({ page }) => {
+        await expect(page.getByRole('textbox', { name: 'Large', exact: true })).toHaveAttribute('aria-required', 'true');
+    });
+
+    test('aria-invalid', async ({ page }) => {
+        await expect(page.getByRole('textbox', { name: 'Moyen', exact: true })).toHaveAttribute('aria-invalid', 'true');
+
+        await page.getByRole('textbox', { name: 'Moyen' }).click();
+        await page.getByRole('textbox', { name: 'Moyen' }).fill('1');
+        await expect(page.getByRole('textbox', { name: 'Moyen', exact: true })).toHaveAttribute('aria-invalid', 'false');
+    });
+});

package/tests/toggle-switch-baseline.spec.ts

@@ -0,0 +1,11 @@
+import {expect, test} from "@playwright/test";
+import path = require('path');
+
+test('toggleswitch baseline', {
+    tag: ['@baseline', '@toggleswitch']
+}, async ({ page }) => {
+    const htmlFilePath = path.resolve(__dirname, '../public/toggleSwitchBaseline.test.html');
+    await page.goto(`file://${htmlFilePath}`);
+
+    await expect(page).toHaveScreenshot('toggleSwitch.png', {fullPage: true});
+});

package/tests/toggle-switch-svelte.spec.ts

@@ -0,0 +1,11 @@
+import {expect, test} from "@playwright/test";
+import path = require('path');
+
+test('toggleswitch svelte', {
+    tag: ['@svelte', '@toggleswitch']
+}, async ({ page }) => {
+    const htmlFilePath = path.resolve(__dirname, '../public/toggleSwitchSvelte.test.html');
+    await page.goto(`file://${htmlFilePath}`);
+
+    await expect(page).toHaveScreenshot('toggleSwitch.png', {fullPage: true});
+});

package/tests/choice-group.spec.ts

@@ -1,36 +0,0 @@
-import { test, expect } from '@playwright/test';
-import path = require('path');
-
-test('choice-group radios ref', {
-    tag: ['@baseline', '@radios']
-}, async ({ page }) => {
-    const htmlFilePath = path.resolve(__dirname, '../public/radios.test.html');
-      // Navigue vers le fichier en utilisant le protocole file://
-      await page.goto(`file://${htmlFilePath}`);
-      await expect(page).toHaveScreenshot('radios.png', {fullPage: true});
-});
-test('choice-group radios svelte', {
-    tag: ['@svelte', '@radios']
-}, async ({ page }) => {
-    const htmlFilePath = path.resolve(__dirname, '../public/radiosEmbedded.test.html');
-      // Navigue vers le fichier en utilisant le protocole file://
-      await page.goto(`file://${htmlFilePath}`);
-      await expect(page).toHaveScreenshot('radios.png', {fullPage: true});
-});
-
-test('choice-group checkbox ref', {
-    tag: ['@baseline', '@checkbox']
-}, async ({ page }) => {
-    const htmlFilePath = path.resolve(__dirname, '../public/checkbox.test.html');
-      // Navigue vers le fichier en utilisant le protocole file://
-      await page.goto(`file://${htmlFilePath}`);
-      await expect(page).toHaveScreenshot('checkbox.png',{fullPage: true});
-});
-test('choice-group checkbox svelte', {
-    tag: ['@svelte', '@checkbox']
-}, async ({ page }) => {
-    const htmlFilePath = path.resolve(__dirname, '../public/checkboxEmbedded.test.html');
-      // Navigue vers le fichier en utilisant le protocole file://
-      await page.goto(`file://${htmlFilePath}`);
-      await expect(page).toHaveScreenshot('checkbox.png',{fullPage: true});
-});

package/tests/pivHeader.spec.ts

@@ -1,22 +0,0 @@
-import { test, expect } from '@playwright/test';
-import path = require('path');
-
-
-test('pivHeader ref', {
-    tag: ['@baseline', '@piv-header']
-}, async ({ page }) => {
-    const htmlFilePath = path.resolve(__dirname, '../public/pivHeader.test.html');
-    await page.goto(`file://${htmlFilePath}`);
-    await expect(page).toHaveScreenshot('pivHeader.png', { fullPage: true });
-});
-
-
-//TODO: test du composant svelte
-
-// test('pivHeader svelte', {
-//     tag: ['@svelte', '@piv-header']
-// }, async ({ page }) => {
-//     const htmlFilePath = path.resolve(__dirname, '../public/pivHeaderEmbedded.test.html');
-//     await page.goto(`file://${htmlFilePath}`);
-//     await expect(page).toHaveScreenshot('pivHeader.png', { fullPage: true });
-// });

package/tests/textfield.spec.ts

@@ -1,21 +0,0 @@
-import { test, expect } from '@playwright/test';
-import path = require('path');
-
-/* test des composants web de la trousse */
-test('textfield ref', {
-    tag: ['@baseline', '@textfield']
-}, async ({ page }) => {
-    const htmlFilePath = path.resolve(__dirname, '../public/textField.test.html');
-      // Navigue vers le fichier en utilisant le protocole file://
-      await page.goto(`file://${htmlFilePath}`);
-      await expect(page).toHaveScreenshot('textField.png', {fullPage: true});
-});
-/* test des composants svelte */
-test('textfield svelte', {
-    tag: ['@svelte', '@textfield']
-}, async ({ page }) => {
-    const htmlFilePath = path.resolve(__dirname, '../public/textFieldEmbedded.test.html');
-      // Navigue vers le fichier en utilisant le protocole file://
-      await page.goto(`file://${htmlFilePath}`);
-      await expect(page).toHaveScreenshot('textField.png', {fullPage: true});
-});

package/tests/toggle-switch.spec.ts

@@ -1,20 +0,0 @@
-import {expect, test} from "@playwright/test";
-import path = require('path');
-
-test('toggleswitch ref', {
-    tag: ['@baseline', '@toggleswitch']
-}, async ({ page }) => {
-    const htmlFilePath = path.resolve(__dirname, '../public/toggleSwitch.test.html');
-    await page.goto(`file://${htmlFilePath}`);
-
-    await expect(page).toHaveScreenshot('toggleSwitch.png', {fullPage: true});
-});
-/* test des composants svelte */
-test('toggleswitch svelte', {
-    tag: ['@svelte', '@toggleswitch']
-}, async ({ page }) => {
-    const htmlFilePath = path.resolve(__dirname, '../public/toggleSwitchEmbedded.test.html');
-    await page.goto(`file://${htmlFilePath}`);
-
-    await expect(page).toHaveScreenshot('toggleSwitch.png', {fullPage: true});
-});