@scania/tegel 1.3.3 → 1.5.0

package/dist/collection/components/dropdown/dropdown.stories.js

@@ -1,248 +0,0 @@
-import readme from "./readme.md";
-import readmeDropdownOption from "./dropdown-option/readme.md";
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-import { ComponentsFolder } from "../../utils/constants";
-export default {
-  title: `${ComponentsFolder}/Dropdown`,
-  parameters: {
-    layout: 'centered',
-    notes: { 'Dropdown': readme, 'Dropdown option': readmeDropdownOption },
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9754%3A22916&t=M7Ova7xZaoeMwb5e-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9754%3A22916&t=M7Ova7xZaoeMwb5e-1',
-      },
-    ],
-  },
-  argTypes: {
-    modeVariant: {
-      name: 'Mode variant',
-      description: 'Mode variant of the component.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Inherit from parent', 'Primary', 'Secondary'],
-      table: {
-        defaultValue: { summary: 'Inherit from parent' },
-      },
-    },
-    error: {
-      name: 'Error',
-      description: 'Sets the Dropdown in an error state.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: 'false' },
-      },
-    },
-    filter: {
-      name: 'Filter',
-      description: 'Adds filter functionality to the Dropdown.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: 'false' },
-      },
-    },
-    normalizeText: {
-      name: 'Normalize text',
-      description: 'Should search be normalized',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: 'true' },
-      },
-    },
-    multiselect: {
-      name: 'Multiselect',
-      description: 'Adds multiselect functionality to the Dropdown.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: 'false' },
-      },
-    },
-    size: {
-      name: 'Size',
-      description: 'Size of the Dropdown.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Large', 'Medium', 'Small'],
-      table: {
-        defaultValue: { summary: 'lg' },
-      },
-    },
-    labelText: {
-      name: 'Label text',
-      control: 'text',
-      description: 'Label text helps to describe what the Dropdown contains',
-      if: { arg: 'labelPosition', neq: 'None' },
-    },
-    labelPosition: {
-      name: 'Label position',
-      description: 'Label text position',
-      control: {
-        type: 'radio',
-      },
-      options: ['Outside', 'Inside', 'None'],
-      table: {
-        defaultValue: { summary: 'null' },
-      },
-    },
-    helperText: {
-      name: 'Helper text',
-      description: 'Helper text assists the user with additional information about the Dropdown.',
-      control: 'text',
-    },
-    placeholder: {
-      name: 'Placeholder',
-      type: 'string',
-      description: 'Placeholder text when no option is selected',
-    },
-    disabled: {
-      name: 'Disabled',
-      description: 'Disables the component',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: 'false' },
-      },
-    },
-    openDirection: {
-      name: 'Open direction',
-      description: 'The direction the Dropdown will open.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Auto', 'Up', 'Down'],
-      table: {
-        summary: {
-          defaultValue: 'auto',
-        },
-      },
-    },
-    defaultOption: {
-      name: 'Default options',
-      description: 'Sets a pre-selected option.',
-      control: {
-        type: 'radio',
-      },
-      options: ['No default', 'Option 1', 'Option 2', 'Option 3'],
-      if: { arg: 'multiselect', eq: false },
-    },
-    multiDefaultOption: {
-      name: 'Default options',
-      description: 'Sets a pre-selected option.',
-      control: {
-        type: 'check',
-      },
-      options: ['Option 1', 'Option 2', 'Option 3', 'Option 4'],
-      if: { arg: 'multiselect', eq: true },
-    },
-  },
-  args: {
-    modeVariant: 'Inherit from parent',
-    error: false,
-    filter: false,
-    normalizeText: true,
-    multiselect: false,
-    size: 'Large',
-    labelText: 'Label text',
-    labelPosition: 'Outside',
-    helperText: 'Helper text',
-    placeholder: 'Placeholder',
-    disabled: false,
-    openDirection: 'Auto',
-    defaultOption: 'No default',
-  },
-};
-const sizeLookUp = {
-  Large: 'lg',
-  Medium: 'md',
-  Small: 'sm',
-};
-const defaultOptionLookUp = {
-  'Option 1': 'option-1',
-  'Option 2': 'option-2',
-  'Option 3': 'option-3',
-  'Option 4': 'option-4',
-  'îles Åland': 'iles-aland',
-};
-const getMultiselectDefaultValue = (multiDefaultOption) => multiDefaultOption.map((item) => defaultOptionLookUp[item]);
-const Template = ({ placeholder, labelText, labelPosition, helperText, size, error, filter, normalizeText, multiselect, openDirection, modeVariant, disabled, defaultOption, multiDefaultOption, }) => formatHtmlPreview(`
-  <style>
-  /* demo-wrapper is for demonstration purposes only*/
-  .demo-wrapper {
-    width: 300px;
-    height:200px;
-  }
-  .hej {
-    margin-top: 79px;
-  }
-  </style>
-
-    <div class="demo-wrapper">
-        <tds-dropdown
-        ${defaultOption && defaultOption !== 'No default'
-  ? `default-value="${defaultOptionLookUp[defaultOption]}"`
-  : ''}
-        ${multiDefaultOption
-  ? `default-value="${getMultiselectDefaultValue(multiDefaultOption)}"`
-  : ''}
-        ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
-          name="dropdown"
-          label="${labelText}"
-          ${labelPosition && labelPosition !== 'None'
-  ? `label-position="${labelPosition.toLowerCase()}"`
-  : ''}
-          placeholder="${placeholder}"
-          helper="${helperText}"
-          size="${sizeLookUp[size]}"
-          ${error ? 'error' : ''}
-          ${filter ? 'filter' : ''}
-          ${normalizeText ? '' : `normalize-text="false"`}
-          ${multiselect ? 'multiselect' : ''}
-          ${disabled ? 'disabled' : ''}
-          open-direction="${openDirection.toLowerCase()}"
-          >
-            <tds-dropdown-option value="option-1">
-              Option 1
-            </tds-dropdown-option>
-            <tds-dropdown-option disabled value="option-2">
-              Option 2
-            </tds-dropdown-option>
-            <tds-dropdown-option value="option-3">
-              Option 3
-            </tds-dropdown-option>
-            <tds-dropdown-option value="option-4">
-              Option 4
-            </tds-dropdown-option>
-            <tds-dropdown-option value="iles-aland">
-              îles Åland
-            </tds-dropdown-option>
-        </tds-dropdown>
-    </div>
-
-    <script>
-      dropdown = document.querySelector('tds-dropdown')
-
-      dropdown.addEventListener('tdsChange', (event) => {
-        console.log(event)
-      })
-
-    </script>
-        
-  `);
-export const Default = Template.bind({});

