diff --git a/src/components/radio-button/radio-button/radio-button.ts b/src/components/radio-button/radio-button/radio-button.ts index 3d99f5da8ed..e7d0b1a5c0f 100644 --- a/src/components/radio-button/radio-button/radio-button.ts +++ b/src/components/radio-button/radio-button/radio-button.ts @@ -154,7 +154,6 @@ export class SbbRadioButtonElement extends UpdateScheduler(LitElement) { private _handleCheckedChange(currentValue: boolean, previousValue: boolean): void { if (currentValue !== previousValue) { - console.log('checked change'); this._stateChange.emit({ type: 'checked', checked: currentValue }); this._isSelectionPanelInput && this._updateExpandedLabel(); } diff --git a/src/components/selection-panel/selection-panel.e2e.ts b/src/components/selection-panel/selection-panel.e2e.ts index 5743f2ee783..a68d5ae48c2 100644 --- a/src/components/selection-panel/selection-panel.e2e.ts +++ b/src/components/selection-panel/selection-panel.e2e.ts @@ -267,6 +267,11 @@ describe('sbb-selection-panel', () => { document.querySelector('#input-no-content-2'); const fourthInputNoContent: SbbRadioButtonElement = document.querySelector('#input-no-content-4'); + const firstPanel = document.querySelector('#no-content-1'); + const secondPanel = document.querySelector('#no-content-2'); + + expect(firstPanel).to.have.attribute('data-state', 'closed'); + expect(secondPanel).to.have.attribute('data-state', 'closed'); await sendKeys({ down: 'Tab' }); await waitForLitRender(wrapperNoContent); @@ -300,11 +305,18 @@ describe('sbb-selection-panel', () => { describe('with nested radio buttons', () => { let nestedElement: SbbRadioButtonGroupElement; + let panel1, panel2: SbbSelectionPanelElement; + let willOpenEventSpy, didOpenEventSpy, willCloseEventSpy, didCloseEventSpy: EventSpy; beforeEach(async () => { + willOpenEventSpy = new EventSpy(SbbSelectionPanelElement.events.willOpen); + didOpenEventSpy = new EventSpy(SbbSelectionPanelElement.events.didOpen); + willCloseEventSpy = new EventSpy(SbbSelectionPanelElement.events.willClose); + didCloseEventSpy = new EventSpy(SbbSelectionPanelElement.events.didClose); + nestedElement = await fixture(html` - + Main Option 1 Suboption 1 @@ -312,7 +324,7 @@ describe('sbb-selection-panel', () => { - + Main Option 2 Suboption 3 @@ -321,6 +333,8 @@ describe('sbb-selection-panel', () => { `); + panel1 = nestedElement.querySelector('#panel1'); + panel2 = nestedElement.querySelector('#panel2'); await waitForLitRender(nestedElement); }); @@ -341,18 +355,30 @@ describe('sbb-selection-panel', () => { .querySelector("sbb-radio-button[value='sub1']") .shadowRoot.querySelector('.sbb-radio-button__expanded-label'); + await waitForCondition(() => didOpenEventSpy.count === 1); + expect(willOpenEventSpy.count).to.be.equal(1); + expect(didOpenEventSpy.count).to.be.equal(1); expect(mainRadioButton1Label.textContent.trim()).to.be.equal(', expanded'); expect(mainRadioButton2Label.textContent.trim()).to.be.equal(', collapsed'); expect(subRadioButton1).to.be.null; + expect(panel1).to.have.attribute('data-state', 'opened'); + expect(panel2).to.have.attribute('data-state', 'closed'); // Activate main option 2 mainRadioButton2.click(); - await waitForLitRender(nestedElement); + await waitForCondition(() => didOpenEventSpy.count === 2); + await waitForCondition(() => didCloseEventSpy.count === 1); + expect(willOpenEventSpy.count).to.be.equal(2); + expect(didOpenEventSpy.count).to.be.equal(2); + expect(willCloseEventSpy.count).to.be.equal(1); + expect(didCloseEventSpy.count).to.be.equal(1); expect(mainRadioButton1Label.textContent.trim()).to.be.equal(', collapsed'); expect(mainRadioButton2Label.textContent.trim()).to.be.equal(', expanded'); expect(subRadioButton1).to.be.null; + expect(panel1).to.have.attribute('data-state', 'closed'); + expect(panel2).to.have.attribute('data-state', 'opened'); }); it('should mark only outer group children as disabled', async () => { @@ -381,13 +407,27 @@ describe('sbb-selection-panel', () => { ); const sub1: SbbRadioButtonElement = document.querySelector('sbb-radio-button[value="sub1"]'); + await waitForCondition(() => didOpenEventSpy.count === 1); + expect(willOpenEventSpy.count).to.be.equal(1); + expect(didOpenEventSpy.count).to.be.equal(1); + expect(panel1).to.have.attribute('data-state', 'opened'); + expect(panel2).to.have.attribute('data-state', 'closed'); expect(main1).to.have.attribute('checked'); expect(main2).not.to.have.attribute('checked'); expect(sub1).to.have.attribute('checked'); main2.checked = true; - await waitForLitRender(nestedElement); + await waitForCondition(() => didOpenEventSpy.count === 2); + await waitForCondition(() => didCloseEventSpy.count === 1); + + expect(willOpenEventSpy.count).to.be.equal(2); + expect(didOpenEventSpy.count).to.be.equal(2); + expect(willCloseEventSpy.count).to.be.equal(1); + expect(didCloseEventSpy.count).to.be.equal(1); + + expect(panel1).to.have.attribute('data-state', 'closed'); + expect(panel2).to.have.attribute('data-state', 'opened'); expect(main1).not.to.have.attribute('checked'); expect(main2).to.have.attribute('checked'); expect(sub1).to.have.attribute('checked');