@mgdis/mg-components 5.19.2 → 5.20.0

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

@@ -1,640 +0,0 @@
-var __asyncValues = (this && this.__asyncValues) || function (o) {
-  if (!Symbol.asyncIterator)
-    throw new TypeError("Symbol.asyncIterator is not defined.");
-  var m = o[Symbol.asyncIterator], i;
-  return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
-  function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
-  function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
-};
-import { h } from "@stencil/core";
-import { newSpecPage } from "@stencil/core/testing";
-import { cloneDeep, mockConsoleError, mockWindowFrames, setupResizeObserverMock } from "../../../../../utils/unit.test.utils";
-import { MgInputCheckbox } from "../mg-input-checkbox";
-import messages from "../../../../../locales/en/messages.json";
-import { checkboxTypes } from "../mg-input-checkbox.conf";
-import { MgPopover } from "../../../mg-popover/mg-popover";
-import { MgInputText } from "../../mg-input-text/mg-input-text";
-import { MgMessage } from "../../../mg-message/mg-message";
-import { MgPagination } from "../../../mg-pagination/mg-pagination";
-import { MgButton } from "../../../../atoms/mg-button/mg-button";
-import { MgInputCheckboxPaginated } from "../mg-input-checkbox-paginated/mg-input-checkbox-paginated";
-import { MgPopoverContent } from "../../../mg-popover/mg-popover-content/mg-popover-content";
-mockWindowFrames();
-mockConsoleError();
-const getPage = args => {
-  const page = newSpecPage({
-    components: [MgInputCheckbox, MgPopover, MgPopoverContent, MgInputText, MgMessage, MgPagination, MgButton, MgInputCheckboxPaginated],
-    template: () => h("mg-input-checkbox", Object.assign({}, args)),
-  });
-  jest.runAllTimers();
-  return page;
-};
-describe('mg-input-checkbox', () => {
-  beforeEach(() => {
-    jest.useFakeTimers();
-    setupResizeObserverMock({
-      observe: () => null,
-      disconnect: () => null,
-    });
-  });
-  afterEach(() => jest.runOnlyPendingTimers());
-  const items = [
-    { title: 'batman', value: true },
-    { title: 'robin', value: false, disabled: true },
-    { title: 'joker', value: false },
-    { title: 'bane', value: null },
-  ];
-  describe.each([...checkboxTypes, undefined])('render by type %s', type => {
-    let testValues = [
-      { label: 'label', identifier: 'identifier', value: cloneDeep(items), type },
-      { label: 'label', identifier: 'identifier', value: cloneDeep(items), type, readonly: true },
-      { label: 'label', identifier: 'identifier', value: cloneDeep(items), type, labelOnTop: true },
-      { label: 'label', identifier: 'identifier', value: cloneDeep(items), type, labelHide: true },
-      { label: 'label', identifier: 'identifier', value: cloneDeep(items), type, inputVerticalList: true },
-      { label: 'label', identifier: 'identifier', value: cloneDeep(items), type, required: true },
-      { label: 'label', identifier: 'identifier', value: cloneDeep(items), type, required: true, readonly: true, helpText: 'Hello joker' },
-      { label: 'label', identifier: 'identifier', value: cloneDeep(items), type, required: true, disabled: true, helpText: 'Hello joker' },
-      { label: 'label', identifier: 'identifier', value: cloneDeep(items), type, readonly: true, labelOnTop: true, tooltip: 'Tooltip message' },
-      { label: 'label', identifier: 'identifier', value: cloneDeep(items), type, disabled: true },
-      { label: 'label', identifier: 'identifier', value: cloneDeep(items), type, helpText: 'Hello joker' },
-      { label: 'label', identifier: 'identifier', value: cloneDeep(items), type, tooltip: 'Batman is a DC Comics license' },
-    ];
-    if (type === 'multi') {
-      testValues = [
-        ...testValues,
-        ...[true, false].flatMap(displaySelectedValues => [
-          { label: 'label', identifier: 'identifier', value: cloneDeep(items), type: 'multi', readonly: true },
-          { label: 'label', identifier: 'identifier', value: cloneDeep(items), type: 'multi', disabled: true },
-          { label: 'label', identifier: 'identifier', value: cloneDeep(items), type: 'multi', helpText: 'Hello joker' },
-          { label: 'label', identifier: 'identifier', value: cloneDeep(items), type: 'multi', tooltip: 'Batman is a DC Comics license' },
-        ].map(args => (Object.assign(Object.assign({}, args), { displaySelectedValues })))),
-      ];
-    }
-    test.each(testValues)('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, type, value: cloneDeep(items) });
-      }
-      catch (err) {
-        expect(err.message).toMatch('<mg-input> prop "identifier" is required.');
-      }
-    });
-    test.each(['', ' ', undefined])('Should not render with invalid label property: %s', async (label) => {
-      expect.assertions(1);
-      try {
-        await getPage({ identifier: 'identifier', type, label, value: cloneDeep(items) });
-      }
-      catch (err) {
-        expect(err.message).toMatch('<mg-input> prop "label" is required.');
-      }
-    });
-    test('Should not render when using labelOnTop and labelHide: %s', async () => {
-      expect.assertions(1);
-      try {
-        await getPage({ identifier: 'identifier', type, label: 'label', value: cloneDeep(items), labelOnTop: true, labelHide: true });
-      }
-      catch (err) {
-        expect(err.message).toMatch('<mg-input> prop "labelOnTop" must not be paired with the prop "labelHide".');
-      }
-    });
-    test.each([
-      { identifier: 'identifier', type, label: 'label', value: undefined },
-      { identifier: 'identifier', type, label: 'label', value: ['batman', 'joker', 'bane'] },
-    ])('Should not render with invalid value property: %s', async (args) => {
-      expect.assertions(1);
-      try {
-        await getPage(args);
-      }
-      catch (err) {
-        expect(err.message).toMatch('<mg-input-checkbox> prop "value" is required and all values must be the same type, CheckboxItem.');
-      }
-    });
-    test.each([true, false])('Should trigger events, case validity check %s', async (validity) => {
-      const value = items.map((item, index) => (Object.assign(Object.assign({}, item), { value: false, id: index, required: item.required, disabled: item.disabled, hero: 'batman' })));
-      value[0].value = !validity;
-      const page = await getPage({ label: 'label', type, identifier: 'identifier', helpText: 'My help text', value, required: true });
-      const element = page.doc.querySelector('mg-input-checkbox');
-      const allInputs = element.shadowRoot.querySelectorAll('input');
-      const index = validity ? 2 : 0;
-      const input = allInputs[index];
-      //mock validity
-      allInputs.forEach(input => {
-        input.checkValidity = jest.fn(() => validity);
-        Object.defineProperty(input, 'validity', {
-          get: jest.fn(() => ({
-            valueMissing: !validity,
-          })),
-        });
-      });
-      jest.spyOn(page.rootInstance.valueChange, 'emit');
-      input.dispatchEvent(new CustomEvent('focus', { bubbles: true }));
-      await page.waitForChanges();
-      expect(page.root).toMatchSnapshot(); //Snapshot on focus
-      input.checked = validity;
-      input.dispatchEvent(new CustomEvent('input', { bubbles: true }));
-      const emittedValue = value;
-      emittedValue[index].value = input.checked;
-      await page.waitForChanges();
-      expect(page.rootInstance.valueChange.emit).toHaveBeenCalledWith(emittedValue);
-      input.dispatchEvent(new CustomEvent('blur', { bubbles: true }));
-      await page.waitForChanges();
-      expect(page.root).toMatchSnapshot(); //Snapshot on blur
-    });
-    describe.each(['readonly', 'disabled'])('validity, case next state is %s', nextState => {
-      test.each([
-        { validity: true, valueMissing: false },
-        { validity: false, valueMissing: true },
-        { validity: false, valueMissing: false },
-      ])('validity (%s), valueMissing (%s)', async ({ validity, valueMissing }) => {
-        const value = items.map((item, index) => (Object.assign(Object.assign({}, item), { value: !valueMissing && index === 1 })));
-        const args = { label: 'label', identifier: 'identifier', type, value, helpText: 'My help text', required: true };
-        const page = await getPage(args);
-        const element = page.doc.querySelector('mg-input-checkbox');
-        const allInputs = element.shadowRoot.querySelectorAll('input');
-        const input = allInputs[0];
-        //mock validity
-        allInputs.forEach(input => {
-          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.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', type, value: cloneDeep(items), helpText: 'My help text', required: true });
-      expect(page.root).toMatchSnapshot();
-      const element = page.doc.querySelector('mg-input-checkbox');
-      const inputs = Array.from(element.shadowRoot.querySelectorAll('input'));
-      //mock validity
-      inputs.forEach(input => {
-        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-checkbox> method "setError()" param "valid" must be a boolean',
-      },
-      {
-        valid: undefined,
-        errorMessage: 'Override error',
-        error: '<mg-input-checkbox> method "setError()" param "valid" must be a boolean',
-      },
-      {
-        valid: true,
-        errorMessage: ' ',
-        error: '<mg-input-checkbox> method "setError()" param "errorMessage" must be a string',
-      },
-      {
-        valid: true,
-        errorMessage: true,
-        error: '<mg-input-checkbox> 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', type, value: cloneDeep(items), helpText: 'My help text', required: true });
-        const element = page.doc.querySelector('mg-input-checkbox');
-        await element.setError(params.valid, params.errorMessage);
-        await page.waitForChanges();
-      }
-      catch (err) {
-        expect(err.message).toMatch(params.error);
-      }
-    });
-    test("display error with displayError component's public method", async () => {
-      const value = cloneDeep(items);
-      value[0].value = false;
-      const page = await getPage({ label: 'label', identifier: 'identifier', type, value, helpText: 'My help text', required: true });
-      expect(page.root).toMatchSnapshot();
-      const element = page.doc.querySelector('mg-input-checkbox');
-      const allInputs = element.shadowRoot.querySelectorAll('input');
-      //mock validity
-      allInputs.forEach(input => {
-        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(['fr', 'xx'])('Should render component error with locale: %s', async (lang) => {
-      const value = cloneDeep(items);
-      value[0].value = false;
-      const page = await getPage({ label: 'label', identifier: 'identifier', type, value, helpText: 'My help text', required: true, lang });
-      const element = page.doc.querySelector('mg-input-checkbox');
-      const allInputs = element.shadowRoot.querySelectorAll('input');
-      //mock validity
-      allInputs.forEach(input => {
-        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([[[true, false].flatMap(value => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(item => ({ title: item.toString(), value })))]])('Should render component with locale "fr"', async (value) => {
-      const page = await getPage({ label: 'label', identifier: 'identifier', value, lang: 'fr' });
-      expect(page.root).toMatchSnapshot();
-    });
-    test('Should remove error on input when required change dynamically', async () => {
-      const page = await getPage({
-        label: 'label',
-        identifier: 'identifier',
-        value: [
-          { title: 'batman', value: false },
-          { title: 'robin', value: false },
-        ],
-        required: true,
-        type,
-      });
-      const element = page.doc.querySelector('mg-input-checkbox');
-      const allInputs = element.shadowRoot.querySelectorAll('input');
-      //mock validity
-      allInputs[0].checkValidity = jest
-        .fn()
-        .mockReturnValueOnce(false) //1
-        .mockReturnValueOnce(false) //1
-        .mockReturnValueOnce(true) //2
-        .mockReturnValueOnce(true) //2
-        .mockReturnValueOnce(false) //3
-        .mockReturnValueOnce(false); //3
-      allInputs[1].checkValidity = jest.fn().mockReturnValueOnce(true).mockReturnValueOnce(true); //2
-      Object.defineProperty(allInputs[0], 'validity', {
-        get: jest
-          .fn()
-          .mockReturnValueOnce({
-          valueMissing: true, //1
-        })
-          .mockReturnValueOnce({
-          valueMissing: false, //2
-        })
-          .mockReturnValueOnce({
-          valueMissing: true, //3
-        }),
-      });
-      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('should enable "displaySearchInput" when value list is greater than 10', async () => {
-      const value = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(item => ({
-        title: `item ${item}`,
-        value: false,
-      }));
-      const { root } = await getPage({ label: 'label', identifier: 'identifier', value, type });
-      expect(root).toMatchSnapshot();
-    });
-  });
-  describe('navigation', () => {
-    test('should NOT manage keyboard "tab" navigation on "checkbox" type', async () => {
-      const page = await getPage({ label: 'label', identifier: 'identifier', value: cloneDeep(items), type: 'checkbox', tooltip: 'Tooltip message' });
-      const element = page.doc.querySelector('mg-input-checkbox');
-      const allInputs = Array.from(element.shadowRoot.querySelectorAll('input'));
-      allInputs.forEach(input => input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab' })));
-      jest.runOnlyPendingTimers();
-      await page.waitForChanges();
-      expect(page.root).toMatchSnapshot();
-      allInputs[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab' }));
-      jest.runOnlyPendingTimers();
-      await page.waitForChanges();
-      expect(page.root).toMatchSnapshot();
-    });
-    test.each(['next', 'prev'])('should manage keyboard "tab" navigation on "multi" type', async (direction) => {
-      var _a, e_1, _b, _c;
-      const page = await getPage({
-        label: 'label',
-        identifier: 'identifier',
-        value: [1, 2, 3, 4, 5, 6, 7, 8, 9].map(item => ({
-          title: `item ${item}`,
-          value: false,
-        })),
-        type: 'multi',
-        tooltip: 'Tooltip message',
-      });
-      const element = page.doc.querySelector('mg-input-checkbox');
-      const allInputs = Array.from(element.shadowRoot.querySelectorAll('input'));
-      const button = element.shadowRoot.querySelector('mg-button');
-      const popover = element.shadowRoot.querySelector('mg-popover');
-      button.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-      jest.runOnlyPendingTimers();
-      await page.waitForChanges();
-      expect(popover.display).toEqual(true);
-      if (direction === 'next')
-        try {
-          for (var _d = true, allInputs_1 = __asyncValues(allInputs), allInputs_1_1; allInputs_1_1 = await allInputs_1.next(), _a = allInputs_1_1.done, !_a; _d = true) {
-            _c = allInputs_1_1.value;
-            _d = false;
-            const input = _c;
-            input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab' }));
-          }
-        }
-        catch (e_1_1) {
-          e_1 = { error: e_1_1 };
-        }
-        finally {
-          try {
-            if (!_d && !_a && (_b = allInputs_1.return))
-              await _b.call(allInputs_1);
-          }
-          finally {
-            if (e_1)
-              throw e_1.error;
-          }
-        }
-      else if (direction === 'prev')
-        allInputs[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', shiftKey: true }));
-      jest.runOnlyPendingTimers();
-      await page.waitForChanges();
-      expect(popover.display).toEqual(false);
-    });
-    test('should manage keyboard "shift+tab" navigation on "multi" type', async () => {
-      const page = await getPage({
-        label: 'label',
-        identifier: 'identifier',
-        value: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(item => ({
-          title: `item ${item}`,
-          value: false,
-        })),
-        type: 'multi',
-        tooltip: 'Tooltip message',
-      });
-      const element = page.doc.querySelector('mg-input-checkbox');
-      const searchInput = element.shadowRoot.querySelector('mg-input-text').shadowRoot.querySelector('input');
-      const button = element.shadowRoot.querySelector('mg-button');
-      const popover = element.shadowRoot.querySelector('mg-popover');
-      button.dispatchEvent(new CustomEvent('click', { bubbles: true }));
-      jest.runOnlyPendingTimers();
-      await page.waitForChanges();
-      expect(popover.display).toEqual(true);
-      searchInput.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', shiftKey: true }));
-      jest.runOnlyPendingTimers();
-      await page.waitForChanges();
-      expect(popover.display).toEqual(false);
-    });
-  });
-  test.each([' ', 'batman'])('Should not render with invalid type property: %s', async (type) => {
-    expect.assertions(1);
-    try {
-      await getPage({ identifier: 'identifier', type, label: 'label', value: cloneDeep(items) });
-    }
-    catch (err) {
-      expect(err.message).toMatch('<mg-input-checkbox> prop "type" must be a CheckboxType.');
-    }
-  });
-  test.each([undefined, 'checkbox'])('Should not render with invalid displaySelectedValues and type configuration', async (type) => {
-    expect.assertions(1);
-    try {
-      await getPage({ label: 'label', identifier: 'identifier', type, value: cloneDeep(items), displaySelectedValues: true });
-    }
-    catch (err) {
-      expect(err.message).toMatch('<mg-input-checkbox> prop "displaySelectedValues" can only be used with prop type "multi".');
-    }
-  });
-  describe('multi search', () => {
-    test('should enable return search result and update pagination', async () => {
-      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 => ({
-        title: `item ${item}`,
-        value: false,
-      }));
-      const getResultList = (mgInputCheckbox) => Array.from(mgInputCheckbox.shadowRoot.querySelectorAll('li'));
-      const page = await getPage({ label: 'label', identifier: 'identifier', value });
-      expect(page.root).toMatchSnapshot();
-      const mgInputCheckbox = page.doc.querySelector('mg-input-checkbox');
-      const mgPopover = mgInputCheckbox.shadowRoot.querySelector('mg-popover');
-      const searchInput = mgInputCheckbox.shadowRoot.querySelector('mg-input-text');
-      mgPopover.display = true;
-      await page.waitForChanges();
-      jest.runOnlyPendingTimers();
-      let resultList = getResultList(mgInputCheckbox);
-      expect(resultList.length).toEqual(10);
-      searchInput.dispatchEvent(new CustomEvent('value-change', { detail: '2' }));
-      await page.waitForChanges();
-      resultList = getResultList(mgInputCheckbox);
-      expect(resultList.length).toEqual(4);
-      expect(page.root).toMatchSnapshot();
-      searchInput.dispatchEvent(new CustomEvent('value-change', { detail: '11' }));
-      await page.waitForChanges();
-      resultList = getResultList(mgInputCheckbox);
-      expect(resultList.length).toEqual(1);
-      expect(page.root).toMatchSnapshot();
-      searchInput.dispatchEvent(new CustomEvent('value-change', { detail: '111' }));
-      await page.waitForChanges();
-      resultList = getResultList(mgInputCheckbox);
-      expect(resultList.length).toEqual(0);
-      expect(page.root).toMatchSnapshot();
-      mgPopover.display = false;
-      await page.waitForChanges();
-      jest.runOnlyPendingTimers();
-      expect(searchInput.value).toEqual('');
-      expect(page.root).toMatchSnapshot();
-    });
-    test('should search and update values', async () => {
-      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 => ({
-        title: `item ${item}`,
-        value: false,
-      }));
-      const page = await getPage({ label: 'label', identifier: 'identifier', value });
-      expect(page.root).toMatchSnapshot();
-      const mgInputCheckbox = page.doc.querySelector('mg-input-checkbox');
-      const mgPopover = mgInputCheckbox.shadowRoot.querySelector('mg-popover');
-      const searchInput = mgInputCheckbox.shadowRoot.querySelector('mg-input-text');
-      mgPopover.display = true;
-      await page.waitForChanges();
-      jest.runOnlyPendingTimers();
-      searchInput.dispatchEvent(new CustomEvent('value-change', { detail: '2' }));
-      await page.waitForChanges();
-      const input = mgInputCheckbox.shadowRoot.querySelector('input');
-      input.checkValidity = () => true;
-      input.checked = true;
-      input.dispatchEvent(new CustomEvent('input', { bubbles: true }));
-      await page.waitForChanges();
-      expect(mgInputCheckbox.value.find(item => item.value)).toHaveProperty('title', 'item 2');
-      expect(page.root).toMatchSnapshot();
-      mgPopover.display = false;
-      await page.waitForChanges();
-      jest.runOnlyPendingTimers();
-      expect(page.root).toMatchSnapshot();
-    });
-    test('should navigate across paginated list with mg-pagination', async () => {
-      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 => ({
-        title: `item ${item}`,
-        value: false,
-      }));
-      const getResultList = (mgInputCheckbox) => Array.from(mgInputCheckbox.shadowRoot.querySelectorAll('li'));
-      const page = await getPage({ label: 'label', identifier: 'identifier', value });
-      expect(page.root).toMatchSnapshot();
-      const mgInputCheckbox = page.doc.querySelector('mg-input-checkbox');
-      const mgPopover = mgInputCheckbox.shadowRoot.querySelector('mg-popover');
-      const mgPagination = mgInputCheckbox.shadowRoot.querySelector('mg-pagination');
-      const mgPaginationNext = mgPagination.shadowRoot.querySelector('mg-button:last-of-type');
-      mgPopover.display = true;
-      await page.waitForChanges();
-      jest.runOnlyPendingTimers();
-      let resultList = getResultList(mgInputCheckbox);
-      expect(resultList.length).toEqual(10);
-      mgPaginationNext.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-      await page.waitForChanges();
-      resultList = getResultList(mgInputCheckbox);
-      expect(resultList.length).toEqual(10);
-      expect(page.root).toMatchSnapshot();
-      mgPaginationNext.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-      await page.waitForChanges();
-      resultList = getResultList(mgInputCheckbox);
-      expect(resultList.length).toEqual(1);
-      expect(page.root).toMatchSnapshot();
-    });
-    test('should update all values with mass actions', async () => {
-      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 => ({
-        title: `item ${item}`,
-        value: false,
-      }));
-      const getResultList = (mgInputCheckbox) => Array.from(mgInputCheckbox.shadowRoot.querySelectorAll('input'));
-      const page = await getPage({ label: 'label', identifier: 'identifier', value });
-      expect(page.root).toMatchSnapshot();
-      const mgInputCheckbox = page.doc.querySelector('mg-input-checkbox');
-      const mgPopover = mgInputCheckbox.shadowRoot.querySelector('mg-popover');
-      mgPopover.display = true;
-      await page.waitForChanges();
-      jest.runOnlyPendingTimers();
-      let resultList = getResultList(mgInputCheckbox);
-      expect(resultList.filter(item => item.value === 'true').length).toEqual(0);
-      expect(mgInputCheckbox.value.filter(item => item.value).length).toEqual(0);
-      expect(page.root).toMatchSnapshot();
-      const selectAllButton = mgInputCheckbox.shadowRoot.querySelector('mg-input-checkbox-paginated:last-of-type mg-button');
-      selectAllButton.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-      await page.waitForChanges();
-      resultList = getResultList(mgInputCheckbox);
-      expect(resultList.filter(item => item.value === 'true').length).toEqual(10);
-      expect(mgInputCheckbox.value.filter(item => item.value).length).toEqual(21);
-      expect(page.root).toMatchSnapshot();
-      const unselectAllButton = Array.from(mgInputCheckbox.shadowRoot.querySelectorAll('mg-input-checkbox-paginated .mg-c-input__input-checkbox-multi-section-header mg-button:last-of-type')).find(button => button.textContent === 'Unselect all');
-      unselectAllButton.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-      await page.waitForChanges();
-      resultList = getResultList(mgInputCheckbox);
-      expect(resultList.filter(item => item.value === 'true').length).toEqual(0);
-      expect(mgInputCheckbox.value.filter(item => item.value).length).toEqual(0);
-      expect(page.root).toMatchSnapshot();
-    });
-    test('should toggle selected items section', async () => {
-      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),
-      }));
-      const page = await getPage({ label: 'label', identifier: 'identifier', value });
-      const mgInputCheckbox = page.doc.querySelector('mg-input-checkbox');
-      const mgPopover = mgInputCheckbox.shadowRoot.querySelector('mg-popover');
-      mgPopover.display = true;
-      await page.waitForChanges();
-      jest.runOnlyPendingTimers();
-      const sections = Array.from(mgInputCheckbox.shadowRoot.querySelectorAll('mg-input-checkbox-paginated'));
-      expect(sections.length).toEqual(2);
-      for (const [i, section] of sections.entries()) {
-        const firstButton = section.querySelector('mg-button');
-        const sectionContent = section.querySelector('.mg-c-input__input-checkbox-multi-section-content');
-        expect(sectionContent).not.toHaveAttribute('hidden');
-        firstButton.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-        await page.waitForChanges();
-        if (i !== 0) {
-          expect(sectionContent).not.toHaveAttribute('hidden');
-        }
-        else {
-          expect(sectionContent).toHaveAttribute('hidden');
-        }
-        expect(page.root).toMatchSnapshot();
-      }
-    });
-    test('should go to previous page when last item is checked', async () => {
-      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 => ({
-        title: `item ${item}`,
-        value: false,
-      }));
-      const page = await getPage({ label: 'label', identifier: 'identifier', value });
-      const getResultList = (mgInputCheckbox) => Array.from(mgInputCheckbox.shadowRoot.querySelectorAll('input'));
-      const mgInputCheckbox = page.doc.querySelector('mg-input-checkbox');
-      const mgPopover = mgInputCheckbox.shadowRoot.querySelector('mg-popover');
-      const mgPagination = mgInputCheckbox.shadowRoot.querySelector('mg-pagination:last-of-type');
-      const mgPaginationNext = mgPagination.shadowRoot.querySelector('mg-button:last-of-type');
-      mgPopover.display = true;
-      await page.waitForChanges();
-      jest.runOnlyPendingTimers();
-      let resultList = getResultList(mgInputCheckbox);
-      expect(resultList.length).toEqual(10);
-      mgPaginationNext.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-      await page.waitForChanges();
-      mgPaginationNext.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-      await page.waitForChanges();
-      resultList = Array.from(mgInputCheckbox.shadowRoot.querySelectorAll('mg-input-checkbox-paginated:last-of-type input'));
-      expect(resultList.length).toEqual(1);
-      expect(page.root).toMatchSnapshot();
-      const input = mgInputCheckbox.shadowRoot.querySelector('input');
-      input.checkValidity = () => true;
-      input.checked = true;
-      input.dispatchEvent(new CustomEvent('input', { bubbles: true }));
-      await page.waitForChanges();
-      const firstSectionInputs = mgInputCheckbox.shadowRoot.querySelectorAll('mg-input-checkbox-paginated:first-of-type input');
-      const lastSectionInputs = mgInputCheckbox.shadowRoot.querySelectorAll('mg-input-checkbox-paginated:last-of-type input');
-      expect(firstSectionInputs.length).toEqual(1);
-      expect(lastSectionInputs.length).toEqual(10);
-      expect(page.root).toMatchSnapshot();
-    });
-  });
-});
-//# sourceMappingURL=mg-input-checkbox.spec.js.map