package/dist/collection/components/dropdown/test/basic/dropdown.e2e.js

@@ -1,41 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/dropdown/test/basic/index.html';
-test.describe('tds-dropdown-basic', () => {
-  test('renders basic dropdown correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const dropdown = page.getByTestId('tds-dropdown-testid');
-    await expect(dropdown).toHaveCount(1);
-    /* check diff in screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-  test('should find label and not exist', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const labelText = page.getByText(/Label text/);
-    await expect(labelText).toHaveCount(0);
-  });
-  test('find helper text and check not exist', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const helperText = page.getByText(/Helper text/);
-    await expect(helperText).toHaveCount(0);
-  });
-  test('have the button to be visible', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const dropdownButton = page.getByRole('button').first();
-    await expect(dropdownButton).toBeVisible();
-  });
-  test('clicking the dropdown button opens the dropdown-list', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const dropdownButton = page.getByRole('button').first();
-    const dropdownListElementOne = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: 'Option 1' });
-    await expect(dropdownListElementOne).toBeHidden();
-    await dropdownButton.click();
-    /* before clicking dropdownlist should not be visible, the button should be */
-    await expect(dropdownButton).toBeVisible();
-    await expect(dropdownListElementOne).toBeVisible();
-    /* checks diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-});

package/dist/collection/components/dropdown/test/default/dropdown.e2e.js

@@ -1,76 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/dropdown/test/default/index.html';
-test.describe('tds-dropdown-default', () => {
-  test('renders default dropdown correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const dropdown = page.getByTestId('tds-dropdown-testid');
-    await expect(dropdown).toHaveCount(1);
-    /* check diff in screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-  test('should find label and be visible', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const labelText = page.getByText(/Label text/);
-    await expect(labelText).toBeVisible();
-  });
-  test('find helper text and check if visible', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const helperText = page.getByText(/Helper text/);
-    await expect(helperText).toBeVisible();
-  });
-  test('have the placeholder="Placeholder" text', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
-    await expect(dropdownButton).toBeVisible();
-  });
-  test('clicking the dropdown button opens the dropdown-list', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
-    const dropdownListElementOne = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: 'Option 1' });
-    await expect(dropdownListElementOne).toBeHidden();
-    await dropdownButton.click();
-    /* before clicking dropdownlist should not be visible, the button should be */
-    await expect(dropdownButton).toBeVisible();
-    await expect(dropdownListElementOne).toBeVisible();
-    /* checks diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-  test('clicking the dropdown opens the dropdown-list, then click Option 1', async ({ page }) => {
-    await page.goto(componentTestPath);
-    /* click the dropdown button */
-    const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
-    await dropdownButton.click();
-    /* Click the Option 1 button */
-    const dropdownListElementOneButton = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: /Option 1/ })
-      .getByRole('button');
-    await dropdownListElementOneButton.click();
-    await expect(dropdownListElementOneButton).toBeHidden();
-    const dropdownButtonWithOption1 = page.getByRole('button', { name: 'Option 1' });
-    await expect(dropdownButtonWithOption1.first()).toBeVisible();
-    /* also check screenshot diff to make sure it says Option 1 */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-  test('clicking the dropdown opens the dropdown-list, then click an option 2 that is disabled should not close it', async ({ page, }) => {
-    await page.goto(componentTestPath);
-    const dropdownListElementTwoButton = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: /Option 2/ });
-    const dropdownButtonElement = page.getByRole('button', { name: 'Placeholder' });
-    /* before clicking dropdownlist should not be visible, the button should be */
-    await expect(dropdownButtonElement).toBeVisible();
-    await expect(dropdownListElementTwoButton).toBeHidden();
-    /* after clicking dropdownlist should be visible, the button should also be */
-    await dropdownButtonElement.click();
-    await expect(dropdownButtonElement).toBeVisible();
-    await expect(dropdownListElementTwoButton).toBeVisible();
-    /* after clicking option 2 that is disabled list should be visible and also button should be */
-    await dropdownListElementTwoButton.click();
-    await expect(dropdownButtonElement).toBeVisible();
-    await expect(dropdownListElementTwoButton).toBeVisible();
-  });
-});

