@mgdis/mg-components 5.16.0 → 5.18.0

package/dist/collection/components/molecules/inputs/mg-input-checkbox/test/mg-input-checkbox.e2e.playwright.js

@@ -0,0 +1,243 @@
+import { setPageContent, expect, describe, describeEach, testEach, updateScreenshotClass, test } from "../../../../../utils/playwright.e2e.test.utils";
+import { createID } from "../../../../../utils/components.utils";
+import { renderAttributes, renderProperties } from "../../../../../utils/e2e.test.utils";
+import { checkboxTypes } from "../mg-input-checkbox.conf";
+const TIMEOUT = 1000;
+const baseArgs = {
+  label: 'legend',
+  value: [
+    { title: 'Batman', value: false },
+    { title: 'Robin', value: false },
+    { title: 'Joker', value: false },
+    { title: 'Bane', value: false },
+  ],
+};
+const createHTML = (args, identifier = createID()) => `<mg-input-checkbox ${renderAttributes(Object.assign(Object.assign({}, args), { identifier }))}></mg-input-checkbox><script>${renderProperties(args, `[identifier="${identifier}"]`)}</script>`;
+const waitForInteractiveElement = async (page, type) => {
+  // wait few seconds to insure to have the interactive element rendered
+  const interactiveElement = await page.locator(type === 'multi' ? 'mg-button[tabindex="0"].hydrated' : 'mg-icon[tabindex="0"].hydrated').first();
+  return interactiveElement.waitFor({ timeout: 3000 });
+};
+describe('mg-input-checkbox', () => {
+  describeEach(checkboxTypes)('type %s', (type) => {
+    testEach([
+      Object.assign(Object.assign({}, baseArgs), { readonly: true }),
+      Object.assign(Object.assign({}, baseArgs), { readonly: true, labelOnTop: true }),
+      Object.assign(Object.assign({}, baseArgs), { disabled: true }),
+      Object.assign(Object.assign({}, baseArgs), { inputVerticalList: true, helpText: 'HelpText Message' }),
+      Object.assign(Object.assign({}, baseArgs), { inputVerticalList: true, helpText: 'HelpText Message', labelOnTop: true }),
+      Object.assign(Object.assign({}, baseArgs), { helpText: `<mg-icon icon='user' size='small'></mg-icon> Welcome batman` }),
+      Object.assign(Object.assign({}, baseArgs), { helpText: 'HelpText Message', required: true }),
+      Object.assign(Object.assign({}, baseArgs), { helpText: 'HelpText Message', required: true, readonly: true }),
+      Object.assign(Object.assign({}, baseArgs), { helpText: 'HelpText Message', required: true, disabled: true }),
+    ])('Should render with template %s', async (page, args) => {
+      await setPageContent(page, createHTML(Object.assign(Object.assign({}, args), { type, value: [
+          { title: 'Batman', value: true },
+          { title: 'Robin', value: false },
+          { title: 'Joker', value: null },
+          { title: 'Bane', value: true, disabled: true },
+        ] })));
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+    });
+    testEach([true, false])(`render with tooltip, case label-on-top %s`, async (page, labelOnTop) => {
+      await setPageContent(page, createHTML(Object.assign(Object.assign({}, baseArgs), { tooltip: 'Tooltip message', labelOnTop,
+        type })));
+      const KEY_TAB = 'Tab';
+      await expect(page.locator('mg-input-checkbox.hydrated')).toBeDefined();
+      // wait few seconds to insure to have the interactive element rendered
+      await waitForInteractiveElement(page, type);
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      let actions = [KEY_TAB];
+      // when label on top tooltip is on first tab (next to label)
+      if (!labelOnTop) {
+        await updateScreenshotClass(page, { height: '65px', width: '500px' });
+        // when type is 'multi' the tooltip is on second tab
+        actions = type !== 'multi' ? [...actions, KEY_TAB, KEY_TAB, KEY_TAB, KEY_TAB] : [...actions, KEY_TAB];
+      }
+      for (const key of actions) {
+        await page.keyboard.down(key);
+      }
+      await page.locator('mg-tooltip-content').waitFor({ timeout: TIMEOUT });
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+    });
+    testEach([
+      Object.assign(Object.assign({}, baseArgs), { type }),
+      Object.assign(Object.assign({}, baseArgs), { type, labelOnTop: true }),
+      Object.assign(Object.assign({}, baseArgs), { type, labelHide: true }),
+      Object.assign(Object.assign({}, baseArgs), { type, helpText: 'HelpText Message' }),
+    ])('Should render without tooltip %s', async (page, args) => {
+      await setPageContent(page, createHTML(args));
+      await page.waitForSelector('mg-input-checkbox.hydrated');
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      // when multi open checkbox in popover
+      if (type === 'multi') {
+        // wait few seconds to insure to have the interactive element rendered
+        await waitForInteractiveElement(page, type);
+        await updateScreenshotClass(page, { width: '300px', height: '200px' });
+        await page.keyboard.down('Tab');
+        await page.keyboard.down('Enter');
+        await page.locator('mg-popover-content').waitFor({ timeout: TIMEOUT });
+      }
+      await page.keyboard.down('Tab');
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      await page.locator('mg-input-checkbox .mg-input__input-group:first-of-type input').press('Space');
+      await page.keyboard.down('Tab');
+      await page.locator('mg-input-checkbox .mg-input__input-group:nth-of-type(2) input').press('Space');
+      await page.keyboard.down('Tab');
+      await page.locator('mg-input-checkbox .mg-input__input-group:nth-of-type(3) input').press('Space');
+      await page.keyboard.down('Tab');
+      await page.locator('mg-input-checkbox .mg-input__input-group:nth-of-type(4) input').press('Space');
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+    });
+    testEach([
+      Object.assign(Object.assign({}, baseArgs), { helpText: 'HelpText Message', required: true, type }),
+      Object.assign(Object.assign({}, baseArgs), { helpText: "Message d'aide", lang: 'fr', required: true, type }),
+    ])('Should render error when leaving an empty required input %s', async (page, args) => {
+      await setPageContent(page, createHTML(args));
+      await page.waitForSelector('mg-input-checkbox.hydrated');
+      // when multi open checkbox in popover
+      if (type === 'multi') {
+        // wait few seconds to insure to have the interactive element rendered
+        await waitForInteractiveElement(page, type);
+        await updateScreenshotClass(page, { width: '300px', height: '200px' });
+        await page.keyboard.down('Tab');
+        await page.keyboard.down('Enter');
+        await page.locator('mg-popover-content').waitFor({ timeout: TIMEOUT });
+      }
+      await page.keyboard.down('Tab');
+      await page.keyboard.down('Tab');
+      await page.keyboard.down('Tab');
+      await page.keyboard.down('Tab');
+      await page.keyboard.down('Tab');
+      if (type === 'multi') {
+        await page.keyboard.down('Escape');
+      }
+      await updateScreenshotClass(page, { width: 'unset', height: 'unset' });
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+    });
+    testEach([
+      { label: 'long label long label long label long label long label long label long label long label long label long label long label', type, tooltip: 'tooltip message' },
+      {
+        label: 'long label long label long label long label long label long label long label long label long label long label long label',
+        type,
+        tooltip: 'tooltip message',
+        labelOnTop: true,
+      },
+    ])('render long label in .mg-form-group, %s', async (page, args) => {
+      await setPageContent(page, `<div class="mg-form-group">${createHTML(Object.assign(Object.assign(Object.assign({}, baseArgs), args), { value: [
+          { title: 'Batman', value: true },
+          { title: 'Robin', value: false },
+          { title: 'Joker', value: null },
+          { title: 'Bane', value: true, disabled: true },
+        ] }))}</div>`);
+      await page.waitForSelector('mg-input-checkbox.hydrated');
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+    });
+    testEach([false, true])('Ensure component fit in width 200px with label-on-top: %s', async (page, labelOnTop) => {
+      await setPageContent(page, createHTML(Object.assign(Object.assign({}, baseArgs), { labelOnTop, type })));
+      await page.waitForSelector('mg-input-checkbox.hydrated');
+      await page.setViewportSize({ width: 200, height: 100 });
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+    });
+  });
+  describe('type multi', () => {
+    const selectedValues = baseArgs.value.map(argValue => (Object.assign(Object.assign({}, argValue), { value: true })));
+    const smallValues = baseArgs.value.map((argValue, index) => (Object.assign(Object.assign({}, argValue), { title: index.toString(), value: true })));
+    testEach([
+      { disable: true, value: selectedValues },
+      { disable: true, value: smallValues },
+    ])('Ensure component fit in width 200px with display-values: %s', async (page, args) => {
+      await setPageContent(page, createHTML(Object.assign(Object.assign(Object.assign({}, baseArgs), args), { type: 'multi', displaySelectedValues: true })));
+      await page.waitForSelector('mg-input-checkbox.hydrated');
+      // wait few seconds to insure to have the interactive element rendered
+      await waitForInteractiveElement(page, 'multi');
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+    });
+    testEach([false, true])('Ensure component fit in width 200px with display-values: %s', async (page, displaySelectedValues) => {
+      await setPageContent(page, createHTML(Object.assign(Object.assign({}, baseArgs), { type: 'multi', value: selectedValues, displaySelectedValues })));
+      await page.waitForSelector('mg-input-checkbox.hydrated');
+      // wait few seconds to insure to have the interactive element rendered
+      await waitForInteractiveElement(page, 'multi');
+      await page.setViewportSize({ width: 200, height: 100 });
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+    });
+    test('Should render "multi" with search', async ({ page }) => {
+      const value = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21].map((item, index) => ({
+        title: index === 9 ? `my super long title item ${item} is very super long and finaly it could not be shorter so what can I do with it` : `${item}`,
+        value: false,
+      }));
+      await setPageContent(page, createHTML(Object.assign(Object.assign({}, baseArgs), { value })));
+      // wait few seconds to insure to have the interactive element rendered
+      await waitForInteractiveElement(page, 'multi');
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      await updateScreenshotClass(page, { width: '450px', height: '470px' });
+      // open popover
+      await page.keyboard.down('Tab');
+      await page.keyboard.down('Enter');
+      await page.locator('mg-popover-content').waitFor({ timeout: TIMEOUT });
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      // take focus in search input
+      await page.keyboard.down('Tab');
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      // got to navigation after 10th input
+      for (const index of value.map((_item, index) => index)) {
+        if (index < 10)
+          await page.keyboard.down('Tab');
+      }
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      // use navigatio to go to last page
+      await page.keyboard.down('Tab');
+      await page.keyboard.down('Tab');
+      await page.keyboard.down('Tab');
+      await page.keyboard.down('Enter');
+      await page.keyboard.down('Enter');
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      await page.getByPlaceholder(/value/).fill('2');
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      // update search with an unmatchable value
+      await page.getByPlaceholder(/value/).fill('batman');
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      // close popover
+      await page.keyboard.down('Escape');
+      await updateScreenshotClass(page, { width: '285px', height: '35px' });
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+    });
+    test('Should render "multi" with 2 sections', async ({ page }) => {
+      const value = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21].map((item, index) => ({
+        title: `item ${item}`,
+        value: [5, 12, 13, 17].some(item => item === index),
+      }));
+      await setPageContent(page, createHTML(Object.assign(Object.assign({}, baseArgs), { value })));
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      // wait few seconds to insure to have the interactive element rendered
+      await waitForInteractiveElement(page, 'multi');
+      await updateScreenshotClass(page, { width: '450px', height: '570px' });
+      // open popover
+      await page.keyboard.down('Tab');
+      await page.keyboard.down('Enter');
+      await page.locator('mg-popover-content').waitFor({ timeout: TIMEOUT });
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+    });
+    test('Should render "multi" with 2 sections and a closed selected section', async ({ page }) => {
+      const value = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21].map((item, index) => ({
+        title: `item ${item}`,
+        value: [5, 12, 13, 17].some(item => item === index),
+      }));
+      await setPageContent(page, createHTML(Object.assign(Object.assign({}, baseArgs), { value })));
+      // wait few seconds to insure to have the interactive element rendered
+      await waitForInteractiveElement(page, 'multi');
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      await updateScreenshotClass(page, { width: '450px', height: '570px' });
+      // open popover
+      await page.keyboard.down('Tab');
+      await page.keyboard.down('Enter');
+      await page.locator('mg-popover-content').waitFor({ timeout: TIMEOUT });
+      // close section
+      await page.keyboard.down('Tab');
+      await page.keyboard.down('Tab');
+      await page.keyboard.down('Enter');
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+    });
+  });
+});
+//# sourceMappingURL=mg-input-checkbox.e2e.playwright.js.map

