@mgdis/mg-components 5.19.2 → 5.20.0

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

@@ -1,194 +0,0 @@
-import { renderAttributes } from "../../../../../utils/e2e.test.utils";
-import { createPage } from "../../../../../utils/stencil.e2e.test.utils";
-import { widths } from "../../MgInput.conf";
-describe('mg-input-select', () => {
-  describe.each([true, false])('without tooltip, case label on top %s', labelOnTop => {
-    test('render', async () => {
-      const page = await createPage(`
-      <mg-input-select ${renderAttributes({ identifier: 'identifier', label: 'label', labelOnTop })}></mg-input-select>
-      <script>
-      const mgInputSelect = document.querySelector('mg-input-select');
-      mgInputSelect.items = ['blu', 'bli', 'bla', 'blo'];
-      </script>`);
-      const element = await page.find('mg-input-select');
-      expect(element).toHaveClass('hydrated');
-      const screenshot = await page.screenshot();
-      expect(screenshot).toMatchImageSnapshot();
-      await page.keyboard.down('Tab');
-      await page.waitForChanges();
-      const screenshotFocus = await page.screenshot();
-      expect(screenshotFocus).toMatchImageSnapshot();
-      await page.keyboard.down('Space');
-      await page.waitForChanges();
-      const screenshotList = await page.screenshot();
-      expect(screenshotList).toMatchImageSnapshot();
-      await page.keyboard.down('ArrowDown');
-      await page.keyboard.down('ArrowDown');
-      await page.waitForChanges();
-      const screenshotSelection = await page.screenshot();
-      expect(screenshotSelection).toMatchImageSnapshot();
-      await page.keyboard.down('Enter');
-      await page.waitForChanges();
-      const screenshotSelected = await page.screenshot();
-      expect(screenshotSelected).toMatchImageSnapshot();
-    });
-    test.each([undefined, ...widths])('render with width %s', async (mgWidth) => {
-      const page = await createPage(`
-      <mg-input-select ${renderAttributes({ identifier: 'identifier', label: 'label', mgWidth, labelOnTop })}></mg-input-select>
-      <script>
-      const mgInputSelect = document.querySelector('mg-input-select');
-      mgInputSelect.items = ['blu', 'bli', 'bla', 'blo'];
-      </script>`);
-      const screenshotSelected = await page.screenshot();
-      expect(screenshotSelected).toMatchImageSnapshot();
-    });
-  });
-  describe.each([
-    `<mg-input-select identifier="identifier" label="label" label-on-top></mg-input-select>`,
-    `<mg-input-select identifier="identifier" label="label" label-hide></mg-input-select>`,
-    `<mg-input-select identifier="identifier" label="label" placeholder="placeholder" help-text="HelpText Message"></mg-input-select>`,
-  ])('without tooltip', html => {
-    test('render', async () => {
-      const page = await createPage(`${html}
-        <script>
-        const mgInputSelect = document.querySelector('mg-input-select');
-        mgInputSelect.items = ['blu', 'bli', 'bla', 'blo'];
-        </script>`);
-      const element = await page.find('mg-input-select');
-      expect(element).toHaveClass('hydrated');
-      const screenshot = await page.screenshot();
-      expect(screenshot).toMatchImageSnapshot();
-    });
-  });
-  test.each([true, false])('render with tooltip, case label-on-top %s', async (labelOnTop) => {
-    const page = await createPage(`<mg-input-select identifier="identifier" label="label" tooltip="Tooltip message" label-on-top="${labelOnTop}"></mg-input-select>
-      <script>
-      const mgInputSelect = document.querySelector('mg-input-select');
-      mgInputSelect.items = ['blu', 'bli', 'bla', 'blo'];
-      </script>`);
-    const element = await page.find('mg-input-select');
-    expect(element).toHaveClass('hydrated');
-    const screenshot = await page.screenshot();
-    expect(screenshot).toMatchImageSnapshot();
-    await page.keyboard.down('Tab');
-    if (!labelOnTop) {
-      // Ensure to display tooltip
-      await page.setViewport({ width: 600, height: 65 });
-      // when label on top tooltip is on fist tab (next to label)
-      await page.keyboard.down('Tab');
-    }
-    await page.waitForChanges();
-    const screenshotTooltip = await page.screenshot();
-    expect(screenshotTooltip).toMatchImageSnapshot();
-  });
-  describe.each([
-    `<mg-input-select identifier="identifier" label="label" readonly></mg-input-select>`,
-    `<mg-input-select identifier="identifier" label="label" value="blu"></mg-input-select>`,
-    `<mg-input-select identifier="identifier" label="label" value="blu" readonly></mg-input-select>`,
-    `<mg-input-select identifier="identifier" label="label" value="blu" readonly label-on-top></mg-input-select>`,
-    `<mg-input-select identifier="identifier" label="label" disabled></mg-input-select>`,
-    `<mg-input-select identifier="identifier" label="label" value="blu" disabled></mg-input-select>`,
-    `<mg-input-select identifier="identifier" label="label" value="batman" help-text='<mg-icon icon="user" size="small"></mg-icon> Welcome batman'></mg-input-select>`,
-    `<mg-input-select identifier="identifier" label="label" value="blu" required help-text="HelpText Message"></mg-input-select>`,
-    `<mg-input-select identifier="identifier" label="label" value="blu" required readonly help-text="HelpText Message"></mg-input-select>`,
-    `<mg-input-select identifier="identifier" label="label" value="blu" required disabled help-text="HelpText Message"></mg-input-select>`,
-  ])('Should render with template', html => {
-    test('render', async () => {
-      const page = await createPage(`${html}
-        <script>
-        const mgInputSelect = document.querySelector('mg-input-select');
-        mgInputSelect.items = ['blu', 'bli', 'bla', 'blo'];
-        </script>`);
-      const element = await page.find('mg-input-select');
-      expect(element).toHaveClass('hydrated');
-      const screenshot = await page.screenshot();
-      expect(screenshot).toMatchImageSnapshot();
-    });
-  });
-  describe.each([
-    `<mg-input-select identifier="identifier" label="label" required></mg-input-select>`,
-    `<mg-input-select identifier="identifier" label="label" required lang="fr"></mg-input-select>`,
-  ])('%s', html => {
-    test('Should render error when leaving an empty required input', async () => {
-      const page = await createPage(`${html}
-      <script>
-      const mgInputSelect = document.querySelector('mg-input-select');
-      mgInputSelect.items = ['blu', 'bli', 'bla', 'blo'];
-      </script>`);
-      const element = await page.find('mg-input-select');
-      expect(element).toHaveClass('hydrated');
-      await page.keyboard.down('Tab');
-      await page.keyboard.down('Tab');
-      await page.waitForChanges();
-      const screenshot = await page.screenshot();
-      expect(screenshot).toMatchImageSnapshot();
-    });
-  });
-  test('Should render a grouped list', async () => {
-    const page = await createPage(`<mg-input-select identifier="identifier" label="label"></mg-input-select>
-      <script>
-      const mgInputSelect = document.querySelector('mg-input-select');
-      mgInputSelect.items = [
-        { title: 'blu', value: 'blu', group: 'Le groupe A' },
-        { title: 'blu', value: 'blublu', group: 'Le groupe B' },
-        { title: 'bli', value: 'bli', group: 'Le groupe A' },
-        { title: 'bli', value: 'blibli', group: 'Le groupe B' },
-        { title: 'bla', value: 'blabla' },
-        { title: 'blo', value: 'bloblo' },
-      ];
-      </script>`);
-    const element = await page.find('mg-input-select');
-    expect(element).toHaveClass('hydrated');
-    await page.keyboard.down('Tab');
-    await page.keyboard.down('Space');
-    await page.waitForChanges();
-    const screenshot = await page.screenshot();
-    expect(screenshot).toMatchImageSnapshot();
-  });
-  describe.each([
-    '<mg-input-select identifier="identifier" label="long label long label long label long label long label long label long label long label long label long label long label" tooltip="tooltip message"></mg-input-select>',
-    '<mg-input-select identifier="identifier" label="long label long label long label long label long label long label long label long label long label long label long label" tooltip="tooltip message" label-on-top></mg-input-select>',
-  ])('inside a div.mg-form-group', html => {
-    test('render', async () => {
-      const page = await createPage(`<div class="mg-form-group">${html}</div>
-      <script>
-      const mgInputSelect = document.querySelector('mg-input-select');
-      mgInputSelect.items = ['blu', 'bli', 'bla', 'blo'];
-      </script>`);
-      const element = await page.find('mg-input-select');
-      expect(element).toHaveClass('hydrated');
-      const screenshot = await page.screenshot();
-      expect(screenshot).toMatchImageSnapshot();
-    });
-  });
-  describe.each(['full', 16])('with custom width: %s', width => {
-    test.each([false, true])('with label on top: %s', async (labelOnTop) => {
-      const page = await createPage(`
-        <mg-input-select identifier="identifier" label="label" mg-width="${width}" label-on-top="${labelOnTop}"></mg-input-select>
-        <script>
-          const mgInputSelect = document.querySelector('mg-input-select');
-          mgInputSelect.items = ['blu', 'bli', 'bla', 'blo'];
-        </script>
-      `);
-      const element = await page.find('mg-input-select');
-      expect(element).toHaveClass('hydrated');
-      const screenshot = await page.screenshot();
-      expect(screenshot).toMatchImageSnapshot();
-    });
-  });
-  test.each([false, true])('Ensure component fit in width 300px with label-on-top: %s', async (labelOnTop) => {
-    const page = await createPage(`
-      <mg-input-select identifier="identifier" label="label" label-on-top="${labelOnTop}"></mg-input-select>
-      <script>
-        const mgInputSelect = document.querySelector('mg-input-select');
-        mgInputSelect.items = ['blu', 'bli', 'bla', 'blo', 'le long libellé qui va faire sortir le champ mg-input-select de sa zone de confort'];
-      </script>
-    `);
-    const element = await page.find('mg-input-select');
-    expect(element).toHaveClass('hydrated');
-    await page.setViewport({ width: 300, height: 100 });
-    const screenshot = await page.screenshot();
-    expect(screenshot).toMatchImageSnapshot();
-  });
-});
-//# sourceMappingURL=mg-input-select.e2e.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"mg-input-select.e2e.js","sourceRoot":"","sources":["../../../../../../src/components/molecules/inputs/mg-input-select/test/mg-input-select.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,6CAA6C,CAAC;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAE5C,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;EAC/B,QAAQ,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,uCAAuC,EAAE,UAAU,CAAC,EAAE;IACjF,IAAI,CAAC,QAAQ,EAAE,KAAK,IAAI,EAAE;MACxB,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC;yBACX,gBAAgB,CAAC,EAAE,UAAU,EAAE,YAAY,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC;;;;gBAInF,CAAC,CAAC;MAEZ,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;MAEnD,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;MAExC,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;MAC3C,MAAM,CAAC,UAAU,CAAC,CAAC,oBAAoB,EAAE,CAAC;MAE1C,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;MAEhC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,MAAM,eAAe,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;MAChD,MAAM,CAAC,eAAe,CAAC,CAAC,oBAAoB,EAAE,CAAC;MAE/C,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;MAElC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,MAAM,cAAc,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;MAC/C,MAAM,CAAC,cAAc,CAAC,CAAC,oBAAoB,EAAE,CAAC;MAE9C,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;MACtC,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;MAEtC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,MAAM,mBAAmB,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;MACpD,MAAM,CAAC,mBAAmB,CAAC,CAAC,oBAAoB,EAAE,CAAC;MAEnD,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;MAElC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,MAAM,kBAAkB,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;MACnD,MAAM,CAAC,kBAAkB,CAAC,CAAC,oBAAoB,EAAE,CAAC;IACpD,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE,GAAG,MAAM,CAAC,CAAC,CAAC,sBAAsB,EAAE,KAAK,EAAC,OAAO,EAAC,EAAE;MACxE,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC;yBACX,gBAAgB,CAAC,EAAE,UAAU,EAAE,YAAY,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC;;;;gBAI5F,CAAC,CAAC;MAEZ,MAAM,kBAAkB,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;MACnD,MAAM,CAAC,kBAAkB,CAAC,CAAC,oBAAoB,EAAE,CAAC;IACpD,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,QAAQ,CAAC,IAAI,CAAC;IACZ,wFAAwF;IACxF,sFAAsF;IACtF,kIAAkI;GACnI,CAAC,CAAC,iBAAiB,EAAE,IAAI,CAAC,EAAE;IAC3B,IAAI,CAAC,QAAQ,EAAE,KAAK,IAAI,EAAE;MACxB,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC,GAAG,IAAI;;;;kBAIzB,CAAC,CAAC;MAEd,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;MAEnD,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;MAExC,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;MAC3C,MAAM,CAAC,UAAU,CAAC,CAAC,oBAAoB,EAAE,CAAC;IAC5C,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,2CAA2C,EAAE,KAAK,EAAC,UAAU,EAAC,EAAE;IACvF,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC,kGAAkG,UAAU;;;;gBAI9H,CAAC,CAAC;IAEd,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;IAEnD,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAExC,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;IAC3C,MAAM,CAAC,UAAU,CAAC,CAAC,oBAAoB,EAAE,CAAC;IAE1C,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAChC,IAAI,CAAC,UAAU,EAAE;MACf,4BAA4B;MAC5B,MAAM,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;MACnD,2DAA2D;MAC3D,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACjC;IAED,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,iBAAiB,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;IAClD,MAAM,CAAC,iBAAiB,CAAC,CAAC,oBAAoB,EAAE,CAAC;EACnD,CAAC,CAAC,CAAC;EAEH,QAAQ,CAAC,IAAI,CAAC;IACZ,oFAAoF;IACpF,uFAAuF;IACvF,gGAAgG;IAChG,6GAA6G;IAC7G,oFAAoF;IACpF,gGAAgG;IAChG,kKAAkK;IAClK,6HAA6H;IAC7H,sIAAsI;IACtI,sIAAsI;GACvI,CAAC,CAAC,6BAA6B,EAAE,IAAI,CAAC,EAAE;IACvC,IAAI,CAAC,QAAQ,EAAE,KAAK,IAAI,EAAE;MACxB,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC,GAAG,IAAI;;;;kBAIzB,CAAC,CAAC;MAEd,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;MAEnD,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;MAExC,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;MAC3C,MAAM,CAAC,UAAU,CAAC,CAAC,oBAAoB,EAAE,CAAC;IAC5C,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,QAAQ,CAAC,IAAI,CAAC;IACZ,oFAAoF;IACpF,8FAA8F;GAC/F,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE;IACd,IAAI,CAAC,0DAA0D,EAAE,KAAK,IAAI,EAAE;MAC1E,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC,GAAG,IAAI;;;;gBAI3B,CAAC,CAAC;MAEZ,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;MAEnD,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;MAExC,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;MAChC,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;MAEhC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;MAC3C,MAAM,CAAC,UAAU,CAAC,CAAC,oBAAoB,EAAE,CAAC;IAC5C,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;IAC9C,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC;;;;;;;;;;;gBAWlB,CAAC,CAAC;IAEd,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;IAEnD,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAExC,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAChC,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAElC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;IAC3C,MAAM,CAAC,UAAU,CAAC,CAAC,oBAAoB,EAAE,CAAC;EAC5C,CAAC,CAAC,CAAC;EAEH,QAAQ,CAAC,IAAI,CAAC;IACZ,wNAAwN;IACxN,qOAAqO;GACtO,CAAC,CAAC,4BAA4B,EAAE,IAAI,CAAC,EAAE;IACtC,IAAI,CAAC,QAAQ,EAAE,KAAK,IAAI,EAAE;MACxB,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC,8BAA8B,IAAI;;;;gBAItD,CAAC,CAAC;MAEZ,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;MAEnD,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;MAExC,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;MAC3C,MAAM,CAAC,UAAU,CAAC,CAAC,oBAAoB,EAAE,CAAC;IAC5C,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,QAAQ,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,CAAC,uBAAuB,EAAE,KAAK,CAAC,EAAE;IAC3D,IAAI,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,uBAAuB,EAAE,KAAK,EAAC,UAAU,EAAC,EAAE;MACnE,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC;2EACuC,KAAK,mBAAmB,UAAU;;;;;OAKtG,CAAC,CAAC;MAEH,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;MAEnD,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;MAExC,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;MAC3C,MAAM,CAAC,UAAU,CAAC,CAAC,oBAAoB,EAAE,CAAC;IAC5C,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,2DAA2D,EAAE,KAAK,EAAC,UAAU,EAAC,EAAE;IACvG,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC;6EAC2C,UAAU;;;;;KAKlF,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;IAEnD,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAExC,MAAM,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;IAEpD,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;IAC3C,MAAM,CAAC,UAAU,CAAC,CAAC,oBAAoB,EAAE,CAAC;EAC5C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { renderAttributes } from '../../../../../utils/e2e.test.utils';\nimport { createPage } from '../../../../../utils/stencil.e2e.test.utils';\nimport { widths } from '../../MgInput.conf';\n\ndescribe('mg-input-select', () => {\n  describe.each([true, false])('without tooltip, case label on top %s', labelOnTop => {\n    test('render', async () => {\n      const page = await createPage(`\n      <mg-input-select ${renderAttributes({ identifier: 'identifier', label: 'label', labelOnTop })}></mg-input-select>\n      <script>\n      const mgInputSelect = document.querySelector('mg-input-select');\n      mgInputSelect.items = ['blu', 'bli', 'bla', 'blo'];\n      </script>`);\n\n      const element = await page.find('mg-input-select');\n\n      expect(element).toHaveClass('hydrated');\n\n      const screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n\n      await page.keyboard.down('Tab');\n\n      await page.waitForChanges();\n\n      const screenshotFocus = await page.screenshot();\n      expect(screenshotFocus).toMatchImageSnapshot();\n\n      await page.keyboard.down('Space');\n\n      await page.waitForChanges();\n\n      const screenshotList = await page.screenshot();\n      expect(screenshotList).toMatchImageSnapshot();\n\n      await page.keyboard.down('ArrowDown');\n      await page.keyboard.down('ArrowDown');\n\n      await page.waitForChanges();\n\n      const screenshotSelection = await page.screenshot();\n      expect(screenshotSelection).toMatchImageSnapshot();\n\n      await page.keyboard.down('Enter');\n\n      await page.waitForChanges();\n\n      const screenshotSelected = await page.screenshot();\n      expect(screenshotSelected).toMatchImageSnapshot();\n    });\n\n    test.each([undefined, ...widths])('render with width %s', async mgWidth => {\n      const page = await createPage(`\n      <mg-input-select ${renderAttributes({ identifier: 'identifier', label: 'label', mgWidth, labelOnTop })}></mg-input-select>\n      <script>\n      const mgInputSelect = document.querySelector('mg-input-select');\n      mgInputSelect.items = ['blu', 'bli', 'bla', 'blo'];\n      </script>`);\n\n      const screenshotSelected = await page.screenshot();\n      expect(screenshotSelected).toMatchImageSnapshot();\n    });\n  });\n\n  describe.each([\n    `<mg-input-select identifier=\"identifier\" label=\"label\" label-on-top></mg-input-select>`,\n    `<mg-input-select identifier=\"identifier\" label=\"label\" label-hide></mg-input-select>`,\n    `<mg-input-select identifier=\"identifier\" label=\"label\" placeholder=\"placeholder\" help-text=\"HelpText Message\"></mg-input-select>`,\n  ])('without tooltip', html => {\n    test('render', async () => {\n      const page = await createPage(`${html}\n        <script>\n        const mgInputSelect = document.querySelector('mg-input-select');\n        mgInputSelect.items = ['blu', 'bli', 'bla', 'blo'];\n        </script>`);\n\n      const element = await page.find('mg-input-select');\n\n      expect(element).toHaveClass('hydrated');\n\n      const screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n    });\n  });\n\n  test.each([true, false])('render with tooltip, case label-on-top %s', async labelOnTop => {\n    const page = await createPage(`<mg-input-select identifier=\"identifier\" label=\"label\" tooltip=\"Tooltip message\" label-on-top=\"${labelOnTop}\"></mg-input-select>\n      <script>\n      const mgInputSelect = document.querySelector('mg-input-select');\n      mgInputSelect.items = ['blu', 'bli', 'bla', 'blo'];\n      </script>`);\n\n    const element = await page.find('mg-input-select');\n\n    expect(element).toHaveClass('hydrated');\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n\n    await page.keyboard.down('Tab');\n    if (!labelOnTop) {\n      // Ensure to display tooltip\n      await page.setViewport({ width: 600, height: 65 });\n      // when label on top tooltip is on fist tab (next to label)\n      await page.keyboard.down('Tab');\n    }\n\n    await page.waitForChanges();\n\n    const screenshotTooltip = await page.screenshot();\n    expect(screenshotTooltip).toMatchImageSnapshot();\n  });\n\n  describe.each([\n    `<mg-input-select identifier=\"identifier\" label=\"label\" readonly></mg-input-select>`,\n    `<mg-input-select identifier=\"identifier\" label=\"label\" value=\"blu\"></mg-input-select>`,\n    `<mg-input-select identifier=\"identifier\" label=\"label\" value=\"blu\" readonly></mg-input-select>`,\n    `<mg-input-select identifier=\"identifier\" label=\"label\" value=\"blu\" readonly label-on-top></mg-input-select>`,\n    `<mg-input-select identifier=\"identifier\" label=\"label\" disabled></mg-input-select>`,\n    `<mg-input-select identifier=\"identifier\" label=\"label\" value=\"blu\" disabled></mg-input-select>`,\n    `<mg-input-select identifier=\"identifier\" label=\"label\" value=\"batman\" help-text='<mg-icon icon=\"user\" size=\"small\"></mg-icon> Welcome batman'></mg-input-select>`,\n    `<mg-input-select identifier=\"identifier\" label=\"label\" value=\"blu\" required help-text=\"HelpText Message\"></mg-input-select>`,\n    `<mg-input-select identifier=\"identifier\" label=\"label\" value=\"blu\" required readonly help-text=\"HelpText Message\"></mg-input-select>`,\n    `<mg-input-select identifier=\"identifier\" label=\"label\" value=\"blu\" required disabled help-text=\"HelpText Message\"></mg-input-select>`,\n  ])('Should render with template', html => {\n    test('render', async () => {\n      const page = await createPage(`${html}\n        <script>\n        const mgInputSelect = document.querySelector('mg-input-select');\n        mgInputSelect.items = ['blu', 'bli', 'bla', 'blo'];\n        </script>`);\n\n      const element = await page.find('mg-input-select');\n\n      expect(element).toHaveClass('hydrated');\n\n      const screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n    });\n  });\n\n  describe.each([\n    `<mg-input-select identifier=\"identifier\" label=\"label\" required></mg-input-select>`,\n    `<mg-input-select identifier=\"identifier\" label=\"label\" required lang=\"fr\"></mg-input-select>`,\n  ])('%s', html => {\n    test('Should render error when leaving an empty required input', async () => {\n      const page = await createPage(`${html}\n      <script>\n      const mgInputSelect = document.querySelector('mg-input-select');\n      mgInputSelect.items = ['blu', 'bli', 'bla', 'blo'];\n      </script>`);\n\n      const element = await page.find('mg-input-select');\n\n      expect(element).toHaveClass('hydrated');\n\n      await page.keyboard.down('Tab');\n      await page.keyboard.down('Tab');\n\n      await page.waitForChanges();\n\n      const screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n    });\n  });\n\n  test('Should render a grouped list', async () => {\n    const page = await createPage(`<mg-input-select identifier=\"identifier\" label=\"label\"></mg-input-select>\n      <script>\n      const mgInputSelect = document.querySelector('mg-input-select');\n      mgInputSelect.items = [\n        { title: 'blu', value: 'blu', group: 'Le groupe A' },\n        { title: 'blu', value: 'blublu', group: 'Le groupe B' },\n        { title: 'bli', value: 'bli', group: 'Le groupe A' },\n        { title: 'bli', value: 'blibli', group: 'Le groupe B' },\n        { title: 'bla', value: 'blabla' },\n        { title: 'blo', value: 'bloblo' },\n      ];\n      </script>`);\n\n    const element = await page.find('mg-input-select');\n\n    expect(element).toHaveClass('hydrated');\n\n    await page.keyboard.down('Tab');\n    await page.keyboard.down('Space');\n\n    await page.waitForChanges();\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n\n  describe.each([\n    '<mg-input-select identifier=\"identifier\" label=\"long label long label long label long label long label long label long label long label long label long label long label\" tooltip=\"tooltip message\"></mg-input-select>',\n    '<mg-input-select identifier=\"identifier\" label=\"long label long label long label long label long label long label long label long label long label long label long label\" tooltip=\"tooltip message\" label-on-top></mg-input-select>',\n  ])('inside a div.mg-form-group', html => {\n    test('render', async () => {\n      const page = await createPage(`<div class=\"mg-form-group\">${html}</div>\n      <script>\n      const mgInputSelect = document.querySelector('mg-input-select');\n      mgInputSelect.items = ['blu', 'bli', 'bla', 'blo'];\n      </script>`);\n\n      const element = await page.find('mg-input-select');\n\n      expect(element).toHaveClass('hydrated');\n\n      const screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n    });\n  });\n\n  describe.each(['full', 16])('with custom width: %s', width => {\n    test.each([false, true])('with label on top: %s', async labelOnTop => {\n      const page = await createPage(`\n        <mg-input-select identifier=\"identifier\" label=\"label\" mg-width=\"${width}\" label-on-top=\"${labelOnTop}\"></mg-input-select>\n        <script>\n          const mgInputSelect = document.querySelector('mg-input-select');\n          mgInputSelect.items = ['blu', 'bli', 'bla', 'blo'];\n        </script>\n      `);\n\n      const element = await page.find('mg-input-select');\n\n      expect(element).toHaveClass('hydrated');\n\n      const screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n    });\n  });\n\n  test.each([false, true])('Ensure component fit in width 300px with label-on-top: %s', async labelOnTop => {\n    const page = await createPage(`\n      <mg-input-select identifier=\"identifier\" label=\"label\" label-on-top=\"${labelOnTop}\"></mg-input-select>\n      <script>\n        const mgInputSelect = document.querySelector('mg-input-select');\n        mgInputSelect.items = ['blu', 'bli', 'bla', 'blo', 'le long libellé qui va faire sortir le champ mg-input-select de sa zone de confort'];\n      </script>\n    `);\n\n    const element = await page.find('mg-input-select');\n\n    expect(element).toHaveClass('hydrated');\n\n    await page.setViewport({ width: 300, height: 100 });\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n});\n"]}

