@scania/tegel 1.4.0 → 1.6.0

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

@@ -1,243 +0,0 @@
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-import readme from "./readme.md";
-import { ComponentsFolder } from "../../utils/constants";
-export default {
-    title: `${ComponentsFolder}/Slider`,
-    argTypes: {
-        min: {
-            name: 'Min. value',
-            description: 'Sets the minimum value for the slider.',
-            control: {
-                type: 'number',
-            },
-            table: {
-                defaultValue: { summary: 0 },
-            },
-        },
-        max: {
-            name: 'Max. value',
-            description: 'Sets the maximum value for the slider.',
-            control: {
-                type: 'number',
-            },
-            table: {
-                defaultValue: { summary: 100 },
-            },
-        },
-        initialValue: {
-            name: 'Initial value',
-            description: 'Sets the initial value for the slider.',
-            control: {
-                type: 'number',
-            },
-            table: {
-                defaultValue: { summary: 0 },
-            },
-        },
-        showLabel: {
-            name: 'Show label',
-            description: 'Toggles if the lable should be shown or hidden.',
-            control: {
-                type: 'boolean',
-            },
-        },
-        labelText: {
-            name: 'Label text',
-            description: 'Sets the text for the label.',
-            control: {
-                type: 'text',
-            },
-            if: { arg: 'showLabel', eq: true },
-        },
-        showTicks: {
-            name: 'Show ticks',
-            description: 'Toggles if ticks should be shown or hidden.',
-            control: {
-                type: 'boolean',
-            },
-        },
-        numTicks: {
-            name: 'Number of ticks',
-            description: 'Sets the number of ticks to be displayed.',
-            control: {
-                type: 'number',
-            },
-            if: { arg: 'showTicks', eq: true },
-            table: {
-                defaultValue: { summary: 0 },
-            },
-        },
-        showTickNumbers: {
-            name: 'Show tick numbers',
-            description: 'Toggles if tick numbers should be shown or hidden.',
-            control: {
-                type: 'boolean',
-            },
-            if: { arg: 'showTicks', eq: true },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-        snapToTicks: {
-            name: 'Snap to ticks',
-            description: 'Snaps the thumb to the closest tick when dragging.',
-            control: {
-                type: 'boolean',
-            },
-            if: { arg: 'showTicks', eq: true },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-        showTooltip: {
-            name: 'Show tooltip',
-            description: 'Toggles if the tooltip should be shown or hidden.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-        showControls: {
-            name: 'Show controls (not compatible with input field)',
-            description: 'Toggles if controls should be shown or hidden.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-        step: {
-            name: 'Step value',
-            description: 'Sets the value to increment/decrement with when using controls.',
-            control: {
-                type: 'number',
-            },
-            if: { arg: 'showControls', eq: true },
-            table: {
-                defaultValue: { summary: 1 },
-            },
-        },
-        showInput: {
-            name: 'Show value input field (not compatible with controls)',
-            description: 'Toggles if the values input field should be shown or hidden.',
-            control: {
-                type: 'boolean',
-            },
-            if: { arg: 'showControls', eq: false },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-        thumbSize: {
-            name: 'Thumb size',
-            description: 'Switches between the large and small version of the thumb.',
-            control: {
-                type: 'radio',
-            },
-            options: ['Large', 'Small'],
-            table: {
-                defaultValue: { summary: 'lg' },
-            },
-        },
-        readonly: {
-            name: 'Read Only',
-            description: 'Puts the control in a read-only state.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-        disabled: {
-            name: 'Disabled',
-            description: 'Disables the slider.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-    },
-    parameters: {
-        notes: readme,
-        design: [
-            {
-                name: 'Figma',
-                type: 'figma',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9649%3A20759&t=Ne6myqwca5m00de7-1',
-            },
-            {
-                name: 'Link',
-                type: 'link',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9649%3A20759&t=Ne6myqwca5m00de7-1',
-            },
-        ],
-    },
-    args: {
-        min: '0',
-        max: '100',
-        initialValue: '50',
-        showLabel: false,
-        labelText: 'Label',
-        showTicks: false,
-        numTicks: '3',
-        showTickNumbers: false,
-        snapToTicks: false,
-        showTooltip: true,
-        showControls: false,
-        step: '1',
-        showInput: false,
-        thumbSize: 'Large',
-        readonly: false,
-        disabled: false,
-    },
-};
-const sizeLookUp = {
-    Large: 'lg',
-    Small: 'sm',
-};
-const Template = ({ min, max, initialValue, showLabel, labelText, showTicks, numTicks, showTickNumbers, snapToTicks, showTooltip, showControls, step, showInput, thumbSize, readonly, disabled, }) => formatHtmlPreview(`
- <!-- Style code below is just for demo purposes -->
-    <style>
-      .demo-wrapper {
-          width: 500px;
-          margin-left: 150px;
-      }
-    </style>
-
-   <div class="demo-wrapper">
-     <tds-slider 
-        min="${min}"
-        max="${max}"
-        ${showControls && step ? `step="${step}"` : ''}
-        value="${initialValue}"
-        ${showTicks ? `ticks="${numTicks}"` : ''}
-        ${showTickNumbers ? 'show-tick-numbers' : ''}
-        ${snapToTicks ? 'snap' : ''}
-        ${showLabel ? `label="${labelText}"` : ''}
-        ${showTooltip ? 'tooltip' : ''}
-        ${showControls ? 'controls' : ''}
-        ${showInput ? 'input' : ''}
-        ${disabled ? 'disabled' : ''}
-        thumb-size="${sizeLookUp[thumbSize]}"
-        ${readonly ? 'read-only' : ''}
-        >
-      </tds-slider>
-    </div>
-    
-     <!-- Script tag for demo purposes -->
-    <script>
-      slider = document.querySelector('tds-slider')
-      
-      slider.removeEventListener('tdsChange', null)
-      slider.addEventListener('tdsChange', (event) => {
-        console.log(event);
-      });
-    </script>
-  `);
-export const Default = Template.bind({});

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

@@ -1,61 +0,0 @@
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-import readme from "./readme.md";
-import { ComponentsFolder } from "../../utils/constants";
-export default {
-    title: `${ComponentsFolder}/Spinner`,
-    parameters: {
-        layout: 'centered',
-        notes: readme,
-        design: [
-            {
-                name: 'Figma',
-                type: 'figma',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10259%3A29263&t=Ne6myqwca5m00de7-1',
-            },
-            {
-                name: 'Link',
-                type: 'link',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10259%3A29263&t=Ne6myqwca5m00de7-1',
-            },
-        ],
-    },
-    argTypes: {
-        variant: {
-            name: 'Variant',
-            description: 'Switches the variant of the Spinner.',
-            control: {
-                type: 'radio',
-            },
-            options: ['Standard', 'Inverted'],
-            table: {
-                defaultValue: { summary: 'standard' },
-            },
-        },
-        size: {
-            name: 'Size',
-            description: 'Sets the size of the Spinner.',
-            control: {
-                type: 'radio',
-            },
-            options: ['Large', 'Medium', 'Small', 'Extra small'],
-            table: {
-                defaultValue: { summary: 'lg' },
-            },
-        },
-    },
-    args: {
-        variant: 'Standard',
-        size: 'Large',
-    },
-};
-const Template = ({ size, variant }) => {
-    const sizeLookup = { 'Large': 'lg', 'Medium': 'md', 'Small': 'sm', 'Extra small': 'xs' };
-    const variantLookup = { Standard: 'standard', Inverted: 'inverted' };
-    return formatHtmlPreview(`
-  <tds-spinner 
-    size="${sizeLookup[size]}"  
-    variant="${variantLookup[variant]}">
-  </tds-spinner>
-  `);
-};
-export const Default = Template.bind({});

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

@@ -1,95 +0,0 @@
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-import readmeStepper from "./readme.md";
-import readmeStep from "./step/readme.md";
-import { ComponentsFolder } from "../../utils/constants";
-export default {
-    title: `${ComponentsFolder}/Stepper`,
-    parameters: {
-        layout: 'centered',
-        design: [
-            {
-                name: 'Figma',
-                type: 'figma',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10508%3A32221&t=Ne6myqwca5m00de7-1',
-            },
-            {
-                name: 'Link',
-                type: 'link',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10508%3A32221&t=Ne6myqwca5m00de7-1',
-            },
-        ],
-        notes: { Stepper: readmeStepper, Step: readmeStep },
-    },
-    argTypes: {
-        size: {
-            name: 'Size',
-            description: 'Sets the size of the Stepper.',
-            control: {
-                type: 'radio',
-            },
-            options: ['Large', 'Small'],
-            table: {
-                defaultValue: { summary: 'lg' },
-            },
-        },
-        orientation: {
-            name: 'Orientation',
-            description: 'Sets the orientation which the Stepper is displayed.',
-            control: {
-                type: 'radio',
-            },
-            options: ['Horizontal', 'Vertical'],
-            table: {
-                defaultValue: { summary: 'horizontal' },
-            },
-        },
-        labelPosition: {
-            name: 'Text position',
-            description: 'Sets the position of the text, only available when the orientation is horizontal.',
-            control: {
-                type: 'radio',
-            },
-            options: ['Below', 'Aside'],
-            if: { arg: 'orientation', neq: 'Vertical' },
-            table: {
-                defaultValue: { summary: 'below' },
-            },
-        },
-        hideLabels: {
-            name: 'Hide labels',
-            description: 'Hides the labels for all Stepper Items.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-    },
-    args: {
-        size: 'Large',
-        orientation: 'Horizontal',
-        labelPosition: 'Below',
-        hideLabels: false,
-    },
-};
-const sizeLookUp = {
-    Large: 'lg',
-    Small: 'sm',
-};
-const Template = ({ size, orientation, labelPosition, hideLabels }) => formatHtmlPreview(`<tds-stepper ${hideLabels ? 'hide-labels' : ''} size="${sizeLookUp[size]}" ${orientation === 'Horizontal' ? `label-position="${labelPosition === null || labelPosition === void 0 ? void 0 : labelPosition.toLowerCase()}"` : ''} orientation="${orientation.toLowerCase()}">
-    <tds-step state="success" index="1">
-      <div slot="label">Success step</div>
-    </tds-step>
-    <tds-step state="error" index="2">
-      <div slot="label">Error step</div>
-    </tds-step>
-    <tds-step state="current" index="3">
-      <div slot="label">Current step</div>
-    </tds-step>
-    <tds-step index="4">
-      <div slot="label">Upcoming step</div>
-    </tds-step>
-  </tds-stepper>
-        `);
-export const Default = Template.bind({});

package/dist/collection/components/table/table/test/batch/table.e2e.js

@@ -1,24 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/table/table/test/batch/index.html';
-test.describe('tds-table-batch', () => {
-    test('renders batch table correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tableComponent = page.getByRole('table');
-        await expect(tableComponent).toHaveCount(1);
-        /* Check diff on screenshot */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('table has a settings button', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tdsTableToolbarSettings = page.getByRole('img');
-        await expect(tdsTableToolbarSettings).toHaveCount(1);
-        await expect(tdsTableToolbarSettings).toBeVisible();
-    });
-    test('table has a [Download] button', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tdsTableToolbarDownloadButton = page.getByRole('button', { name: /Download/ });
-        await expect(tdsTableToolbarDownloadButton).toHaveCount(1);
-        await expect(tdsTableToolbarDownloadButton).toBeVisible();
-    });
-});

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

@@ -1,46 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/table/table/test/default/index.html';
-test.describe('tds-table-default', () => {
-    test('renders default table correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tableComponent = page.getByRole('table');
-        await expect(tableComponent).toHaveCount(1);
-        /** Check screenshot diff */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('table has four columns', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tableHeaderCells = page.locator('tds-header-cell');
-        await expect(tableHeaderCells).toHaveCount(4);
-    });
-    test('columns are: Truck type, Driver name, Country, Mileage', async ({ page }) => {
-        await page.goto(componentTestPath);
-        /* Expect each header to be visible */
-        await expect(page.getByText('Truck type')).toBeVisible();
-        await expect(page.getByText('Driver name')).toBeVisible();
-        await expect(page.getByText('Country')).toBeVisible();
-        await expect(page.getByText('Mileage')).toBeVisible();
-    });
-    test('Row should contain the correct number of rows with', async ({ page }) => {
-        await page.goto(componentTestPath);
-        /* Expect the number of rows to be correct amount */
-        const tableBodyRows = page.locator('tds-table-body-row');
-        await expect(tableBodyRows).toHaveCount(6);
-    });
-    test('table has the correct text inside each cell', async ({ page }) => {
-        await page.goto(componentTestPath);
-        /* Checks all rows to see that they have the correct amount of tds-body-cells with values provided */
-        const promises = [];
-        for (let i = 1; i <= 8; i++) {
-            const tableBodyCellHasText = page
-                .locator('tds-body-cell')
-                .filter({ hasText: `Test value ${i}` });
-            promises.push(expect(tableBodyCellHasText).toHaveCount(3));
-            promises.push(expect(tableBodyCellHasText.first()).toBeVisible());
-            promises.push(expect(tableBodyCellHasText.nth(1)).toBeVisible());
-            promises.push(expect(tableBodyCellHasText.nth(2)).toBeVisible());
-        }
-        await Promise.all(promises);
-    });
-});

package/dist/collection/components/table/table/test/expandable-row/table.e2e.js

@@ -1,64 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/table/table/test/expandable-row/index.html';
-test.describe('tds-table-expandable-row', () => {
-    test('render expandable-row table correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tableComponent = page.getByRole('table');
-        await expect(tableComponent).toHaveCount(1);
-        /* check of diff in component screenshot */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('each row has expand checkbox', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tableBodyRowsExpandInput = page.getByRole('cell').getByRole('checkbox');
-        await expect(tableBodyRowsExpandInput).toHaveCount(3);
-    });
-    test('under first row opened expanded row with text "Hello world 1"', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tableBodyRowFirstInput = page.getByRole('cell').nth(1);
-        const tableBodyExpandableRowSlot = page.getByText(/Hello world 1/);
-        await expect(tableBodyRowFirstInput).toHaveCount(1);
-        await expect(tableBodyExpandableRowSlot).toHaveCount(1);
-        await expect(tableBodyExpandableRowSlot).toBeHidden();
-        await tableBodyRowFirstInput.click();
-        await expect(tableBodyExpandableRowSlot).toBeVisible();
-        /* check input screenshot diff */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('under second row opened expanded row with text "Hello to you too"', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tableBodyRowSecondInput = page.getByRole('cell').nth(2);
-        const tableBodyExpandableRowSlot = page.getByText(/Hello to you too/);
-        await expect(tableBodyRowSecondInput).toHaveCount(1);
-        await expect(tableBodyExpandableRowSlot).toHaveCount(1);
-        await expect(tableBodyExpandableRowSlot).toBeHidden();
-        await tableBodyRowSecondInput.click();
-        await expect(tableBodyExpandableRowSlot).toBeVisible();
-        /* check input screenshot diff */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('under third row opened expanded row with a button with text "Call to action"', async ({ page, }) => {
-        await page.goto(componentTestPath);
-        const tableBodyRowThirdInput = page.getByRole('cell').nth(3);
-        const tableBodyRowButton = page.getByText(/Call to action/);
-        await expect(tableBodyRowThirdInput).toHaveCount(1);
-        await expect(tableBodyRowButton).toHaveCount(1);
-        await expect(tableBodyRowButton).toBeHidden();
-        await tableBodyRowThirdInput.click();
-        await expect(tableBodyRowButton).toBeVisible();
-        /* check input screenshot diff */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('double click on expand button in first row -> expanded row should be closed', async ({ page, }) => {
-        await page.goto(componentTestPath);
-        const tableBodyRowFirstInput = page.getByRole('cell').nth(1);
-        await tableBodyRowFirstInput.dblclick();
-        const tableBodyFirstExpandableRowSlot = page.getByText(/Hello world 1/);
-        const tableBodySecondExpandableRowSlot = page.getByText(/Hello to you too/);
-        const tableBodyThirdExpandableRowSlot = page.getByText(/Call to action/);
-        await expect(tableBodyFirstExpandableRowSlot).toBeHidden();
-        await expect(tableBodySecondExpandableRowSlot).toBeHidden();
-        await expect(tableBodyThirdExpandableRowSlot).toBeHidden();
-    });
-});

package/dist/collection/components/table/table/test/filtering/table.e2e.js

@@ -1,41 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/table/table/test/filtering/index.html';
-test.describe('tds-table-filtering', () => {
-    test('renders filtering table correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tableComponent = page.getByRole('table');
-        await expect(tableComponent).toHaveCount(1);
-        /* Check diff of screenshot */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('table has header "Filter"', async ({ page }) => {
-        await page.goto(componentTestPath);
-        /* Search for header by text and see if it exists */
-        const tdsTableToolbarCaption = page.getByText('Filter');
-        await expect(tdsTableToolbarCaption).toHaveCount(1);
-        await expect(tdsTableToolbarCaption).toBeVisible();
-    });
-    test('search button inside the header exists', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tdsTableToolbarSearchIcon = page.getByRole('img');
-        await expect(tdsTableToolbarSearchIcon).toHaveCount(1);
-        await expect(tdsTableToolbarSearchIcon).toBeVisible();
-    });
-    test('look for textbox and click it', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tdsTableToolbarSearchInput = page.getByRole('textbox');
-        await tdsTableToolbarSearchInput.click();
-        /* Check diff of screenshot after click */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('clicking on search button opens field for entering data', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tdsTableToolbarSearchInput = page.getByRole('textbox');
-        await expect(tdsTableToolbarSearchInput).toHaveCount(1);
-        await expect(tdsTableToolbarSearchInput).toBeVisible();
-        await tdsTableToolbarSearchInput.fill('Some test text');
-        /* Check diff of screenshot after filled */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-});

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

@@ -1,47 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/table/table/test/multiselect/index.html';
-test.describe('tds-table-multiselect', () => {
-    test('renders multiselect table correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tableComponent = page.getByRole('table');
-        await expect(tableComponent).toHaveCount(1);
-        /* Check diff on screenshot for component */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('table header contains checkbox', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tableHeaderCheckbox = page.getByRole('checkbox').first();
-        await expect(tableHeaderCheckbox).toHaveCount(1);
-        await expect(tableHeaderCheckbox).toBeVisible();
-    });
-    test('row should contain the correct number of checkboxes in each row', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tableBodyRowCheckboxes = page.getByRole('checkbox');
-        await expect(tableBodyRowCheckboxes).toHaveCount(5);
-        /* Check if each checkbox is visible */
-        const promises = [];
-        for (let i = 0; i < 5; i++) {
-            promises.push(expect(tableBodyRowCheckboxes.nth(i)).toBeVisible());
-        }
-        await Promise.all(promises);
-    });
-    test('can check every checkbox in the table', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tableCheckboxes = page.getByRole('cell');
-        await expect(tableCheckboxes).toHaveCount(5);
-        const myEventSpyAll = await page.spyOnEvent('tdsSelectAll');
-        const myEventSpy = await page.spyOnEvent('tdsSelect');
-        /* Click each one */
-        await tableCheckboxes.first().click();
-        await tableCheckboxes.nth(1).click();
-        await tableCheckboxes.nth(2).click();
-        await tableCheckboxes.nth(3).click();
-        await tableCheckboxes.last().click();
-        /* check so correct events have been called */
-        expect(myEventSpyAll).toHaveReceivedEventTimes(1);
-        expect(myEventSpy).toHaveReceivedEventTimes(4);
-        /* Check diff on screenshot for component */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-});

package/dist/collection/components/table/table/test/pagination/table.e2e.js

@@ -1,53 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/table/table/test/pagination/index.html';
-test.describe('tds-table-pagination', () => {
-    test('renders pagination table correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tableComponent = page.getByRole('table');
-        await expect(tableComponent).toHaveCount(1);
-        /* Check screenshots for diffs */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('table has a footer', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tableFooter = page.locator('tds-table-footer');
-        await expect(tableFooter).toHaveCount(1);
-    });
-    test('footer has field for number of page, value = 1', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tableFooterPaginationSpinbutton = page.getByRole('spinbutton');
-        await expect(tableFooterPaginationSpinbutton).toHaveCount(1);
-        await expect(tableFooterPaginationSpinbutton).toBeVisible();
-        await expect(tableFooterPaginationSpinbutton).toHaveValue('1');
-    });
-    test('footer contains text "of 4 pages"', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tableFooterOfPagesText = page.getByText(/of 4 pages/);
-        await expect(tableFooterOfPagesText).toHaveCount(1);
-        await expect(tableFooterOfPagesText).toBeVisible();
-    });
-    test('Footer contains left chevron button, it is disabled', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tableFooterLeftChevronButton = page.getByRole('button').first();
-        await expect(tableFooterLeftChevronButton).toBeVisible();
-        await expect(tableFooterLeftChevronButton).toHaveAttribute('disabled');
-    });
-    test('Footer contains right chevron button, it is not disabled', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tableFooterRightChevronButton = page.getByRole('button').last();
-        await expect(tableFooterRightChevronButton).toBeVisible();
-        await expect(tableFooterRightChevronButton).not.toHaveAttribute('disabled');
-    });
-    test('footer contains buttons that are clickable and change value in input', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tableFooterPaginationSpinbutton = page.getByRole('spinbutton');
-        await expect(tableFooterPaginationSpinbutton).toHaveValue('1');
-        const tableFooterRightChevronButton = page.getByRole('button').last();
-        await tableFooterRightChevronButton.click();
-        await expect(tableFooterPaginationSpinbutton).toHaveValue('2');
-        const tableFooterLeftChevronButton = page.getByRole('button').first();
-        await tableFooterLeftChevronButton.click();
-        await expect(tableFooterPaginationSpinbutton).toHaveValue('1');
-    });
-});