From 6be1189c3e7000048eaaa8a58aea9fb0642fa5b9 Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Fri, 27 Jun 2025 18:59:21 -0400
Subject: [PATCH 1/9] test(breadcrumbs): update the basic test to use
setContent
---
.../breadcrumbs/test/basic/breadcrumbs.e2e.ts | 176 +++++++++++-
.../breadcrumbs/test/basic/index.html | 260 +-----------------
2 files changed, 175 insertions(+), 261 deletions(-)
diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts
index a82f885a313..11fd3771530 100644
--- a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts
+++ b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts
@@ -4,11 +4,181 @@ import { configs, test } from '@utils/test/playwright';
configs().forEach(({ config, screenshot, title }) => {
test.describe(title('breadcrumbs: basic'), () => {
test('should not have visual regressions', async ({ page }) => {
- await page.goto(`/src/components/breadcrumbs/test/basic`, config);
+ await page.setContent(`
+
+ First
+ Second
+ Third
+ Fourth
+
+ `, config);
- await page.setIonViewport();
+ const breadcrumbs = page.locator('ion-breadcrumbs');
- await expect(page).toHaveScreenshot(screenshot(`breadcrumb-diff`));
+ await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-basic`));
+ });
+
+ test('should not have visual regressions with links', async ({ page }) => {
+ await page.setContent(`
+
+ First
+ Second
+ Third
+ Fourth
+
+ `, config);
+
+ const breadcrumbs = page.locator('ion-breadcrumbs');
+
+ await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-links`));
+ });
+
+ test('should not have visual regressions with custom separators', async ({ page }) => {
+ await page.setContent(`
+
+
+ First
+
+
+
+ Second
+
+
+
+ Third
+
+
+
+ Fourth
+
+
+ `, config);
+
+ const breadcrumbs = page.locator('ion-breadcrumbs');
+
+ await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-custom-separators`));
+ });
+
+ test('should not have visual regressions with slotted start icons', async ({ page }) => {
+ await page.setContent(`
+
+
+
+ First
+
+
+
+ Second
+
+
+
+ Third
+
+
+
+ Fourth
+
+
+ `, config);
+
+ const breadcrumbs = page.locator('ion-breadcrumbs');
+
+ await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-slotted-start-icons`));
+ });
+
+ test('should not have visual regressions with slotted end icons', async ({ page }) => {
+ await page.setContent(`
+
+
+ First
+
+
+
+ Second
+
+
+
+ Third
+
+
+
+ Fourth
+
+
+
+ `, config);
+
+ const breadcrumbs = page.locator('ion-breadcrumbs');
+
+ await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-slotted-end-icons`));
+ });
+
+ test('should not have visual regressions in a toolbar', async ({ page }) => {
+ await page.setContent(`
+
+
+ First
+ Second
+ Third
+ Fourth
+
+
+ `, config);
+
+ const breadcrumbs = page.locator('ion-breadcrumbs');
+
+ await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-in-toolbar`));
+ });
+ });
+});
+
+/**
+ * This behavior does not vary across directions
+ */
+configs({ directions: ['ltr'] }).forEach(({ config, screenshot, title }) => {
+ test.describe(title('breadcrumbs: states'), () => {
+ test('should not have visual regressions when focused', async ({ page }) => {
+ await page.setContent(`
+
+ First
+ Second
+ Third
+ Fourth
+
+ `, config);
+
+ const breadcrumbs = page.locator('ion-breadcrumbs');
+ await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-focused`));
+ });
+
+ test('should not have visual regressions when all breadcrumbs are disabled', async ({ page }) => {
+ await page.setContent(`
+
+ First
+ Second
+ Third
+ Fourth
+
+ `, config);
+
+ const breadcrumbs = page.locator('ion-breadcrumbs');
+
+ await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-all-disabled`));
+ });
+
+ test('should not have visual regressions when one breadcrumb is disabled', async ({ page }) => {
+ await page.setContent(`
+
+ First
+ Second
+ Third
+ Fourth
+
+ `, config);
+
+ const breadcrumbs = page.locator('ion-breadcrumbs');
+
+ await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-one-disabled`));
});
});
});
diff --git a/core/src/components/breadcrumbs/test/basic/index.html b/core/src/components/breadcrumbs/test/basic/index.html
index e59fd2ca926..dca3aca0171 100644
--- a/core/src/components/breadcrumbs/test/basic/index.html
+++ b/core/src/components/breadcrumbs/test/basic/index.html
@@ -47,13 +47,6 @@
Breadcrumbs - Basic
-
- First
- Second
- Third
- Fourth
- Fifth
-
Home
Electronics
@@ -66,19 +59,6 @@
Default
-
- Home
- Electronics
- Photography
- Cameras
- Film
- 35 mm
-
-
-
-
- No Links
-
Home
Electronics
@@ -90,9 +70,9 @@ No Links
- Color: Primary
+ Links
-
+
Home
Electronics
Photography
@@ -103,19 +83,6 @@ Color: Primary
- Color: Primary: Tab Focus
-
-
- Home
- Electronics
- Photography
- Cameras
- Film
- 35 mm
-
-
-
-
Custom separator
@@ -168,230 +135,7 @@ Custom icons
Survey.txt
-
-
-
- Collapsed
-
-
-
-
- Home
-
-
-
- Trips
-
-
-
- Tokyo 2021
-
-
-
- Photos
-
-
-
- cityscape-01-2021.png
-
-
-
-
-
- Collapsed: Tab Focus
-
-
-
-
- Home
-
-
-
- Trips
-
-
-
- Tokyo 2021
-
-
-
- Photos
-
-
-
- cityscape-01-2021.png
-
-
-
-
-
-
- Breadcrumbs: collapsed middle / expand on click
- Re-collapse
-
-
-
- Home
- Cameras & Camcorders
- Digital Camera Accessories
- Camera Lenses
- DSLR Lenses
- Prime Lenses
- Product Info
-
-
-
-
- Breadcrumbs: collapsed / popover on click
-
-
- Home
- Cameras & Camcorders
- Digital Camera Accessories
- Camera Lenses
- DSLR Lenses
- Prime Lenses
- Product Info
-
-
-
-
- Show last separator
-
-
- Home
- Electronics
- Data
- File
-
-
-
-
- Breadcrumbs Color: Primary
-
-
- Home
- Electronics
- Disabled
- Data
-
-
-
-
- Breadcrumb Color: Varied
-
-
- Home
- Electronics
- Disabled
- Data
-
-
-
-
- Breadcrumbs (Secondary); Breadcrumb (Danger)
-
-
- Home
- Electronics
- Disabled
- Data
-
-
-
-
- Custom Separator: Icon w/ last separator showing
-
-
-
- Home
-
-
-
- Electronics
-
-
-
- Disabled
-
-
-
- Data
-
-
-
-
-
-
- Breadcrumbs: default wrapping
-
-
- Home
- Cameras & Camcorders
- Digital Camera Accessories
- Camera Lenses
- DSLR Lenses
- Prime Lenses
- Product Info
-
-
-