package/dist/collection/components/dropdown/test/error/dropdown.e2e.js

@@ -1,36 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/dropdown/test/error/index.html';
-test.describe('tds-dropdown-error', () => {
-  test('renders error dropdown correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const dropdown = page.getByTestId('tds-dropdown-testid');
-    await expect(dropdown).toHaveCount(1);
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-  test('find helper text and check if visible and have icon', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const helperText = page.getByText(/Helper text/);
-    await expect(helperText).toBeVisible();
-    const helperTextIcon = helperText.getByRole('img');
-    await expect(helperTextIcon).toHaveCount(1);
-  });
-  test('clicking the dropdown opens the dropdown-list', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const dropdownListElementOneButton = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: /Option 1/ })
-      .getByRole('button');
-    const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
-    /* before clicking dropdownlist should not be visible, the button should be */
-    await expect(dropdownButton).toBeVisible();
-    await expect(dropdownListElementOneButton).toBeHidden();
-    await dropdownButton.click();
-    /* after clicking dropdownlist should be visible, the button should also be */
-    await expect(dropdownButton).toBeVisible();
-    await expect(dropdownListElementOneButton).toBeVisible();
-    /* check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-});

package/dist/collection/components/dropdown/test/filter/dropdown.e2e.js

@@ -1,56 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/dropdown/test/filter/index.html';
-test.describe('tds-dropdown-filter', () => {
-  test('renders filter dropdown correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const dropdown = page.getByTestId('tds-dropdown-testid');
-    await expect(dropdown).toHaveCount(1);
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-  test('clicking the dropdown opens the dropdown-list, then start typing "iles" to only show that option in the dropdown list', async ({ page, }) => {
-    await page.goto(componentTestPath);
-    const inputElement = page.getByRole('textbox');
-    const dropdownListElementOneButton = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: /Option 1/ });
-    const dropdownListElementTwoButton = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: /Option 2/ });
-    const dropdownListElementThreeButton = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: /Option 3/ });
-    const dropdownListElementFourButton = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: /Option 4/ });
-    const dropdownListElementFiveButton = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: /îles Åland/ });
-    /* before clicking dropdownlist should not be visible, the button should be */
-    await expect(inputElement).toBeVisible();
-    await expect(dropdownListElementOneButton).toBeHidden();
-    await expect(dropdownListElementTwoButton).toBeHidden();
-    await expect(dropdownListElementThreeButton).toBeHidden();
-    await expect(dropdownListElementFourButton).toBeHidden();
-    await expect(dropdownListElementFiveButton).toBeHidden();
-    /* Clicking the input element should show the dropdown list and all its content */
-    await inputElement.click();
-    await expect(inputElement).toBeVisible();
-    await expect(dropdownListElementOneButton).toBeVisible();
-    await expect(dropdownListElementTwoButton).toBeVisible();
-    await expect(dropdownListElementThreeButton).toBeVisible();
-    await expect(dropdownListElementFourButton).toBeVisible();
-    await expect(dropdownListElementFiveButton).toBeVisible();
-    /* Add text and only Option 1 should be visible */
-    await inputElement.fill('iles');
-    await expect(inputElement).toBeVisible();
-    await expect(dropdownListElementOneButton).toBeHidden();
-    await expect(dropdownListElementTwoButton).toBeHidden();
-    await expect(dropdownListElementThreeButton).toBeHidden();
-    await expect(dropdownListElementFourButton).toBeHidden();
-    await expect(dropdownListElementFiveButton).toBeVisible();
-    /* Check diff on screenshot after adding text */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-});

