From 8a0beb16923016db597a6fe8bb673c9858dbf6eb Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Mon, 13 Mar 2023 15:37:03 -0400 Subject: [PATCH 1/6] fix(segment-button): assign checked state on render --- core/src/components/segment-button/segment-button.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/core/src/components/segment-button/segment-button.tsx b/core/src/components/segment-button/segment-button.tsx index a1cf1af5d5f..47fbd8b7116 100644 --- a/core/src/components/segment-button/segment-button.tsx +++ b/core/src/components/segment-button/segment-button.tsx @@ -79,6 +79,12 @@ export class SegmentButton implements ComponentInterface, ButtonInterface { }; } + componentDidLoad() { + if (this.segmentEl) { + this.updateState(); + } + } + private get hasLabel() { return !!this.el.querySelector('ion-label'); } From 48e9f12db6139dd4464321b58ca516bd52aa47a7 Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Wed, 15 Mar 2023 11:25:24 -0400 Subject: [PATCH 2/6] chore: remove redundant check --- core/src/components/segment-button/segment-button.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/core/src/components/segment-button/segment-button.tsx b/core/src/components/segment-button/segment-button.tsx index 47fbd8b7116..6385e0feca7 100644 --- a/core/src/components/segment-button/segment-button.tsx +++ b/core/src/components/segment-button/segment-button.tsx @@ -80,9 +80,7 @@ export class SegmentButton implements ComponentInterface, ButtonInterface { } componentDidLoad() { - if (this.segmentEl) { - this.updateState(); - } + this.updateState(); } private get hasLabel() { From cf562d092dd735d63b1591f2c5c85bae92b34e2c Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 10 Apr 2023 13:43:34 +0000 Subject: [PATCH 3/6] test(segment): add failing test --- .../segment/test/async/segment.e2e.ts | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 core/src/components/segment/test/async/segment.e2e.ts diff --git a/core/src/components/segment/test/async/segment.e2e.ts b/core/src/components/segment/test/async/segment.e2e.ts new file mode 100644 index 00000000000..fb7826c08ac --- /dev/null +++ b/core/src/components/segment/test/async/segment.e2e.ts @@ -0,0 +1,22 @@ +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; + +test.describe('segment: async', () => { + test('should set checked state when value is set asynchronously', async ({ page, skip }) => { + skip.rtl(); + skip.mode('md'); + + await page.setContent(` + + First + + `); + + const segmentButton = page.locator('ion-segment-button'); + + await segmentButton.evaluate((el: HTMLIonSegmentButtonElement) => el.value = 'first'); + await page.waitForChanges(); + + await expect(segmentButton).toHaveClass(/segment-button-checked/); + }); +}); From df45f1e4fa6ff0d1e122cbc56e048624f4cd4676 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 10 Apr 2023 13:45:32 +0000 Subject: [PATCH 4/6] fix(segment-button): update state on value change --- core/src/components/segment-button/segment-button.tsx | 10 +++++----- core/src/components/segment/test/async/segment.e2e.ts | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/core/src/components/segment-button/segment-button.tsx b/core/src/components/segment-button/segment-button.tsx index 6385e0feca7..502d7a958bf 100644 --- a/core/src/components/segment-button/segment-button.tsx +++ b/core/src/components/segment-button/segment-button.tsx @@ -1,5 +1,5 @@ import type { ComponentInterface } from '@stencil/core'; -import { Component, Element, Host, Prop, Method, State, forceUpdate, h } from '@stencil/core'; +import { Component, Element, Host, Prop, Method, State, Watch, forceUpdate, h } from '@stencil/core'; import { getIonMode } from '../../global/ionic-global'; import type { ButtonInterface } from '../../utils/element-interface'; @@ -54,6 +54,10 @@ export class SegmentButton implements ComponentInterface, ButtonInterface { * The value of the segment button. */ @Prop() value: string = 'ion-sb-' + ids++; + @Watch('value') + valueChanged() { + this.updateState(); + } connectedCallback() { const segmentEl = (this.segmentEl = this.el.closest('ion-segment')); @@ -79,10 +83,6 @@ export class SegmentButton implements ComponentInterface, ButtonInterface { }; } - componentDidLoad() { - this.updateState(); - } - private get hasLabel() { return !!this.el.querySelector('ion-label'); } diff --git a/core/src/components/segment/test/async/segment.e2e.ts b/core/src/components/segment/test/async/segment.e2e.ts index fb7826c08ac..5f05d90af68 100644 --- a/core/src/components/segment/test/async/segment.e2e.ts +++ b/core/src/components/segment/test/async/segment.e2e.ts @@ -14,7 +14,7 @@ test.describe('segment: async', () => { const segmentButton = page.locator('ion-segment-button'); - await segmentButton.evaluate((el: HTMLIonSegmentButtonElement) => el.value = 'first'); + await segmentButton.evaluate((el: HTMLIonSegmentButtonElement) => (el.value = 'first')); await page.waitForChanges(); await expect(segmentButton).toHaveClass(/segment-button-checked/); From 23de0b70a377a8dd9cce298fe13579cbdeebecfa Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 10 Apr 2023 13:49:42 +0000 Subject: [PATCH 5/6] refactor(segment): use spec instead of e2e --- .../segment/test/async/segment.e2e.ts | 22 ------------------- .../components/segment/test/segment.spec.ts | 21 ++++++++++++++++++ 2 files changed, 21 insertions(+), 22 deletions(-) delete mode 100644 core/src/components/segment/test/async/segment.e2e.ts create mode 100644 core/src/components/segment/test/segment.spec.ts diff --git a/core/src/components/segment/test/async/segment.e2e.ts b/core/src/components/segment/test/async/segment.e2e.ts deleted file mode 100644 index 5f05d90af68..00000000000 --- a/core/src/components/segment/test/async/segment.e2e.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { expect } from '@playwright/test'; -import { test } from '@utils/test/playwright'; - -test.describe('segment: async', () => { - test('should set checked state when value is set asynchronously', async ({ page, skip }) => { - skip.rtl(); - skip.mode('md'); - - await page.setContent(` - - First - - `); - - const segmentButton = page.locator('ion-segment-button'); - - await segmentButton.evaluate((el: HTMLIonSegmentButtonElement) => (el.value = 'first')); - await page.waitForChanges(); - - await expect(segmentButton).toHaveClass(/segment-button-checked/); - }); -}); diff --git a/core/src/components/segment/test/segment.spec.ts b/core/src/components/segment/test/segment.spec.ts new file mode 100644 index 00000000000..6a993d390f8 --- /dev/null +++ b/core/src/components/segment/test/segment.spec.ts @@ -0,0 +1,21 @@ +import { newSpecPage } from '@stencil/core/testing'; +import { Segment } from '../segment'; +import { SegmentButton } from '../../segment-button/segment-button'; + +it('should set checked state when value is set asynchronously', async () => { + const page = await newSpecPage({ + components: [Segment, SegmentButton], + html: ` + + First + + `, + }); + + const segmentButton = page.root.querySelector('ion-segment-button'); + + segmentButton.value = 'first'; + await page.waitForChanges(); + + expect(segmentButton.classList.contains('segment-button-checked')).toBe(true); +}); From c8358b3271dedc965bee5ce7259472bc8b1a6bd0 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 10 Apr 2023 13:50:19 +0000 Subject: [PATCH 6/6] add additional check --- core/src/components/segment/test/segment.spec.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/core/src/components/segment/test/segment.spec.ts b/core/src/components/segment/test/segment.spec.ts index 6a993d390f8..1ec630a9102 100644 --- a/core/src/components/segment/test/segment.spec.ts +++ b/core/src/components/segment/test/segment.spec.ts @@ -14,6 +14,8 @@ it('should set checked state when value is set asynchronously', async () => { const segmentButton = page.root.querySelector('ion-segment-button'); + expect(segmentButton.classList.contains('segment-button-checked')).toBe(false); + segmentButton.value = 'first'; await page.waitForChanges();