diff --git a/packages/core/src/components/chip/test/checkbox/chip.e2e.ts b/packages/core/src/components/chip/test/checkbox/chip.e2e.ts index 444079b33..baf3a61da 100644 --- a/packages/core/src/components/chip/test/checkbox/chip.e2e.ts +++ b/packages/core/src/components/chip/test/checkbox/chip.e2e.ts @@ -1,32 +1,48 @@ import { test } from 'stencil-playwright'; import { expect } from '@playwright/test'; +import { + testConfigurations, + getTestDescribeText, + setupPage, +} from '../../../../utils/testConfiguration'; const componentTestPath = 'src/components/chip/test/checkbox/index.html'; +const componentName = 'tds-chip'; +const testDescription = 'tds-chip-checkbox'; -test.describe.parallel('tds-chip-checkbox', () => { - test('renders checkbox chips correctly', async ({ page }) => { - await page.goto(componentTestPath); - const chip1 = page.getByText('Label 1', { exact: true }); - await expect(chip1).toHaveCount(1); +testConfigurations.basic.forEach((config) => { + test.describe.parallel(getTestDescribeText(config, testDescription), () => { + test.beforeEach(async ({ page }) => { + await setupPage(page, config, componentTestPath, componentName); + }); + + test('renders checkbox chips correctly', async ({ page }) => { + const chip1 = page.getByText('Label 1', { exact: true }); + await expect(chip1).toHaveCount(1); - const chip2 = page.getByText('Label 2', { exact: true }); - await expect(chip2).toHaveCount(1); + const chip2 = page.getByText('Label 2', { exact: true }); + await expect(chip2).toHaveCount(1); - const chip3 = page.getByText('Label 3', { exact: true }); - await expect(chip3).toHaveCount(1); + const chip3 = page.getByText('Label 3', { exact: true }); + await expect(chip3).toHaveCount(1); - /* Check diff on screenshot */ - await expect(page).toHaveScreenshot({ maxDiffPixels: 0 }); + /* Check diff on screenshot */ + await expect(page).toHaveScreenshot({ maxDiffPixels: 0 }); + }); }); +}); - test('expect chips to be of the role checkbox', async ({ page }) => { +test.describe.parallel(componentName, () => { + test.beforeEach(async ({ page }) => { await page.goto(componentTestPath); + }); + + test('expect chips to be of the role checkbox', async ({ page }) => { const chipRole = page.getByRole('checkbox'); await expect(chipRole).toHaveCount(3); }); test('Check so that height is correct to lg/default measurements', async ({ page }) => { - await page.goto(componentTestPath); const chip1 = page.locator('tds-chip label').filter({ hasText: `Label 1` }); const chipHeight1 = await chip1.evaluate((style) => getComputedStyle(style).height); expect(chipHeight1).toBe('32px'); @@ -41,7 +57,6 @@ test.describe.parallel('tds-chip-checkbox', () => { }); test('Chip 1 is clickable', async ({ page }) => { - await page.goto(componentTestPath); const chip = page.locator('tds-chip label').filter({ hasText: `Label 1` }); chip.hover(); const chipCursorStyle = await chip.evaluate((style) => getComputedStyle(style).cursor); @@ -53,7 +68,6 @@ test.describe.parallel('tds-chip-checkbox', () => { }); test('Chip 2 is clickable', async ({ page }) => { - await page.goto(componentTestPath); const chip = page.locator('tds-chip label').filter({ hasText: `Label 2` }); chip.hover(); const chipCursorStyle = await chip.evaluate((style) => getComputedStyle(style).cursor); @@ -65,7 +79,6 @@ test.describe.parallel('tds-chip-checkbox', () => { }); test('Chip 3 is clickable', async ({ page }) => { - await page.goto(componentTestPath); const chip = page.locator('tds-chip label').filter({ hasText: `Label 3` }); chip.hover(); const chipCursorStyle = await chip.evaluate((style) => getComputedStyle(style).cursor); @@ -77,14 +90,12 @@ test.describe.parallel('tds-chip-checkbox', () => { }); test('1st chip is checked', async ({ page }) => { - await page.goto(componentTestPath); const checkedLabel1Chip = page.locator('input[id="option-1"]'); const isChecked = await checkedLabel1Chip.evaluate((node: HTMLInputElement) => node.checked); expect(isChecked).toBeTruthy(); }); test('Clicking "Label 2" chip changes checked state appropriately', async ({ page }) => { - await page.goto(componentTestPath); const labelText2 = page.locator('text=Label 2'); await labelText2.click(); const chip1 = page.locator('input[id="option-1"]'); @@ -107,7 +118,6 @@ test.describe.parallel('tds-chip-checkbox', () => { test('Clicking "Label 2" and "Label 3" chips changes checked state appropriately', async ({ page, }) => { - await page.goto(componentTestPath); const labelText2 = page.locator('text=Label 2'); await labelText2.click(); const labelText3 = page.locator('text=Label 3'); @@ -132,7 +142,6 @@ test.describe.parallel('tds-chip-checkbox', () => { test('Clicking "Label 1", "Label 2" and "Label 3" chips changes checked state appropriately', async ({ page, }) => { - await page.goto(componentTestPath); const labelText1 = page.locator('text=Label 1'); await labelText1.click(); const labelText2 = page.locator('text=Label 2'); diff --git a/packages/core/src/components/chip/test/checkbox/chip.e2e.ts-snapshots/tds-chip-checkbox-darkmode-renders-checkbox-chips-correctly-1-linux.png b/packages/core/src/components/chip/test/checkbox/chip.e2e.ts-snapshots/tds-chip-checkbox-darkmode-renders-checkbox-chips-correctly-1-linux.png new file mode 100644 index 000000000..946238c7a Binary files /dev/null and b/packages/core/src/components/chip/test/checkbox/chip.e2e.ts-snapshots/tds-chip-checkbox-darkmode-renders-checkbox-chips-correctly-1-linux.png differ diff --git a/packages/core/src/components/chip/test/checkbox/chip.e2e.ts-snapshots/tds-chip-checkbox-lightmode-renders-checkbox-chips-correctly-1-linux.png b/packages/core/src/components/chip/test/checkbox/chip.e2e.ts-snapshots/tds-chip-checkbox-lightmode-renders-checkbox-chips-correctly-1-linux.png new file mode 100644 index 000000000..17e520c46 Binary files /dev/null and b/packages/core/src/components/chip/test/checkbox/chip.e2e.ts-snapshots/tds-chip-checkbox-lightmode-renders-checkbox-chips-correctly-1-linux.png differ diff --git a/packages/core/src/components/chip/test/checkbox/chip.e2e.ts-snapshots/tds-chip-checkbox-renders-checkbox-chips-correctly-1-linux.png b/packages/core/src/components/chip/test/checkbox/chip.e2e.ts-snapshots/tds-chip-checkbox-renders-checkbox-chips-correctly-1-linux.png deleted file mode 100644 index 74f9e4ff7..000000000 Binary files a/packages/core/src/components/chip/test/checkbox/chip.e2e.ts-snapshots/tds-chip-checkbox-renders-checkbox-chips-correctly-1-linux.png and /dev/null differ diff --git a/packages/core/src/components/chip/test/default/chip.e2e.ts b/packages/core/src/components/chip/test/default/chip.e2e.ts index 905f9e1e3..5e9eba77a 100644 --- a/packages/core/src/components/chip/test/default/chip.e2e.ts +++ b/packages/core/src/components/chip/test/default/chip.e2e.ts @@ -1,36 +1,51 @@ import { test } from 'stencil-playwright'; import { expect } from '@playwright/test'; +import { + testConfigurations, + getTestDescribeText, + setupPage, +} from '../../../../utils/testConfiguration'; const componentTestPath = 'src/components/chip/test/default/index.html'; +const componentName = 'tds-chip'; +const testDescription = 'tds-chip-default'; -test.describe.parallel('tds-chip-default', () => { - test('renders default chip correctly', async ({ page }) => { - await page.goto(componentTestPath); - const chip = page.locator('tds-chip'); - await expect(chip).toHaveCount(1); +testConfigurations.basic.forEach((config) => { + test.describe.parallel(getTestDescribeText(config, testDescription), () => { + test.beforeEach(async ({ page }) => { + await setupPage(page, config, componentTestPath, componentName); + }); + + test('renders default chip correctly', async ({ page }) => { + const chip = page.locator('tds-chip'); + await expect(chip).toHaveCount(1); - const labelElement = page.locator('tds-chip label'); // Target label underneath chip - expect(labelElement).toHaveText('Label'); + const labelElement = page.locator('tds-chip label'); // Target label underneath chip + expect(labelElement).toHaveText('Label'); - /* Check diff on screenshot */ - await expect(page).toHaveScreenshot({ maxDiffPixels: 0 }); + /* Check diff on screenshot */ + await expect(page).toHaveScreenshot({ maxDiffPixels: 0 }); + }); }); +}); - test('expect chip to be of the role button', async ({ page }) => { +test.describe.parallel(componentName, () => { + test.beforeEach(async ({ page }) => { await page.goto(componentTestPath); + }); + + test('expect chip to be of the role button', async ({ page }) => { const chipRole = page.getByRole('button'); await expect(chipRole).toHaveCount(1); }); test('Check so that height is correct to lg/default measurements', async ({ page }) => { - await page.goto(componentTestPath); const chip = page.locator('tds-chip label'); const chipHeight = await chip.evaluate((style) => getComputedStyle(style).height); expect(chipHeight).toBe('32px'); }); test('Chip is clickable', async ({ page }) => { - await page.goto(componentTestPath); const chip = page.locator('tds-chip label'); chip.hover(); const chipCursorStyle = await chip.evaluate((style) => getComputedStyle(style).cursor); diff --git a/packages/core/src/components/chip/test/default/chip.e2e.ts-snapshots/tds-chip-default-renders-default-chip-correctly-1-linux.png b/packages/core/src/components/chip/test/default/chip.e2e.ts-snapshots/tds-chip-default-darkmode-renders-default-chip-correctly-1-linux.png similarity index 59% rename from packages/core/src/components/chip/test/default/chip.e2e.ts-snapshots/tds-chip-default-renders-default-chip-correctly-1-linux.png rename to packages/core/src/components/chip/test/default/chip.e2e.ts-snapshots/tds-chip-default-darkmode-renders-default-chip-correctly-1-linux.png index 9256e8c5c..060294650 100644 Binary files a/packages/core/src/components/chip/test/default/chip.e2e.ts-snapshots/tds-chip-default-renders-default-chip-correctly-1-linux.png and b/packages/core/src/components/chip/test/default/chip.e2e.ts-snapshots/tds-chip-default-darkmode-renders-default-chip-correctly-1-linux.png differ diff --git a/packages/core/src/components/chip/test/default/chip.e2e.ts-snapshots/tds-chip-default-lightmode-renders-default-chip-correctly-1-linux.png b/packages/core/src/components/chip/test/default/chip.e2e.ts-snapshots/tds-chip-default-lightmode-renders-default-chip-correctly-1-linux.png new file mode 100644 index 000000000..b4665289e Binary files /dev/null and b/packages/core/src/components/chip/test/default/chip.e2e.ts-snapshots/tds-chip-default-lightmode-renders-default-chip-correctly-1-linux.png differ diff --git a/packages/core/src/components/chip/test/disabled/chip.e2e.ts b/packages/core/src/components/chip/test/disabled/chip.e2e.ts index 1d4cd16b5..4623779e5 100644 --- a/packages/core/src/components/chip/test/disabled/chip.e2e.ts +++ b/packages/core/src/components/chip/test/disabled/chip.e2e.ts @@ -1,26 +1,86 @@ import { test } from 'stencil-playwright'; import { expect } from '@playwright/test'; +import { + testConfigurations, + getTestDescribeText, + setupPage, +} from '../../../../utils/testConfiguration'; const componentTestPath = 'src/components/chip/test/disabled/index.html'; +const componentName = 'tds-chip'; -test.describe.parallel('tds-chip-checkbox', () => { - test('renders checkbox chips correctly', async ({ page }) => { - await page.goto(componentTestPath); - const chip1 = page.getByText('Label 1', { exact: true }); - await expect(chip1).toHaveCount(1); +testConfigurations.basic.forEach((config) => { + test.describe.parallel(getTestDescribeText(config, 'tds-chip-checkbox'), () => { + test.beforeEach(async ({ page }) => { + await setupPage(page, config, componentTestPath, componentName); + }); + + test('renders checkbox chips correctly', async ({ page }) => { + const chip1 = page.getByText('Label 1', { exact: true }); + await expect(chip1).toHaveCount(1); - const chip2 = page.getByText('Label 2', { exact: true }); - await expect(chip2).toHaveCount(1); + const chip2 = page.getByText('Label 2', { exact: true }); + await expect(chip2).toHaveCount(1); - const chip3 = page.getByText('Label 3', { exact: true }); - await expect(chip3).toHaveCount(1); + const chip3 = page.getByText('Label 3', { exact: true }); + await expect(chip3).toHaveCount(1); - /* Check diff on screenshot */ - await expect(page).toHaveScreenshot({ maxDiffPixels: 0 }); + /* Check diff on screenshot */ + await expect(page).toHaveScreenshot({ maxDiffPixels: 0 }); + }); }); +}); - test('Chip 1 is disabled and not clickable', async ({ page }) => { +testConfigurations.basic.forEach((config) => { + test.describe.parallel(getTestDescribeText(config, 'tds-chip-radio'), () => { + test.beforeEach(async ({ page }) => { + await setupPage(page, config, componentTestPath, componentName); + }); + + test('renders radio chips correctly', async ({ page }) => { + const chip1 = page.getByText('Label 1 for radio', { exact: true }); + await expect(chip1).toHaveCount(1); + + const chip2 = page.getByText('Label 2 for radio', { exact: true }); + await expect(chip2).toHaveCount(1); + + const chip3 = page.getByText('Label 3 for radio', { exact: true }); + await expect(chip3).toHaveCount(1); + + /* Check diff on screenshot */ + await expect(page).toHaveScreenshot({ maxDiffPixels: 0 }); + }); + }); +}); + +testConfigurations.basic.forEach((config) => { + test.describe.parallel(getTestDescribeText(config, 'tds-chip-button'), () => { + test.beforeEach(async ({ page }) => { + await setupPage(page, config, componentTestPath, componentName); + }); + + test('renders button chips correctly', async ({ page }) => { + const chip1 = page.getByText('Label 1 for button', { exact: true }); + await expect(chip1).toHaveCount(1); + + const chip2 = page.getByText('Label 2 for button', { exact: true }); + await expect(chip2).toHaveCount(1); + + const chip3 = page.getByText('Label 3 for button', { exact: true }); + await expect(chip3).toHaveCount(1); + + /* Check diff on screenshot */ + await expect(page).toHaveScreenshot({ maxDiffPixels: 0 }); + }); + }); +}); + +test.describe.parallel('tds-chip-checkbox', () => { + test.beforeEach(async ({ page }) => { await page.goto(componentTestPath); + }); + + test('Chip 1 is disabled and not clickable', async ({ page }) => { const chip1 = page.locator('tds-chip[chip-id="option-1"]'); const isDisabled = await chip1.evaluate((el) => el.hasAttribute('disabled')); @@ -35,7 +95,6 @@ test.describe.parallel('tds-chip-checkbox', () => { }); test('Chip 2 is clickable', async ({ page }) => { - await page.goto(componentTestPath); const checkboxLabel2 = page.locator('tds-chip[type="checkbox"] >> text=Label 2'); checkboxLabel2.hover(); const chipCursorStyle = await checkboxLabel2.evaluate( @@ -49,7 +108,6 @@ test.describe.parallel('tds-chip-checkbox', () => { }); test('Chip 3 is clickable', async ({ page }) => { - await page.goto(componentTestPath); const checkboxLabel3 = page.locator('tds-chip[type="checkbox"] >> text=Label 2'); checkboxLabel3.hover(); const chipCursorStyle = await checkboxLabel3.evaluate( @@ -62,24 +120,13 @@ test.describe.parallel('tds-chip-checkbox', () => { expect(myEventSpy).toHaveReceivedEvent(); }); }); + test.describe.parallel('tds-chip-radio', () => { - test('renders radio chips correctly', async ({ page }) => { + test.beforeEach(async ({ page }) => { await page.goto(componentTestPath); - const chip1 = page.getByText('Label 1 for radio', { exact: true }); - await expect(chip1).toHaveCount(1); - - const chip2 = page.getByText('Label 2 for radio', { exact: true }); - await expect(chip2).toHaveCount(1); - - const chip3 = page.getByText('Label 3 for radio', { exact: true }); - await expect(chip3).toHaveCount(1); - - /* Check diff on screenshot */ - await expect(page).toHaveScreenshot({ maxDiffPixels: 0 }); }); test('Radio Chip 1 is disabled and not clickable', async ({ page }) => { - await page.goto(componentTestPath); const radioChip1 = page.locator('tds-chip[chip-id="radio-option-1"]'); const isDisabled = await radioChip1.evaluate((el) => el.hasAttribute('disabled')); @@ -95,23 +142,11 @@ test.describe.parallel('tds-chip-radio', () => { }); test.describe.parallel('tds-chip-button', () => { - test('renders button chips correctly', async ({ page }) => { + test.beforeEach(async ({ page }) => { await page.goto(componentTestPath); - const chip1 = page.getByText('Label 1 for button', { exact: true }); - await expect(chip1).toHaveCount(1); - - const chip2 = page.getByText('Label 2 for button', { exact: true }); - await expect(chip2).toHaveCount(1); - - const chip3 = page.getByText('Label 3 for button', { exact: true }); - await expect(chip3).toHaveCount(1); - - /* Check diff on screenshot */ - await expect(page).toHaveScreenshot({ maxDiffPixels: 0 }); }); test('Button Chip 1 is disabled and not clickable', async ({ page }) => { - await page.goto(componentTestPath); const buttonChip1 = page.locator('tds-chip[chip-id="button-option-1"]'); const isDisabled = await buttonChip1.evaluate((el) => el.hasAttribute('disabled')); diff --git a/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-button-darkmode-renders-button-chips-correctly-1-linux.png b/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-button-darkmode-renders-button-chips-correctly-1-linux.png new file mode 100644 index 000000000..0af981765 Binary files /dev/null and b/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-button-darkmode-renders-button-chips-correctly-1-linux.png differ diff --git a/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-button-lightmode-renders-button-chips-correctly-1-linux.png b/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-button-lightmode-renders-button-chips-correctly-1-linux.png new file mode 100644 index 000000000..66d183234 Binary files /dev/null and b/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-button-lightmode-renders-button-chips-correctly-1-linux.png differ diff --git a/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-button-renders-button-chips-correctly-1-linux.png b/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-button-renders-button-chips-correctly-1-linux.png deleted file mode 100644 index a5961a230..000000000 Binary files a/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-button-renders-button-chips-correctly-1-linux.png and /dev/null differ diff --git a/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-checkbox-darkmode-renders-checkbox-chips-correctly-1-linux.png b/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-checkbox-darkmode-renders-checkbox-chips-correctly-1-linux.png new file mode 100644 index 000000000..0af981765 Binary files /dev/null and b/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-checkbox-darkmode-renders-checkbox-chips-correctly-1-linux.png differ diff --git a/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-checkbox-lightmode-renders-checkbox-chips-correctly-1-linux.png b/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-checkbox-lightmode-renders-checkbox-chips-correctly-1-linux.png new file mode 100644 index 000000000..66d183234 Binary files /dev/null and b/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-checkbox-lightmode-renders-checkbox-chips-correctly-1-linux.png differ diff --git a/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-checkbox-renders-checkbox-chips-correctly-1-linux.png b/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-checkbox-renders-checkbox-chips-correctly-1-linux.png deleted file mode 100644 index a5961a230..000000000 Binary files a/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-checkbox-renders-checkbox-chips-correctly-1-linux.png and /dev/null differ diff --git a/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-radio-darkmode-renders-radio-chips-correctly-1-linux.png b/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-radio-darkmode-renders-radio-chips-correctly-1-linux.png new file mode 100644 index 000000000..0af981765 Binary files /dev/null and b/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-radio-darkmode-renders-radio-chips-correctly-1-linux.png differ diff --git a/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-radio-lightmode-renders-radio-chips-correctly-1-linux.png b/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-radio-lightmode-renders-radio-chips-correctly-1-linux.png new file mode 100644 index 000000000..66d183234 Binary files /dev/null and b/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-radio-lightmode-renders-radio-chips-correctly-1-linux.png differ diff --git a/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-radio-renders-radio-chips-correctly-1-linux.png b/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-radio-renders-radio-chips-correctly-1-linux.png deleted file mode 100644 index a5961a230..000000000 Binary files a/packages/core/src/components/chip/test/disabled/chip.e2e.ts-snapshots/tds-chip-radio-renders-radio-chips-correctly-1-linux.png and /dev/null differ diff --git a/packages/core/src/components/chip/test/icon/chip.e2e.ts b/packages/core/src/components/chip/test/icon/chip.e2e.ts index bf38f83c2..1e10432c6 100644 --- a/packages/core/src/components/chip/test/icon/chip.e2e.ts +++ b/packages/core/src/components/chip/test/icon/chip.e2e.ts @@ -1,31 +1,41 @@ import { test } from 'stencil-playwright'; import { expect } from '@playwright/test'; +import { + testConfigurations, + getTestDescribeText, + setupPage, +} from '../../../../utils/testConfiguration'; const componentTestPath = 'src/components/chip/test/icon/index.html'; +const componentName = 'tds-chip'; +const testDescription = 'tds-chip-default'; -test.describe.parallel('tds-chip-default', () => { - test('renders default chip correctly', async ({ page }) => { - await page.goto(componentTestPath); - const chip = page.locator('tds-chip'); - await expect(chip).toHaveCount(1); +testConfigurations.basic.forEach((config) => { + test.describe.parallel(getTestDescribeText(config, testDescription), () => { + test.beforeEach(async ({ page }) => { + await setupPage(page, config, componentTestPath, componentName); + }); - const labelElement = page.locator('tds-chip label'); // Target label underneath chip - expect(labelElement).toHaveText('Label'); + test('renders default chip correctly', async ({ page }) => { + const chip = page.locator('tds-chip'); + await expect(chip).toHaveCount(1); - /* Check diff on screenshot */ - await expect(page).toHaveScreenshot({ maxDiffPixels: 0 }); - }); + const labelElement = page.locator('tds-chip label'); // Target label underneath chip + expect(labelElement).toHaveText('Label'); - test('expect chip to be of the role button', async ({ page }) => { - await page.goto(componentTestPath); - const chipRole = page.getByRole('button'); - await expect(chipRole).toHaveCount(1); - }); + /* Check diff on screenshot */ + await expect(page).toHaveScreenshot({ maxDiffPixels: 0 }); + }); + + test('expect chip to be of the role button', async ({ page }) => { + const chipRole = page.getByRole('button'); + await expect(chipRole).toHaveCount(1); + }); - test('Check so that the chip contains an icon', async ({ page }) => { - await page.goto(componentTestPath); - const icon = page.locator('tds-icon'); - await expect(icon).toBeVisible(); - await expect(icon).toHaveAttribute('name', 'star'); + test('Check so that the chip contains an icon', async ({ page }) => { + const icon = page.locator('tds-icon'); + await expect(icon).toBeVisible(); + await expect(icon).toHaveAttribute('name', 'star'); + }); }); }); diff --git a/packages/core/src/components/chip/test/icon/chip.e2e.ts-snapshots/tds-chip-default-darkmode-renders-default-chip-correctly-1-linux.png b/packages/core/src/components/chip/test/icon/chip.e2e.ts-snapshots/tds-chip-default-darkmode-renders-default-chip-correctly-1-linux.png new file mode 100644 index 000000000..5603aa83e Binary files /dev/null and b/packages/core/src/components/chip/test/icon/chip.e2e.ts-snapshots/tds-chip-default-darkmode-renders-default-chip-correctly-1-linux.png differ diff --git a/packages/core/src/components/chip/test/icon/chip.e2e.ts-snapshots/tds-chip-default-lightmode-renders-default-chip-correctly-1-linux.png b/packages/core/src/components/chip/test/icon/chip.e2e.ts-snapshots/tds-chip-default-lightmode-renders-default-chip-correctly-1-linux.png new file mode 100644 index 000000000..d1082800a Binary files /dev/null and b/packages/core/src/components/chip/test/icon/chip.e2e.ts-snapshots/tds-chip-default-lightmode-renders-default-chip-correctly-1-linux.png differ diff --git a/packages/core/src/components/chip/test/icon/chip.e2e.ts-snapshots/tds-chip-default-renders-default-chip-correctly-1-linux.png b/packages/core/src/components/chip/test/icon/chip.e2e.ts-snapshots/tds-chip-default-renders-default-chip-correctly-1-linux.png deleted file mode 100644 index a1a7237e1..000000000 Binary files a/packages/core/src/components/chip/test/icon/chip.e2e.ts-snapshots/tds-chip-default-renders-default-chip-correctly-1-linux.png and /dev/null differ diff --git a/packages/core/src/components/chip/test/radio/chip.e2e.ts b/packages/core/src/components/chip/test/radio/chip.e2e.ts index 67c3959e0..a747c1435 100644 --- a/packages/core/src/components/chip/test/radio/chip.e2e.ts +++ b/packages/core/src/components/chip/test/radio/chip.e2e.ts @@ -1,127 +1,131 @@ import { test } from 'stencil-playwright'; import { expect } from '@playwright/test'; +import { + testConfigurations, + getTestDescribeText, + setupPage, +} from '../../../../utils/testConfiguration'; const componentTestPath = 'src/components/chip/test/radio/index.html'; - -test.describe.parallel('tds-chip-radio', () => { - test('renders radio chips correctly', async ({ page }) => { - await page.goto(componentTestPath); - const chip1 = page.getByText('Label 1', { exact: true }); - await expect(chip1).toHaveCount(1); - - const chip2 = page.getByText('Label 2', { exact: true }); - await expect(chip2).toHaveCount(1); - - const chip3 = page.getByText('Label 3', { exact: true }); - await expect(chip3).toHaveCount(1); - - /* Check diff on screenshot */ - await expect(page).toHaveScreenshot({ maxDiffPixels: 0 }); - }); - - test('expect chips to be of the role radio', async ({ page }) => { - await page.goto(componentTestPath); - const chipRole = page.getByRole('radio'); - await expect(chipRole).toHaveCount(3); - }); - - test('Check so that height is correct to lg/default measurements', async ({ page }) => { - await page.goto(componentTestPath); - const chip1 = page.locator('tds-chip label').filter({ hasText: `Label 1` }); - const chipHeight1 = await chip1.evaluate((style) => getComputedStyle(style).height); - expect(chipHeight1).toBe('32px'); - - const chip2 = page.locator('tds-chip label').filter({ hasText: `Label 2` }); - const chipHeight2 = await chip2.evaluate((style) => getComputedStyle(style).height); - expect(chipHeight2).toBe('32px'); - - const chip3 = page.locator('tds-chip label').filter({ hasText: `Label 3` }); - const chipHeight3 = await chip3.evaluate((style) => getComputedStyle(style).height); - expect(chipHeight3).toBe('32px'); - }); - - test('Chip 1 is clickable', async ({ page }) => { - await page.goto(componentTestPath); - const chip = page.locator('tds-chip label').filter({ hasText: `Label 1` }); - chip.hover(); - const chipCursorStyle = await chip.evaluate((style) => getComputedStyle(style).cursor); - expect(chipCursorStyle).toBe('pointer'); - - const myEventSpy = await page.spyOnEvent('click'); - await chip.click(); - expect(myEventSpy).toHaveReceivedEvent(); - }); - - test('Chip 2 is clickable', async ({ page }) => { - await page.goto(componentTestPath); - const chip = page.locator('tds-chip label').filter({ hasText: `Label 2` }); - chip.hover(); - const chipCursorStyle = await chip.evaluate((style) => getComputedStyle(style).cursor); - expect(chipCursorStyle).toBe('pointer'); - - const myEventSpy = await page.spyOnEvent('click'); - await chip.click(); - expect(myEventSpy).toHaveReceivedEvent(); - }); - - test('Chip 3 is clickable', async ({ page }) => { - await page.goto(componentTestPath); - const chip = page.locator('tds-chip label').filter({ hasText: `Label 3` }); - chip.hover(); - const chipCursorStyle = await chip.evaluate((style) => getComputedStyle(style).cursor); - expect(chipCursorStyle).toBe('pointer'); - - const myEventSpy = await page.spyOnEvent('click'); - await chip.click(); - expect(myEventSpy).toHaveReceivedEvent(); - }); - - test('2nd chip is checked', async ({ page }) => { - await page.goto(componentTestPath); - const checkedLabel2Chip = page.locator('input[id="option-2"]'); - const isChecked = await checkedLabel2Chip.evaluate((node: HTMLInputElement) => node.checked); - expect(isChecked).toBeTruthy(); - }); - - test('Clicking "Label 1" chip changes checked state appropriately', async ({ page }) => { - await page.goto(componentTestPath); - const labelText1 = page.locator('text=Label 1'); - await labelText1.click(); - const chip1 = page.locator('input[id="option-1"]'); - const chip2 = page.locator('input[id="option-2"]'); - const chip3 = page.locator('input[id="option-3"]'); - - // "Label 1" becomes checked - const chip1checkedStatus = await chip1.evaluate((node: HTMLInputElement) => node.checked); - expect(chip1checkedStatus).toBeTruthy(); - - // "Label 2" becomes unchecked - const chip2checkedStatus = await chip2.evaluate((node: HTMLInputElement) => node.checked); - expect(chip2checkedStatus).toBeFalsy(); - - // "Label 3" becomes unchecked - const chip3checkedStatus = await chip3.evaluate((node: HTMLInputElement) => node.checked); - expect(chip3checkedStatus).toBeFalsy(); - }); - - test('Clicking "Label 3" chip changes checked state appropriately', async ({ page }) => { - await page.goto(componentTestPath); - const labelText3 = page.locator('text=Label 3'); - await labelText3.click(); - const chip1 = page.locator('input[id="option-1"]'); - const chip2 = page.locator('input[id="option-2"]'); - const chip3 = page.locator('input[id="option-3"]'); - - // "Label 1" becomes unchecked - const chip1checkedStatus = await chip1.evaluate((node: HTMLInputElement) => node.checked); - expect(chip1checkedStatus).toBeFalsy(); - - // "Label 2" becomes unchecked - const chip2checkedStatus = await chip2.evaluate((node: HTMLInputElement) => node.checked); - expect(chip2checkedStatus).toBeFalsy(); - - // "Label 3" becomes unchecked - const chip3checkedStatus = await chip3.evaluate((node: HTMLInputElement) => node.checked); - expect(chip3checkedStatus).toBeTruthy(); +const componentName = 'tds-chip'; +const testDescription = 'tds-chip-radio'; + +testConfigurations.basic.forEach((config) => { + test.describe.parallel(getTestDescribeText(config, testDescription), () => { + test.beforeEach(async ({ page }) => { + await setupPage(page, config, componentTestPath, componentName); + }); + + test('renders radio chips correctly', async ({ page }) => { + const chip1 = page.getByText('Label 1', { exact: true }); + await expect(chip1).toHaveCount(1); + + const chip2 = page.getByText('Label 2', { exact: true }); + await expect(chip2).toHaveCount(1); + + const chip3 = page.getByText('Label 3', { exact: true }); + await expect(chip3).toHaveCount(1); + + /* Check diff on screenshot */ + await expect(page).toHaveScreenshot({ maxDiffPixels: 0 }); + }); + + test('expect chips to be of the role radio', async ({ page }) => { + const chipRole = page.getByRole('radio'); + await expect(chipRole).toHaveCount(3); + }); + + test('Check so that height is correct to lg/default measurements', async ({ page }) => { + const chip1 = page.locator('tds-chip label').filter({ hasText: `Label 1` }); + const chipHeight1 = await chip1.evaluate((style) => getComputedStyle(style).height); + expect(chipHeight1).toBe('32px'); + + const chip2 = page.locator('tds-chip label').filter({ hasText: `Label 2` }); + const chipHeight2 = await chip2.evaluate((style) => getComputedStyle(style).height); + expect(chipHeight2).toBe('32px'); + + const chip3 = page.locator('tds-chip label').filter({ hasText: `Label 3` }); + const chipHeight3 = await chip3.evaluate((style) => getComputedStyle(style).height); + expect(chipHeight3).toBe('32px'); + }); + + test('Chip 1 is clickable', async ({ page }) => { + const chip = page.locator('tds-chip label').filter({ hasText: `Label 1` }); + chip.hover(); + const chipCursorStyle = await chip.evaluate((style) => getComputedStyle(style).cursor); + expect(chipCursorStyle).toBe('pointer'); + + const myEventSpy = await page.spyOnEvent('click'); + await chip.click(); + expect(myEventSpy).toHaveReceivedEvent(); + }); + + test('Chip 2 is clickable', async ({ page }) => { + const chip = page.locator('tds-chip label').filter({ hasText: `Label 2` }); + chip.hover(); + const chipCursorStyle = await chip.evaluate((style) => getComputedStyle(style).cursor); + expect(chipCursorStyle).toBe('pointer'); + + const myEventSpy = await page.spyOnEvent('click'); + await chip.click(); + expect(myEventSpy).toHaveReceivedEvent(); + }); + + test('Chip 3 is clickable', async ({ page }) => { + const chip = page.locator('tds-chip label').filter({ hasText: `Label 3` }); + chip.hover(); + const chipCursorStyle = await chip.evaluate((style) => getComputedStyle(style).cursor); + expect(chipCursorStyle).toBe('pointer'); + + const myEventSpy = await page.spyOnEvent('click'); + await chip.click(); + expect(myEventSpy).toHaveReceivedEvent(); + }); + + test('2nd chip is checked', async ({ page }) => { + const checkedLabel2Chip = page.locator('input[id="option-2"]'); + const isChecked = await checkedLabel2Chip.evaluate((node: HTMLInputElement) => node.checked); + expect(isChecked).toBeTruthy(); + }); + + test('Clicking "Label 1" chip changes checked state appropriately', async ({ page }) => { + const labelText1 = page.locator('text=Label 1'); + await labelText1.click(); + const chip1 = page.locator('input[id="option-1"]'); + const chip2 = page.locator('input[id="option-2"]'); + const chip3 = page.locator('input[id="option-3"]'); + + // "Label 1" becomes checked + const chip1checkedStatus = await chip1.evaluate((node: HTMLInputElement) => node.checked); + expect(chip1checkedStatus).toBeTruthy(); + + // "Label 2" becomes unchecked + const chip2checkedStatus = await chip2.evaluate((node: HTMLInputElement) => node.checked); + expect(chip2checkedStatus).toBeFalsy(); + + // "Label 3" becomes unchecked + const chip3checkedStatus = await chip3.evaluate((node: HTMLInputElement) => node.checked); + expect(chip3checkedStatus).toBeFalsy(); + }); + + test('Clicking "Label 3" chip changes checked state appropriately', async ({ page }) => { + const labelText3 = page.locator('text=Label 3'); + await labelText3.click(); + const chip1 = page.locator('input[id="option-1"]'); + const chip2 = page.locator('input[id="option-2"]'); + const chip3 = page.locator('input[id="option-3"]'); + + // "Label 1" becomes unchecked + const chip1checkedStatus = await chip1.evaluate((node: HTMLInputElement) => node.checked); + expect(chip1checkedStatus).toBeFalsy(); + + // "Label 2" becomes unchecked + const chip2checkedStatus = await chip2.evaluate((node: HTMLInputElement) => node.checked); + expect(chip2checkedStatus).toBeFalsy(); + + // "Label 3" becomes unchecked + const chip3checkedStatus = await chip3.evaluate((node: HTMLInputElement) => node.checked); + expect(chip3checkedStatus).toBeTruthy(); + }); }); }); diff --git a/packages/core/src/components/chip/test/radio/chip.e2e.ts-snapshots/tds-chip-radio-darkmode-renders-radio-chips-correctly-1-linux.png b/packages/core/src/components/chip/test/radio/chip.e2e.ts-snapshots/tds-chip-radio-darkmode-renders-radio-chips-correctly-1-linux.png new file mode 100644 index 000000000..6d8ee4fd4 Binary files /dev/null and b/packages/core/src/components/chip/test/radio/chip.e2e.ts-snapshots/tds-chip-radio-darkmode-renders-radio-chips-correctly-1-linux.png differ diff --git a/packages/core/src/components/chip/test/radio/chip.e2e.ts-snapshots/tds-chip-radio-lightmode-renders-radio-chips-correctly-1-linux.png b/packages/core/src/components/chip/test/radio/chip.e2e.ts-snapshots/tds-chip-radio-lightmode-renders-radio-chips-correctly-1-linux.png new file mode 100644 index 000000000..44e29508d Binary files /dev/null and b/packages/core/src/components/chip/test/radio/chip.e2e.ts-snapshots/tds-chip-radio-lightmode-renders-radio-chips-correctly-1-linux.png differ diff --git a/packages/core/src/components/chip/test/radio/chip.e2e.ts-snapshots/tds-chip-radio-renders-radio-chips-correctly-1-linux.png b/packages/core/src/components/chip/test/radio/chip.e2e.ts-snapshots/tds-chip-radio-renders-radio-chips-correctly-1-linux.png deleted file mode 100644 index aad0bed11..000000000 Binary files a/packages/core/src/components/chip/test/radio/chip.e2e.ts-snapshots/tds-chip-radio-renders-radio-chips-correctly-1-linux.png and /dev/null differ