diff --git a/core/src/components/action-sheet/test/a11y/action-sheet.e2e.ts b/core/src/components/action-sheet/test/a11y/action-sheet.e2e.ts index 2b09fdc51e..abe16b55a7 100644 --- a/core/src/components/action-sheet/test/a11y/action-sheet.e2e.ts +++ b/core/src/components/action-sheet/test/a11y/action-sheet.e2e.ts @@ -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( diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts b/core/src/components/alert/test/a11y/alert.e2e.ts index 1ad4ff73a8..845476d309 100644 --- a/core/src/components/alert/test/a11y/alert.e2e.ts +++ b/core/src/components/alert/test/a11y/alert.e2e.ts @@ -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( diff --git a/core/src/components/alert/test/basic/alert.e2e.ts b/core/src/components/alert/test/basic/alert.e2e.ts index eed39b2299..2f03456aa4 100644 --- a/core/src/components/alert/test/basic/alert.e2e.ts +++ b/core/src/components/alert/test/basic/alert.e2e.ts @@ -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( diff --git a/core/src/components/back-button/test/a11y/back-button.e2e.ts b/core/src/components/back-button/test/a11y/back-button.e2e.ts index 186a3d99e0..8c17919237 100644 --- a/core/src/components/back-button/test/a11y/back-button.e2e.ts +++ b/core/src/components/back-button/test/a11y/back-button.e2e.ts @@ -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( diff --git a/core/src/components/badge/test/a11y/badge.e2e.ts b/core/src/components/badge/test/a11y/badge.e2e.ts index 21001efeb4..6fa6e1d150 100644 --- a/core/src/components/badge/test/a11y/badge.e2e.ts +++ b/core/src/components/badge/test/a11y/badge.e2e.ts @@ -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 }) => { /** diff --git a/core/src/components/button/test/a11y/button.e2e.ts b/core/src/components/button/test/a11y/button.e2e.ts index 947e4a0b8d..585c0b5853 100644 --- a/core/src/components/button/test/a11y/button.e2e.ts +++ b/core/src/components/button/test/a11y/button.e2e.ts @@ -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( diff --git a/core/src/components/checkbox/test/a11y/checkbox.e2e.ts b/core/src/components/checkbox/test/a11y/checkbox.e2e.ts index 2a269f999d..9307d289d1 100644 --- a/core/src/components/checkbox/test/a11y/checkbox.e2e.ts +++ b/core/src/components/checkbox/test/a11y/checkbox.e2e.ts @@ -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( diff --git a/core/src/components/fab-button/test/a11y/fab-button.e2e.ts b/core/src/components/fab-button/test/a11y/fab-button.e2e.ts index 996a835c10..0f84e1e557 100644 --- a/core/src/components/fab-button/test/a11y/fab-button.e2e.ts +++ b/core/src/components/fab-button/test/a11y/fab-button.e2e.ts @@ -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( diff --git a/core/src/components/input/test/a11y/input.e2e.ts b/core/src/components/input/test/a11y/input.e2e.ts index dd6e3ebf72..6a40385c92 100644 --- a/core/src/components/input/test/a11y/input.e2e.ts +++ b/core/src/components/input/test/a11y/input.e2e.ts @@ -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( diff --git a/core/src/components/item-sliding/test/a11y/item-sliding.e2e.ts b/core/src/components/item-sliding/test/a11y/item-sliding.e2e.ts index bca2f87c00..271e63d3e4 100644 --- a/core/src/components/item-sliding/test/a11y/item-sliding.e2e.ts +++ b/core/src/components/item-sliding/test/a11y/item-sliding.e2e.ts @@ -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( diff --git a/core/src/components/label/test/a11y/label.e2e.ts b/core/src/components/label/test/a11y/label.e2e.ts index 614ed6fce0..a68632b059 100644 --- a/core/src/components/label/test/a11y/label.e2e.ts +++ b/core/src/components/label/test/a11y/label.e2e.ts @@ -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 }) => { /** diff --git a/core/src/components/loading/test/a11y/loading.e2e.ts b/core/src/components/loading/test/a11y/loading.e2e.ts index 12782dff9f..691f72d736 100644 --- a/core/src/components/loading/test/a11y/loading.e2e.ts +++ b/core/src/components/loading/test/a11y/loading.e2e.ts @@ -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( diff --git a/core/src/components/menu-button/test/a11y/menu-button.e2e.ts b/core/src/components/menu-button/test/a11y/menu-button.e2e.ts index a21a31f194..42ab2686c3 100644 --- a/core/src/components/menu-button/test/a11y/menu-button.e2e.ts +++ b/core/src/components/menu-button/test/a11y/menu-button.e2e.ts @@ -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( diff --git a/core/src/components/progress-bar/test/a11y/progress-bar.e2e.ts b/core/src/components/progress-bar/test/a11y/progress-bar.e2e.ts index 418cd9d642..fed6254c79 100644 --- a/core/src/components/progress-bar/test/a11y/progress-bar.e2e.ts +++ b/core/src/components/progress-bar/test/a11y/progress-bar.e2e.ts @@ -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 }) => { /** diff --git a/core/src/components/radio/test/a11y/radio.e2e.ts b/core/src/components/radio/test/a11y/radio.e2e.ts index bad4c5b55f..df92c82c4c 100644 --- a/core/src/components/radio/test/a11y/radio.e2e.ts +++ b/core/src/components/radio/test/a11y/radio.e2e.ts @@ -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( diff --git a/core/src/components/range/test/a11y/range.e2e.ts b/core/src/components/range/test/a11y/range.e2e.ts index b7219cf536..fa1eed10b7 100644 --- a/core/src/components/range/test/a11y/range.e2e.ts +++ b/core/src/components/range/test/a11y/range.e2e.ts @@ -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( diff --git a/core/src/components/refresher/test/a11y/refresher.e2e.ts b/core/src/components/refresher/test/a11y/refresher.e2e.ts index 2d7d79e623..ade7ddb979 100644 --- a/core/src/components/refresher/test/a11y/refresher.e2e.ts +++ b/core/src/components/refresher/test/a11y/refresher.e2e.ts @@ -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( diff --git a/core/src/components/router-link/test/a11y/router-link.e2e.ts b/core/src/components/router-link/test/a11y/router-link.e2e.ts index 83ee7a2aa5..7480be8551 100644 --- a/core/src/components/router-link/test/a11y/router-link.e2e.ts +++ b/core/src/components/router-link/test/a11y/router-link.e2e.ts @@ -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 }) => { /** diff --git a/core/src/components/segment/test/a11y/segment.e2e.ts b/core/src/components/segment/test/a11y/segment.e2e.ts index c8a13a93cc..9219f4f8ce 100644 --- a/core/src/components/segment/test/a11y/segment.e2e.ts +++ b/core/src/components/segment/test/a11y/segment.e2e.ts @@ -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( diff --git a/core/src/components/select-popover/test/a11y/select-popover.e2e.ts b/core/src/components/select-popover/test/a11y/select-popover.e2e.ts index 17a21e2389..07185ab2e0 100644 --- a/core/src/components/select-popover/test/a11y/select-popover.e2e.ts +++ b/core/src/components/select-popover/test/a11y/select-popover.e2e.ts @@ -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( diff --git a/core/src/components/select/test/a11y/select.e2e.ts b/core/src/components/select/test/a11y/select.e2e.ts index 216fa252a2..063add891d 100644 --- a/core/src/components/select/test/a11y/select.e2e.ts +++ b/core/src/components/select/test/a11y/select.e2e.ts @@ -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( diff --git a/core/src/components/textarea/test/a11y/textarea.e2e.ts b/core/src/components/textarea/test/a11y/textarea.e2e.ts index e2e893d896..825c55c44b 100644 --- a/core/src/components/textarea/test/a11y/textarea.e2e.ts +++ b/core/src/components/textarea/test/a11y/textarea.e2e.ts @@ -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( diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts b/core/src/components/toast/test/a11y/toast.e2e.ts index 5b13767d3a..bf1fbfd72c 100644 --- a/core/src/components/toast/test/a11y/toast.e2e.ts +++ b/core/src/components/toast/test/a11y/toast.e2e.ts @@ -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 }) => { diff --git a/core/src/components/toggle/test/a11y/toggle.e2e.ts b/core/src/components/toggle/test/a11y/toggle.e2e.ts index 60f3a961d0..26f5e1f496 100644 --- a/core/src/components/toggle/test/a11y/toggle.e2e.ts +++ b/core/src/components/toggle/test/a11y/toggle.e2e.ts @@ -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( diff --git a/core/src/css/test/a11y/typography.e2e.ts b/core/src/css/test/a11y/typography.e2e.ts index dfd5611166..7e4e2e1ad4 100644 --- a/core/src/css/test/a11y/typography.e2e.ts +++ b/core/src/css/test/a11y/typography.e2e.ts @@ -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 }) => { /** diff --git a/core/src/themes/test/colors/theme.e2e.ts b/core/src/themes/test/colors/theme.e2e.ts index c10356faf7..0595e39dcd 100644 --- a/core/src/themes/test/colors/theme.e2e.ts +++ b/core/src/themes/test/colors/theme.e2e.ts @@ -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']; diff --git a/core/src/utils/test/playwright/generator.ts b/core/src/utils/test/playwright/generator.ts index 7d0f39b42f..05df91f31f 100644 --- a/core/src/utils/test/playwright/generator.ts +++ b/core/src/utils/test/playwright/generator.ts @@ -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, }; diff --git a/core/src/utils/test/playwright/page/utils/set-content.ts b/core/src/utils/test/playwright/page/utils/set-content.ts index a64492008e..c1534d7791 100644 --- a/core/src/utils/test/playwright/page/utils/set-content.ts +++ b/core/src/utils/test/playwright/page/utils/set-content.ts @@ -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 - ${theme !== 'light' ? `` : ''} + ${palette !== 'light' ? `` : ''}