Skip to content

Commit f74ad63

Browse files
sean-perkinsIonitron
sean-perkins
and
Ionitron
authored
test(progress-bar): remove range from basic screenshot tests (#28035)
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. --> The progress bar basic test makes use of the `ion-range` component in the captured screenshot. This results in tight coupling when the appearance of the range changes. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Decouples `ion-range` from the progress bar basic screenshot captures - Splits out dynamic behavior that was used with `ion-range` to test files that can be manually interacted with ## 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. --> --------- Co-authored-by: ionitron <[email protected]>
1 parent a079d20 commit f74ad63

23 files changed

+223
-43
lines changed

‎core/src/components/progress-bar/test/basic/index.html

Lines changed: 0 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -79,18 +79,6 @@
7979
</ion-list-header>
8080
<ion-progress-bar class="custom-bar-background" value="0.75"></ion-progress-bar>
8181

82-
<ion-list-header>
83-
<ion-label> Determinate (change progress with slider) </ion-label>
84-
</ion-list-header>
85-
<ion-progress-bar id="progressBar"></ion-progress-bar>
86-
87-
<ion-item>
88-
<ion-range legacy="true" pin="true" value="0" id="progressValue">
89-
<ion-label slot="start">0</ion-label>
90-
<ion-label slot="end">100</ion-label>
91-
</ion-range>
92-
</ion-item>
93-
9482
<ion-list-header>
9583
<ion-label> Buffer </ion-label>
9684
</ion-list-header>
@@ -105,39 +93,8 @@
10593
<ion-label> Buffer (without value) </ion-label>
10694
</ion-list-header>
10795
<ion-progress-bar color="tertiary" buffer="0"></ion-progress-bar>
108-
109-
<ion-list-header>
110-
<ion-label> Buffer (change buffer with slider) </ion-label>
111-
</ion-list-header>
112-
<ion-progress-bar class="progressBarBuffer" value="0.20" buffer="0.4"></ion-progress-bar>
113-
<ion-progress-bar class="progressBarBuffer" value="0.20" buffer="0.4" reversed="true"></ion-progress-bar>
114-
115-
<ion-item>
116-
<ion-range legacy="true" pin="true" value="0" id="progressValueBuffer">
117-
<ion-label slot="start">0</ion-label>
118-
<ion-label slot="end">100</ion-label>
119-
</ion-range>
120-
</ion-item>
12196
</ion-list>
12297
</ion-content>
12398
</ion-app>
124-
125-
<script>
126-
// Progress Bar Value
127-
const progressValue = document.getElementById('progressValue');
128-
const progressBar = document.getElementById('progressBar');
129-
130-
progressValue.addEventListener('ionChange', function (ev) {
131-
progressBar.value = ev.detail.value / 100;
132-
});
133-
134-
// Progress Bar Buffer
135-
const progressValueBuffer = document.getElementById('progressValueBuffer');
136-
const progressBarBuffer = document.querySelectorAll('.progressBarBuffer');
137-
138-
progressValueBuffer.addEventListener('ionChange', function (ev) {
139-
progressBarBuffer.forEach((ele) => (ele.buffer = ev.detail.value / 100));
140-
});
141-
</script>
14299
</body>
143100
</html>

‎core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-ltr-Mobile-Chrome-linux.png

-17.7 KB
Loading

‎core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-ltr-Mobile-Firefox-linux.png

-20.9 KB
Loading

‎core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-ltr-Mobile-Safari-linux.png

-15.1 KB
Loading

‎core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-rtl-Mobile-Chrome-linux.png

-17.7 KB
Loading

‎core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-rtl-Mobile-Firefox-linux.png

-20.5 KB
Loading

‎core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-ios-rtl-Mobile-Safari-linux.png

-15.2 KB
Loading

‎core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-ltr-Mobile-Chrome-linux.png

-8.88 KB
Loading

‎core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-ltr-Mobile-Firefox-linux.png

-12 KB
Loading

‎core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-ltr-Mobile-Safari-linux.png

-7.55 KB
Loading

‎core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-rtl-Mobile-Chrome-linux.png

-8.8 KB
Loading

‎core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-rtl-Mobile-Firefox-linux.png

-12 KB
Loading

‎core/src/components/progress-bar/test/basic/progress-bar.e2e.ts-snapshots/progress-bar-basic-md-rtl-Mobile-Safari-linux.png

-7.48 KB
Loading

‎core/src/components/progress-bar/test/buffer/index.html

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Progress Bar - Buffer</title>
6+
<meta
7+
name="viewport"
8+
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
9+
/>
10+
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
11+
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
12+
<script src="../../../../../scripts/testing/scripts.js"></script>
13+
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
14+
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
15+
16+
<style>
17+
.custom-bar-background {
18+
--buffer-background: red;
19+
}
20+
21+
.no-bar-background {
22+
--buffer-background: none;
23+
}
24+
25+
ion-content ion-progress-bar {
26+
margin: 10px 0;
27+
}
28+
</style>
29+
</head>
30+
31+
<body>
32+
<ion-app>
33+
<ion-header>
34+
<ion-toolbar>
35+
<ion-title>Progress Bar - Buffer</ion-title>
36+
</ion-toolbar>
37+
</ion-header>
38+
39+
<ion-content class="outer-content">
40+
<ion-list>
41+
<ion-list-header>
42+
<ion-label> Buffer </ion-label>
43+
</ion-list-header>
44+
<ion-progress-bar value="0.20" buffer="0.4"></ion-progress-bar>
45+
46+
<ion-list-header>
47+
<ion-label> Buffer (reversed) </ion-label>
48+
</ion-list-header>
49+
<ion-progress-bar color="secondary" reversed="true" value="0.20" buffer="0.4"></ion-progress-bar>
50+
51+
<ion-list-header>
52+
<ion-label> Buffer (without value) </ion-label>
53+
</ion-list-header>
54+
<ion-progress-bar color="tertiary" buffer="0"></ion-progress-bar>
55+
56+
<ion-list-header>
57+
<ion-label> Buffer (change buffer with slider) </ion-label>
58+
</ion-list-header>
59+
<ion-progress-bar class="progressBarBuffer" value="0.20" buffer="0.4"></ion-progress-bar>
60+
<ion-progress-bar class="progressBarBuffer" value="0.20" buffer="0.4" reversed="true"></ion-progress-bar>
61+
62+
<ion-item>
63+
<ion-range legacy="true" pin="true" value="0" id="progressValueBuffer">
64+
<ion-label slot="start">0</ion-label>
65+
<ion-label slot="end">100</ion-label>
66+
</ion-range>
67+
</ion-item>
68+
</ion-list>
69+
</ion-content>
70+
</ion-app>
71+
72+
<script>
73+
// Progress Bar Buffer
74+
const progressValueBuffer = document.getElementById('progressValueBuffer');
75+
const progressBarBuffer = document.querySelectorAll('.progressBarBuffer');
76+
77+
progressValueBuffer.addEventListener('ionChange', function (ev) {
78+
progressBarBuffer.forEach((ele) => (ele.buffer = ev.detail.value / 100));
79+
});
80+
</script>
81+
</body>
82+
</html>

‎core/src/components/progress-bar/test/buffer/progress-bar.e2e.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { expect } from '@playwright/test';
2+
import { configs, test } from '@utils/test/playwright';
3+
4+
configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
5+
test.describe(title('progress-bar: buffer'), () => {
6+
test.describe('with a dynamic progress value', () => {
7+
test('should not have visual regressions', async ({ page }) => {
8+
await page.setContent(
9+
`
10+
<ion-progress-bar value="0.20" buffer="0.4"></ion-progress-bar>
11+
`,
12+
config
13+
);
14+
15+
await page.setIonViewport();
16+
17+
const progressBar = await page.locator('ion-progress-bar');
18+
19+
await progressBar.evaluate((node: HTMLIonProgressBarElement) => (node.value = 0.8));
20+
21+
await expect(progressBar).toHaveScreenshot(screenshot(`progress-bar-buffer-dynamic-value`));
22+
});
23+
});
24+
});
25+
});

