@scania/tegel 1.3.3 → 1.4.0

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

@@ -2,45 +2,45 @@ 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);
-  });
+    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

@@ -2,63 +2,63 @@ 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();
-  });
+    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

@@ -2,40 +2,40 @@ 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 });
-  });
+    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

@@ -2,46 +2,46 @@ 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 });
-  });
+    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

@@ -2,52 +2,52 @@ 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');
-  });
+    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');
+    });
 });

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

@@ -2,35 +2,35 @@ import { test } from "stencil-playwright";
 import { expect } from "@playwright/test";
 const componentTestPath = 'src/components/table/table/test/sorting/index.html';
 test.describe('tds-table-sorting', () => {
-  test('renders sorting table correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const tableComponent = page.getByRole('table');
-    await expect(tableComponent).toHaveCount(1);
-    /* Check for diffs in screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-  test('table has header "Sorting"', async ({ page }) => {
-    await page.goto(componentTestPath);
-    /* Search for header by text and see if it exists */
-    const tdsTableToolbarCaption = page.getByText('Sorting');
-    await expect(tdsTableToolbarCaption).toHaveCount(1);
-    await expect(tdsTableToolbarCaption).toBeVisible();
-  });
-  test('column headers are clickable', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const myEventSpy = await page.spyOnEvent('tdsSort');
-    const truckTypeHeader = page.getByText('Truck type');
-    await truckTypeHeader.click();
-    expect(myEventSpy).toHaveReceivedEventTimes(1);
-    const driverNameHeader = page.getByText('Driver name');
-    await driverNameHeader.click();
-    expect(myEventSpy).toHaveReceivedEventTimes(2);
-    const countryHeader = page.getByText('Country');
-    await countryHeader.click();
-    expect(myEventSpy).toHaveReceivedEventTimes(3);
-    const mileageHeader = page.getByText('Mileage');
-    await mileageHeader.click();
-    expect(myEventSpy).toHaveReceivedEventTimes(4);
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
+    test('renders sorting table correctly', async ({ page }) => {
+        await page.goto(componentTestPath);
+        const tableComponent = page.getByRole('table');
+        await expect(tableComponent).toHaveCount(1);
+        /* Check for diffs in screenshot */
+        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+    test('table has header "Sorting"', async ({ page }) => {
+        await page.goto(componentTestPath);
+        /* Search for header by text and see if it exists */
+        const tdsTableToolbarCaption = page.getByText('Sorting');
+        await expect(tdsTableToolbarCaption).toHaveCount(1);
+        await expect(tdsTableToolbarCaption).toBeVisible();
+    });
+    test('column headers are clickable', async ({ page }) => {
+        await page.goto(componentTestPath);
+        const myEventSpy = await page.spyOnEvent('tdsSort');
+        const truckTypeHeader = page.getByText('Truck type');
+        await truckTypeHeader.click();
+        expect(myEventSpy).toHaveReceivedEventTimes(1);
+        const driverNameHeader = page.getByText('Driver name');
+        await driverNameHeader.click();
+        expect(myEventSpy).toHaveReceivedEventTimes(2);
+        const countryHeader = page.getByText('Country');
+        await countryHeader.click();
+        expect(myEventSpy).toHaveReceivedEventTimes(3);
+        const mileageHeader = page.getByText('Mileage');
+        await mileageHeader.click();
+        expect(myEventSpy).toHaveReceivedEventTimes(4);
+        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
 });