@mgdis/mg-components 5.16.0 → 5.17.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-input-select.js","sourceRoot":"","sources":["../../../../../src/components/molecules/inputs/mg-input-select/mg-input-select.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Component, Element, Event, h, Prop, State, EventEmitter, Watch, Method } from '@stencil/core';\nimport { MgInput } from '../MgInput';\nimport { Width } from '../MgInput.conf';\nimport { ClassList, allItemsAreString } from '../../../../utils/components.utils';\nimport { initLocales } from '../../../../locales';\nimport { SelectOption, OptGroup } from './mg-input-select.conf';\n\n/**\n * Check if item is a well configured option\n * @param option - select option\n * @returns select option type is valid\n */\nconst isOption = (option: unknown): option is SelectOption => typeof option === 'object' && typeof (option as SelectOption).title === 'string';\n\n/**\n * Check if items[] is SelectOption\n * @param items - select option\n * @returns select option array type is valid\n */\nconst allItemsAreOptions = (items: unknown[]): items is SelectOption[] => Array.isArray(items) && items.every(item => isOption(item));\n\n/**\n * Check if item is a well configured optgroup\n * @param optgroup - select option\n * @returns select optgroup type is valid\n */\nconst isOptGroup = (optgroup: unknown): optgroup is OptGroup =>\n  typeof optgroup === 'object' && typeof (optgroup as OptGroup).group === 'string' && allItemsAreOptions((optgroup as OptGroup).options);\n\n/**\n * Group options\n * @param acc - reduce accumulator\n * @param item - item to add\n * @returns grouped options\n */\nconst groupOptions = (acc: (SelectOption | OptGroup)[], { group, title, value, disabled }: SelectOption): (SelectOption | OptGroup)[] => {\n  if (group !== undefined) {\n    // Check if group is already created\n    const optGroup: OptGroup = (acc as OptGroup[]).find(grp => grp.group === group);\n    // Add to group\n    if (optGroup !== undefined) {\n      optGroup.options.push({ title, value, disabled });\n    }\n    // Create group\n    else {\n      acc.push({ group, options: [{ title, value, disabled }] });\n    }\n  } else {\n    acc.push({ title, value, disabled });\n  }\n  return acc;\n};\n\n@Component({\n  tag: 'mg-input-select',\n  styleUrl: 'mg-input-select.scss',\n  shadow: true,\n})\nexport class MgInputSelect {\n  /************\n   * Internal *\n   ************/\n\n  // HTML selector\n  private input: HTMLSelectElement;\n\n  // Locales\n  private messages;\n\n  // hasDisplayedError (triggered by blur event)\n  private hasDisplayedError = false;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgInputSelectElement;\n\n  /**\n   * Component value\n   */\n  @Prop({ mutable: true }) value: any;\n  @Watch('value')\n  validateValue(newValue: MgInputSelect['value']): void {\n    if (allItemsAreString(this.items) && typeof newValue === 'string') {\n      this.readonlyValue = Boolean(this.input?.value) ? this.input.value : newValue;\n    } else if (allItemsAreOptions(this.items)) {\n      this.readonlyValue = this.items.find(item => item.value === newValue)?.title;\n    } else {\n      this.readonlyValue = null;\n    }\n    this.valueChange.emit(newValue);\n  }\n\n  /**\n   * Items are the possible options to select\n   */\n  @Prop() items!: (string | SelectOption)[];\n  @Watch('items')\n  validateItems(newValue: MgInputSelect['items']): void {\n    // Empty options\n    if (newValue.length === 0) {\n      this.options = [];\n    }\n    // String array\n    else if (allItemsAreString(newValue)) {\n      if (typeof this.value === 'string') this.valueExist = newValue.includes(this.value);\n      this.options = newValue.map(item => ({ title: item, value: item }));\n    }\n    // Object array\n    else if (allItemsAreOptions(newValue)) {\n      this.valueExist = newValue.map(item => item.value).includes(this.value);\n      // Grouped object options\n      if (newValue.some(item => Boolean(item.group))) {\n        this.options = newValue.reduce(groupOptions, []);\n      }\n      // Standart object options\n      else {\n        this.options = newValue;\n      }\n    } else {\n      throw new Error('<mg-input-select> prop \"items\" is required, can be an empty Array or all items must be the same type: string or Option.');\n    }\n  }\n\n  /**\n   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n   */\n  @Prop() identifier!: string;\n\n  /**\n   * Input name\n   * If not set the value equals the identifier\n   */\n  @Prop() name = this.identifier;\n\n  /**\n   * Input label\n   */\n  @Prop() label!: string;\n\n  /**\n   * Define if label is displayed on top\n   */\n  @Prop() labelOnTop: boolean;\n\n  /**\n   * Define if label is visible\n   */\n  @Prop() labelHide = false;\n\n  /**\n   * Input placeholder.\n   * It should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n   */\n  @Prop({ mutable: true }) placeholder: string;\n\n  /**\n   * Option to remove placeholder\n   */\n  @Prop() placeholderHide = false;\n\n  /**\n   * Option to disable placeholder\n   */\n  @Prop() placeholderDisabled = false;\n\n  /**\n   * Define if input is required\n   */\n  @Prop() required = false;\n\n  /**\n   * Define if input is readonly\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Define if input is disabled\n   */\n  @Prop() disabled = false;\n  @Watch('required')\n  @Watch('readonly')\n  @Watch('disabled')\n  handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void {\n    if (this.input !== undefined) {\n      this.input[prop] = newValue;\n      this.checkValidity();\n      if (this.hasDisplayedError) {\n        this.setErrorMessage();\n        this.hasDisplayedError = false;\n      }\n    }\n  }\n\n  /**\n   * Define input width\n   */\n  @Prop({ reflect: true }) mgWidth: Width;\n\n  /**\n   * Add a tooltip message next to the input\n   */\n  @Prop() tooltip: string;\n\n  /**\n   * Add a help text under the input, usually expected data format and example\n   */\n  @Prop() helpText: string;\n\n  /**\n   * Define input valid state\n   */\n  @Prop({ mutable: true }) valid: boolean;\n\n  /**\n   * Define input invalid state\n   */\n  @Prop({ mutable: true }) invalid: boolean;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-input--select']);\n\n  /**\n   * Error message to display\n   */\n  @State() errorMessage: string;\n\n  /**\n   * Formated items for display\n   */\n  @State() options: (SelectOption | OptGroup)[];\n\n  /**\n   * Does value match any item option\n   */\n  @State() valueExist: boolean;\n\n  /**\n   * Does value match any item option\n   */\n  @State() readonlyValue: string;\n\n  /**\n   * Emited event when value change\n   */\n  @Event({ eventName: 'value-change' }) valueChange: EventEmitter<MgInputSelect['value']>;\n\n  /**\n   * Emited event when checking validity\n   */\n  @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<boolean>;\n\n  /**\n   * Public method to display errors\n   */\n  @Method()\n  async displayError(): Promise<void> {\n    this.checkValidity();\n    this.setErrorMessage();\n    this.hasDisplayedError = this.invalid;\n  }\n\n  /**\n   * Handle input event\n   */\n  private handleInput = (): void => {\n    this.updateValue();\n    if (this.hasDisplayedError) this.setErrorMessage();\n  };\n\n  /**\n   * Method to compare item.title with input.value\n   * @param item - item to compare with\n   * @returns truthy if input.value is an item\n   */\n  private isInputValue = (item: SelectOption): boolean => item.title === this.input?.value;\n\n  /**\n   * value props setter\n   * @param newValue - value to update with\n   */\n  private setValue = (newValue: MgInputSelect['value']): void => {\n    this.checkValidity();\n    this.value = newValue;\n  };\n\n  /**\n   * Update value from input.value\n   */\n  private updateValue = (): void => {\n    if (this.input.value === '') {\n      this.setValue(null);\n    } else if (allItemsAreString(this.items) && this.items.includes(this.input.value)) {\n      this.setValue(this.input.value);\n    } else if (allItemsAreOptions(this.items) && typeof this.input.value === 'string' && this.items.some(this.isInputValue)) {\n      this.setValue(this.items.find(this.isInputValue).value);\n    } else {\n      // before set newValue with push to options[] the unknown input.value with a disable satus\n      this.options.push({ title: this.input.value, value: this.input.value, disabled: true });\n      this.setValue(this.input.value);\n    }\n  };\n\n  /**\n   * Handle blur event\n   */\n  private handleBlur = (): void => {\n    this.displayError();\n  };\n\n  /**\n   * Input value is disabled\n   * @returns truthy if input value is disabled\n   */\n  private isDisabledValue = (): boolean => allItemsAreOptions(this.options) && this.options.find(this.isInputValue)?.disabled === true;\n\n  /**\n   * Check if input is valid\n   */\n  private checkValidity = (): void => {\n    this.valid = !this.isDisabledValue() && (this.readonly || this.disabled || (this.input?.checkValidity !== undefined ? this.input.checkValidity() : true));\n    this.invalid = !this.valid;\n    // We need to send valid event even if it is the same value\n    this.inputValid.emit(this.valid);\n  };\n\n  /**\n   * Set input error message\n   */\n  private setErrorMessage = (): void => {\n    // Set error message\n    this.errorMessage = undefined;\n    if (!this.valid && this.input.validity.valueMissing) {\n      this.errorMessage = this.messages.errors.required;\n    }\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   * @returns timeout\n   */\n  componentWillLoad(): ReturnType<typeof setTimeout> {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n    // Validate\n    this.validateItems(this.items);\n    this.validateValue(this.value);\n    // Set default placeholder\n    if (this.placeholder === undefined || this.placeholder === '') {\n      this.placeholder = this.messages.input.select.placeholder;\n    }\n    // Check validity when component is ready\n    // return a promise to process action only in the FIRST render().\n    // https://stenciljs.com/docs/component-lifecycle#componentwillload\n    return setTimeout(() => {\n      this.checkValidity();\n    }, 0);\n  }\n\n  /**\n   * Render option\n   * @param option - to render\n   * @returns render option\n   */\n  private renderOption = (option: SelectOption): HTMLElement => (\n    <option key={option.title} value={option.title} selected={JSON.stringify(this.value) === JSON.stringify(option.value)} disabled={option.disabled}>\n      {option.title}\n    </option>\n  );\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <MgInput\n        identifier={this.identifier}\n        classCollection={this.classCollection}\n        ariaDescribedbyIDs={[]}\n        label={this.label}\n        labelOnTop={this.labelOnTop}\n        labelHide={this.labelHide}\n        required={this.required}\n        readonly={this.readonly}\n        mgWidth={this.mgWidth}\n        disabled={this.disabled}\n        value={undefined}\n        readonlyValue={this.readonlyValue}\n        tooltip={this.tooltip}\n        helpText={this.helpText}\n        errorMessage={this.errorMessage}\n        isFieldset={false}\n      >\n        <select\n          class=\"mg-input__box\"\n          id={this.identifier}\n          name={this.name}\n          title={this.placeholder}\n          disabled={this.disabled}\n          required={this.required}\n          onInput={this.handleInput}\n          onBlur={this.handleBlur}\n          ref={(el: HTMLSelectElement) => {\n            if (el !== null) this.input = el;\n          }}\n        >\n          {(!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder\n            <option value=\"\" disabled={this.placeholderDisabled && this.valueExist}>\n              {this.placeholder}\n            </option>\n          )}\n          {this.options.map(option =>\n            isOptGroup(option) ? <optgroup label={option.group}>{option.options.map(this.renderOption)}</optgroup> : isOption(option) && this.renderOption(option),\n          )}\n        </select>\n      </MgInput>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,194 @@
+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

@@ -0,0 +1 @@
+{"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":"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","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

@@ -0,0 +1,344 @@
+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(['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