Skip to content

Commit

Permalink
test(chip): add screenshot tests using reusable test code (#947)
Browse files Browse the repository at this point in the history
  • Loading branch information
@max-umain
max-umain authored Jan 15, 2025
1 parent 2c87518 commit 940a558
Show file tree
Hide file tree
Showing 25 changed files with 286 additions and 213 deletions.
49 changes: 29 additions & 20 deletions packages/core/src/components/chip/test/checkbox/chip.e2e.ts
View file
Original file line number Diff line number Diff line change
@@ -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');
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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"]');
Expand All @@ -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');
Expand All @@ -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');
Expand Down
Binary file added ...apshots/tds-chip-checkbox-darkmode-renders-checkbox-chips-correctly-1-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...pshots/tds-chip-checkbox-lightmode-renders-checkbox-chips-correctly-1-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed ...e2e.ts-snapshots/tds-chip-checkbox-renders-checkbox-chips-correctly-1-linux.png
View file
Binary file not shown.
39 changes: 27 additions & 12 deletions packages/core/src/components/chip/test/default/chip.e2e.ts
View file
Original file line number Diff line number Diff line change
@@ -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);
Expand Down
Binary file renamed ...enders-default-chip-correctly-1-linux.png → ...enders-default-chip-correctly-1-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...snapshots/tds-chip-default-lightmode-renders-default-chip-correctly-1-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
115 changes: 75 additions & 40 deletions packages/core/src/components/chip/test/disabled/chip.e2e.ts
View file
Original file line number Diff line number Diff line change
@@ -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'));
Expand All @@ -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(
Expand All @@ -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(
Expand All @@ -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'));
Expand All @@ -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'));
Expand Down
Binary file added ...s-snapshots/tds-chip-button-darkmode-renders-button-chips-correctly-1-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...-snapshots/tds-chip-button-lightmode-renders-button-chips-correctly-1-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed ...hip.e2e.ts-snapshots/tds-chip-button-renders-button-chips-correctly-1-linux.png
View file
Binary file not shown.
Binary file added ...apshots/tds-chip-checkbox-darkmode-renders-checkbox-chips-correctly-1-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...pshots/tds-chip-checkbox-lightmode-renders-checkbox-chips-correctly-1-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed ...e2e.ts-snapshots/tds-chip-checkbox-renders-checkbox-chips-correctly-1-linux.png
View file
Binary file not shown.
Binary file added ....ts-snapshots/tds-chip-radio-darkmode-renders-radio-chips-correctly-1-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...ts-snapshots/tds-chip-radio-lightmode-renders-radio-chips-correctly-1-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed .../chip.e2e.ts-snapshots/tds-chip-radio-renders-radio-chips-correctly-1-linux.png
View file
Binary file not shown.
Loading

0 comments on commit 940a558

Please sign in to comment.