@scania/tegel 1.3.3 → 1.5.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');
-  });
-});