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 <hi@ionicframework.com>
Sean Perkins
@ -79,18 +79,6 @@
|
|||||||
</ion-list-header>
|
</ion-list-header>
|
||||||
<ion-progress-bar class="custom-bar-background" value="0.75"></ion-progress-bar>
|
<ion-progress-bar class="custom-bar-background" value="0.75"></ion-progress-bar>
|
||||||
|
|
||||||
<ion-list-header>
|
|
||||||
<ion-label> Determinate (change progress with slider) </ion-label>
|
|
||||||
</ion-list-header>
|
|
||||||
<ion-progress-bar id="progressBar"></ion-progress-bar>
|
|
||||||
|
|
||||||
<ion-item>
|
|
||||||
<ion-range legacy="true" pin="true" value="0" id="progressValue">
|
|
||||||
<ion-label slot="start">0</ion-label>
|
|
||||||
<ion-label slot="end">100</ion-label>
|
|
||||||
</ion-range>
|
|
||||||
</ion-item>
|
|
||||||
|
|
||||||
<ion-list-header>
|
<ion-list-header>
|
||||||
<ion-label> Buffer </ion-label>
|
<ion-label> Buffer </ion-label>
|
||||||
</ion-list-header>
|
</ion-list-header>
|
||||||
@ -105,39 +93,8 @@
|
|||||||
<ion-label> Buffer (without value) </ion-label>
|
<ion-label> Buffer (without value) </ion-label>
|
||||||
</ion-list-header>
|
</ion-list-header>
|
||||||
<ion-progress-bar color="tertiary" buffer="0"></ion-progress-bar>
|
<ion-progress-bar color="tertiary" buffer="0"></ion-progress-bar>
|
||||||
|
|
||||||
<ion-list-header>
|
|
||||||
<ion-label> Buffer (change buffer with slider) </ion-label>
|
|
||||||
</ion-list-header>
|
|
||||||
<ion-progress-bar class="progressBarBuffer" value="0.20" buffer="0.4"></ion-progress-bar>
|
|
||||||
<ion-progress-bar class="progressBarBuffer" value="0.20" buffer="0.4" reversed="true"></ion-progress-bar>
|
|
||||||
|
|
||||||
<ion-item>
|
|
||||||
<ion-range legacy="true" pin="true" value="0" id="progressValueBuffer">
|
|
||||||
<ion-label slot="start">0</ion-label>
|
|
||||||
<ion-label slot="end">100</ion-label>
|
|
||||||
</ion-range>
|
|
||||||
</ion-item>
|
|
||||||
</ion-list>
|
</ion-list>
|
||||||
</ion-content>
|
</ion-content>
|
||||||
</ion-app>
|
</ion-app>
|
||||||
|
|
||||||
<script>
|
|
||||||
// Progress Bar Value
|
|
||||||
const progressValue = document.getElementById('progressValue');
|
|
||||||
const progressBar = document.getElementById('progressBar');
|
|
||||||
|
|
||||||
progressValue.addEventListener('ionChange', function (ev) {
|
|
||||||
progressBar.value = ev.detail.value / 100;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Progress Bar Buffer
|
|
||||||
const progressValueBuffer = document.getElementById('progressValueBuffer');
|
|
||||||
const progressBarBuffer = document.querySelectorAll('.progressBarBuffer');
|
|
||||||
|
|
||||||
progressValueBuffer.addEventListener('ionChange', function (ev) {
|
|
||||||
progressBarBuffer.forEach((ele) => (ele.buffer = ev.detail.value / 100));
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 68 KiB After Width: | Height: | Size: 51 KiB |
|
Before Width: | Height: | Size: 80 KiB After Width: | Height: | Size: 59 KiB |
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 44 KiB |
|
Before Width: | Height: | Size: 68 KiB After Width: | Height: | Size: 51 KiB |
|
Before Width: | Height: | Size: 81 KiB After Width: | Height: | Size: 60 KiB |
|
Before Width: | Height: | Size: 59 KiB After Width: | Height: | Size: 44 KiB |
|
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 49 KiB After Width: | Height: | Size: 37 KiB |
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 25 KiB |
82
core/src/components/progress-bar/test/buffer/index.html
Normal file
@ -0,0 +1,82 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" dir="ltr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<title>Progress Bar - Buffer</title>
|
||||||
|
<meta
|
||||||
|
name="viewport"
|
||||||
|
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
||||||
|
/>
|
||||||
|
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
|
||||||
|
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
|
||||||
|
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||||
|
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||||
|
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.custom-bar-background {
|
||||||
|
--buffer-background: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-bar-background {
|
||||||
|
--buffer-background: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
ion-content ion-progress-bar {
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<ion-app>
|
||||||
|
<ion-header>
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-title>Progress Bar - Buffer</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
|
||||||
|
<ion-content class="outer-content">
|
||||||
|
<ion-list>
|
||||||
|
<ion-list-header>
|
||||||
|
<ion-label> Buffer </ion-label>
|
||||||
|
</ion-list-header>
|
||||||
|
<ion-progress-bar value="0.20" buffer="0.4"></ion-progress-bar>
|
||||||
|
|
||||||
|
<ion-list-header>
|
||||||
|
<ion-label> Buffer (reversed) </ion-label>
|
||||||
|
</ion-list-header>
|
||||||
|
<ion-progress-bar color="secondary" reversed="true" value="0.20" buffer="0.4"></ion-progress-bar>
|
||||||
|
|
||||||
|
<ion-list-header>
|
||||||
|
<ion-label> Buffer (without value) </ion-label>
|
||||||
|
</ion-list-header>
|
||||||
|
<ion-progress-bar color="tertiary" buffer="0"></ion-progress-bar>
|
||||||
|
|
||||||
|
<ion-list-header>
|
||||||
|
<ion-label> Buffer (change buffer with slider) </ion-label>
|
||||||
|
</ion-list-header>
|
||||||
|
<ion-progress-bar class="progressBarBuffer" value="0.20" buffer="0.4"></ion-progress-bar>
|
||||||
|
<ion-progress-bar class="progressBarBuffer" value="0.20" buffer="0.4" reversed="true"></ion-progress-bar>
|
||||||
|
|
||||||
|
<ion-item>
|
||||||
|
<ion-range legacy="true" pin="true" value="0" id="progressValueBuffer">
|
||||||
|
<ion-label slot="start">0</ion-label>
|
||||||
|
<ion-label slot="end">100</ion-label>
|
||||||
|
</ion-range>
|
||||||
|
</ion-item>
|
||||||
|
</ion-list>
|
||||||
|
</ion-content>
|
||||||
|
</ion-app>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Progress Bar Buffer
|
||||||
|
const progressValueBuffer = document.getElementById('progressValueBuffer');
|
||||||
|
const progressBarBuffer = document.querySelectorAll('.progressBarBuffer');
|
||||||
|
|
||||||
|
progressValueBuffer.addEventListener('ionChange', function (ev) {
|
||||||
|
progressBarBuffer.forEach((ele) => (ele.buffer = ev.detail.value / 100));
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
import { expect } from '@playwright/test';
|
||||||
|
import { configs, test } from '@utils/test/playwright';
|
||||||
|
|
||||||
|
configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||||
|
test.describe(title('progress-bar: buffer'), () => {
|
||||||
|
test.describe('with a dynamic progress value', () => {
|
||||||
|
test('should not have visual regressions', async ({ page }) => {
|
||||||
|
await page.setContent(
|
||||||
|
`
|
||||||
|
<ion-progress-bar value="0.20" buffer="0.4"></ion-progress-bar>
|
||||||
|
`,
|
||||||
|
config
|
||||||
|
);
|
||||||
|
|
||||||
|
await page.setIonViewport();
|
||||||
|
|
||||||
|
const progressBar = await page.locator('ion-progress-bar');
|
||||||
|
|
||||||
|
await progressBar.evaluate((node: HTMLIonProgressBarElement) => (node.value = 0.8));
|
||||||
|
|
||||||
|
await expect(progressBar).toHaveScreenshot(screenshot(`progress-bar-buffer-dynamic-value`));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
After Width: | Height: | Size: 172 B |
|
After Width: | Height: | Size: 173 B |
|
After Width: | Height: | Size: 139 B |
91
core/src/components/progress-bar/test/determinate/index.html
Normal file
@ -0,0 +1,91 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" dir="ltr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<title>Progress Bar - Determinate</title>
|
||||||
|
<meta
|
||||||
|
name="viewport"
|
||||||
|
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
||||||
|
/>
|
||||||
|
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
|
||||||
|
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
|
||||||
|
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||||
|
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||||
|
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.custom-bar-background {
|
||||||
|
--buffer-background: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-bar-background {
|
||||||
|
--buffer-background: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
ion-content ion-progress-bar {
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<ion-app>
|
||||||
|
<ion-header>
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-title>Progress Bar - Determinate</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
|
||||||
|
<ion-content class="outer-content">
|
||||||
|
<ion-list>
|
||||||
|
<ion-list-header>
|
||||||
|
<ion-label> Determinate </ion-label>
|
||||||
|
</ion-list-header>
|
||||||
|
<ion-progress-bar value="0.50"></ion-progress-bar>
|
||||||
|
|
||||||
|
<ion-list-header>
|
||||||
|
<ion-label> Determinate (reversed) </ion-label>
|
||||||
|
</ion-list-header>
|
||||||
|
<ion-progress-bar reversed="true" value="0.50"></ion-progress-bar>
|
||||||
|
|
||||||
|
<ion-list-header>
|
||||||
|
<ion-label> Determinate (secondary color) </ion-label>
|
||||||
|
</ion-list-header>
|
||||||
|
<ion-progress-bar color="secondary" value="0.50"></ion-progress-bar>
|
||||||
|
|
||||||
|
<ion-list-header>
|
||||||
|
<ion-label> Determinate (with no bar background) </ion-label>
|
||||||
|
</ion-list-header>
|
||||||
|
<ion-progress-bar class="no-bar-background" value="0.75"></ion-progress-bar>
|
||||||
|
|
||||||
|
<ion-list-header>
|
||||||
|
<ion-label> Determinate (with a custom background) </ion-label>
|
||||||
|
</ion-list-header>
|
||||||
|
<ion-progress-bar class="custom-bar-background" value="0.75"></ion-progress-bar>
|
||||||
|
|
||||||
|
<ion-list-header>
|
||||||
|
<ion-label> Determinate (change progress with slider) </ion-label>
|
||||||
|
</ion-list-header>
|
||||||
|
<ion-progress-bar id="progressBar"></ion-progress-bar>
|
||||||
|
|
||||||
|
<ion-item>
|
||||||
|
<ion-range legacy="true" pin="true" value="0" id="progressValue">
|
||||||
|
<ion-label slot="start">0</ion-label>
|
||||||
|
<ion-label slot="end">100</ion-label>
|
||||||
|
</ion-range>
|
||||||
|
</ion-item>
|
||||||
|
</ion-list>
|
||||||
|
</ion-content>
|
||||||
|
</ion-app>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Progress Bar Value
|
||||||
|
const progressValue = document.getElementById('progressValue');
|
||||||
|
const progressBar = document.getElementById('progressBar');
|
||||||
|
|
||||||
|
progressValue.addEventListener('ionChange', function (ev) {
|
||||||
|
progressBar.value = ev.detail.value / 100;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
import { expect } from '@playwright/test';
|
||||||
|
import { configs, test } from '@utils/test/playwright';
|
||||||
|
|
||||||
|
configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||||
|
test.describe(title('progress-bar: determinate'), () => {
|
||||||
|
test.describe('with a dynamic progress value', () => {
|
||||||
|
test('should not have visual regressions', async ({ page }) => {
|
||||||
|
await page.setContent(
|
||||||
|
`
|
||||||
|
<ion-progress-bar value="0.20"></ion-progress-bar>
|
||||||
|
`,
|
||||||
|
config
|
||||||
|
);
|
||||||
|
|
||||||
|
await page.setIonViewport();
|
||||||
|
|
||||||
|
const progressBar = await page.locator('ion-progress-bar');
|
||||||
|
|
||||||
|
await progressBar.evaluate((node: HTMLIonProgressBarElement) => (node.value = 0.8));
|
||||||
|
|
||||||
|
await expect(progressBar).toHaveScreenshot(screenshot(`progress-bar-buffer-dynamic-value`));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
After Width: | Height: | Size: 128 B |
|
After Width: | Height: | Size: 145 B |
|
After Width: | Height: | Size: 127 B |