@scania/tegel 1.4.0 → 1.5.0

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

@@ -1,260 +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',
-        },
-        noResultText: {
-            name: 'No result message',
-            type: 'string',
-            description: 'Message that appears when no results match criteria in filter feature',
-            table: {
-                defaultValue: { summary: 'No result' },
-            },
-            control: 'text',
-            if: { arg: 'filter', eq: true },
-        },
-        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,
-        noResultText: 'No result',
-        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, noResultText, }) => 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' : ''}
-          ${filter ? `no-result-text="${noResultText}"` : ''}
-          ${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/hide-no-result-message/dropdown.e2e.js

@@ -1,23 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/dropdown/test/filter/hide-no-result-message/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 non existing value does not show "No results!" message', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const inputElement = page.getByRole('textbox');
-        /* Add text and only Option 1 should be visible */
-        await inputElement.fill('Johnny looks for no results message');
-        await expect(inputElement).toBeVisible();
-        const noResult = page.getByText('No result');
-        await expect(noResult).toBeHidden();
-        /* 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 });
-    });
-});