package/dist/collection/components/molecules/inputs/mg-input-checkbox/test/mg-input-checkbox.e2e.playwright.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mg-input-checkbox.e2e.playwright.js","sourceRoot":"","sources":["../../../../../../src/components/molecules/inputs/mg-input-checkbox/test/mg-input-checkbox.e2e.playwright.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,qBAAqB,EAAY,IAAI,EAAE,MAAM,gDAAgD,CAAC;AACjK,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AACzF,OAAO,EAAgB,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAExE,MAAM,OAAO,GAAG,IAAI,CAAC;AAErB,MAAM,QAAQ,GAAG;EACf,KAAK,EAAE,QAAQ;EACf,KAAK,EAAE;IACL,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE;IACjC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE;IAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE;IAChC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE;GAChC;CACF,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,IAAI,EAAE,UAAU,GAAG,QAAQ,EAAE,EAAE,EAAE,CACnD,sBAAsB,gBAAgB,iCAAM,IAAI,KAAE,UAAU,IAAG,gCAAgC,gBAAgB,CAAC,IAAI,EAAE,gBAAgB,UAAU,IAAI,CAAC,WAAW,CAAC;AAEnK,MAAM,yBAAyB,GAAG,KAAK,EAAE,IAAc,EAAE,IAAkB,EAAE,EAAE;EAC7E,sEAAsE;EACtE,MAAM,kBAAkB,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,KAAK,EAAE,CAAC;EAChJ,OAAO,kBAAkB,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;AACvD,CAAC,CAAC;AAEF,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;EACjC,YAAY,CAAC,aAAa,CAAC,CAAC,SAAS,EAAE,CAAC,IAAkB,EAAE,EAAE;IAC5D,QAAQ,CAAC;sCACF,QAAQ,KAAE,QAAQ,EAAE,IAAI;sCACxB,QAAQ,KAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI;sCAC1C,QAAQ,KAAE,QAAQ,EAAE,IAAI;sCACxB,QAAQ,KAAE,iBAAiB,EAAE,IAAI,EAAE,QAAQ,EAAE,kBAAkB;sCAC/D,QAAQ,KAAE,iBAAiB,EAAE,IAAI,EAAE,QAAQ,EAAE,kBAAkB,EAAE,UAAU,EAAE,IAAI;sCACjF,QAAQ,KAAE,QAAQ,EAAE,6DAA6D;sCACjF,QAAQ,KAAE,QAAQ,EAAE,kBAAkB,EAAE,QAAQ,EAAE,IAAI;sCACtD,QAAQ,KAAE,QAAQ,EAAE,kBAAkB,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI;sCACtE,QAAQ,KAAE,QAAQ,EAAE,kBAAkB,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI;KAC5E,CAAC,CAAC,gCAAgC,EAAE,KAAK,EAAE,IAAc,EAAE,IAAY,EAAE,EAAE;MAC1E,MAAM,cAAc,CAClB,IAAI,EACJ,UAAU,iCACL,IAAI,KACP,IAAI,EACJ,KAAK,EAAE;UACL,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE;UAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE;UAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE;UAC/B,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE;SAC/C,IACD,CACH,CAAC;MAEF,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;IACnE,CAAC,CAAC,CAAC;IACH,QAAQ,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,2CAA2C,EAAE,KAAK,EAAE,IAAc,EAAE,UAAmB,EAAE,EAAE;MACjH,MAAM,cAAc,CAClB,IAAI,EACJ,UAAU,iCACL,QAAQ,KACX,OAAO,EAAE,iBAAiB,EAC1B,UAAU;QACV,IAAI,IACJ,CACH,CAAC;MAEF,MAAM,OAAO,GAAG,KAAK,CAAC;MAEtB,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,4BAA4B,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;MAEvE,sEAAsE;MACtE,MAAM,yBAAyB,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;MAE5C,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;MAEjE,IAAI,OAAO,GAAG,CAAC,OAAO,CAAC,CAAC;MAExB,4DAA4D;MAC5D,IAAI,CAAC,UAAU,EAAE;QACf,MAAM,qBAAqB,CAAC,IAAI,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;QAEtE,oDAAoD;QACpD,OAAO,GAAG,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,OAAO,EAAE,OAAO,CAAC,CAAC;OACvG;MAED,KAAK,MAAM,GAAG,IAAI,OAAO,EAAE;QACzB,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;OAC/B;MAED,MAAM,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC;MAEvE,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;IACnE,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC;sCACF,QAAQ,KAAE,IAAI;sCACd,QAAQ,KAAE,IAAI,EAAE,UAAU,EAAE,IAAI;sCAChC,QAAQ,KAAE,IAAI,EAAE,SAAS,EAAE,IAAI;sCAC/B,QAAQ,KAAE,IAAI,EAAE,QAAQ,EAAE,kBAAkB;KAClD,CAAC,CAAC,kCAAkC,EAAE,KAAK,EAAE,IAAc,EAAE,IAAI,EAAE,EAAE;MACpE,MAAM,cAAc,CAAC,IAAI,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC;MAE7C,MAAM,IAAI,CAAC,eAAe,CAAC,4BAA4B,CAAC,CAAC;MAEzD,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;MAEjE,sCAAsC;MACtC,IAAI,IAAI,KAAK,OAAO,EAAE;QACpB,sEAAsE;QACtE,MAAM,yBAAyB,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QAC5C,MAAM,qBAAqB,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC;QACvE,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAChC,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC;OACxE;MAED,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;MAEhC,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;MAEjE,MAAM,IAAI,CAAC,OAAO,CAAC,8DAA8D,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;MAElG,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;MAChC,MAAM,IAAI,CAAC,OAAO,CAAC,+DAA+D,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;MAEnG,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;MAChC,MAAM,IAAI,CAAC,OAAO,CAAC,+DAA+D,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;MAEnG,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;MAChC,MAAM,IAAI,CAAC,OAAO,CAAC,+DAA+D,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;MAEnG,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;IACnE,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC;sCACF,QAAQ,KAAE,QAAQ,EAAE,kBAAkB,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI;sCAC5D,QAAQ,KAAE,QAAQ,EAAE,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI;KAC5E,CAAC,CAAC,6DAA6D,EAAE,KAAK,EAAE,IAAc,EAAE,IAAI,EAAE,EAAE;MAC/F,MAAM,cAAc,CAAC,IAAI,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC;MAE7C,MAAM,IAAI,CAAC,eAAe,CAAC,4BAA4B,CAAC,CAAC;MAEzD,sCAAsC;MACtC,IAAI,IAAI,KAAK,OAAO,EAAE;QACpB,sEAAsE;QACtE,MAAM,yBAAyB,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QAC5C,MAAM,qBAAqB,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC;QACvE,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAChC,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC;OACxE;MAED,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;MAChC,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;MAChC,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;MAChC,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;MAChC,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;MAEhC,IAAI,IAAI,KAAK,OAAO,EAAE;QACpB,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;OACpC;MAED,MAAM,qBAAqB,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC;MAEvE,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;IACnE,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC;MACP,EAAE,KAAK,EAAE,0HAA0H,EAAE,IAAI,EAAE,OAAO,EAAE,iBAAiB,EAAE;MACvK;QACE,KAAK,EAAE,0HAA0H;QACjI,IAAI;QACJ,OAAO,EAAE,iBAAiB;QAC1B,UAAU,EAAE,IAAI;OACjB;KACF,CAAC,CAAC,yCAAyC,EAAE,KAAK,EAAE,IAAc,EAAE,IAAY,EAAE,EAAE;MACnF,MAAM,cAAc,CAClB,IAAI,EACJ,8BAA8B,UAAU,+CACnC,QAAQ,GACR,IAAI,KACP,KAAK,EAAE;UACL,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE;UAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE;UAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE;UAC/B,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE;SAC/C,IACD,QAAQ,CACX,CAAC;MAEF,MAAM,IAAI,CAAC,eAAe,CAAC,4BAA4B,CAAC,CAAC;MAEzD,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;IACnE,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,2DAA2D,EAAE,KAAK,EAAE,IAAc,EAAE,UAAU,EAAE,EAAE;MACxH,MAAM,cAAc,CAAC,IAAI,EAAE,UAAU,iCAAM,QAAQ,KAAE,UAAU,EAAE,IAAI,IAAG,CAAC,CAAC;MAE1E,MAAM,IAAI,CAAC,eAAe,CAAC,4BAA4B,CAAC,CAAC;MAEzD,MAAM,IAAI,CAAC,eAAe,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;MAExD,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;IACnE,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,MAAM,cAAc,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,iCAAM,QAAQ,KAAE,KAAK,EAAE,IAAI,IAAG,CAAC,CAAC;IACtF,MAAM,WAAW,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,CAAC,iCAAM,QAAQ,KAAE,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,IAAI,IAAG,CAAC,CAAC;IACrH,QAAQ,CAAC;MACP,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,cAAc,EAAE;MACxC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE;KACtC,CAAC,CAAC,6DAA6D,EAAE,KAAK,EAAE,IAAc,EAAE,IAAY,EAAE,EAAE;MACvG,MAAM,cAAc,CAAC,IAAI,EAAE,UAAU,+CAAM,QAAQ,GAAK,IAAI,KAAE,IAAI,EAAE,OAAO,EAAE,qBAAqB,EAAE,IAAI,IAAG,CAAC,CAAC;MAE7G,MAAM,IAAI,CAAC,eAAe,CAAC,4BAA4B,CAAC,CAAC;MAEzD,sEAAsE;MACtE,MAAM,yBAAyB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;MAE/C,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;IACnE,CAAC,CAAC,CAAC;IACH,QAAQ,CAAC,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,6DAA6D,EAAE,KAAK,EAAE,IAAc,EAAE,qBAAqB,EAAE,EAAE;MACrI,MAAM,cAAc,CAAC,IAAI,EAAE,UAAU,iCAAM,QAAQ,KAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,cAAc,EAAE,qBAAqB,IAAG,CAAC,CAAC;MAErH,MAAM,IAAI,CAAC,eAAe,CAAC,4BAA4B,CAAC,CAAC;MAEzD,sEAAsE;MACtE,MAAM,yBAAyB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;MAE/C,MAAM,IAAI,CAAC,eAAe,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;MAExD,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;IACnE,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,mCAAmC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;MAC3D,MAAM,KAAK,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;QAC9G,KAAK,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,4BAA4B,IAAI,iFAAiF,CAAC,CAAC,CAAC,GAAG,IAAI,EAAE;QAClJ,KAAK,EAAE,KAAK;OACb,CAAC,CAAC,CAAC;MACJ,MAAM,cAAc,CAAC,IAAI,EAAE,UAAU,iCAAM,QAAQ,KAAE,KAAK,IAAG,CAAC,CAAC;MAE/D,sEAAsE;MACtE,MAAM,yBAAyB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;MAE/C,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;MAEjE,MAAM,qBAAqB,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC;MAEvE,eAAe;MACf,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;MAChC,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;MAElC,MAAM,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC;MAEvE,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;MAEjE,6BAA6B;MAC7B,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;MAChC,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;MAEjE,qCAAqC;MACrC,KAAK,MAAM,KAAK,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE;QACtD,IAAI,KAAK,GAAG,EAAE;UAAE,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;OACjD;MACD,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;MAEjE,mCAAmC;MACnC,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;MAChC,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;MAChC,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;MAChC,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;MAClC,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;MAElC,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;MAEjE,MAAM,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;MAE/C,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;MAEjE,0CAA0C;MAC1C,MAAM,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;MAEpD,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;MAEjE,gBAAgB;MAChB,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;MACnC,MAAM,qBAAqB,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;MACtE,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;IACnE,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,uCAAuC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;MAC/D,MAAM,KAAK,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;QAC9G,KAAK,EAAE,QAAQ,IAAI,EAAE;QACrB,KAAK,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,KAAK,KAAK,CAAC;OACpD,CAAC,CAAC,CAAC;MACJ,MAAM,cAAc,CAAC,IAAI,EAAE,UAAU,iCAAM,QAAQ,KAAE,KAAK,IAAG,CAAC,CAAC;MAE/D,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;MAEjE,sEAAsE;MACtE,MAAM,yBAAyB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;MAE/C,MAAM,qBAAqB,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC;MAEvE,eAAe;MACf,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;MAChC,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;MAClC,MAAM,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC;MAEvE,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;IACnE,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,qEAAqE,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;MAC7F,MAAM,KAAK,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;QAC9G,KAAK,EAAE,QAAQ,IAAI,EAAE;QACrB,KAAK,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,KAAK,KAAK,CAAC;OACpD,CAAC,CAAC,CAAC;MACJ,MAAM,cAAc,CAAC,IAAI,EAAE,UAAU,iCAAM,QAAQ,KAAE,KAAK,IAAG,CAAC,CAAC;MAE/D,sEAAsE;MACtE,MAAM,yBAAyB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;MAE/C,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;MAEjE,MAAM,qBAAqB,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC;MAEvE,eAAe;MACf,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;MAChC,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;MAClC,MAAM,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC;MAEvE,gBAAgB;MAChB,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;MAChC,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;MAChC,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;MAElC,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;IACnE,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { setPageContent, expect, describe, describeEach, testEach, updateScreenshotClass, PageType, test } from '../../../../../utils/playwright.e2e.test.utils';\nimport { createID } from '../../../../../utils/components.utils';\nimport { renderAttributes, renderProperties } from '../../../../../utils/e2e.test.utils';\nimport { CheckboxType, checkboxTypes } from '../mg-input-checkbox.conf';\n\nconst TIMEOUT = 1000;\n\nconst baseArgs = {\n  label: 'legend',\n  value: [\n    { title: 'Batman', value: false },\n    { title: 'Robin', value: false },\n    { title: 'Joker', value: false },\n    { title: 'Bane', value: false },\n  ],\n};\n\nconst createHTML = (args, identifier = createID()) =>\n  `<mg-input-checkbox ${renderAttributes({ ...args, identifier })}></mg-input-checkbox><script>${renderProperties(args, `[identifier=\"${identifier}\"]`)}</script>`;\n\nconst waitForInteractiveElement = async (page: PageType, type: CheckboxType) => {\n  // wait few seconds to insure to have the interactive element rendered\n  const interactiveElement = await page.locator(type === 'multi' ? 'mg-button[tabindex=\"0\"].hydrated' : 'mg-icon[tabindex=\"0\"].hydrated').first();\n  return interactiveElement.waitFor({ timeout: 3000 });\n};\n\ndescribe('mg-input-checkbox', () => {\n  describeEach(checkboxTypes)('type %s', (type: CheckboxType) => {\n    testEach([\n      { ...baseArgs, readonly: true },\n      { ...baseArgs, readonly: true, labelOnTop: true },\n      { ...baseArgs, disabled: true },\n      { ...baseArgs, inputVerticalList: true, helpText: 'HelpText Message' },\n      { ...baseArgs, inputVerticalList: true, helpText: 'HelpText Message', labelOnTop: true },\n      { ...baseArgs, helpText: `<mg-icon icon='user' size='small'></mg-icon> Welcome batman` },\n      { ...baseArgs, helpText: 'HelpText Message', required: true },\n      { ...baseArgs, helpText: 'HelpText Message', required: true, readonly: true },\n      { ...baseArgs, helpText: 'HelpText Message', required: true, disabled: true },\n    ])('Should render with template %s', async (page: PageType, args: object) => {\n      await setPageContent(\n        page,\n        createHTML({\n          ...args,\n          type,\n          value: [\n            { title: 'Batman', value: true },\n            { title: 'Robin', value: false },\n            { title: 'Joker', value: null },\n            { title: 'Bane', value: true, disabled: true },\n          ],\n        }),\n      );\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n    });\n    testEach([true, false])(`render with tooltip, case label-on-top %s`, async (page: PageType, labelOnTop: boolean) => {\n      await setPageContent(\n        page,\n        createHTML({\n          ...baseArgs,\n          tooltip: 'Tooltip message',\n          labelOnTop,\n          type,\n        }),\n      );\n\n      const KEY_TAB = 'Tab';\n\n      await expect(page.locator('mg-input-checkbox.hydrated')).toBeDefined();\n\n      // wait few seconds to insure to have the interactive element rendered\n      await waitForInteractiveElement(page, type);\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n\n      let actions = [KEY_TAB];\n\n      // when label on top tooltip is on first tab (next to label)\n      if (!labelOnTop) {\n        await updateScreenshotClass(page, { height: '65px', width: '500px' });\n\n        // when type is 'multi' the tooltip is on second tab\n        actions = type !== 'multi' ? [...actions, KEY_TAB, KEY_TAB, KEY_TAB, KEY_TAB] : [...actions, KEY_TAB];\n      }\n\n      for (const key of actions) {\n        await page.keyboard.down(key);\n      }\n\n      await page.locator('mg-tooltip-content').waitFor({ timeout: TIMEOUT });\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n    });\n\n    testEach([\n      { ...baseArgs, type },\n      { ...baseArgs, type, labelOnTop: true },\n      { ...baseArgs, type, labelHide: true },\n      { ...baseArgs, type, helpText: 'HelpText Message' },\n    ])('Should render without tooltip %s', async (page: PageType, args) => {\n      await setPageContent(page, createHTML(args));\n\n      await page.waitForSelector('mg-input-checkbox.hydrated');\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n\n      // when multi open checkbox in popover\n      if (type === 'multi') {\n        // wait few seconds to insure to have the interactive element rendered\n        await waitForInteractiveElement(page, type);\n        await updateScreenshotClass(page, { width: '300px', height: '200px' });\n        await page.keyboard.down('Tab');\n        await page.keyboard.down('Enter');\n        await page.locator('mg-popover-content').waitFor({ timeout: TIMEOUT });\n      }\n\n      await page.keyboard.down('Tab');\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n\n      await page.locator('mg-input-checkbox .mg-input__input-group:first-of-type input').press('Space');\n\n      await page.keyboard.down('Tab');\n      await page.locator('mg-input-checkbox .mg-input__input-group:nth-of-type(2) input').press('Space');\n\n      await page.keyboard.down('Tab');\n      await page.locator('mg-input-checkbox .mg-input__input-group:nth-of-type(3) input').press('Space');\n\n      await page.keyboard.down('Tab');\n      await page.locator('mg-input-checkbox .mg-input__input-group:nth-of-type(4) input').press('Space');\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n    });\n\n    testEach([\n      { ...baseArgs, helpText: 'HelpText Message', required: true, type },\n      { ...baseArgs, helpText: \"Message d'aide\", lang: 'fr', required: true, type },\n    ])('Should render error when leaving an empty required input %s', async (page: PageType, args) => {\n      await setPageContent(page, createHTML(args));\n\n      await page.waitForSelector('mg-input-checkbox.hydrated');\n\n      // when multi open checkbox in popover\n      if (type === 'multi') {\n        // wait few seconds to insure to have the interactive element rendered\n        await waitForInteractiveElement(page, type);\n        await updateScreenshotClass(page, { width: '300px', height: '200px' });\n        await page.keyboard.down('Tab');\n        await page.keyboard.down('Enter');\n        await page.locator('mg-popover-content').waitFor({ timeout: TIMEOUT });\n      }\n\n      await page.keyboard.down('Tab');\n      await page.keyboard.down('Tab');\n      await page.keyboard.down('Tab');\n      await page.keyboard.down('Tab');\n      await page.keyboard.down('Tab');\n\n      if (type === 'multi') {\n        await page.keyboard.down('Escape');\n      }\n\n      await updateScreenshotClass(page, { width: 'unset', height: 'unset' });\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n    });\n\n    testEach([\n      { label: 'long label long label long label long label long label long label long label long label long label long label long label', type, tooltip: 'tooltip message' },\n      {\n        label: 'long label long label long label long label long label long label long label long label long label long label long label',\n        type,\n        tooltip: 'tooltip message',\n        labelOnTop: true,\n      },\n    ])('render long label in .mg-form-group, %s', async (page: PageType, args: object) => {\n      await setPageContent(\n        page,\n        `<div class=\"mg-form-group\">${createHTML({\n          ...baseArgs,\n          ...args,\n          value: [\n            { title: 'Batman', value: true },\n            { title: 'Robin', value: false },\n            { title: 'Joker', value: null },\n            { title: 'Bane', value: true, disabled: true },\n          ],\n        })}</div>`,\n      );\n\n      await page.waitForSelector('mg-input-checkbox.hydrated');\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n    });\n\n    testEach([false, true])('Ensure component fit in width 200px with label-on-top: %s', async (page: PageType, labelOnTop) => {\n      await setPageContent(page, createHTML({ ...baseArgs, labelOnTop, type }));\n\n      await page.waitForSelector('mg-input-checkbox.hydrated');\n\n      await page.setViewportSize({ width: 200, height: 100 });\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n    });\n  });\n\n  describe('type multi', () => {\n    const selectedValues = baseArgs.value.map(argValue => ({ ...argValue, value: true }));\n    const smallValues = baseArgs.value.map((argValue, index) => ({ ...argValue, title: index.toString(), value: true }));\n    testEach([\n      { disable: true, value: selectedValues },\n      { disable: true, value: smallValues },\n    ])('Ensure component fit in width 200px with display-values: %s', async (page: PageType, args: object) => {\n      await setPageContent(page, createHTML({ ...baseArgs, ...args, type: 'multi', displaySelectedValues: true }));\n\n      await page.waitForSelector('mg-input-checkbox.hydrated');\n\n      // wait few seconds to insure to have the interactive element rendered\n      await waitForInteractiveElement(page, 'multi');\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n    });\n    testEach([false, true])('Ensure component fit in width 200px with display-values: %s', async (page: PageType, displaySelectedValues) => {\n      await setPageContent(page, createHTML({ ...baseArgs, type: 'multi', value: selectedValues, displaySelectedValues }));\n\n      await page.waitForSelector('mg-input-checkbox.hydrated');\n\n      // wait few seconds to insure to have the interactive element rendered\n      await waitForInteractiveElement(page, 'multi');\n\n      await page.setViewportSize({ width: 200, height: 100 });\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n    });\n\n    test('Should render \"multi\" with search', async ({ page }) => {\n      const value = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21].map((item, index) => ({\n        title: index === 9 ? `my super long title item ${item} is very super long and finaly it could not be shorter so what can I do with it` : `${item}`,\n        value: false,\n      }));\n      await setPageContent(page, createHTML({ ...baseArgs, value }));\n\n      // wait few seconds to insure to have the interactive element rendered\n      await waitForInteractiveElement(page, 'multi');\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n\n      await updateScreenshotClass(page, { width: '450px', height: '470px' });\n\n      // open popover\n      await page.keyboard.down('Tab');\n      await page.keyboard.down('Enter');\n\n      await page.locator('mg-popover-content').waitFor({ timeout: TIMEOUT });\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n\n      // take focus in search input\n      await page.keyboard.down('Tab');\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n\n      // got to navigation after 10th input\n      for (const index of value.map((_item, index) => index)) {\n        if (index < 10) await page.keyboard.down('Tab');\n      }\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n\n      // use navigatio to go to last page\n      await page.keyboard.down('Tab');\n      await page.keyboard.down('Tab');\n      await page.keyboard.down('Tab');\n      await page.keyboard.down('Enter');\n      await page.keyboard.down('Enter');\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n\n      await page.getByPlaceholder(/value/).fill('2');\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n\n      // update search with an unmatchable value\n      await page.getByPlaceholder(/value/).fill('batman');\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n\n      // close popover\n      await page.keyboard.down('Escape');\n      await updateScreenshotClass(page, { width: '285px', height: '35px' });\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n    });\n\n    test('Should render \"multi\" with 2 sections', async ({ page }) => {\n      const value = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21].map((item, index) => ({\n        title: `item ${item}`,\n        value: [5, 12, 13, 17].some(item => item === index),\n      }));\n      await setPageContent(page, createHTML({ ...baseArgs, value }));\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n\n      // wait few seconds to insure to have the interactive element rendered\n      await waitForInteractiveElement(page, 'multi');\n\n      await updateScreenshotClass(page, { width: '450px', height: '570px' });\n\n      // open popover\n      await page.keyboard.down('Tab');\n      await page.keyboard.down('Enter');\n      await page.locator('mg-popover-content').waitFor({ timeout: TIMEOUT });\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n    });\n\n    test('Should render \"multi\" with 2 sections and a closed selected section', async ({ page }) => {\n      const value = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21].map((item, index) => ({\n        title: `item ${item}`,\n        value: [5, 12, 13, 17].some(item => item === index),\n      }));\n      await setPageContent(page, createHTML({ ...baseArgs, value }));\n\n      // wait few seconds to insure to have the interactive element rendered\n      await waitForInteractiveElement(page, 'multi');\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n\n      await updateScreenshotClass(page, { width: '450px', height: '570px' });\n\n      // open popover\n      await page.keyboard.down('Tab');\n      await page.keyboard.down('Enter');\n      await page.locator('mg-popover-content').waitFor({ timeout: TIMEOUT });\n\n      // close section\n      await page.keyboard.down('Tab');\n      await page.keyboard.down('Tab');\n      await page.keyboard.down('Enter');\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n    });\n  });\n});\n"]}