Skip to content

Commit

Permalink
fix(material/radio): 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 002b054)
  • Loading branch information
crisbeto committed Aug 13, 2024
1 parent aaf0d51 commit a259b01
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 17 deletions.
42 changes: 27 additions & 15 deletions src/material/radio/testing/radio-harness.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -45,21 +45,17 @@ describe('radio harness', () => {
expect(await groups[0].getId()).toBe('my-group-1');
});

it(
'should throw when finding radio-group with specific name that has mismatched ' +
'radio-button names',
async () => {
fixture.componentInstance.thirdGroupButtonName = 'other-name';
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();

await expectAsync(
loader.getAllHarnesses(MatRadioGroupHarness.with({name: 'third-group-name'})),
).toBeRejectedWithError(
/locator found a radio-group with name "third-group-name".*have mismatching names/,
);
},
);
it('should throw when finding radio-group with specific name that has mismatched radio-button names', async () => {
fixture.componentInstance.thirdGroupButtonName = 'other-name';
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();

await expectAsync(
loader.getAllHarnesses(MatRadioGroupHarness.with({name: 'third-group-name'})),
).toBeRejectedWithError(
/locator found a radio-group with name "third-group-name".*have mismatching names/,
);
});

it('should get name of radio-group', async () => {
const groups = await loader.getAllHarnesses(MatRadioGroupHarness);
Expand Down Expand Up @@ -214,6 +210,20 @@ describe('radio harness', () => {
expect(await firstRadio.isDisabled()).toBe(true);
});

it('should get the disabled state with disabledInteractive is enabled', async () => {
fixture.componentInstance.disabledInteractive = true;
fixture.changeDetectorRef.markForCheck();

const [firstRadio] = await loader.getAllHarnesses(MatRadioButtonHarness);
expect(await firstRadio.isDisabled()).toBe(false);

fixture.componentInstance.disableAll = true;
fixture.changeDetectorRef.markForCheck();
fixture.detectChanges();

expect(await firstRadio.isDisabled()).toBe(true);
});

it('should focus radio-button', async () => {
const radioButton = await loader.getHarness(MatRadioButtonHarness.with({selector: '#opt2'}));
expect(await radioButton.isFocused()).toBe(false);
Expand Down Expand Up @@ -272,6 +282,7 @@ describe('radio harness', () => {
<mat-radio-button
[name]="value === 'opt3' ? 'group2' : 'group1'"
[disabled]="disableAll"
[disabledInteractive]="disabledInteractive"
[checked]="value === 'opt2'"
[id]="value"
[required]="value === 'opt2'"
Expand Down Expand Up @@ -307,6 +318,7 @@ describe('radio harness', () => {
class MultipleRadioButtonsHarnessTest {
values = ['opt1', 'opt2', 'opt3'];
disableAll = false;
disabledInteractive = false;
secondGroupId = 'my-group-2';
thirdGroupName: string = 'third-group-name';
thirdGroupButtonName: string | undefined = undefined;
Expand Down
10 changes: 8 additions & 2 deletions src/material/radio/testing/radio-harness.ts
Original file line number Diff line number Diff line change
Expand Up @@ -205,8 +205,14 @@ export class MatRadioButtonHarness extends ComponentHarness {

/** Whether the radio-button is disabled. */
async isDisabled(): Promise<boolean> {
const disabled = (await this._input()).getAttribute('disabled');
return coerceBooleanProperty(await disabled);
const input = await this._input();
const disabled = await input.getAttribute('disabled');

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

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

/** Whether the radio-button is required. */
Expand Down

0 comments on commit a259b01

Please sign in to comment.