package/dist/collection/components/molecules/inputs/mg-input-select/test/mg-input-select.spec.js

@@ -1,399 +0,0 @@
-import { h } from "@stencil/core";
-import { newSpecPage } from "@stencil/core/testing";
-import { MgInputSelect } from "../mg-input-select";
-import messages from "../../../../../locales/en/messages.json";
-const getPage = async (args) => {
-  const page = newSpecPage({
-    components: [MgInputSelect],
-    template: () => h("mg-input-select", Object.assign({}, args)),
-  });
-  jest.runAllTimers();
-  return page;
-};
-describe('mg-input-select', () => {
-  beforeEach(() => jest.useFakeTimers());
-  afterEach(() => jest.runOnlyPendingTimers());
-  test.each([
-    { label: 'label', identifier: 'identifier', items: [] },
-    { label: 'label', identifier: 'identifier', items: ['blu', 'bli', 'blo', 'bla'] },
-    { label: 'label', identifier: 'identifier', items: ['blu', 'bli', 'blo', 'bla'], labelHide: true },
-    {
-      label: 'label',
-      identifier: 'identifier',
-      items: [
-        { title: 'blu', value: 'u' },
-        { title: 'bli', value: 'i' },
-        { title: 'blo', value: 'o' },
-        { title: 'bla', value: 'a' },
-      ],
-    },
-    {
-      label: 'label',
-      identifier: 'identifier',
-      items: [
-        { title: 'blu', value: 'u', group: 'blu' },
-        { title: 'bli', value: 'i', group: 'blu' },
-        { title: 'blo', value: 'o', group: 'blo' },
-        { title: 'bla', value: 'a' },
-      ],
-    },
-    {
-      label: 'label',
-      identifier: 'identifier',
-      items: [
-        { title: 'blu', value: 'u' },
-        { title: 'bli', value: 'i' },
-        { title: 'blo', value: 'o' },
-        { title: 'bla', value: 'a' },
-      ],
-      readonly: true,
-      value: 'o',
-    },
-    { label: 'label', identifier: 'identifier', items: ['blu', 'bli', 'blo', 'bla'], labelOnTop: true },
-    { label: 'label', identifier: 'identifier', items: ['blu', 'bli', 'blo', 'bla'], readonly: true },
-    { label: 'label', identifier: 'identifier', items: ['blu', 'bli', 'blo', 'bla'], readonly: true, labelOnTop: true, tooltip: 'Tooltip message' },
-    { label: 'label', identifier: 'identifier', items: ['blu', 'bli', 'blo', 'bla'], required: true, helpText: 'My help text', value: 'blu' },
-    { label: 'label', identifier: 'identifier', items: ['blu', 'bli', 'blo', 'bla'], required: true, readonly: true, helpText: 'My help text', value: 'blu' },
-    { label: 'label', identifier: 'identifier', items: ['blu', 'bli', 'blo', 'bla'], required: true, disabled: true, helpText: 'My help text', value: 'blu' },
-    { label: 'label', identifier: 'identifier', items: ['blu', 'bli', 'blo', 'bla'], tooltip: 'My Tooltip Message' },
-    { label: 'label', identifier: 'identifier', items: ['blu', 'bli', 'blo', 'bla'], tooltip: 'My Tooltip Message', labelOnTop: true },
-    { label: 'label', identifier: 'identifier', items: ['blu', 'bli', 'blo', 'bla'], placeholder: 'placeholder' },
-    { label: 'label', identifier: 'identifier', items: ['blu', 'bli', 'blo', 'bla'], placeholder: 'placeholder', placeholderHide: true },
-    { label: 'label', identifier: 'identifier', items: ['blu', 'bli', 'blo', 'bla'], placeholder: 'placeholder', placeholderDisabled: true },
-    { label: 'label', identifier: 'identifier', items: ['blu', 'bli', 'blo', 'bla'], placeholder: 'placeholder', placeholderDisabled: true, value: 'ble' },
-  ])('Should render with args %s:', async (args) => {
-    const { root } = await getPage(args);
-    expect(root).toMatchSnapshot();
-  });
-  test.each(['', ' ', undefined])('Should not render with invalid identifier property: %s', async (identifier) => {
-    expect.assertions(1);
-    try {
-      await getPage({ identifier, items: ['blu', 'bli', 'blo', 'bla'] });
-    }
-    catch (err) {
-      expect(err.message).toMatch('<mg-input> prop "identifier" is required.');
-    }
-  });
-  test.each(['', ' ', undefined])('Should throw error with invalid label property: %s', async (label) => {
-    expect.assertions(1);
-    try {
-      await getPage({ identifier: 'identifier', label, items: ['blu', 'bli', 'blo', 'bla'] });
-    }
-    catch (err) {
-      expect(err.message).toMatch('<mg-input> prop "label" is required.');
-    }
-  });
-  test('Should throw an error with labelOnTop & labelHide set to true', async () => {
-    expect.assertions(1);
-    try {
-      await getPage({ identifier: 'identifier', label: 'batman', labelOnTop: true, labelHide: true, items: ['batman', 'joker'] });
-    }
-    catch (err) {
-      expect(err.message).toMatch('<mg-input> prop "labelOnTop" must not be paired with the prop "labelHide"');
-    }
-  });
-  test.each([[['blu', { title: 'blu', value: 'blu' }]], [['blu', { blu: 'blu' }]], [[{ title: 'blu', value: 'blu' }, { blu: 'blu' }]]])('Should throw error with invalid items property: %s', async (items) => {
-    expect.assertions(1);
-    try {
-      await getPage({ label: 'Label', items });
-    }
-    catch (err) {
-      expect(err.message).toMatch('<mg-input-select> prop "items" is required, can be an empty Array or all items must be the same type: string or Option.');
-    }
-  });
-  test.each([
-    { items: ['batman', 'robin', 'joker', 'bane'], selectedOption: '' },
-    { items: ['batman', 'robin', 'joker', 'bane'], selectedOption: 3 },
-    {
-      items: [
-        { title: 'batman', value: 'u' },
-        { title: 'robin', value: 'i' },
-        { title: 'joker', value: 'o' },
-        { title: 'bane', value: 'a' },
-      ],
-      selectedOption: 2,
-    },
-    {
-      items: [
-        { title: 'batman', value: 1 },
-        { title: 'robin', value: 2 },
-        { title: 'joker', value: 3 },
-        { title: 'bane', value: 4 },
-      ],
-      selectedOption: 1,
-    },
-    {
-      items: [
-        { title: 'batman', value: true },
-        { title: 'robin', value: false },
-      ],
-      selectedOption: 0,
-    },
-    {
-      items: [
-        { title: 'blu', value: undefined },
-        { title: 'bli', value: 42 },
-      ],
-      selectedOption: 0,
-    },
-    {
-      items: [
-        { title: 'batman', value: { name: 'Batman' } },
-        { title: 'robin', value: { name: 'Robin' } },
-      ],
-      selectedOption: 1,
-    },
-    {
-      items: [
-        { title: 'Batman', value: { name: 'Batman', group: 'Heroes' } },
-        { title: 'Robin', value: { name: 'Robin', group: 'Heroes' } },
-        { title: 'Joker', value: { name: 'Joker', group: 'Super Vilains' } },
-        { title: 'Bane', value: { name: 'Bane', group: 'Super Vilains' } },
-      ],
-      selectedOption: 2,
-    },
-  ])('Should trigger events for (%s)', async ({ items, selectedOption }) => {
-    var _a;
-    const args = { label: 'label', items, identifier: 'identifier', helpText: 'My help text', value: 'blu' };
-    const page = await getPage(args);
-    const element = page.doc.querySelector('mg-input-select');
-    const input = element.shadowRoot.querySelector('select');
-    //mock validity
-    input.checkValidity = jest.fn(() => true);
-    Object.defineProperty(input, 'validity', {
-      get: jest.fn(() => ({
-        valueMissing: false,
-      })),
-    });
-    jest.spyOn(page.rootInstance.valueChange, 'emit');
-    input.dispatchEvent(new CustomEvent('focus', { bubbles: true }));
-    await page.waitForChanges();
-    expect(page.root).toMatchSnapshot(); //Snapshot on focus
-    input.value = ((_a = items[selectedOption]) === null || _a === void 0 ? void 0 : _a.title) || items[selectedOption] || selectedOption;
-    input.dispatchEvent(new CustomEvent('input', { bubbles: true }));
-    await page.waitForChanges();
-    const expectedEmitValue = selectedOption !== '' ? (typeof items[selectedOption] === 'object' ? items[selectedOption].value : items[selectedOption]) : null;
-    expect(page.rootInstance.valueChange.emit).toHaveBeenCalledWith(expectedEmitValue);
-  });
-  describe.each(['readonly', 'disabled'])('validity, case next state is %s', nextState => {
-    test.each([
-      { validity: true, valueMissing: false },
-      { validity: false, valueMissing: true },
-    ])('validity (%s), valueMissing (%s)', async ({ validity, valueMissing }) => {
-      const args = { label: 'label', items: ['blu', 'bli', 'blo', 'bla'], identifier: 'identifier', patternErrorMessage: 'Non' };
-      const page = await getPage(args);
-      const element = page.doc.querySelector('mg-input-select');
-      const input = element.shadowRoot.querySelector('select');
-      //mock validity
-      input.checkValidity = jest.fn(() => validity);
-      Object.defineProperty(input, 'validity', {
-        get: jest.fn(() => ({
-          valueMissing,
-        })),
-      });
-      input.dispatchEvent(new CustomEvent('blur', { bubbles: true }));
-      await page.waitForChanges();
-      if (validity) {
-        expect(page.rootInstance.errorMessage).toBeUndefined();
-      }
-      else if (valueMissing) {
-        expect(page.rootInstance.errorMessage).toEqual(messages.errors.required);
-      }
-      expect(page.rootInstance.valid).toEqual(validity);
-      expect(page.rootInstance.invalid).toEqual(!validity);
-      if (valueMissing) {
-        expect(page.root).toMatchSnapshot(); //Snapshot with readonly/disabled FALSE
-        element[nextState] = true;
-        await page.waitForChanges();
-        expect(page.root).toMatchSnapshot(); //Snapshot with readonly/disabled TRUE
-      }
-    });
-  });
-  test("display error with displayError component's public method", async () => {
-    const page = await getPage({ label: 'label', items: ['batman', 'robin', 'joker', 'bane'], identifier: 'identifier', required: true });
-    expect(page.root).toMatchSnapshot();
-    const element = page.doc.querySelector('mg-input-select');
-    const input = element.shadowRoot.querySelector('select');
-    //mock validity
-    input.checkValidity = jest.fn(() => false);
-    Object.defineProperty(input, 'validity', {
-      get: jest.fn(() => ({
-        valueMissing: true,
-      })),
-    });
-    await element.displayError();
-    await page.waitForChanges();
-    expect(page.root).toMatchSnapshot();
-  });
-  test.each([
-    {
-      valid: true,
-      errorMessage: 'Override error',
-    },
-    {
-      valid: false,
-      errorMessage: 'Override error',
-    },
-  ])("should display override error with setError component's public method", async (params) => {
-    const page = await getPage({ label: 'label', identifier: 'identifier', items: ['batman', 'robin', 'joker', 'bane'], required: true });
-    expect(page.root).toMatchSnapshot();
-    const element = page.doc.querySelector('mg-input-select');
-    const input = element.shadowRoot.querySelector('select');
-    //mock validity
-    Object.defineProperty(input, 'validity', {
-      get: () => ({}),
-    });
-    await element.setError(params.valid, params.errorMessage);
-    await page.waitForChanges();
-    expect(page.root).toMatchSnapshot();
-  });
-  test.each([
-    {
-      valid: '',
-      errorMessage: 'Override error',
-      error: '<mg-input-select> method "setError()" param "valid" must be a boolean',
-    },
-    {
-      valid: undefined,
-      errorMessage: 'Override error',
-      error: '<mg-input-select> method "setError()" param "valid" must be a boolean',
-    },
-    {
-      valid: true,
-      errorMessage: ' ',
-      error: '<mg-input-select> method "setError()" param "errorMessage" must be a string',
-    },
-    {
-      valid: true,
-      errorMessage: true,
-      error: '<mg-input-select> method "setError()" param "errorMessage" must be a string',
-    },
-  ])("shloud throw error with setError component's public method invalid params", async (params) => {
-    expect.assertions(1);
-    try {
-      const page = await getPage({ label: 'label', identifier: 'identifier', items: ['batman', 'robin', 'joker', 'bane'], required: true });
-      const element = page.doc.querySelector('mg-input-select');
-      await element.setError(params.valid, params.errorMessage);
-      await page.waitForChanges();
-    }
-    catch (err) {
-      expect(err.message).toMatch(params.error);
-    }
-  });
-  test.each(['fr', 'xx'])('display error message with locale: %s', async (lang) => {
-    const page = await getPage({ label: 'label', items: ['batman', 'robin', 'joker', 'bane'], identifier: 'identifier', required: true, lang });
-    const element = page.doc.querySelector('mg-input-select');
-    const input = element.shadowRoot.querySelector('select');
-    //mock validity
-    input.checkValidity = jest.fn(() => false);
-    Object.defineProperty(input, 'validity', {
-      get: jest.fn(() => ({
-        valueMissing: true,
-      })),
-    });
-    await element.displayError();
-    await page.waitForChanges();
-    expect(page.root).toMatchSnapshot();
-  });
-  test('Should remove error on input', async () => {
-    const page = await getPage({ label: 'label', items: ['batman', 'robin', 'joker', 'bane'], identifier: 'identifier', required: true });
-    const element = page.doc.querySelector('mg-input-select');
-    const input = element.shadowRoot.querySelector('select');
-    //mock validity
-    input.checkValidity = jest.fn().mockReturnValueOnce(false).mockReturnValueOnce(true).mockReturnValueOnce(true);
-    Object.defineProperty(input, 'validity', {
-      get: jest
-        .fn()
-        .mockReturnValueOnce({
-        valueMissing: true,
-      })
-        .mockReturnValueOnce({
-        valueMissing: true,
-      })
-        .mockReturnValueOnce({
-        valueMissing: false,
-      })
-        .mockReturnValueOnce({
-        valueMissing: false,
-      }),
-    });
-    await element.displayError();
-    await page.waitForChanges();
-    expect(page.rootInstance.hasDisplayedError).toEqual(true);
-    expect(page.rootInstance.errorMessage).toEqual(messages.errors.required);
-    input.value = 'batman';
-    input.dispatchEvent(new CustomEvent('input', { bubbles: true }));
-    await page.waitForChanges();
-    expect(page.rootInstance.hasDisplayedError).toEqual(true);
-    expect(page.rootInstance.errorMessage).toBeUndefined();
-    input.dispatchEvent(new CustomEvent('blur', { bubbles: true }));
-    await page.waitForChanges();
-    expect(page.rootInstance.hasDisplayedError).toEqual(false);
-  });
-  test('Should remove error on input when required change dynamically', async () => {
-    const page = await getPage({ label: 'label', items: ['batman', 'robin', 'joker', 'bane'], identifier: 'identifier', required: true });
-    const element = page.doc.querySelector('mg-input-select');
-    const input = element.shadowRoot.querySelector('select');
-    //mock validity
-    input.checkValidity = jest.fn().mockReturnValueOnce(false).mockReturnValueOnce(true).mockReturnValueOnce(true);
-    Object.defineProperty(input, 'validity', {
-      get: jest
-        .fn()
-        .mockReturnValueOnce({
-        valueMissing: true,
-      })
-        .mockReturnValueOnce({
-        valueMissing: true,
-      })
-        .mockReturnValueOnce({
-        valueMissing: false,
-      })
-        .mockReturnValueOnce({
-        valueMissing: false,
-      }),
-    });
-    await element.displayError();
-    await page.waitForChanges();
-    expect(page.rootInstance.hasDisplayedError).toEqual(true);
-    expect(page.rootInstance.errorMessage).toEqual(messages.errors.required);
-    element.required = false;
-    await page.waitForChanges();
-    // Error message should disapear and change the hasDisplayedError status
-    expect(page.rootInstance.hasDisplayedError).toEqual(false);
-    expect(page.rootInstance.errorMessage).toBeUndefined();
-    element.required = true;
-    await page.waitForChanges();
-    // If back on required the message is still not displayed
-    expect(page.rootInstance.hasDisplayedError).toEqual(false);
-    expect(page.rootInstance.errorMessage).toBeUndefined();
-  });
-  test.each([[['batman']], [[{ title: 'batman', value: 'b' }]]])('Should not update value with invalid input value: %s', async (items) => {
-    const page = await getPage({ identifier: 'identifier', label: 'batman', items });
-    const element = page.doc.querySelector('mg-input-select');
-    const input = element.shadowRoot.querySelector('select');
-    input.checkValidity = jest.fn().mockReturnValueOnce(true);
-    jest.spyOn(page.rootInstance.inputValid, 'emit');
-    input.value = 'hello';
-    input.dispatchEvent(new CustomEvent('input', { bubbles: true }));
-    await page.waitForChanges();
-    expect(element.value).toBe('hello');
-    expect(page.rootInstance.inputValid.emit).toHaveBeenCalledWith(false);
-  });
-  test('Should update mg-width', async () => {
-    const page = await getPage({ label: 'label', identifier: 'identifier', items: ['blu', 'bli', 'blo', 'bla'], mgWidth: undefined });
-    const element = page.doc.querySelector('mg-input-select');
-    element.mgWidth = 2;
-    await page.waitForChanges();
-    expect(page.root).toMatchSnapshot();
-    element.mgWidth = 4;
-    await page.waitForChanges();
-    expect(page.root).toMatchSnapshot();
-    element.mgWidth = 16;
-    await page.waitForChanges();
-    expect(page.root).toMatchSnapshot();
-    element.mgWidth = 'full';
-    await page.waitForChanges();
-    expect(page.root).toMatchSnapshot();
-  });
-});
-//# sourceMappingURL=mg-input-select.spec.js.map