javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 01:52:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(playwright): migrate themes to palettes (#29148)

Browse Source 
Issue number: N/A

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Migrates the test infrastructure to use `palettes` instead of `themes`

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

This **does not** change where the light/dark/high contrast styles live
or how they are consumed in the test infra. That work is done here:
https://github.com/ionic-team/ionic-framework/pull/29149

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
This commit is contained in:
Sean Perkins
2024-03-14 10:29:09 -04:00
committed by GitHub
parent 7821b7899d
commit b148b3225b
28 changed files with 56 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/src/components/action-sheet/test/a11y/action-sheet.e2e.ts
View File

@ -40,7 +40,7 @@ const testAriaButton = async (
await expect(actionSheetButton).toHaveAttribute('aria-label', expectedAriaLabel);
};
configs({ directions: ['ltr'], themes: ['dark', 'light'] }).forEach(({ config, title }) => {
configs({ directions: ['ltr'], palettes: ['dark', 'light'] }).forEach(({ config, title }) => {
test.describe(title('action-sheet: Axe testing'), () => {
test('should not have accessibility violations when header is defined', async ({ page }) => {
await page.setContent(

2
core/src/components/alert/test/a11y/alert.e2e.ts
View File

@ -28,7 +28,7 @@ const testAria = async (
expect(ariaDescribedBy).toBe(expectedAriaDescribedBy);
};
configs({ directions: ['ltr'], themes: ['dark', 'light'] }).forEach(({ title, config }) => {
configs({ directions: ['ltr'], palettes: ['dark', 'light'] }).forEach(({ title, config }) => {
test.describe(title('alert: Axe testing'), () => {
test('should not have accessibility violations when header and message are defined', async ({ page }) => {
await page.setContent(

2
core/src/components/alert/test/basic/alert.e2e.ts
View File

@ -100,7 +100,7 @@ configs().forEach(({ config, screenshot, title }) => {
});
});
configs({ themes: ['light', 'dark'] }).forEach(({ config, screenshot, title }) => {
configs({ palettes: ['light', 'dark'] }).forEach(({ config, screenshot, title }) => {
test.describe(title('should not have visual regressions'), () => {
test('more than two buttons', async ({ page }) => {
await page.setContent(

2
core/src/components/back-button/test/a11y/back-button.e2e.ts
View File

@ -5,7 +5,7 @@ import { configs, test } from '@utils/test/playwright';
/**
* Only ios mode uses ion-color() for the back button
*/
configs({ directions: ['ltr'], modes: ['ios'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
configs({ directions: ['ltr'], modes: ['ios'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
test.describe(title('back-button: a11y for ion-color()'), () => {
test('should not have accessibility violations', async ({ page }) => {
await page.setContent(

2
core/src/components/badge/test/a11y/badge.e2e.ts
View File

@ -25,7 +25,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
});
});
configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ config, title }) => {
configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ config, title }) => {
test.describe(title('badge: a11y'), () => {
test('should not have accessibility violations', async ({ page }) => {
/**

4
core/src/components/button/test/a11y/button.e2e.ts
View File

@ -2,7 +2,7 @@ import AxeBuilder from '@axe-core/playwright';
import { expect } from '@playwright/test';
import { configs, test } from '@utils/test/playwright';
configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
test.describe(title('button: a11y for ion-color()'), () => {
test('should not have accessibility violations', async ({ page }) => {
await page.setContent(
@ -52,7 +52,7 @@ configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, co
/**
* Only ios mode uses ion-color() for the activated button state
*/
configs({ directions: ['ltr'], modes: ['ios'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
configs({ directions: ['ltr'], modes: ['ios'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
test.describe(title('button: ios contrast'), () => {
test('activated state should not have accessibility violations', async ({ page }) => {
await page.setContent(

2
core/src/components/checkbox/test/a11y/checkbox.e2e.ts
View File

@ -2,7 +2,7 @@ import AxeBuilder from '@axe-core/playwright';
import { expect } from '@playwright/test';
import { configs, test } from '@utils/test/playwright';
configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
test.describe(title('checkbox: a11y'), () => {
test('should not have accessibility violations', async ({ page }) => {
await page.setContent(

2
core/src/components/fab-button/test/a11y/fab-button.e2e.ts
View File

@ -2,7 +2,7 @@ import AxeBuilder from '@axe-core/playwright';
import { expect } from '@playwright/test';
import { configs, test } from '@utils/test/playwright';
configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
test.describe(title('fab-button: a11y'), () => {
test('should not have accessibility violations', async ({ page }) => {
await page.setContent(

2
core/src/components/input/test/a11y/input.e2e.ts
View File

@ -2,7 +2,7 @@ import AxeBuilder from '@axe-core/playwright';
import { expect } from '@playwright/test';
import { configs, test } from '@utils/test/playwright';
configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
test.describe(title('input: a11y'), () => {
test('default layout should not have accessibility violations', async ({ page }) => {
await page.setContent(

2
core/src/components/item-sliding/test/a11y/item-sliding.e2e.ts
View File

@ -4,7 +4,7 @@ import { configs, test } from '@utils/test/playwright';
import { testSlidingItem } from '../test.utils';
configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
test.describe(title('item-sliding: a11y for ion-color()'), () => {
test('should not have accessibility violations', async ({ page }) => {
await page.setContent(

2
core/src/components/label/test/a11y/label.e2e.ts
View File

@ -84,7 +84,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
});
});
configs({ directions: ['ltr'], modes: ['md'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
configs({ directions: ['ltr'], modes: ['md'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
test.describe(title('label: a11y for ion-color()'), () => {
test('should not have accessibility violations when focused', async ({ page }) => {
/**

2
core/src/components/loading/test/a11y/loading.e2e.ts
View File

@ -2,7 +2,7 @@ import AxeBuilder from '@axe-core/playwright';
import { expect } from '@playwright/test';
import { configs, test } from '@utils/test/playwright';
configs({ modes: ['ios'], directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
configs({ modes: ['ios'], directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
test.describe(title('loading: a11y'), () => {
test('should set aria-labelledby with a message', async ({ page }) => {
await page.setContent(

2
core/src/components/menu-button/test/a11y/menu-button.e2e.ts
View File

@ -5,7 +5,7 @@ import { configs, test } from '@utils/test/playwright';
/**
* Only ios mode uses ion-color() for the menu button
*/
configs({ directions: ['ltr'], modes: ['ios'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
configs({ directions: ['ltr'], modes: ['ios'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
test.describe(title('menu-button: a11y for ion-color()'), () => {
test('should not have accessibility violations', async ({ page }) => {
await page.setContent(

2
core/src/components/progress-bar/test/a11y/progress-bar.e2e.ts
View File

@ -2,7 +2,7 @@ import AxeBuilder from '@axe-core/playwright';
import { expect } from '@playwright/test';
import { configs, test } from '@utils/test/playwright';
configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
test.describe(title('progress-bar: a11y'), () => {
test('should not have accessibility violations', async ({ page }) => {
/**

2
core/src/components/radio/test/a11y/radio.e2e.ts
View File

@ -2,7 +2,7 @@ import AxeBuilder from '@axe-core/playwright';
import { expect } from '@playwright/test';
import { configs, test } from '@utils/test/playwright';
configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
test.describe(title('radio: a11y'), () => {
test('default layout should not have accessibility violations', async ({ page }) => {
await page.setContent(

2
core/src/components/range/test/a11y/range.e2e.ts
View File

@ -2,7 +2,7 @@ import AxeBuilder from '@axe-core/playwright';
import { expect } from '@playwright/test';
import { configs, test } from '@utils/test/playwright';
configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
test.describe(title('range: a11y'), () => {
test('should not have accessibility violations', async ({ page }) => {
await page.setContent(

2
core/src/components/refresher/test/a11y/refresher.e2e.ts
View File

@ -2,7 +2,7 @@ import AxeBuilder from '@axe-core/playwright';
import { expect } from '@playwright/test';
import { configs, test, dragElementBy } from '@utils/test/playwright';
configs({ directions: ['ltr'], modes: ['md'], themes: ['light', 'dark'] }).forEach(({ config, title }) => {
configs({ directions: ['ltr'], modes: ['md'], palettes: ['light', 'dark'] }).forEach(({ config, title }) => {
test.describe(title('refresher: a11y for ion-color()'), () => {
test('should not have accessibility violations', async ({ page }) => {
await page.setContent(

2
core/src/components/router-link/test/a11y/router-link.e2e.ts
View File

@ -2,7 +2,7 @@ import AxeBuilder from '@axe-core/playwright';
import { expect } from '@playwright/test';
import { configs, test } from '@utils/test/playwright';
configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
test.describe(title('router-link: a11y'), () => {
test('should not have accessibility violations', async ({ page }) => {
/**

2
core/src/components/segment/test/a11y/segment.e2e.ts
View File

@ -5,7 +5,7 @@ import { configs, test } from '@utils/test/playwright';
/**
* Only md mode uses ion-color() for the segment button
*/
configs({ directions: ['ltr'], modes: ['md'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
configs({ directions: ['ltr'], modes: ['md'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
test.describe(title('segment: a11y for ion-color()'), () => {
test('should not have accessibility violations', async ({ page }) => {
await page.setContent(

2
core/src/components/select-popover/test/a11y/select-popover.e2e.ts
View File

@ -2,7 +2,7 @@ import AxeBuilder from '@axe-core/playwright';
import { expect } from '@playwright/test';
import { configs, test } from '@utils/test/playwright';
configs({ directions: ['ltr'], themes: ['dark', 'light'] }).forEach(({ config, title }) => {
configs({ directions: ['ltr'], palettes: ['dark', 'light'] }).forEach(({ config, title }) => {
test.describe(title('select-popover: a11y'), () => {
test('should not have accessibility violations when header is defined', async ({ page }) => {
await page.setContent(

2
core/src/components/select/test/a11y/select.e2e.ts
View File

@ -2,7 +2,7 @@ import AxeBuilder from '@axe-core/playwright';
import { expect } from '@playwright/test';
import { configs, test } from '@utils/test/playwright';
configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
test.describe(title('textarea: a11y'), () => {
test('default layout should not have accessibility violations', async ({ page }) => {
await page.setContent(

2
core/src/components/textarea/test/a11y/textarea.e2e.ts
View File

@ -2,7 +2,7 @@ import AxeBuilder from '@axe-core/playwright';
import { expect } from '@playwright/test';
import { configs, test } from '@utils/test/playwright';
configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
test.describe(title('textarea: a11y'), () => {
test('default layout should not have accessibility violations', async ({ page }) => {
await page.setContent(

4
core/src/components/toast/test/a11y/toast.e2e.ts
View File

@ -2,7 +2,7 @@ import AxeBuilder from '@axe-core/playwright';
import { expect } from '@playwright/test';
import { configs, test } from '@utils/test/playwright';
configs({ directions: ['ltr'], themes: ['dark', 'light'] }).forEach(({ title, config }) => {
configs({ directions: ['ltr'], palettes: ['dark', 'light'] }).forEach(({ title, config }) => {
test.describe(title('toast: Axe testing'), () => {
test('should not have any axe violations with inline toasts', async ({ page }) => {
await page.setContent(
@ -234,7 +234,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
/**
* High contrast mode tests
*/
configs({ directions: ['ltr'], themes: ['high-contrast-dark', 'high-contrast'] }).forEach(
configs({ directions: ['ltr'], palettes: ['high-contrast-dark', 'high-contrast'] }).forEach(
({ title, config, screenshot }) => {
test.describe(title('toast: high contrast: buttons'), () => {
test.beforeEach(async ({ page }) => {

2
core/src/components/toggle/test/a11y/toggle.e2e.ts
View File

@ -2,7 +2,7 @@ import AxeBuilder from '@axe-core/playwright';
import { expect } from '@playwright/test';
import { configs, test } from '@utils/test/playwright';
configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
test.describe(title('toggle: a11y'), () => {
test('should not have accessibility violations', async ({ page }) => {
await page.setContent(

2
core/src/css/test/a11y/typography.e2e.ts
View File

@ -35,7 +35,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, screenshot, c
});
});
configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ config, title }) => {
configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ config, title }) => {
test.describe(title('typography: a11y'), () => {
test('should not have accessibility violations for anchor tags', async ({ page }) => {
/**

4
core/src/themes/test/colors/theme.e2e.ts
View File

@ -49,7 +49,7 @@ const styleTestHelpers = `
* 6) The base color as the text color against the base color at 0.12 opacity as the background color
* 7) The base color as the text color against the base color at 0.16 opacity as the background color
*/
configs({ modes: ['md'], directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ config, title }) => {
configs({ modes: ['md'], directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ config, title }) => {
const colors = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
test.describe(title('theme'), () => {
@ -153,7 +153,7 @@ configs({ modes: ['md'], directions: ['ltr'], themes: ['light', 'dark'] }).forEa
});
});
configs({ modes: ['md'], directions: ['ltr'], themes: ['high-contrast', 'high-contrast-dark'] }).forEach(
configs({ modes: ['md'], directions: ['ltr'], palettes: ['high-contrast', 'high-contrast-dark'] }).forEach(
({ config, title }) => {
const colors = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];

40
core/src/utils/test/playwright/generator.ts
View File

@ -8,7 +8,7 @@ export type Direction = 'ltr' | 'rtl';
* - `high-contrast`: The high contrast light theme values.
* - `high-contrast-dark`: The high contrast dark theme values.
*/
export type Theme = 'light' | 'dark' | 'high-contrast' | 'high-contrast-dark';
export type Palette = 'light' | 'dark' | 'high-contrast' | 'high-contrast-dark';
export type TitleFn = (title: string) => string;
export type ScreenshotFn = (fileName: string) => string;
@ -16,7 +16,7 @@ export type ScreenshotFn = (fileName: string) => string;
export interface TestConfig {
mode: Mode;
direction: Direction;
theme: Theme;
palette: Palette;
}
interface TestUtilities {
@ -28,7 +28,7 @@ interface TestUtilities {
interface TestConfigOption {
modes?: Mode[];
directions?: Direction[];
themes?: Theme[];
palettes?: Palette[];
}
/**
@ -38,19 +38,19 @@ interface TestConfigOption {
* each test title is unique.
*/
const generateTitle = (title: string, config: TestConfig): string => {
const { mode, direction, theme } = config;
const { mode, direction, palette } = config;
if (theme === 'light') {
if (palette === 'light') {
/**
* Ionic has many existing tests that existed prior to
* the introduction of theme testing. To maintain backwards
* compatibility, we will not include the theme in the test
* title if the theme is set to light.
* the introduction of palette testing. To maintain backwards
* compatibility, we will not include the palette in the test
* title if the palette is set to light.
*/
return `${title} - ${mode}/${direction}`;
}
return `${title} - ${mode}/${direction}/${theme}`;
return `${title} - ${mode}/${direction}/${palette}`;
};
/**
@ -58,19 +58,19 @@ const generateTitle = (title: string, config: TestConfig): string => {
* and a test config.
*/
const generateScreenshotName = (fileName: string, config: TestConfig): string => {
const { mode, direction, theme } = config;
const { mode, direction, palette } = config;
if (theme === 'light') {
if (palette === 'light') {
/**
* Ionic has many existing tests that existed prior to
* the introduction of theme testing. To maintain backwards
* compatibility, we will not include the theme in the screenshot
* name if the theme is set to light.
* the introduction of palette testing. To maintain backwards
* compatibility, we will not include the palette in the screenshot
* name if the palette is set to light.
*/
return `${fileName}-${mode}-${direction}.png`;
}
return `${fileName}-${mode}-${direction}-${theme}.png`;
return `${fileName}-${mode}-${direction}-${palette}.png`;
};
/**
@ -87,12 +87,12 @@ export const configs = (testConfig: TestConfigOption = DEFAULT_TEST_CONFIG_OPTIO
*/
const processedMode = modes ?? DEFAULT_MODES;
const processedDirection = directions ?? DEFAULT_DIRECTIONS;
const processedTheme = testConfig.themes ?? DEFAULT_THEMES;
const processedPalette = testConfig.palettes ?? DEFAULT_PALETTES;
processedMode.forEach((mode) => {
processedDirection.forEach((direction) => {
processedTheme.forEach((theme) => {
configs.push({ mode, direction, theme });
processedPalette.forEach((palette) => {
configs.push({ mode, direction, palette });
});
});
});
@ -108,10 +108,10 @@ export const configs = (testConfig: TestConfigOption = DEFAULT_TEST_CONFIG_OPTIO
const DEFAULT_MODES: Mode[] = ['ios', 'md'];
const DEFAULT_DIRECTIONS: Direction[] = ['ltr', 'rtl'];
const DEFAULT_THEMES: Theme[] = ['light'];
const DEFAULT_PALETTES: Palette[] = ['light'];
const DEFAULT_TEST_CONFIG_OPTION = {
modes: DEFAULT_MODES,
directions: DEFAULT_DIRECTIONS,
themes: DEFAULT_THEMES,
palettes: DEFAULT_PALETTES,
};

14
core/src/utils/test/playwright/page/utils/set-content.ts
View File

@ -1,5 +1,5 @@
import type { Page, TestInfo } from '@playwright/test';
import type { E2EPageOptions, Mode, Direction, Theme } from '@utils/test/playwright';
import type { E2EPageOptions, Mode, Direction, Palette } from '@utils/test/playwright';
/**
* Overwrites the default Playwright page.setContent method.
@ -19,16 +19,16 @@ export const setContent = async (page: Page, html: string, testInfo: TestInfo, o
let mode: Mode;
let direction: Direction;
let theme: Theme;
let palette: Palette;
if (options == undefined) {
mode = testInfo.project.metadata.mode;
direction = testInfo.project.metadata.rtl ? 'rtl' : 'ltr';
theme = testInfo.project.metadata.theme;
palette = testInfo.project.metadata.palette;
} else {
mode = options.mode;
direction = options.direction;
theme = options.theme;
palette = options.palette;
}
const baseUrl = process.env.PLAYWRIGHT_TEST_BASE_URL;
@ -42,7 +42,7 @@ export const setContent = async (page: Page, html: string, testInfo: TestInfo, o
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<link href="${baseUrl}/css/ionic.bundle.css" rel="stylesheet" />
<link href="${baseUrl}/scripts/testing/styles.css" rel="stylesheet" />
${theme !== 'light' ? `<link href="${baseUrl}/css/themes/${theme}.always.css" rel="stylesheet" />` : ''}
${palette !== 'light' ? `<link href="${baseUrl}/css/themes/${palette}.always.css" rel="stylesheet" />` : ''}
<script src="${baseUrl}/scripts/testing/scripts.js"></script>
<script type="module" src="${baseUrl}/dist/ionic/ionic.esm.js"></script>
<script>
@ -60,8 +60,8 @@ export const setContent = async (page: Page, html: string, testInfo: TestInfo, o
`;
testInfo.annotations.push({
type: 'theme',
description: theme,
type: 'palette',
description: palette,
});
if (baseUrl) {