javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(breadcrumbs): breadcrumbs are reactive (#26427)

Browse Source 
Resolves #24041

Co-authored-by: Imre Bekker <37016280+tetkosimi@users.noreply.github.com>
This commit is contained in:
Sean Perkins
2022-12-09 15:05:11 -05:00
committed by GitHub
parent c5ebc9155c
commit 0d8625b955
9 changed files with 136 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
core/src/components/breadcrumbs/breadcrumbs.tsx
View File

@@ -162,6 +162,11 @@ export class Breadcrumbs implements ComponentInterface {
return Array.from(this.el.querySelectorAll('ion-breadcrumb'));
};
private slotChanged = () => {
this.resetActiveBreadcrumb();
this.breadcrumbsInit();
};
render() {
const { color, collapsed } = this;
const mode = getIonMode(this);
@@ -175,7 +180,7 @@ export class Breadcrumbs implements ComponentInterface {
'breadcrumbs-collapsed': collapsed,
})}
>
<slot></slot>
<slot onSlotchange={this.slotChanged}></slot>
</Host>
);
}

75
core/src/components/breadcrumbs/test/reactive/breadcrumbs.e2e.ts Normal file
View File

@@ -0,0 +1,75 @@
import { expect } from '@playwright/test';
import { test } from '@utils/test/playwright';
test.describe('breadcrumbs: reactive', () => {
test.beforeEach(async ({ page, skip }) => {
skip.rtl();
skip.mode('ios');
await page.goto(`/src/components/breadcrumbs/test/reactive`);
});
test.describe('adding a breadcrumb item', () => {
test('should update the active item', async ({ page }) => {
const breadcrumbItems = page.locator('ion-breadcrumb');
const addItemButton = page.locator('ion-button#add-btn');
await expect(breadcrumbItems).toHaveCount(4);
await addItemButton.click();
await page.waitForChanges();
await expect(breadcrumbItems).toHaveCount(5);
const previousActiveItem = breadcrumbItems.nth(3);
const lastBreadcrumbItem = breadcrumbItems.nth(4);
await expect(previousActiveItem).not.toHaveClass(/breadcrumb-active/);
await expect(lastBreadcrumbItem).toHaveClass(/breadcrumb-active/);
});
test('should not have visual regressions', async ({ page }) => {
await page.setIonViewport();
const breadcrumbs = page.locator('ion-breadcrumbs');
await page.click('#add-btn');
await page.waitForChanges();
expect(await breadcrumbs.screenshot()).toMatchSnapshot(
`breadcrumbs-reactive-add-diff-${page.getSnapshotSettings()}.png`
);
});
});
test.describe('removing a breadcrumb item', () => {
test('should update the active item', async ({ page }) => {
const breadcrumbItems = page.locator('ion-breadcrumb');
await expect(breadcrumbItems).toHaveCount(4);
await page.click('#remove-btn');
await page.waitForChanges();
await expect(breadcrumbItems).toHaveCount(3);
const lastBreadcrumbItem = breadcrumbItems.nth(2);
await expect(lastBreadcrumbItem).toHaveClass(/breadcrumb-active/);
});
test('should not have visual regressions', async ({ page }) => {
await page.setIonViewport();
const breadcrumbs = page.locator('ion-breadcrumbs');
await page.click('#remove-btn');
await page.waitForChanges();
expect(await breadcrumbs.screenshot()).toMatchSnapshot(
`breadcrumbs-reactive-remove-diff-${page.getSnapshotSettings()}.png`
);
});
});
});

BIN
core/src/components/breadcrumbs/test/reactive/breadcrumbs.e2e.ts-snapshots/breadcrumbs-reactive-add-diff-md-ltr-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
core/src/components/breadcrumbs/test/reactive/breadcrumbs.e2e.ts-snapshots/breadcrumbs-reactive-add-diff-md-ltr-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.7 KiB

BIN
core/src/components/breadcrumbs/test/reactive/breadcrumbs.e2e.ts-snapshots/breadcrumbs-reactive-add-diff-md-ltr-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
core/src/components/breadcrumbs/test/reactive/breadcrumbs.e2e.ts-snapshots/breadcrumbs-reactive-remove-diff-md-ltr-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.8 KiB

BIN
core/src/components/breadcrumbs/test/reactive/breadcrumbs.e2e.ts-snapshots/breadcrumbs-reactive-remove-diff-md-ltr-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

BIN
core/src/components/breadcrumbs/test/reactive/breadcrumbs.e2e.ts-snapshots/breadcrumbs-reactive-remove-diff-md-ltr-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.7 KiB

55
core/src/components/breadcrumbs/test/reactive/index.html Normal file
View File

@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Breadcrumbs - Reactive</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>
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Breadcrumbs - Reactive</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<ion-breadcrumbs max-items="4" items-before-collapse="0" items-after-collapse="4">
<ion-breadcrumb href="#"> Home </ion-breadcrumb>
<ion-breadcrumb href="#"> Trips </ion-breadcrumb>
<ion-breadcrumb href="#"> Tokyo 2021 </ion-breadcrumb>
<ion-breadcrumb href="#"> Photos </ion-breadcrumb>
</ion-breadcrumbs>
<ion-button id="add-btn" onclick="addItem()">Add Item</ion-button>
<ion-button id="remove-btn" onclick="removeItem()">Remove Item</ion-button>
</ion-content>
</ion-app>
<script>
const breadcrumbs = document.querySelector('ion-breadcrumbs');
const addItem = () => {
const breadcrumb = document.createElement('ion-breadcrumb');
const count = breadcrumbs.querySelectorAll('ion-breadcrumb').length;
breadcrumb.href = '#';
breadcrumb.textContent = `Item ${count}`;
breadcrumbs.appendChild(breadcrumb);
};
const removeItem = () => {
const breadcrumb = breadcrumbs.querySelector('ion-breadcrumb:last-child');
breadcrumbs.removeChild(breadcrumb);
};
</script>
</body>
</html>