Skip to content

Commit 5c2a73b

Browse files
sean-perkinssean-perkins
authored
chore(playwright): dark mode support (#28593)
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. --> Testing dark mode is manual per test in Playwright. Ionic developer needs to setup the variables and assign them to a selector that applies in the class. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - The `.setContent` API will now work with a new config option to test dark mode automatically without additional configuration/test set-up. - Default theme is no theme (fallback theme) - Screenshot names and test titles remain the same for all existing tests. Only tests that opt into a theme will be pre-pended with `-dark` or `-light` (as an example for current themes). ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. -->
1 parent 34417a5 commit 5c2a73b

File tree

3 files changed

+203
-10
lines changed

3 files changed

+203
-10
lines changed

‎core/scripts/testing/themes/dark.css‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
/*
2+
* Dark Colors
3+
* -------------------------------------------
4+
*/
5+
6+
:root {
7+
--ion-color-primary: #428cff;
8+
--ion-color-primary-rgb: 66, 140, 255;
9+
--ion-color-primary-contrast: #ffffff;
10+
--ion-color-primary-contrast-rgb: 255, 255, 255;
11+
--ion-color-primary-shade: #3a7be0;
12+
--ion-color-primary-tint: #5598ff;
13+
14+
--ion-color-secondary: #50c8ff;
15+
--ion-color-secondary-rgb: 80, 200, 255;
16+
--ion-color-secondary-contrast: #ffffff;
17+
--ion-color-secondary-contrast-rgb: 255, 255, 255;
18+
--ion-color-secondary-shade: #46b0e0;
19+
--ion-color-secondary-tint: #62ceff;
20+
21+
--ion-color-tertiary: #6a64ff;
22+
--ion-color-tertiary-rgb: 106, 100, 255;
23+
--ion-color-tertiary-contrast: #ffffff;
24+
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
25+
--ion-color-tertiary-shade: #5d58e0;
26+
--ion-color-tertiary-tint: #7974ff;
27+
28+
--ion-color-success: #2fdf75;
29+
--ion-color-success-rgb: 47, 223, 117;
30+
--ion-color-success-contrast: #000000;
31+
--ion-color-success-contrast-rgb: 0, 0, 0;
32+
--ion-color-success-shade: #29c467;
33+
--ion-color-success-tint: #44e283;
34+
35+
--ion-color-warning: #ffd534;
36+
--ion-color-warning-rgb: 255, 213, 52;
37+
--ion-color-warning-contrast: #000000;
38+
--ion-color-warning-contrast-rgb: 0, 0, 0;
39+
--ion-color-warning-shade: #e0bb2e;
40+
--ion-color-warning-tint: #ffd948;
41+
42+
--ion-color-danger: #ff4961;
43+
--ion-color-danger-rgb: 255, 73, 97;
44+
--ion-color-danger-contrast: #ffffff;
45+
--ion-color-danger-contrast-rgb: 255, 255, 255;
46+
--ion-color-danger-shade: #e04055;
47+
--ion-color-danger-tint: #ff5b71;
48+
49+
--ion-color-dark: #f4f5f8;
50+
--ion-color-dark-rgb: 244, 245, 248;
51+
--ion-color-dark-contrast: #000000;
52+
--ion-color-dark-contrast-rgb: 0, 0, 0;
53+
--ion-color-dark-shade: #d7d8da;
54+
--ion-color-dark-tint: #f5f6f9;
55+
56+
--ion-color-medium: #989aa2;
57+
--ion-color-medium-rgb: 152, 154, 162;
58+
--ion-color-medium-contrast: #000000;
59+
--ion-color-medium-contrast-rgb: 0, 0, 0;
60+
--ion-color-medium-shade: #86888f;
61+
--ion-color-medium-tint: #a2a4ab;
62+
63+
--ion-color-light: #222428;
64+
--ion-color-light-rgb: 34, 36, 40;
65+
--ion-color-light-contrast: #ffffff;
66+
--ion-color-light-contrast-rgb: 255, 255, 255;
67+
--ion-color-light-shade: #1e2023;
68+
--ion-color-light-tint: #383a3e;
69+
}
70+
71+
/*
72+
* iOS Dark Theme
73+
* -------------------------------------------
74+
*/
75+
76+
.ios body {
77+
--ion-background-color: #000000;
78+
--ion-background-color-rgb: 0, 0, 0;
79+
80+
--ion-text-color: #ffffff;
81+
--ion-text-color-rgb: 255, 255, 255;
82+
83+
--ion-color-step-50: #0d0d0d;
84+
--ion-color-step-100: #1a1a1a;
85+
--ion-color-step-150: #262626;
86+
--ion-color-step-200: #333333;
87+
--ion-color-step-250: #404040;
88+
--ion-color-step-300: #4d4d4d;
89+
--ion-color-step-350: #595959;
90+
--ion-color-step-400: #666666;
91+
--ion-color-step-450: #737373;
92+
--ion-color-step-500: #808080;
93+
--ion-color-step-550: #8c8c8c;
94+
--ion-color-step-600: #999999;
95+
--ion-color-step-650: #a6a6a6;
96+
--ion-color-step-700: #b3b3b3;
97+
--ion-color-step-750: #bfbfbf;
98+
--ion-color-step-800: #cccccc;
99+
--ion-color-step-850: #d9d9d9;
100+
--ion-color-step-900: #e6e6e6;
101+
--ion-color-step-950: #f2f2f2;
102+
103+
--ion-toolbar-background: #0d0d0d;
104+
105+
--ion-item-background: #000000;
106+
107+
--ion-card-background: #1c1c1d;
108+
}
109+
110+
/*
111+
* Material Design Dark Theme
112+
* -------------------------------------------
113+
*/
114+
115+
.md body {
116+
--ion-background-color: #121212;
117+
--ion-background-color-rgb: 18, 18, 18;
118+
119+
--ion-text-color: #ffffff;
120+
--ion-text-color-rgb: 255, 255, 255;
121+
122+
--ion-border-color: #222222;
123+
124+
--ion-color-step-50: #1e1e1e;
125+
--ion-color-step-100: #2a2a2a;
126+
--ion-color-step-150: #363636;
127+
--ion-color-step-200: #414141;
128+
--ion-color-step-250: #4d4d4d;
129+
--ion-color-step-300: #595959;
130+
--ion-color-step-350: #656565;
131+
--ion-color-step-400: #717171;
132+
--ion-color-step-450: #7d7d7d;
133+
--ion-color-step-500: #898989;
134+
--ion-color-step-550: #949494;
135+
--ion-color-step-600: #a0a0a0;
136+
--ion-color-step-650: #acacac;
137+
--ion-color-step-700: #b8b8b8;
138+
--ion-color-step-750: #c4c4c4;
139+
--ion-color-step-800: #d0d0d0;
140+
--ion-color-step-850: #dbdbdb;
141+
--ion-color-step-900: #e7e7e7;
142+
--ion-color-step-950: #f3f3f3;
143+
144+
--ion-item-background: #1e1e1e;
145+
146+
--ion-toolbar-background: #1f1f1f;
147+
148+
--ion-tab-bar-background: #1f1f1f;
149+
150+
--ion-card-background: #1e1e1e;
151+
}

‎core/src/utils/test/playwright/generator.ts‎

Lines changed: 42 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,20 @@
11
export type Mode = 'ios' | 'md';
22
export type Direction = 'ltr' | 'rtl';
3+
/**
4+
* The theme to use for the playwright test.
5+
*
6+
* - `light`: The fallback theme values. Theme stylesheet will not be included.
7+
* - `dark`: The dark theme values.
8+
*/
9+
export type Theme = 'light' | 'dark';
310

411
export type TitleFn = (title: string) => string;
512
export type ScreenshotFn = (fileName: string) => string;
613

714
export interface TestConfig {
815
mode: Mode;
916
direction: Direction;
17+
theme: Theme;
1018
}
1119

1220
interface TestUtilities {
@@ -18,6 +26,7 @@ interface TestUtilities {
1826
interface TestConfigOption {
1927
modes?: Mode[];
2028
directions?: Direction[];
29+
themes?: Theme[];
2130
}
2231

2332
/**
@@ -27,19 +36,39 @@ interface TestConfigOption {
2736
* each test title is unique.
2837
*/
2938
const generateTitle = (title: string, config: TestConfig): string => {
30-
const { mode, direction } = config;
39+
const { mode, direction, theme } = config;
3140

32-
return `${title} - ${mode}/${direction}`;
41+
if (theme === 'light') {
42+
/**
43+
* Ionic has many existing tests that existed prior to
44+
* the introduction of theme testing. To maintain backwards
45+
* compatibility, we will not include the theme in the test
46+
* title if the theme is set to light.
47+
*/
48+
return `${title} - ${mode}/${direction}`;
49+
}
50+
51+
return `${title} - ${mode}/${direction}/${theme}`;
3352
};
3453

3554
/**
3655
* Generates a unique filename based on a base filename
3756
* and a test config.
3857
*/
3958
const generateScreenshotName = (fileName: string, config: TestConfig): string => {
40-
const { mode, direction } = config;
59+
const { mode, direction, theme } = config;
60+
61+
if (theme === 'light') {
62+
/**
63+
* Ionic has many existing tests that existed prior to
64+
* the introduction of theme testing. To maintain backwards
65+
* compatibility, we will not include the theme in the screenshot
66+
* name if the theme is set to light.
67+
*/
68+
return `${fileName}-${mode}-${direction}.png`;
69+
}
4170

42-
return `${fileName}-${mode}-${direction}.png`;
71+
return `${fileName}-${mode}-${direction}-${theme}.png`;
4372
};
4473

4574
/**
@@ -54,12 +83,15 @@ export const configs = (testConfig: TestConfigOption = DEFAULT_TEST_CONFIG_OPTIO
5483
* If certain options are not provided,
5584
* fall back to the defaults.
5685
*/
57-
const processedMode: Mode[] = modes ?? DEFAULT_MODES;
58-
const processedDirection: Direction[] = directions ?? DEFAULT_DIRECTIONS;
86+
const processedMode = modes ?? DEFAULT_MODES;
87+
const processedDirection = directions ?? DEFAULT_DIRECTIONS;
88+
const processedTheme = testConfig.themes ?? DEFAULT_THEMES;
5989

60-
processedMode.forEach((mode: Mode) => {
61-
processedDirection.forEach((direction: Direction) => {
62-
configs.push({ mode, direction });
90+
processedMode.forEach((mode) => {
91+
processedDirection.forEach((direction) => {
92+
processedTheme.forEach((theme) => {
93+
configs.push({ mode, direction, theme });
94+
});
6395
});
6496
});
6597

@@ -74,6 +106,7 @@ export const configs = (testConfig: TestConfigOption = DEFAULT_TEST_CONFIG_OPTIO
74106

75107
const DEFAULT_MODES: Mode[] = ['ios', 'md'];
76108
const DEFAULT_DIRECTIONS: Direction[] = ['ltr', 'rtl'];
109+
const DEFAULT_THEMES: Theme[] = ['light'];
77110

78111
const DEFAULT_TEST_CONFIG_OPTION = {
79112
modes: DEFAULT_MODES,

‎core/src/utils/test/playwright/page/utils/set-content.ts‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { Page, TestInfo } from '@playwright/test';
2-
import type { E2EPageOptions, Mode, Direction } from '@utils/test/playwright';
2+
import type { E2EPageOptions, Mode, Direction, Theme } from '@utils/test/playwright';
33

44
/**
55
* Overwrites the default Playwright page.setContent method.
@@ -19,13 +19,16 @@ export const setContent = async (page: Page, html: string, testInfo: TestInfo, o
1919

2020
let mode: Mode;
2121
let direction: Direction;
22+
let theme: Theme;
2223

2324
if (options == undefined) {
2425
mode = testInfo.project.metadata.mode;
2526
direction = testInfo.project.metadata.rtl ? 'rtl' : 'ltr';
27+
theme = testInfo.project.metadata.theme;
2628
} else {
2729
mode = options.mode;
2830
direction = options.direction;
31+
theme = options.theme;
2932
}
3033

3134
const baseUrl = process.env.PLAYWRIGHT_TEST_BASE_URL;
@@ -39,6 +42,7 @@ export const setContent = async (page: Page, html: string, testInfo: TestInfo, o
3942
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
4043
<link href="${baseUrl}/css/ionic.bundle.css" rel="stylesheet" />
4144
<link href="${baseUrl}/scripts/testing/styles.css" rel="stylesheet" />
45+
${theme !== 'light' ? `<link href="${baseUrl}/scripts/testing/themes/${theme}.css" rel="stylesheet" />` : ''}
4246
<script src="${baseUrl}/scripts/testing/scripts.js"></script>
4347
<script type="module" src="${baseUrl}/dist/ionic/ionic.esm.js"></script>
4448
<script>
@@ -55,6 +59,11 @@ export const setContent = async (page: Page, html: string, testInfo: TestInfo, o
5559
</html>
5660
`;
5761

62+
testInfo.annotations.push({
63+
type: 'theme',
64+
description: theme,
65+
});
66+
5867
if (baseUrl) {
5968
await page.route(baseUrl, (route) => {
6069
if (route.request().url() === `${baseUrl}/`) {

0 commit comments

Comments
 (0)