Skip to content

Commit

Permalink
fix(material/slide-toggle): account for disabledInteractive in harness
Browse files Browse the repository at this point in the history
Switches to using a CSS class to get the disabled state in the harness so it continues to work when `disabledInteractive` is set.

(cherry picked from commit c3e0279)
  • Loading branch information
crisbeto committed Aug 13, 2024
1 parent a259b01 commit 08d2e3e
Show file tree
Hide file tree
Showing 3 changed files with 25 additions and 4 deletions.
2 changes: 1 addition & 1 deletion src/material/slide-toggle/slide-toggle.html
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
[attr.aria-describedby]="ariaDescribedby"
[attr.aria-required]="required || null"
[attr.aria-checked]="checked"
[attr.aria-disabled]="disabledInteractive && disabledInteractive ? 'true' : null"
[attr.aria-disabled]="disabled && disabledInteractive ? 'true' : null"
(click)="_handleClick()"
#switch>
<span class="mdc-switch__track"></span>
Expand Down
17 changes: 16 additions & 1 deletion src/material/slide-toggle/testing/slide-toggle-harness.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -160,6 +160,17 @@ describe('MatSlideToggleHarness', () => {
await disabledToggle.toggle();
expect(await disabledToggle.isChecked()).toBe(false);
});

it('should get disabled state when disabledInteractive is enabled', async () => {
fixture.componentInstance.disabled.set(false);
fixture.componentInstance.disabledInteractive.set(true);

const toggle = await loader.getHarness(MatSlideToggleHarness.with({label: 'Second'}));
expect(await toggle.isDisabled()).toBe(false);

fixture.componentInstance.disabled.set(true);
expect(await toggle.isDisabled()).toBe(true);
});
});

@Component({
Expand All @@ -171,7 +182,10 @@ describe('MatSlideToggleHarness', () => {
aria-label="First slide-toggle">
First
</mat-slide-toggle>
<mat-slide-toggle [disabled]="disabled()" aria-labelledby="second-label">
<mat-slide-toggle
[disabled]="disabled()"
[disabledInteractive]="disabledInteractive()"
aria-labelledby="second-label">
Second
</mat-slide-toggle>
<span id="second-label">Second slide-toggle</span>
Expand All @@ -182,4 +196,5 @@ describe('MatSlideToggleHarness', () => {
class SlideToggleHarnessTest {
ctrl = new FormControl(true);
disabled = signal(true);
disabledInteractive = signal(false);
}
10 changes: 8 additions & 2 deletions src/material/slide-toggle/testing/slide-toggle-harness.ts
Original file line number Diff line number Diff line change
Expand Up @@ -70,8 +70,14 @@ export class MatSlideToggleHarness extends ComponentHarness {

/** Whether the slide-toggle is disabled. */
async isDisabled(): Promise<boolean> {
const disabled = (await this._nativeElement()).getAttribute('disabled');
return coerceBooleanProperty(await disabled);
const nativeElement = await this._nativeElement();
const disabled = await nativeElement.getAttribute('disabled');

if (disabled !== null) {
return coerceBooleanProperty(disabled);
}

return (await nativeElement.getAttribute('aria-disabled')) === 'true';
}

/** Whether the slide-toggle is required. */
Expand Down

0 comments on commit 08d2e3e

Please sign in to comment.