‎core/src/components/progress-bar/test/buffer/progress-bar.e2e.ts-snapshots/progress-bar-buffer-dynamic-value-md-ltr-Mobile-Chrome-linux.png

172 Bytes
Loading

‎core/src/components/progress-bar/test/buffer/progress-bar.e2e.ts-snapshots/progress-bar-buffer-dynamic-value-md-ltr-Mobile-Firefox-linux.png

173 Bytes
Loading

‎core/src/components/progress-bar/test/buffer/progress-bar.e2e.ts-snapshots/progress-bar-buffer-dynamic-value-md-ltr-Mobile-Safari-linux.png

139 Bytes
Loading

‎core/src/components/progress-bar/test/determinate/index.html

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Progress Bar - Determinate</title>
6+
<meta
7+
name="viewport"
8+
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
9+
/>
10+
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
11+
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
12+
<script src="../../../../../scripts/testing/scripts.js"></script>
13+
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
14+
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
15+
16+
<style>
17+
.custom-bar-background {
18+
--buffer-background: red;
19+
}
20+
21+
.no-bar-background {
22+
--buffer-background: none;
23+
}
24+
25+
ion-content ion-progress-bar {
26+
margin: 10px 0;
27+
}
28+
</style>
29+
</head>
30+
31+
<body>
32+
<ion-app>
33+
<ion-header>
34+
<ion-toolbar>
35+
<ion-title>Progress Bar - Determinate</ion-title>
36+
</ion-toolbar>
37+
</ion-header>
38+
39+
<ion-content class="outer-content">
40+
<ion-list>
41+
<ion-list-header>
42+
<ion-label> Determinate </ion-label>
43+
</ion-list-header>
44+
<ion-progress-bar value="0.50"></ion-progress-bar>
45+
46+
<ion-list-header>
47+
<ion-label> Determinate (reversed) </ion-label>
48+
</ion-list-header>
49+
<ion-progress-bar reversed="true" value="0.50"></ion-progress-bar>
50+
51+
<ion-list-header>
52+
<ion-label> Determinate (secondary color) </ion-label>
53+
</ion-list-header>
54+
<ion-progress-bar color="secondary" value="0.50"></ion-progress-bar>
55+
56+
<ion-list-header>
57+
<ion-label> Determinate (with no bar background) </ion-label>
58+
</ion-list-header>
59+
<ion-progress-bar class="no-bar-background" value="0.75"></ion-progress-bar>
60+
61+
<ion-list-header>
62+
<ion-label> Determinate (with a custom background) </ion-label>
63+
</ion-list-header>
64+
<ion-progress-bar class="custom-bar-background" value="0.75"></ion-progress-bar>
65+
66+
<ion-list-header>
67+
<ion-label> Determinate (change progress with slider) </ion-label>
68+
</ion-list-header>
69+
<ion-progress-bar id="progressBar"></ion-progress-bar>
70+
71+
<ion-item>
72+
<ion-range legacy="true" pin="true" value="0" id="progressValue">
73+
<ion-label slot="start">0</ion-label>
74+
<ion-label slot="end">100</ion-label>
75+
</ion-range>
76+
</ion-item>
77+
</ion-list>
78+
</ion-content>
79+
</ion-app>
80+
81+
<script>
82+
// Progress Bar Value
83+
const progressValue = document.getElementById('progressValue');
84+
const progressBar = document.getElementById('progressBar');
85+
86+
progressValue.addEventListener('ionChange', function (ev) {
87+
progressBar.value = ev.detail.value / 100;
88+
});
89+
</script>
90+
</body>
91+
</html>

