From ef439b409aee47e8a701518b420551818b1fd381 Mon Sep 17 00:00:00 2001 From: mmalerba Date: Tue, 17 Sep 2019 14:19:56 -0700 Subject: [PATCH] feat(radio): move test harness out of experimental (#17117) --- .../mdc-radio/BUILD.bazel | 11 +- .../mdc-radio/harness/BUILD.bazel | 27 -- .../mdc-radio/harness/radio-harness.spec.ts | 308 ------------------ src/material/radio/testing/BUILD.bazel | 47 +++ src/material/radio/testing/index.ts | 9 + src/material/radio/testing/public-api.ts | 10 + .../radio/testing}/radio-harness-filters.ts | 0 .../radio/testing/radio-harness.spec.ts | 7 + .../radio/testing}/radio-harness.ts | 2 +- src/material/radio/testing/shared.spec.ts | 296 +++++++++++++++++ test/karma-system-config.js | 2 + 11 files changed, 373 insertions(+), 346 deletions(-) delete mode 100644 src/material-experimental/mdc-radio/harness/BUILD.bazel delete mode 100644 src/material-experimental/mdc-radio/harness/radio-harness.spec.ts create mode 100644 src/material/radio/testing/BUILD.bazel create mode 100644 src/material/radio/testing/index.ts create mode 100644 src/material/radio/testing/public-api.ts rename src/{material-experimental/mdc-radio/harness => material/radio/testing}/radio-harness-filters.ts (100%) create mode 100644 src/material/radio/testing/radio-harness.spec.ts rename src/{material-experimental/mdc-radio/harness => material/radio/testing}/radio-harness.ts (99%) create mode 100644 src/material/radio/testing/shared.spec.ts diff --git a/src/material-experimental/mdc-radio/BUILD.bazel b/src/material-experimental/mdc-radio/BUILD.bazel index 696bec375abe..8923b64d2c77 100644 --- a/src/material-experimental/mdc-radio/BUILD.bazel +++ b/src/material-experimental/mdc-radio/BUILD.bazel @@ -2,7 +2,7 @@ package(default_visibility = ["//visibility:public"]) load("@io_bazel_rules_sass//:defs.bzl", "sass_binary", "sass_library") load("//src/e2e-app:test_suite.bzl", "e2e_test_suite") -load("//tools:defaults.bzl", "ng_e2e_test_library", "ng_module", "ng_web_test_suite") +load("//tools:defaults.bzl", "ng_e2e_test_library", "ng_module") ng_module( name = "mdc-radio", @@ -30,15 +30,6 @@ sass_binary( src = "radio.scss", ) -ng_web_test_suite( - name = "unit_tests", - static_files = ["@npm//:node_modules/@material/radio/dist/mdc.radio.js"], - deps = [ - "//src/material-experimental:mdc_require_config.js", - "//src/material-experimental/mdc-radio/harness:harness_tests", - ], -) - ng_e2e_test_library( name = "e2e_test_sources", srcs = glob(["**/*.e2e.spec.ts"]), diff --git a/src/material-experimental/mdc-radio/harness/BUILD.bazel b/src/material-experimental/mdc-radio/harness/BUILD.bazel deleted file mode 100644 index 02916ef92407..000000000000 --- a/src/material-experimental/mdc-radio/harness/BUILD.bazel +++ /dev/null @@ -1,27 +0,0 @@ -package(default_visibility = ["//visibility:public"]) - -load("//tools:defaults.bzl", "ng_test_library", "ts_library") - -ts_library( - name = "harness", - srcs = glob( - ["**/*.ts"], - exclude = ["**/*.spec.ts"], - ), - deps = [ - "//src/cdk/coercion", - "//src/cdk/testing", - ], -) - -ng_test_library( - name = "harness_tests", - srcs = glob(["**/*.spec.ts"]), - deps = [ - ":harness", - "//src/cdk/testing", - "//src/cdk/testing/testbed", - "//src/material/radio", - "@npm//@angular/forms", - ], -) diff --git a/src/material-experimental/mdc-radio/harness/radio-harness.spec.ts b/src/material-experimental/mdc-radio/harness/radio-harness.spec.ts deleted file mode 100644 index 61b1bb5977bb..000000000000 --- a/src/material-experimental/mdc-radio/harness/radio-harness.spec.ts +++ /dev/null @@ -1,308 +0,0 @@ -import {HarnessLoader} from '@angular/cdk/testing'; -import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed'; -import {Component} from '@angular/core'; -import {ComponentFixture, TestBed} from '@angular/core/testing'; -import {ReactiveFormsModule} from '@angular/forms'; -import {MatRadioModule} from '@angular/material/radio'; -import {MatRadioButtonHarness, MatRadioGroupHarness} from './radio-harness'; - -let fixture: ComponentFixture; -let loader: HarnessLoader; -let radioButtonHarness: typeof MatRadioButtonHarness; -let radioGroupHarness: typeof MatRadioGroupHarness; - -describe('standard radio harnesses', () => { - describe('non-MDC-based', () => { - beforeEach(async () => { - await TestBed - .configureTestingModule({ - imports: [MatRadioModule, ReactiveFormsModule], - declarations: [MultipleRadioButtonsHarnessTest], - }) - .compileComponents(); - - fixture = TestBed.createComponent(MultipleRadioButtonsHarnessTest); - fixture.detectChanges(); - loader = TestbedHarnessEnvironment.loader(fixture); - radioButtonHarness = MatRadioButtonHarness; - radioGroupHarness = MatRadioGroupHarness; - }); - - describe('MatRadioButtonHarness', () => runRadioButtonTests()); - describe('MatRadioGroupHarness', () => runRadioGroupTests()); - }); - - describe( - 'MDC-based', - () => { - // TODO: run tests for MDC based radio-button once implemented. - }); -}); - -/** Shared tests to run on both the original and MDC-based radio-group's. */ -function runRadioGroupTests() { - it('should load all radio-group harnesses', async () => { - const groups = await loader.getAllHarnesses(radioGroupHarness); - expect(groups.length).toBe(3); - }); - - it('should load radio-group with exact id', async () => { - const groups = await loader.getAllHarnesses(radioGroupHarness.with({selector: '#my-group-2'})); - expect(groups.length).toBe(1); - }); - - it('should load radio-group by name', async () => { - let groups = await loader.getAllHarnesses(radioGroupHarness.with({name: 'my-group-2-name'})); - expect(groups.length).toBe(1); - expect(await groups[0].getId()).toBe('my-group-2'); - - groups = await loader.getAllHarnesses(radioGroupHarness.with({name: 'my-group-1-name'})); - expect(groups.length).toBe(1); - 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.detectChanges(); - - let errorMessage: string|null = null; - try { - await loader.getAllHarnesses(radioGroupHarness.with({name: 'third-group-name'})); - } catch (e) { - errorMessage = e.toString(); - } - - expect(errorMessage) - .toMatch( - /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(radioGroupHarness); - expect(groups.length).toBe(3); - expect(await groups[0].getName()).toBe('my-group-1-name'); - expect(await groups[1].getName()).toBe('my-group-2-name'); - expect(await groups[2].getName()).toBe('third-group-name'); - - fixture.componentInstance.secondGroupId = 'new-group'; - fixture.detectChanges(); - - expect(await groups[1].getName()).toBe('new-group-name'); - - fixture.componentInstance.thirdGroupButtonName = 'other-button-name'; - fixture.detectChanges(); - - let errorMessage: string|null = null; - try { - await groups[2].getName(); - } catch (e) { - errorMessage = e.toString(); - } - - expect(errorMessage).toMatch(/Radio buttons in radio-group have mismatching names./); - }); - - it('should get id of radio-group', async () => { - const groups = await loader.getAllHarnesses(radioGroupHarness); - expect(groups.length).toBe(3); - expect(await groups[0].getId()).toBe('my-group-1'); - expect(await groups[1].getId()).toBe('my-group-2'); - expect(await groups[2].getId()).toBe(''); - - fixture.componentInstance.secondGroupId = 'new-group-name'; - fixture.detectChanges(); - - expect(await groups[1].getId()).toBe('new-group-name'); - }); - - it('should get selected value of radio-group', async () => { - const [firstGroup, secondGroup] = await loader.getAllHarnesses(radioGroupHarness); - expect(await firstGroup.getSelectedValue()).toBe('opt2'); - expect(await secondGroup.getSelectedValue()).toBe(null); - }); - - it('should get radio-button harnesses of radio-group', async () => { - const groups = await loader.getAllHarnesses(radioGroupHarness); - expect(groups.length).toBe(3); - - expect((await groups[0].getRadioButtons()).length).toBe(3); - expect((await groups[1].getRadioButtons()).length).toBe(1); - expect((await groups[2].getRadioButtons()).length).toBe(2); - }); - - it('should get selected radio-button harnesses of radio-group', async () => { - const groups = await loader.getAllHarnesses(radioGroupHarness); - expect(groups.length).toBe(3); - - const groupOneSelected = await groups[0].getSelectedRadioButton(); - const groupTwoSelected = await groups[1].getSelectedRadioButton(); - const groupThreeSelected = await groups[2].getSelectedRadioButton(); - - expect(groupOneSelected).not.toBeNull(); - expect(groupTwoSelected).toBeNull(); - expect(groupThreeSelected).toBeNull(); - expect(await groupOneSelected!.getId()).toBe('opt2-group-one'); - }); -} - -/** Shared tests to run on both the original and MDC-based radio-button's. */ -function runRadioButtonTests() { - it('should load all radio-button harnesses', async () => { - const radios = await loader.getAllHarnesses(radioButtonHarness); - expect(radios.length).toBe(9); - }); - - it('should load radio-button with exact label', async () => { - const radios = await loader.getAllHarnesses(radioButtonHarness.with({label: 'Option #2'})); - expect(radios.length).toBe(1); - expect(await radios[0].getId()).toBe('opt2'); - expect(await radios[0].getLabelText()).toBe('Option #2'); - }); - - it('should load radio-button with regex label match', async () => { - const radios = await loader.getAllHarnesses(radioButtonHarness.with({label: /#3$/i})); - expect(radios.length).toBe(1); - expect(await radios[0].getId()).toBe('opt3'); - expect(await radios[0].getLabelText()).toBe('Option #3'); - }); - - it('should load radio-button with id', async () => { - const radios = await loader.getAllHarnesses(radioButtonHarness.with({selector: '#opt3'})); - expect(radios.length).toBe(1); - expect(await radios[0].getId()).toBe('opt3'); - expect(await radios[0].getLabelText()).toBe('Option #3'); - }); - - it('should load radio-buttons with same name', async () => { - const radios = await loader.getAllHarnesses(radioButtonHarness.with({name: 'group1'})); - expect(radios.length).toBe(2); - - expect(await radios[0].getId()).toBe('opt1'); - expect(await radios[1].getId()).toBe('opt2'); - }); - - it('should get checked state', async () => { - const [uncheckedRadio, checkedRadio] = await loader.getAllHarnesses(radioButtonHarness); - expect(await uncheckedRadio.isChecked()).toBe(false); - expect(await checkedRadio.isChecked()).toBe(true); - }); - - it('should get label text', async () => { - const [firstRadio, secondRadio, thirdRadio] = await loader.getAllHarnesses(radioButtonHarness); - expect(await firstRadio.getLabelText()).toBe('Option #1'); - expect(await secondRadio.getLabelText()).toBe('Option #2'); - expect(await thirdRadio.getLabelText()).toBe('Option #3'); - }); - - it('should get value', async () => { - const [firstRadio, secondRadio, thirdRadio] = await loader.getAllHarnesses(radioButtonHarness); - expect(await firstRadio.getValue()).toBe('opt1'); - expect(await secondRadio.getValue()).toBe('opt2'); - expect(await thirdRadio.getValue()).toBe('opt3'); - }); - - it('should get disabled state', async () => { - const [firstRadio] = await loader.getAllHarnesses(radioButtonHarness); - expect(await firstRadio.isDisabled()).toBe(false); - - fixture.componentInstance.disableAll = true; - fixture.detectChanges(); - - expect(await firstRadio.isDisabled()).toBe(true); - }); - - it('should focus radio-button', async () => { - const radioButton = await loader.getHarness(radioButtonHarness.with({selector: '#opt2'})); - expect(getActiveElementTagName()).not.toBe('input'); - await radioButton.focus(); - expect(getActiveElementTagName()).toBe('input'); - }); - - it('should blur radio-button', async () => { - const radioButton = await loader.getHarness(radioButtonHarness.with({selector: '#opt2'})); - await radioButton.focus(); - expect(getActiveElementTagName()).toBe('input'); - await radioButton.blur(); - expect(getActiveElementTagName()).not.toBe('input'); - }); - - it('should check radio-button', async () => { - const [uncheckedRadio, checkedRadio] = await loader.getAllHarnesses(radioButtonHarness); - await uncheckedRadio.check(); - expect(await uncheckedRadio.isChecked()).toBe(true); - // Checked radio state should change since the two radio's - // have the same name and only one can be selected. - expect(await checkedRadio.isChecked()).toBe(false); - }); - - it('should not be able to check disabled radio-button', async () => { - fixture.componentInstance.disableAll = true; - fixture.detectChanges(); - - const radioButton = await loader.getHarness(radioButtonHarness.with({selector: '#opt3'})); - expect(await radioButton.isChecked()).toBe(false); - await radioButton.check(); - expect(await radioButton.isChecked()).toBe(false); - - fixture.componentInstance.disableAll = false; - fixture.detectChanges(); - - expect(await radioButton.isChecked()).toBe(false); - await radioButton.check(); - expect(await radioButton.isChecked()).toBe(true); - }); - - it('should get required state', async () => { - const radioButton = - await loader.getHarness(radioButtonHarness.with({selector: '#required-radio'})); - expect(await radioButton.isRequired()).toBe(true); - }); -} - -function getActiveElementTagName() { - return document.activeElement ? document.activeElement.tagName.toLowerCase() : ''; -} - -@Component({ - template: ` - - Option #{{i + 1}} - - - - - {{value}} - - - - - - - Accept terms of conditions - - - - - First - - - ` -}) -class MultipleRadioButtonsHarnessTest { - values = ['opt1', 'opt2', 'opt3']; - disableAll = false; - secondGroupId = 'my-group-2'; - thirdGroupName: string = 'third-group-name'; - thirdGroupButtonName: string|undefined = undefined; -} diff --git a/src/material/radio/testing/BUILD.bazel b/src/material/radio/testing/BUILD.bazel new file mode 100644 index 000000000000..6dff40f93d7d --- /dev/null +++ b/src/material/radio/testing/BUILD.bazel @@ -0,0 +1,47 @@ +package(default_visibility = ["//visibility:public"]) + +load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite") + +ng_module( + name = "testing", + srcs = glob( + ["**/*.ts"], + exclude = ["**/*.spec.ts"], + ), + module_name = "@angular/material/radio/testing", + deps = [ + "//src/cdk/coercion", + "//src/cdk/testing", + ], +) + +ng_test_library( + name = "harness_tests_lib", + srcs = ["shared.spec.ts"], + deps = [ + ":testing", + "//src/cdk/testing", + "//src/cdk/testing/testbed", + "//src/material/radio", + "@npm//@angular/forms", + "@npm//@angular/platform-browser", + ], +) + +ng_test_library( + name = "unit_tests_lib", + srcs = glob( + ["**/*.spec.ts"], + exclude = ["shared.spec.ts"], + ), + deps = [ + ":harness_tests_lib", + ":testing", + "//src/material/radio", + ], +) + +ng_web_test_suite( + name = "unit_tests", + deps = [":unit_tests_lib"], +) diff --git a/src/material/radio/testing/index.ts b/src/material/radio/testing/index.ts new file mode 100644 index 000000000000..676ca90f1ffa --- /dev/null +++ b/src/material/radio/testing/index.ts @@ -0,0 +1,9 @@ +/** + * @license + * Copyright Google LLC All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ + +export * from './public-api'; diff --git a/src/material/radio/testing/public-api.ts b/src/material/radio/testing/public-api.ts new file mode 100644 index 000000000000..3417d160ae22 --- /dev/null +++ b/src/material/radio/testing/public-api.ts @@ -0,0 +1,10 @@ +/** + * @license + * Copyright Google LLC All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ + +export * from './radio-harness'; +export * from './radio-harness-filters'; diff --git a/src/material-experimental/mdc-radio/harness/radio-harness-filters.ts b/src/material/radio/testing/radio-harness-filters.ts similarity index 100% rename from src/material-experimental/mdc-radio/harness/radio-harness-filters.ts rename to src/material/radio/testing/radio-harness-filters.ts diff --git a/src/material/radio/testing/radio-harness.spec.ts b/src/material/radio/testing/radio-harness.spec.ts new file mode 100644 index 000000000000..667353473d27 --- /dev/null +++ b/src/material/radio/testing/radio-harness.spec.ts @@ -0,0 +1,7 @@ +import {MatRadioModule} from '@angular/material/radio'; +import {runHarnessTests} from '@angular/material/radio/testing/shared.spec'; +import {MatRadioButtonHarness, MatRadioGroupHarness} from './radio-harness'; + +describe('Non-MDC-based', () => { + runHarnessTests(MatRadioModule, MatRadioGroupHarness, MatRadioButtonHarness); +}); diff --git a/src/material-experimental/mdc-radio/harness/radio-harness.ts b/src/material/radio/testing/radio-harness.ts similarity index 99% rename from src/material-experimental/mdc-radio/harness/radio-harness.ts rename to src/material/radio/testing/radio-harness.ts index b4bee558e531..a3ab2fcfe757 100644 --- a/src/material-experimental/mdc-radio/harness/radio-harness.ts +++ b/src/material/radio/testing/radio-harness.ts @@ -8,7 +8,7 @@ import {ComponentHarness, HarnessPredicate} from '@angular/cdk/testing'; import {coerceBooleanProperty} from '@angular/cdk/coercion'; -import {RadioButtonHarnessFilters, RadioGroupHarnessFilters} from './radio-harness-filters'; +import {RadioButtonHarnessFilters, RadioGroupHarnessFilters} from '@angular/material/radio/testing/radio-harness-filters'; /** * Harness for interacting with a standard mat-radio-group in tests. diff --git a/src/material/radio/testing/shared.spec.ts b/src/material/radio/testing/shared.spec.ts new file mode 100644 index 000000000000..00fa850f2a4e --- /dev/null +++ b/src/material/radio/testing/shared.spec.ts @@ -0,0 +1,296 @@ +import {HarnessLoader} from '@angular/cdk/testing'; +import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed'; +import {Component} from '@angular/core'; +import {ComponentFixture, TestBed} from '@angular/core/testing'; +import {ReactiveFormsModule} from '@angular/forms'; +import {MatRadioModule} from '@angular/material/radio'; +import {MatRadioButtonHarness, MatRadioGroupHarness} from './radio-harness'; + +/** Shared tests to run on both the original and MDC-based radio components. */ +export function runHarnessTests(radioModule: typeof MatRadioModule, + radioGroupHarness: typeof MatRadioGroupHarness, + radioButtonHarness: typeof MatRadioButtonHarness) { + let fixture: ComponentFixture; + let loader: HarnessLoader; + + beforeEach(async () => { + await TestBed + .configureTestingModule({ + imports: [radioModule, ReactiveFormsModule], + declarations: [MultipleRadioButtonsHarnessTest], + }) + .compileComponents(); + + fixture = TestBed.createComponent(MultipleRadioButtonsHarnessTest); + fixture.detectChanges(); + loader = TestbedHarnessEnvironment.loader(fixture); + }); + + describe('MatRadioGroupHarness', () => { + it('should load all radio-group harnesses', async () => { + const groups = await loader.getAllHarnesses(radioGroupHarness); + expect(groups.length).toBe(3); + }); + + it('should load radio-group with exact id', async () => { + const groups = await loader.getAllHarnesses( + radioGroupHarness.with({selector: '#my-group-2'})); + expect(groups.length).toBe(1); + }); + + it('should load radio-group by name', async () => { + let groups = await loader.getAllHarnesses(radioGroupHarness.with({name: 'my-group-2-name'})); + expect(groups.length).toBe(1); + expect(await groups[0].getId()).toBe('my-group-2'); + + groups = await loader.getAllHarnesses(radioGroupHarness.with({name: 'my-group-1-name'})); + expect(groups.length).toBe(1); + 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.detectChanges(); + + let errorMessage: string | null = null; + try { + await loader.getAllHarnesses(radioGroupHarness.with({name: 'third-group-name'})); + } catch (e) { + errorMessage = e.toString(); + } + + expect(errorMessage).toMatch( + /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(radioGroupHarness); + expect(groups.length).toBe(3); + expect(await groups[0].getName()).toBe('my-group-1-name'); + expect(await groups[1].getName()).toBe('my-group-2-name'); + expect(await groups[2].getName()).toBe('third-group-name'); + + fixture.componentInstance.secondGroupId = 'new-group'; + fixture.detectChanges(); + + expect(await groups[1].getName()).toBe('new-group-name'); + + fixture.componentInstance.thirdGroupButtonName = 'other-button-name'; + fixture.detectChanges(); + + let errorMessage: string | null = null; + try { + await groups[2].getName(); + } catch (e) { + errorMessage = e.toString(); + } + + expect(errorMessage).toMatch(/Radio buttons in radio-group have mismatching names./); + }); + + it('should get id of radio-group', async () => { + const groups = await loader.getAllHarnesses(radioGroupHarness); + expect(groups.length).toBe(3); + expect(await groups[0].getId()).toBe('my-group-1'); + expect(await groups[1].getId()).toBe('my-group-2'); + expect(await groups[2].getId()).toBe(''); + + fixture.componentInstance.secondGroupId = 'new-group-name'; + fixture.detectChanges(); + + expect(await groups[1].getId()).toBe('new-group-name'); + }); + + it('should get selected value of radio-group', async () => { + const [firstGroup, secondGroup] = await loader.getAllHarnesses(radioGroupHarness); + expect(await firstGroup.getSelectedValue()).toBe('opt2'); + expect(await secondGroup.getSelectedValue()).toBe(null); + }); + + it('should get radio-button harnesses of radio-group', async () => { + const groups = await loader.getAllHarnesses(radioGroupHarness); + expect(groups.length).toBe(3); + + expect((await groups[0].getRadioButtons()).length).toBe(3); + expect((await groups[1].getRadioButtons()).length).toBe(1); + expect((await groups[2].getRadioButtons()).length).toBe(2); + }); + + it('should get selected radio-button harnesses of radio-group', async () => { + const groups = await loader.getAllHarnesses(radioGroupHarness); + expect(groups.length).toBe(3); + + const groupOneSelected = await groups[0].getSelectedRadioButton(); + const groupTwoSelected = await groups[1].getSelectedRadioButton(); + const groupThreeSelected = await groups[2].getSelectedRadioButton(); + + expect(groupOneSelected).not.toBeNull(); + expect(groupTwoSelected).toBeNull(); + expect(groupThreeSelected).toBeNull(); + expect(await groupOneSelected!.getId()).toBe('opt2-group-one'); + }); + }); + + describe('MatRadioButtonHarness', () => { + it('should load all radio-button harnesses', async () => { + const radios = await loader.getAllHarnesses(radioButtonHarness); + expect(radios.length).toBe(9); + }); + + it('should load radio-button with exact label', async () => { + const radios = await loader.getAllHarnesses(radioButtonHarness.with({label: 'Option #2'})); + expect(radios.length).toBe(1); + expect(await radios[0].getId()).toBe('opt2'); + expect(await radios[0].getLabelText()).toBe('Option #2'); + }); + + it('should load radio-button with regex label match', async () => { + const radios = await loader.getAllHarnesses(radioButtonHarness.with({label: /#3$/i})); + expect(radios.length).toBe(1); + expect(await radios[0].getId()).toBe('opt3'); + expect(await radios[0].getLabelText()).toBe('Option #3'); + }); + + it('should load radio-button with id', async () => { + const radios = await loader.getAllHarnesses(radioButtonHarness.with({selector: '#opt3'})); + expect(radios.length).toBe(1); + expect(await radios[0].getId()).toBe('opt3'); + expect(await radios[0].getLabelText()).toBe('Option #3'); + }); + + it('should load radio-buttons with same name', async () => { + const radios = await loader.getAllHarnesses(radioButtonHarness.with({name: 'group1'})); + expect(radios.length).toBe(2); + + expect(await radios[0].getId()).toBe('opt1'); + expect(await radios[1].getId()).toBe('opt2'); + }); + + it('should get checked state', async () => { + const [uncheckedRadio, checkedRadio] = await loader.getAllHarnesses(radioButtonHarness); + expect(await uncheckedRadio.isChecked()).toBe(false); + expect(await checkedRadio.isChecked()).toBe(true); + }); + + it('should get label text', async () => { + const [firstRadio, secondRadio, thirdRadio] = + await loader.getAllHarnesses(radioButtonHarness); + expect(await firstRadio.getLabelText()).toBe('Option #1'); + expect(await secondRadio.getLabelText()).toBe('Option #2'); + expect(await thirdRadio.getLabelText()).toBe('Option #3'); + }); + + it('should get value', async () => { + const [firstRadio, secondRadio, thirdRadio] = + await loader.getAllHarnesses(radioButtonHarness); + expect(await firstRadio.getValue()).toBe('opt1'); + expect(await secondRadio.getValue()).toBe('opt2'); + expect(await thirdRadio.getValue()).toBe('opt3'); + }); + + it('should get disabled state', async () => { + const [firstRadio] = await loader.getAllHarnesses(radioButtonHarness); + expect(await firstRadio.isDisabled()).toBe(false); + + fixture.componentInstance.disableAll = true; + fixture.detectChanges(); + + expect(await firstRadio.isDisabled()).toBe(true); + }); + + it('should focus radio-button', async () => { + const radioButton = await loader.getHarness(radioButtonHarness.with({selector: '#opt2'})); + expect(getActiveElementTagName()).not.toBe('input'); + await radioButton.focus(); + expect(getActiveElementTagName()).toBe('input'); + }); + + it('should blur radio-button', async () => { + const radioButton = await loader.getHarness(radioButtonHarness.with({selector: '#opt2'})); + await radioButton.focus(); + expect(getActiveElementTagName()).toBe('input'); + await radioButton.blur(); + expect(getActiveElementTagName()).not.toBe('input'); + }); + + it('should check radio-button', async () => { + const [uncheckedRadio, checkedRadio] = await loader.getAllHarnesses(radioButtonHarness); + await uncheckedRadio.check(); + expect(await uncheckedRadio.isChecked()).toBe(true); + // Checked radio state should change since the two radio's + // have the same name and only one can be selected. + expect(await checkedRadio.isChecked()).toBe(false); + }); + + it('should not be able to check disabled radio-button', async () => { + fixture.componentInstance.disableAll = true; + fixture.detectChanges(); + + const radioButton = await loader.getHarness(radioButtonHarness.with({selector: '#opt3'})); + expect(await radioButton.isChecked()).toBe(false); + await radioButton.check(); + expect(await radioButton.isChecked()).toBe(false); + + fixture.componentInstance.disableAll = false; + fixture.detectChanges(); + + expect(await radioButton.isChecked()).toBe(false); + await radioButton.check(); + expect(await radioButton.isChecked()).toBe(true); + }); + + it('should get required state', async () => { + const radioButton = + await loader.getHarness(radioButtonHarness.with({selector: '#required-radio'})); + expect(await radioButton.isRequired()).toBe(true); + }); + }); +} + +function getActiveElementTagName() { + return document.activeElement ? document.activeElement.tagName.toLowerCase() : ''; +} + +@Component({ + template: ` + + Option #{{i + 1}} + + + + + {{value}} + + + + + + + Accept terms of conditions + + + + + First + + + ` +}) +class MultipleRadioButtonsHarnessTest { + values = ['opt1', 'opt2', 'opt3']; + disableAll = false; + secondGroupId = 'my-group-2'; + thirdGroupName: string = 'third-group-name'; + thirdGroupButtonName: string|undefined = undefined; +} diff --git a/test/karma-system-config.js b/test/karma-system-config.js index bc2637a02502..60b9870d10cf 100644 --- a/test/karma-system-config.js +++ b/test/karma-system-config.js @@ -132,6 +132,8 @@ System.config({ '@angular/material/progress-spinner/testing': 'dist/packages/material/progress-spinner/testing/index.js', '@angular/material/progress-spinner/testing/shared.spec': 'dist/packages/material/progress-spinner/testing/shared.spec.js', '@angular/material/radio': 'dist/packages/material/radio/index.js', + '@angular/material/radio/testing': 'dist/packages/material/radio/testing/index.js', + '@angular/material/radio/testing/shared.spec': 'dist/packages/material/radio/testing/shared.spec.js', '@angular/material/select': 'dist/packages/material/select/index.js', '@angular/material/sidenav': 'dist/packages/material/sidenav/index.js', '@angular/material/slide-toggle': 'dist/packages/material/slide-toggle/index.js',