Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(playwright): migrate themes to palettes #29148

Merged
merged 2 commits into from
Mar 14, 2024
Merged

chore(playwright): migrate themes to palettes #29148

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6b7dcdf
chore(playwright): migrate themes to palettes
sean-perkins Mar 13, 2024
8af0740
Merge branch 'feature-8.0' into sp/test-palettes
liamdebeasi Mar 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion core/src/components/action-sheet/test/a11y/action-sheet.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/alert/test/a11y/alert.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/alert/test/basic/alert.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/back-button/test/a11y/back-button.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/badge/test/a11y/badge.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) => {
/**
Expand Down
4 changes: 2 additions & 2 deletions core/src/components/button/test/a11y/button.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/checkbox/test/a11y/checkbox.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/fab-button/test/a11y/fab-button.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/input/test/a11y/input.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/item-sliding/test/a11y/item-sliding.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/label/test/a11y/label.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) => {
/**
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/loading/test/a11y/loading.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/menu-button/test/a11y/menu-button.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/progress-bar/test/a11y/progress-bar.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) => {
/**
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/radio/test/a11y/radio.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
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(
Expand Down Expand Up @@ -131,7 +131,7 @@
const firstGroupRadios = page.locator('#first-group ion-radio');

await pageUtils.pressKeys('Tab');
await expect(firstGroupRadios.nth(0)).toBeFocused();

Check failure on line 134 in core/src/components/radio/test/a11y/radio.e2e.ts

View workflow job for this annotation

GitHub Actions / test-core-screenshot (18, 20)

[Mobile Safari] › src/components/radio/test/a11y/radio.e2e.ts:130:11 › radio: a11y - ios/ltr/dark › radio: keyboard navigation - ios/ltr/dark › using arrow keys should move between enabled radios within group 

  1) [Mobile Safari] › src/components/radio/test/a11y/radio.e2e.ts:130:11 › radio: a11y - ios/ltr/dark › radio: keyboard navigation - ios/ltr/dark › using arrow keys should move between enabled radios within group 
    Error: Timed out 5000ms waiting for expect(locator).toBeFocused()

    Locator: locator('#first-group ion-radio').first()
    Expected: focused
    Received: inactive
    Call log:
      - expect.toBeFocused with timeout 5000ms
      - waiting for locator('#first-group ion-radio').first()
      -   locator resolved to <ion-radio value="huey" role="radio" tabindex="0" aria-chec…>Huey</ion-radio>
      -   unexpected value "not focused"
      -   locator resolved to <ion-radio value="huey" role="radio" tabindex="0" aria-chec…>Huey</ion-radio>
      -   unexpected value "not focused"
      -   locator resolved to <ion-radio value="huey" role="radio" tabindex="0" aria-chec…>Huey</ion-radio>
      -   unexpected value "not focused"
      -   locator resolved to <ion-radio value="huey" role="radio" tabindex="0" aria-chec…>Huey</ion-radio>
      -   unexpected value "not focused"
      -   locator resolved to <ion-radio value="huey" role="radio" tabindex="0" aria-chec…>Huey</ion-radio>
      -   unexpected value "not focused"
      -   locator resolved to <ion-radio value="huey" role="radio" tabindex="0" aria-chec…>Huey</ion-radio>
      -   unexpected value "not focused"
      -   locator resolved to <ion-radio value="huey" role="radio" tabindex="0" aria-chec…>Huey</ion-radio>
      -   unexpected value "not focused"
      -   locator resolved to <ion-radio value="huey" role="radio" tabindex="0" aria-chec…>Huey</ion-radio>
      -   unexpected value "not focused"
      -   locator resolved to <ion-radio value="huey" role="radio" tabindex="0" aria-chec…>Huey</ion-radio>
      -   unexpected value "not focused"


      132 |
      133 |         await pageUtils.pressKeys('Tab');
    > 134 |         await expect(firstGroupRadios.nth(0)).toBeFocused();
          |                                               ^
      135 |
      136 |         await page.keyboard.press('ArrowDown');
      137 |         await expect(firstGroupRadios.nth(1)).toBeFocused();

        at /home/runner/work/ionic-framework/ionic-framework/core/src/components/radio/test/a11y/radio.e2e.ts:134:47

await page.keyboard.press('ArrowDown');
await expect(firstGroupRadios.nth(1)).toBeFocused();
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/range/test/a11y/range.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/refresher/test/a11y/refresher.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/router-link/test/a11y/router-link.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) => {
/**
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/segment/test/a11y/segment.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/select-popover/test/a11y/select-popover.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/select/test/a11y/select.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/textarea/test/a11y/textarea.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
4 changes: 2 additions & 2 deletions core/src/components/toast/test/a11y/toast.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -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 }) => {
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/toggle/test/a11y/toggle.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion core/src/css/test/a11y/typography.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) => {
/**
Expand Down
4 changes: 2 additions & 2 deletions core/src/themes/test/colors/theme.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'), () => {
Expand Down Expand Up @@ -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'];

Expand Down
40 changes: 20 additions & 20 deletions core/src/utils/test/playwright/generator.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,15 @@ 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;

export interface TestConfig {
mode: Mode;
direction: Direction;
theme: Theme;
palette: Palette;
}

interface TestUtilities {
Expand All @@ -28,7 +28,7 @@ interface TestUtilities {
interface TestConfigOption {
modes?: Mode[];
directions?: Direction[];
themes?: Theme[];
palettes?: Palette[];
}

/**
Expand All @@ -38,39 +38,39 @@ 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}`;
};

/**
* Generates a unique filename based on a base filename
* 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`;
};

/**
Expand All @@ -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 });
});
});
});
Expand All @@ -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,
};
Loading
Loading