‎core/src/components/progress-bar/test/determinate/progress-bar.e2e.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { expect } from '@playwright/test';
2+
import { configs, test } from '@utils/test/playwright';
3+
4+
configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
5+
test.describe(title('progress-bar: determinate'), () => {
6+
test.describe('with a dynamic progress value', () => {
7+
test('should not have visual regressions', async ({ page }) => {
8+
await page.setContent(
9+
`
10+
<ion-progress-bar value="0.20"></ion-progress-bar>
11+
`,
12+
config
13+
);
14+
15+
await page.setIonViewport();
16+
17+
const progressBar = await page.locator('ion-progress-bar');
18+
19+
await progressBar.evaluate((node: HTMLIonProgressBarElement) => (node.value = 0.8));
20+
21+
await expect(progressBar).toHaveScreenshot(screenshot(`progress-bar-buffer-dynamic-value`));
22+
});
23+
});
24+
});
25+
});

‎core/src/components/progress-bar/test/determinate/progress-bar.e2e.ts-snapshots/progress-bar-buffer-dynamic-value-md-ltr-Mobile-Chrome-linux.png

128 Bytes
Loading

‎core/src/components/progress-bar/test/determinate/progress-bar.e2e.ts-snapshots/progress-bar-buffer-dynamic-value-md-ltr-Mobile-Firefox-linux.png

145 Bytes
Loading

‎core/src/components/progress-bar/test/determinate/progress-bar.e2e.ts-snapshots/progress-bar-buffer-dynamic-value-md-ltr-Mobile-Safari-linux.png

127 Bytes
Loading

0 commit comments

Comments
 (0)