From b4078149ac1890abff06ad9b334db5cdbb93cc85 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Fri, 31 Mar 2023 14:32:25 -0700 Subject: [PATCH 1/6] test(breadcrumbs): check color attribute renders in the DOM --- .../breadcrumbs/test/basic/breadcrumbs.e2e.ts | 17 +++++++++++++++-- .../breadcrumbs/test/basic/index.html | 2 +- 2 files changed, 16 insertions(+), 3 deletions(-) diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts index e5a8907d272..8ca990a45b4 100644 --- a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts +++ b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts @@ -2,11 +2,24 @@ import { expect } from '@playwright/test'; import { test } from '@utils/test/playwright'; test.describe('breadcrumbs: basic', () => { - test('should not have visual regressions', async ({ page }) => { - await page.goto(`/src/components/breadcrumbs/test/basic`); + test.beforeEach(async ({ page }) => { + await page.goto('/src/components/breadcrumbs/test/basic'); + }); + test('should not have visual regressions', async ({ page }) => { await page.setIonViewport(); await expect(page).toHaveScreenshot(`breadcrumb-diff-${page.getSnapshotSettings()}.png`); }); + + test('should have color attribute', async ({ page }) => { + test.info().annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/25446', + }); + + const breadcrumbs = page.locator('#color'); + + expect(await breadcrumbs.getAttribute('color')).not.toBe(null); + }); }); diff --git a/core/src/components/breadcrumbs/test/basic/index.html b/core/src/components/breadcrumbs/test/basic/index.html index 3c5ca2e0164..d608ad87d51 100644 --- a/core/src/components/breadcrumbs/test/basic/index.html +++ b/core/src/components/breadcrumbs/test/basic/index.html @@ -65,7 +65,7 @@

No Links

Color: Primary

- + Home Electronics Photography From 26bc2d23b9cf759f8b2e57c98790609415f28a28 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Fri, 31 Mar 2023 14:37:16 -0700 Subject: [PATCH 2/6] test(breadcrumbs): remove color attribute check from Vue --- packages/vue/src/proxies.ts | 26 +++++++++---------- .../base/tests/e2e/specs/breadcrumbs.cy.js | 9 ------- 2 files changed, 13 insertions(+), 22 deletions(-) delete mode 100644 packages/vue/test/base/tests/e2e/specs/breadcrumbs.cy.js diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index f4cae3f9a90..a80d415fe8a 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -85,7 +85,7 @@ export const IonAccordion = /*@__PURE__*/ defineContainer('ion ]); -export const IonAccordionGroup = /*@__PURE__*/ defineContainer('ion-accordion-group', defineIonAccordionGroup, [ +export const IonAccordionGroup = /*@__PURE__*/ defineContainer('ion-accordion-group', defineIonAccordionGroup, [ 'animated', 'multiple', 'value', @@ -203,7 +203,7 @@ export const IonCardTitle = /*@__PURE__*/ defineContainer('ion ]); -export const IonCheckbox = /*@__PURE__*/ defineContainer('ion-checkbox', defineIonCheckbox, [ +export const IonCheckbox = /*@__PURE__*/ defineContainer('ion-checkbox', defineIonCheckbox, [ 'color', 'name', 'checked', @@ -269,7 +269,7 @@ export const IonContent = /*@__PURE__*/ defineContainer('ion-con ]); -export const IonDatetime = /*@__PURE__*/ defineContainer('ion-datetime', defineIonDatetime, [ +export const IonDatetime = /*@__PURE__*/ defineContainer('ion-datetime', defineIonDatetime, [ 'color', 'name', 'disabled', @@ -391,7 +391,7 @@ export const IonInfiniteScrollContent = /*@__PURE__*/ defineContainer('ion-input', defineIonInput, [ +export const IonInput = /*@__PURE__*/ defineContainer('ion-input', defineIonInput, [ 'color', 'accept', 'autocapitalize', @@ -577,7 +577,7 @@ export const IonProgressBar = /*@__PURE__*/ defineContainer( ]); -export const IonRadio = /*@__PURE__*/ defineContainer('ion-radio', defineIonRadio, [ +export const IonRadio = /*@__PURE__*/ defineContainer('ion-radio', defineIonRadio, [ 'color', 'name', 'disabled', @@ -592,7 +592,7 @@ export const IonRadio = /*@__PURE__*/ defineContainer('ion-radio-group', defineIonRadioGroup, [ +export const IonRadioGroup = /*@__PURE__*/ defineContainer('ion-radio-group', defineIonRadioGroup, [ 'allowEmptySelection', 'name', 'value', @@ -602,7 +602,7 @@ export const IonRadioGroup = /*@__PURE__*/ defineContainer('ion-range', defineIonRange, [ +export const IonRange = /*@__PURE__*/ defineContainer('ion-range', defineIonRange, [ 'color', 'debounce', 'name', @@ -668,7 +668,7 @@ export const IonRippleEffect = /*@__PURE__*/ defineContainer('ion-row', defineIonRow); -export const IonSearchbar = /*@__PURE__*/ defineContainer('ion-searchbar', defineIonSearchbar, [ +export const IonSearchbar = /*@__PURE__*/ defineContainer('ion-searchbar', defineIonSearchbar, [ 'color', 'animated', 'autocomplete', @@ -698,7 +698,7 @@ export const IonSearchbar = /*@__PURE__*/ defineContainer('ion-segment', defineIonSegment, [ +export const IonSegment = /*@__PURE__*/ defineContainer('ion-segment', defineIonSegment, [ 'color', 'disabled', 'scrollable', @@ -712,7 +712,7 @@ export const IonSegment = /*@__PURE__*/ defineContainer('ion-segment-button', defineIonSegmentButton, [ +export const IonSegmentButton = /*@__PURE__*/ defineContainer('ion-segment-button', defineIonSegmentButton, [ 'disabled', 'layout', 'type', @@ -721,7 +721,7 @@ export const IonSegmentButton = /*@__PURE__*/ defineContainer('ion-select', defineIonSelect, [ +export const IonSelect = /*@__PURE__*/ defineContainer('ion-select', defineIonSelect, [ 'cancelText', 'color', 'compareWith', @@ -782,7 +782,7 @@ export const IonText = /*@__PURE__*/ defineContainer('ion-text', de ]); -export const IonTextarea = /*@__PURE__*/ defineContainer('ion-textarea', defineIonTextarea, [ +export const IonTextarea = /*@__PURE__*/ defineContainer('ion-textarea', defineIonTextarea, [ 'color', 'autocapitalize', 'autofocus', @@ -831,7 +831,7 @@ export const IonTitle = /*@__PURE__*/ defineContainer('ion-title', ]); -export const IonToggle = /*@__PURE__*/ defineContainer('ion-toggle', defineIonToggle, [ +export const IonToggle = /*@__PURE__*/ defineContainer('ion-toggle', defineIonToggle, [ 'color', 'name', 'checked', diff --git a/packages/vue/test/base/tests/e2e/specs/breadcrumbs.cy.js b/packages/vue/test/base/tests/e2e/specs/breadcrumbs.cy.js deleted file mode 100644 index a98f7853e69..00000000000 --- a/packages/vue/test/base/tests/e2e/specs/breadcrumbs.cy.js +++ /dev/null @@ -1,9 +0,0 @@ -describe("Components: Breadcrumbs", () => { - beforeEach(() => { - cy.visit("http://localhost:8080/components/breadcrumbs"); - }); - - it("should have color attribute", () => { - cy.get('ion-breadcrumbs#color').should('have.prop', 'color'); - }); -}); From d3621aab91c706b659054ec5d402b5da467cbb4a Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Fri, 31 Mar 2023 14:41:24 -0700 Subject: [PATCH 3/6] fix(breadcrumbs): revert proxies to original --- packages/vue/src/proxies.ts | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index a80d415fe8a..f4cae3f9a90 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -85,7 +85,7 @@ export const IonAccordion = /*@__PURE__*/ defineContainer('ion ]); -export const IonAccordionGroup = /*@__PURE__*/ defineContainer('ion-accordion-group', defineIonAccordionGroup, [ +export const IonAccordionGroup = /*@__PURE__*/ defineContainer('ion-accordion-group', defineIonAccordionGroup, [ 'animated', 'multiple', 'value', @@ -203,7 +203,7 @@ export const IonCardTitle = /*@__PURE__*/ defineContainer('ion ]); -export const IonCheckbox = /*@__PURE__*/ defineContainer('ion-checkbox', defineIonCheckbox, [ +export const IonCheckbox = /*@__PURE__*/ defineContainer('ion-checkbox', defineIonCheckbox, [ 'color', 'name', 'checked', @@ -269,7 +269,7 @@ export const IonContent = /*@__PURE__*/ defineContainer('ion-con ]); -export const IonDatetime = /*@__PURE__*/ defineContainer('ion-datetime', defineIonDatetime, [ +export const IonDatetime = /*@__PURE__*/ defineContainer('ion-datetime', defineIonDatetime, [ 'color', 'name', 'disabled', @@ -391,7 +391,7 @@ export const IonInfiniteScrollContent = /*@__PURE__*/ defineContainer('ion-input', defineIonInput, [ +export const IonInput = /*@__PURE__*/ defineContainer('ion-input', defineIonInput, [ 'color', 'accept', 'autocapitalize', @@ -577,7 +577,7 @@ export const IonProgressBar = /*@__PURE__*/ defineContainer( ]); -export const IonRadio = /*@__PURE__*/ defineContainer('ion-radio', defineIonRadio, [ +export const IonRadio = /*@__PURE__*/ defineContainer('ion-radio', defineIonRadio, [ 'color', 'name', 'disabled', @@ -592,7 +592,7 @@ export const IonRadio = /*@__PURE__*/ defineContainer('ion-radio', 'value', 'v-ion-change', 'ionChange'); -export const IonRadioGroup = /*@__PURE__*/ defineContainer('ion-radio-group', defineIonRadioGroup, [ +export const IonRadioGroup = /*@__PURE__*/ defineContainer('ion-radio-group', defineIonRadioGroup, [ 'allowEmptySelection', 'name', 'value', @@ -602,7 +602,7 @@ export const IonRadioGroup = /*@__PURE__*/ defineContainer('i 'value', 'v-ion-change', 'ionChange'); -export const IonRange = /*@__PURE__*/ defineContainer('ion-range', defineIonRange, [ +export const IonRange = /*@__PURE__*/ defineContainer('ion-range', defineIonRange, [ 'color', 'debounce', 'name', @@ -668,7 +668,7 @@ export const IonRippleEffect = /*@__PURE__*/ defineContainer('ion-row', defineIonRow); -export const IonSearchbar = /*@__PURE__*/ defineContainer('ion-searchbar', defineIonSearchbar, [ +export const IonSearchbar = /*@__PURE__*/ defineContainer('ion-searchbar', defineIonSearchbar, [ 'color', 'animated', 'autocomplete', @@ -698,7 +698,7 @@ export const IonSearchbar = /*@__PURE__*/ defineContainer('ion 'value', 'v-ion-input', 'ionInput'); -export const IonSegment = /*@__PURE__*/ defineContainer('ion-segment', defineIonSegment, [ +export const IonSegment = /*@__PURE__*/ defineContainer('ion-segment', defineIonSegment, [ 'color', 'disabled', 'scrollable', @@ -712,7 +712,7 @@ export const IonSegment = /*@__PURE__*/ defineContainer('ion-seg 'value', 'v-ion-change', 'ionChange'); -export const IonSegmentButton = /*@__PURE__*/ defineContainer('ion-segment-button', defineIonSegmentButton, [ +export const IonSegmentButton = /*@__PURE__*/ defineContainer('ion-segment-button', defineIonSegmentButton, [ 'disabled', 'layout', 'type', @@ -721,7 +721,7 @@ export const IonSegmentButton = /*@__PURE__*/ defineContainer('ion-select', defineIonSelect, [ +export const IonSelect = /*@__PURE__*/ defineContainer('ion-select', defineIonSelect, [ 'cancelText', 'color', 'compareWith', @@ -782,7 +782,7 @@ export const IonText = /*@__PURE__*/ defineContainer('ion-text', de ]); -export const IonTextarea = /*@__PURE__*/ defineContainer('ion-textarea', defineIonTextarea, [ +export const IonTextarea = /*@__PURE__*/ defineContainer('ion-textarea', defineIonTextarea, [ 'color', 'autocapitalize', 'autofocus', @@ -831,7 +831,7 @@ export const IonTitle = /*@__PURE__*/ defineContainer('ion-title', ]); -export const IonToggle = /*@__PURE__*/ defineContainer('ion-toggle', defineIonToggle, [ +export const IonToggle = /*@__PURE__*/ defineContainer('ion-toggle', defineIonToggle, [ 'color', 'name', 'checked', From 837878d4379ba5ee1473e6b2a480996b6865e072 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Mon, 3 Apr 2023 09:47:28 -0700 Subject: [PATCH 4/6] test(breadcrumbs): move color attribute to spec file --- .../breadcrumbs/test/basic/breadcrumbs.e2e.ts | 11 ----------- .../breadcrumbs/test/breadcrumbs.spec.ts | 15 +++++++++++++++ 2 files changed, 15 insertions(+), 11 deletions(-) diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts index 8ca990a45b4..366baedfcf5 100644 --- a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts +++ b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts @@ -11,15 +11,4 @@ test.describe('breadcrumbs: basic', () => { await expect(page).toHaveScreenshot(`breadcrumb-diff-${page.getSnapshotSettings()}.png`); }); - - test('should have color attribute', async ({ page }) => { - test.info().annotations.push({ - type: 'issue', - description: 'https://github.com/ionic-team/ionic-framework/issues/25446', - }); - - const breadcrumbs = page.locator('#color'); - - expect(await breadcrumbs.getAttribute('color')).not.toBe(null); - }); }); diff --git a/core/src/components/breadcrumbs/test/breadcrumbs.spec.ts b/core/src/components/breadcrumbs/test/breadcrumbs.spec.ts index 9166df3d81b..d305df1cb4c 100644 --- a/core/src/components/breadcrumbs/test/breadcrumbs.spec.ts +++ b/core/src/components/breadcrumbs/test/breadcrumbs.spec.ts @@ -51,3 +51,18 @@ it('should exclude the separator from narrators', async () => { expect(separator.getAttribute('aria-hidden')).toBe('true'); }); + +it('should have color attribute', async () => { + const page = await newSpecPage({ + components: [Breadcrumb, Breadcrumbs], + html: ` + + First + + `, + }); + + const breadcrumbs = page.body.querySelector('ion-breadcrumbs'); + + expect(breadcrumbs.hasAttribute('color')).toBe(true); +}); From 719df40ad9a2f3057fc57c6222acfe5132d89fe0 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Mon, 3 Apr 2023 10:44:33 -0700 Subject: [PATCH 5/6] test(breadcrumbs): removed unused id from basic --- core/src/components/breadcrumbs/test/basic/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/components/breadcrumbs/test/basic/index.html b/core/src/components/breadcrumbs/test/basic/index.html index d608ad87d51..3c5ca2e0164 100644 --- a/core/src/components/breadcrumbs/test/basic/index.html +++ b/core/src/components/breadcrumbs/test/basic/index.html @@ -65,7 +65,7 @@

No Links

Color: Primary

- + Home Electronics Photography From 5ab09111de4c6423745612a26f4f0728cff992e6 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Mon, 3 Apr 2023 10:48:10 -0700 Subject: [PATCH 6/6] test(breadcrumbs): revert e2e --- .../components/breadcrumbs/test/basic/breadcrumbs.e2e.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts index 366baedfcf5..e5a8907d272 100644 --- a/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts +++ b/core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts @@ -2,11 +2,9 @@ import { expect } from '@playwright/test'; import { test } from '@utils/test/playwright'; test.describe('breadcrumbs: basic', () => { - test.beforeEach(async ({ page }) => { - await page.goto('/src/components/breadcrumbs/test/basic'); - }); - test('should not have visual regressions', async ({ page }) => { + await page.goto(`/src/components/breadcrumbs/test/basic`); + await page.setIonViewport(); await expect(page).toHaveScreenshot(`breadcrumb-diff-${page.getSnapshotSettings()}.png`);