Skip to content

Commit

Permalink
test(selection-panel): enhance robusteness
Browse files Browse the repository at this point in the history
  • Loading branch information
@TomMenga
TomMenga committed Jan 22, 2024
1 parent 27bbee1 commit 7bcb42d
Show file tree
Hide file tree
Showing 2 changed files with 44 additions and 5 deletions.
1 change: 0 additions & 1 deletion src/components/radio-button/radio-button/radio-button.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
Expand Down
48 changes: 44 additions & 4 deletions src/components/selection-panel/selection-panel.e2e.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<SbbSelectionPanelElement>('#no-content-1');
const secondPanel = document.querySelector<SbbSelectionPanelElement>('#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);
Expand Down Expand Up @@ -300,19 +305,26 @@ describe('sbb-selection-panel', () => {

describe('with nested radio buttons', () => {
let nestedElement: SbbRadioButtonGroupElement;
let panel1, panel2: SbbSelectionPanelElement;
let willOpenEventSpy, didOpenEventSpy, willCloseEventSpy, didCloseEventSpy: EventSpy<Event>;

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`
<sbb-radio-button-group orientation="vertical" horizontal-from="large">
<sbb-selection-panel disable-animation>
<sbb-selection-panel disable-animation id="panel1">
<sbb-radio-button value="main1" checked> Main Option 1 </sbb-radio-button>
<sbb-radio-button-group orientation="vertical" slot="content">
<sbb-radio-button value="sub1" checked>Suboption 1</sbb-radio-button>
<sbb-radio-button value="sub2">Suboption 2</sbb-radio-button>
</sbb-radio-button-group>
</sbb-selection-panel>
<sbb-selection-panel disable-animation>
<sbb-selection-panel disable-animation id="panel2">
<sbb-radio-button value="main2"> Main Option 2 </sbb-radio-button>
<sbb-radio-button-group orientation="vertical" slot="content">
<sbb-radio-button value="sub3">Suboption 3</sbb-radio-button>
Expand All @@ -321,6 +333,8 @@ describe('sbb-selection-panel', () => {
</sbb-selection-panel>
</sbb-radio-button-group>
`);
panel1 = nestedElement.querySelector<SbbSelectionPanelElement>('#panel1');
panel2 = nestedElement.querySelector<SbbSelectionPanelElement>('#panel2');
await waitForLitRender(nestedElement);
});

Expand All @@ -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 () => {
Expand Down Expand Up @@ -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');
Expand Down

0 comments on commit 7bcb42d

Please sign in to comment.