package/dist/collection/components/dropdown/test/filter/normalize-text-false/dropdown.e2e.js

@@ -1,43 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/dropdown/test/filter/normalize-text-false/index.html';
-test.describe('tds-dropdown-filter', () => {
-  test('renders filter dropdown correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const dropdown = page.getByTestId('tds-dropdown-testid');
-    await expect(dropdown).toHaveCount(1);
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-  test('typing "iles" should not show anything in dropdown with normalize text set to false', async ({ page, }) => {
-    await page.goto(componentTestPath);
-    const inputElement = page.getByRole('textbox');
-    const dropdownListElementOneButton = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: /Option 1/ });
-    const dropdownListElementTwoButton = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: /Option 2/ });
-    const dropdownListElementThreeButton = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: /Option 3/ });
-    const dropdownListElementFourButton = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: /Option 4/ });
-    const dropdownListElementFiveButton = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: /îles Åland/ });
-    /* Add text and only Option 1 should be visible */
-    await inputElement.fill('iles');
-    await expect(inputElement).toBeVisible();
-    await expect(dropdownListElementOneButton).toBeHidden();
-    await expect(dropdownListElementTwoButton).toBeHidden();
-    await expect(dropdownListElementThreeButton).toBeHidden();
-    await expect(dropdownListElementFourButton).toBeHidden();
-    await expect(dropdownListElementFiveButton).toBeHidden();
-    const noResult = page.getByText('No result');
-    await expect(noResult).toBeVisible();
-    /* Check diff on screenshot after adding text */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-});

package/dist/collection/components/dropdown/test/multiselect/dropdown.e2e.js

@@ -1,81 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/dropdown/test/multiselect/index.html';
-test.describe('tds-dropdown-multiselect', () => {
-  test('renders multiselect dropdown correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const dropdown = page.getByTestId('tds-dropdown-testid');
-    await expect(dropdown).toHaveCount(1);
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-  test('clicking the dropdown opens the dropdown-list, then click Option 1, should not close it', async ({ page, }) => {
-    await page.goto(componentTestPath);
-    /* click the dropdown button */
-    const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
-    await dropdownButton.click();
-    /* Click the Option 1 button */
-    const dropdownListElementOneButton = page
-      .locator('tds-dropdown-option')
-      .filter({ hasText: /Option 1/ });
-    await dropdownListElementOneButton.click();
-    await expect(dropdownListElementOneButton).toBeVisible();
-    const dropdownButtonWithOption1 = page.getByRole('button', { name: 'Option 1' });
-    await expect(dropdownButtonWithOption1.first()).toBeVisible();
-    /* also check screenshot diff to make sure it says Option 1 */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-  test('clicking the dropdown opens the dropdown-list, then click on all the options', async ({ page, }) => {
-    await page.goto(componentTestPath);
-    /* click the button */
-    const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
-    await dropdownButton.click();
-    /* get all checkboxes */
-    const dropdownListElementOneButton = page
-      .getByText(/Option 1/)
-      .filter({ has: page.getByRole('checkbox') });
-    const dropdownListElementTwoButton = page
-      .getByText(/Option 2/)
-      .filter({ has: page.getByRole('checkbox') });
-    const dropdownListElementThreeButton = page
-      .getByText(/Option 3/)
-      .filter({ has: page.getByRole('checkbox') });
-    const dropdownListElementFourButton = page
-      .getByText(/Option 4/)
-      .filter({ has: page.getByRole('checkbox') });
-    await expect(dropdownListElementOneButton).toHaveCount(1);
-    await expect(dropdownListElementTwoButton).toHaveCount(1);
-    await expect(dropdownListElementThreeButton).toHaveCount(1);
-    await expect(dropdownListElementFourButton).toHaveCount(1);
-    /* check each one and see that it updates correctly */
-    await dropdownListElementOneButton.click();
-    await expect(dropdownListElementOneButton).toHaveAttribute('aria-selected');
-    await expect(dropdownListElementTwoButton).not.toHaveAttribute('aria-selected');
-    await expect(dropdownListElementThreeButton).not.toHaveAttribute('aria-selected');
-    await expect(dropdownListElementFourButton).not.toHaveAttribute('aria-selected');
-    const inputText = page.getByRole('button', { name: /Option 1/ });
-    await expect(inputText).toHaveCount(1);
-    await dropdownListElementTwoButton.click();
-    await expect(dropdownListElementOneButton).toHaveAttribute('aria-selected');
-    await expect(dropdownListElementTwoButton).not.toHaveAttribute('aria-selected');
-    await expect(dropdownListElementThreeButton).not.toHaveAttribute('aria-selected');
-    await expect(dropdownListElementFourButton).not.toHaveAttribute('aria-selected');
-    await expect(inputText).toHaveCount(1);
-    await dropdownListElementThreeButton.click();
-    await expect(dropdownListElementOneButton).toHaveAttribute('aria-selected');
-    await expect(dropdownListElementTwoButton).not.toHaveAttribute('aria-selected');
-    await expect(dropdownListElementThreeButton).toHaveAttribute('aria-selected');
-    await expect(dropdownListElementFourButton).not.toHaveAttribute('aria-selected');
-    const inputText2 = page.getByRole('button', { name: /Option 1,Option 3/ });
-    await expect(inputText2).toHaveCount(1);
-    await dropdownListElementFourButton.click();
-    await expect(dropdownListElementOneButton).toHaveAttribute('aria-selected');
-    await expect(dropdownListElementTwoButton).not.toHaveAttribute('aria-selected');
-    await expect(dropdownListElementThreeButton).toHaveAttribute('aria-selected');
-    await expect(dropdownListElementFourButton).toHaveAttribute('aria-selected');
-    const inputText3 = page.getByRole('button', { name: /Option 1,Option 3,Option 4/ });
-    await expect(inputText3).toHaveCount(1);
-    /* also check screenshot diff to make sure */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-});