From 0ae79b011f01d4799671106652cf954cfc5b82a1 Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Thu, 12 Sep 2019 11:50:33 -0700 Subject: [PATCH 1/4] feat(checkbox): move checkbox harness out of experimental --- .../mdc-checkbox/testing/BUILD.bazel | 42 ++++ .../testing/checkbox-harness.spec.ts | 181 ++++++++++++++++++ .../checkbox-harness.ts} | 2 +- .../mdc-checkbox/testing/index.ts | 9 + .../mdc-checkbox/testing/public-api.ts | 9 + src/material/checkbox/testing/BUILD.bazel | 34 ++++ .../testing}/checkbox-harness-filters.ts | 0 .../testing}/checkbox-harness.spec.ts | 107 ++++------- .../checkbox/testing}/checkbox-harness.ts | 2 +- src/material/checkbox/testing/index.ts | 9 + src/material/checkbox/testing/public-api.ts | 10 + 11 files changed, 334 insertions(+), 71 deletions(-) create mode 100644 src/material-experimental/mdc-checkbox/testing/BUILD.bazel create mode 100644 src/material-experimental/mdc-checkbox/testing/checkbox-harness.spec.ts rename src/material-experimental/mdc-checkbox/{harness/mdc-checkbox-harness.ts => testing/checkbox-harness.ts} (98%) create mode 100644 src/material-experimental/mdc-checkbox/testing/index.ts create mode 100644 src/material-experimental/mdc-checkbox/testing/public-api.ts create mode 100644 src/material/checkbox/testing/BUILD.bazel rename src/{material-experimental/mdc-checkbox/harness => material/checkbox/testing}/checkbox-harness-filters.ts (100%) rename src/{material-experimental/mdc-checkbox/harness => material/checkbox/testing}/checkbox-harness.spec.ts (64%) rename src/{material-experimental/mdc-checkbox/harness => material/checkbox/testing}/checkbox-harness.ts (100%) create mode 100644 src/material/checkbox/testing/index.ts create mode 100644 src/material/checkbox/testing/public-api.ts diff --git a/src/material-experimental/mdc-checkbox/testing/BUILD.bazel b/src/material-experimental/mdc-checkbox/testing/BUILD.bazel new file mode 100644 index 000000000000..4fa21e77a0a7 --- /dev/null +++ b/src/material-experimental/mdc-checkbox/testing/BUILD.bazel @@ -0,0 +1,42 @@ +package(default_visibility = ["//visibility:public"]) + +load("//tools:defaults.bzl", "ng_test_library", "ng_web_test_suite", "ng_module") + +ng_module( + name = "testing", + module_name = "@angular/material-experimental/mdc-checkbox/testing", + srcs = glob( + ["**/*.ts"], + exclude = ["**/*.spec.ts"], + ), + deps = [ + "//src/material/checkbox/testing", + "//src/cdk/coercion", + "//src/cdk/testing", + ], +) + +ng_test_library( + name = "unit_tests_lib", + srcs = glob(["**/*.spec.ts"]), + deps = [ + ":testing", + "//src/cdk/testing", + "//src/cdk/testing/testbed", + "//src/material-experimental/mdc-checkbox", + "@npm//@angular/forms", + "@npm//@angular/platform-browser", + ], +) + +ng_web_test_suite( + name = "unit_tests", + static_files = [ + "@npm//:node_modules/@material/checkbox/dist/mdc.checkbox.js", + "@npm//:node_modules/@material/ripple/dist/mdc.ripple.js", + ], + deps = [ + ":unit_tests_lib", + "//src/material-experimental:mdc_require_config.js", + ], +) diff --git a/src/material-experimental/mdc-checkbox/testing/checkbox-harness.spec.ts b/src/material-experimental/mdc-checkbox/testing/checkbox-harness.spec.ts new file mode 100644 index 000000000000..f292e96521ee --- /dev/null +++ b/src/material-experimental/mdc-checkbox/testing/checkbox-harness.spec.ts @@ -0,0 +1,181 @@ +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 {FormControl, ReactiveFormsModule} from '@angular/forms'; +import {MatCheckboxModule} from '@angular/material-experimental/mdc-checkbox'; +import {MatCheckboxHarness} from '@angular/material-experimental/mdc-checkbox/testing'; + +describe('MDC-based MatCheckboxHarness', () => { + let fixture: ComponentFixture; + let loader: HarnessLoader; + + beforeEach(async () => { + await TestBed + .configureTestingModule({ + imports: [MatCheckboxModule, ReactiveFormsModule], + declarations: [CheckboxHarnessTest], + }) + .compileComponents(); + + fixture = TestBed.createComponent(CheckboxHarnessTest); + fixture.detectChanges(); + loader = TestbedHarnessEnvironment.loader(fixture); + }); + + it('should load all checkbox harnesses', async () => { + const checkboxes = await loader.getAllHarnesses(MatCheckboxHarness); + expect(checkboxes.length).toBe(2); + }); + + it('should load checkbox with exact label', async () => { + const checkboxes = await loader.getAllHarnesses(MatCheckboxHarness.with({label: 'First'})); + expect(checkboxes.length).toBe(1); + expect(await checkboxes[0].getLabelText()).toBe('First'); + }); + + it('should load checkbox with name', async () => { + const checkboxes = await loader.getAllHarnesses(MatCheckboxHarness.with({name: 'first-name'})); + expect(checkboxes.length).toBe(1); + expect(await checkboxes[0].getLabelText()).toBe('First'); + }); + + it('should load checkbox with regex label match', async () => { + const checkboxes = await loader.getAllHarnesses(MatCheckboxHarness.with({label: /^s/i})); + expect(checkboxes.length).toBe(1); + expect(await checkboxes[0].getLabelText()).toBe('Second'); + }); + + it('should get checked state', async () => { + const [checkedCheckbox, uncheckedCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness); + expect(await checkedCheckbox.isChecked()).toBe(true); + expect(await uncheckedCheckbox.isChecked()).toBe(false); + }); + + it('should get indeterminate state', async () => { + const [checkedCheckbox, indeterminateCheckbox] = + await loader.getAllHarnesses(MatCheckboxHarness); + expect(await checkedCheckbox.isIndeterminate()).toBe(false); + expect(await indeterminateCheckbox.isIndeterminate()).toBe(true); + }); + + it('should get disabled state', async () => { + const [enabledCheckbox, disabledCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness); + expect(await enabledCheckbox.isDisabled()).toBe(false); + expect(await disabledCheckbox.isDisabled()).toBe(true); + }); + + it('should get required state', async () => { + const [requiredCheckbox, optionalCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness); + expect(await requiredCheckbox.isRequired()).toBe(true); + expect(await optionalCheckbox.isRequired()).toBe(false); + }); + + it('should get valid state', async () => { + const [requiredCheckbox, optionalCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness); + expect(await optionalCheckbox.isValid()).toBe(true); + expect(await requiredCheckbox.isValid()).toBe(true); + await requiredCheckbox.uncheck(); + expect(await requiredCheckbox.isValid()).toBe(false); + }); + + it('should get name', async () => { + const checkbox = await loader.getHarness(MatCheckboxHarness.with({label: 'First'})); + expect(await checkbox.getName()).toBe('first-name'); + }); + + it('should get value', async () => { + const checkbox = await loader.getHarness(MatCheckboxHarness.with({label: 'First'})); + expect(await checkbox.getValue()).toBe('first-value'); + }); + + it('should get aria-label', async () => { + const checkbox = await loader.getHarness(MatCheckboxHarness.with({label: 'First'})); + expect(await checkbox.getAriaLabel()).toBe('First checkbox'); + }); + + it('should get aria-labelledby', async () => { + const checkbox = await loader.getHarness(MatCheckboxHarness.with({label: 'Second'})); + expect(await checkbox.getAriaLabelledby()).toBe('second-label'); + }); + + it('should get label text', async () => { + const [firstCheckbox, secondCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness); + expect(await firstCheckbox.getLabelText()).toBe('First'); + expect(await secondCheckbox.getLabelText()).toBe('Second'); + }); + + it('should focus checkbox', async () => { + const checkbox = await loader.getHarness(MatCheckboxHarness.with({label: 'First'})); + expect(getActiveElementTagName()).not.toBe('input'); + await checkbox.focus(); + expect(getActiveElementTagName()).toBe('input'); + }); + + it('should blur checkbox', async () => { + const checkbox = await loader.getHarness(MatCheckboxHarness.with({label: 'First'})); + await checkbox.focus(); + expect(getActiveElementTagName()).toBe('input'); + await checkbox.blur(); + expect(getActiveElementTagName()).not.toBe('input'); + }); + + it('should toggle checkbox', async () => { + fixture.componentInstance.disabled = false; + const [checkedCheckbox, uncheckedCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness); + await checkedCheckbox.toggle(); + await uncheckedCheckbox.toggle(); + expect(await checkedCheckbox.isChecked()).toBe(false); + expect(await uncheckedCheckbox.isChecked()).toBe(true); + }); + + it('should check checkbox', async () => { + fixture.componentInstance.disabled = false; + const [checkedCheckbox, uncheckedCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness); + await checkedCheckbox.check(); + await uncheckedCheckbox.check(); + expect(await checkedCheckbox.isChecked()).toBe(true); + expect(await uncheckedCheckbox.isChecked()).toBe(true); + }); + + it('should uncheck checkbox', async () => { + fixture.componentInstance.disabled = false; + const [checkedCheckbox, uncheckedCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness); + await checkedCheckbox.uncheck(); + await uncheckedCheckbox.uncheck(); + expect(await checkedCheckbox.isChecked()).toBe(false); + expect(await uncheckedCheckbox.isChecked()).toBe(false); + }); + + it('should not toggle disabled checkbox', async () => { + const disabledCheckbox = await loader.getHarness(MatCheckboxHarness.with({label: 'Second'})); + expect(await disabledCheckbox.isChecked()).toBe(false); + await disabledCheckbox.toggle(); + expect(await disabledCheckbox.isChecked()).toBe(false); + }); +}); + +function getActiveElementTagName() { + return document.activeElement ? document.activeElement.tagName.toLowerCase() : ''; +} + +@Component({ + template: ` + + First + + + Second + + Second checkbox + ` +}) +class CheckboxHarnessTest { + ctrl = new FormControl(true); + disabled = true; +} diff --git a/src/material-experimental/mdc-checkbox/harness/mdc-checkbox-harness.ts b/src/material-experimental/mdc-checkbox/testing/checkbox-harness.ts similarity index 98% rename from src/material-experimental/mdc-checkbox/harness/mdc-checkbox-harness.ts rename to src/material-experimental/mdc-checkbox/testing/checkbox-harness.ts index 8bba9f1aa21d..3e8772732fbe 100644 --- a/src/material-experimental/mdc-checkbox/harness/mdc-checkbox-harness.ts +++ b/src/material-experimental/mdc-checkbox/testing/checkbox-harness.ts @@ -8,7 +8,7 @@ import {ComponentHarness, HarnessPredicate} from '@angular/cdk/testing'; import {coerceBooleanProperty} from '@angular/cdk/coercion'; -import {CheckboxHarnessFilters} from './checkbox-harness-filters'; +import {CheckboxHarnessFilters} from '@angular/material/checkbox/testing'; /** * Harness for interacting with a MDC-based mat-checkbox in tests. diff --git a/src/material-experimental/mdc-checkbox/testing/index.ts b/src/material-experimental/mdc-checkbox/testing/index.ts new file mode 100644 index 000000000000..676ca90f1ffa --- /dev/null +++ b/src/material-experimental/mdc-checkbox/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-experimental/mdc-checkbox/testing/public-api.ts b/src/material-experimental/mdc-checkbox/testing/public-api.ts new file mode 100644 index 000000000000..0c9800a26bd9 --- /dev/null +++ b/src/material-experimental/mdc-checkbox/testing/public-api.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 './checkbox-harness'; diff --git a/src/material/checkbox/testing/BUILD.bazel b/src/material/checkbox/testing/BUILD.bazel new file mode 100644 index 000000000000..ce36788047dd --- /dev/null +++ b/src/material/checkbox/testing/BUILD.bazel @@ -0,0 +1,34 @@ +package(default_visibility = ["//visibility:public"]) + +load("//tools:defaults.bzl", "ng_test_library", "ng_web_test_suite", "ng_module") + +ng_module( + name = "testing", + module_name = "@angular/material/checkbox/testing", + srcs = glob( + ["**/*.ts"], + exclude = ["**/*.spec.ts"], + ), + deps = [ + "//src/cdk/coercion", + "//src/cdk/testing", + ], +) + +ng_test_library( + name = "unit_tests_lib", + srcs = glob(["**/*.spec.ts"]), + deps = [ + ":testing", + "//src/cdk/testing", + "//src/cdk/testing/testbed", + "//src/material/checkbox", + "@npm//@angular/forms", + "@npm//@angular/platform-browser", + ], +) + +ng_web_test_suite( + name = "unit_tests", + deps = [":unit_tests_lib"], +) diff --git a/src/material-experimental/mdc-checkbox/harness/checkbox-harness-filters.ts b/src/material/checkbox/testing/checkbox-harness-filters.ts similarity index 100% rename from src/material-experimental/mdc-checkbox/harness/checkbox-harness-filters.ts rename to src/material/checkbox/testing/checkbox-harness-filters.ts diff --git a/src/material-experimental/mdc-checkbox/harness/checkbox-harness.spec.ts b/src/material/checkbox/testing/checkbox-harness.spec.ts similarity index 64% rename from src/material-experimental/mdc-checkbox/harness/checkbox-harness.spec.ts rename to src/material/checkbox/testing/checkbox-harness.spec.ts index a5bc5a34f856..f9c855d561d8 100644 --- a/src/material-experimental/mdc-checkbox/harness/checkbox-harness.spec.ts +++ b/src/material/checkbox/testing/checkbox-harness.spec.ts @@ -4,105 +4,74 @@ import {Component} from '@angular/core'; import {ComponentFixture, TestBed} from '@angular/core/testing'; import {FormControl, ReactiveFormsModule} from '@angular/forms'; import {MatCheckboxModule} from '@angular/material/checkbox'; -import {MatCheckboxModule as MatMdcCheckboxModule} from '../index'; -import {MatCheckboxHarness} from './checkbox-harness'; -import {MatCheckboxHarness as MatMdcCheckboxHarness} from './mdc-checkbox-harness'; - -let fixture: ComponentFixture; -let loader: HarnessLoader; -let checkboxHarness: typeof MatCheckboxHarness; - -describe('MatCheckboxHarness', () => { - describe('non-MDC-based', () => { - beforeEach(async () => { - await TestBed - .configureTestingModule({ - imports: [MatCheckboxModule, ReactiveFormsModule], - declarations: [CheckboxHarnessTest], - }) - .compileComponents(); - - fixture = TestBed.createComponent(CheckboxHarnessTest); - fixture.detectChanges(); - loader = TestbedHarnessEnvironment.loader(fixture); - checkboxHarness = MatCheckboxHarness; - }); - - runTests(); - }); - - describe('MDC-based', () => { - beforeEach(async () => { - await TestBed - .configureTestingModule({ - imports: [MatMdcCheckboxModule, ReactiveFormsModule], - declarations: [CheckboxHarnessTest], - }) - .compileComponents(); - - fixture = TestBed.createComponent(CheckboxHarnessTest); - fixture.detectChanges(); - loader = TestbedHarnessEnvironment.loader(fixture); - // Public APIs are the same as MatCheckboxHarness, but cast is necessary because of different - // private fields. - checkboxHarness = MatMdcCheckboxHarness as any; - }); - - runTests(); +import {MatCheckboxHarness} from '@angular/material/checkbox/testing'; + +describe('Non-MDC-based MatCheckboxHarness', () => { + let fixture: ComponentFixture; + let loader: HarnessLoader; + + beforeEach(async () => { + await TestBed + .configureTestingModule({ + imports: [MatCheckboxModule, ReactiveFormsModule], + declarations: [CheckboxHarnessTest], + }) + .compileComponents(); + + fixture = TestBed.createComponent(CheckboxHarnessTest); + fixture.detectChanges(); + loader = TestbedHarnessEnvironment.loader(fixture); }); -}); -/** Shared tests to run on both the original and MDC-based checkboxes. */ -function runTests() { it('should load all checkbox harnesses', async () => { - const checkboxes = await loader.getAllHarnesses(checkboxHarness); + const checkboxes = await loader.getAllHarnesses(MatCheckboxHarness); expect(checkboxes.length).toBe(2); }); it('should load checkbox with exact label', async () => { - const checkboxes = await loader.getAllHarnesses(checkboxHarness.with({label: 'First'})); + const checkboxes = await loader.getAllHarnesses(MatCheckboxHarness.with({label: 'First'})); expect(checkboxes.length).toBe(1); expect(await checkboxes[0].getLabelText()).toBe('First'); }); it('should load checkbox with name', async () => { - const checkboxes = await loader.getAllHarnesses(checkboxHarness.with({name: 'first-name'})); + const checkboxes = await loader.getAllHarnesses(MatCheckboxHarness.with({name: 'first-name'})); expect(checkboxes.length).toBe(1); expect(await checkboxes[0].getLabelText()).toBe('First'); }); it('should load checkbox with regex label match', async () => { - const checkboxes = await loader.getAllHarnesses(checkboxHarness.with({label: /^s/i})); + const checkboxes = await loader.getAllHarnesses(MatCheckboxHarness.with({label: /^s/i})); expect(checkboxes.length).toBe(1); expect(await checkboxes[0].getLabelText()).toBe('Second'); }); it('should get checked state', async () => { - const [checkedCheckbox, uncheckedCheckbox] = await loader.getAllHarnesses(checkboxHarness); + const [checkedCheckbox, uncheckedCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness); expect(await checkedCheckbox.isChecked()).toBe(true); expect(await uncheckedCheckbox.isChecked()).toBe(false); }); it('should get indeterminate state', async () => { - const [checkedCheckbox, indeterminateCheckbox] = await loader.getAllHarnesses(checkboxHarness); + const [checkedCheckbox, indeterminateCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness); expect(await checkedCheckbox.isIndeterminate()).toBe(false); expect(await indeterminateCheckbox.isIndeterminate()).toBe(true); }); it('should get disabled state', async () => { - const [enabledCheckbox, disabledCheckbox] = await loader.getAllHarnesses(checkboxHarness); + const [enabledCheckbox, disabledCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness); expect(await enabledCheckbox.isDisabled()).toBe(false); expect(await disabledCheckbox.isDisabled()).toBe(true); }); it('should get required state', async () => { - const [requiredCheckbox, optionalCheckbox] = await loader.getAllHarnesses(checkboxHarness); + const [requiredCheckbox, optionalCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness); expect(await requiredCheckbox.isRequired()).toBe(true); expect(await optionalCheckbox.isRequired()).toBe(false); }); it('should get valid state', async () => { - const [requiredCheckbox, optionalCheckbox] = await loader.getAllHarnesses(checkboxHarness); + const [requiredCheckbox, optionalCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness); expect(await optionalCheckbox.isValid()).toBe(true); expect(await requiredCheckbox.isValid()).toBe(true); await requiredCheckbox.uncheck(); @@ -110,40 +79,40 @@ function runTests() { }); it('should get name', async () => { - const checkbox = await loader.getHarness(checkboxHarness.with({label: 'First'})); + const checkbox = await loader.getHarness(MatCheckboxHarness.with({label: 'First'})); expect(await checkbox.getName()).toBe('first-name'); }); it('should get value', async () => { - const checkbox = await loader.getHarness(checkboxHarness.with({label: 'First'})); + const checkbox = await loader.getHarness(MatCheckboxHarness.with({label: 'First'})); expect(await checkbox.getValue()).toBe('first-value'); }); it('should get aria-label', async () => { - const checkbox = await loader.getHarness(checkboxHarness.with({label: 'First'})); + const checkbox = await loader.getHarness(MatCheckboxHarness.with({label: 'First'})); expect(await checkbox.getAriaLabel()).toBe('First checkbox'); }); it('should get aria-labelledby', async () => { - const checkbox = await loader.getHarness(checkboxHarness.with({label: 'Second'})); + const checkbox = await loader.getHarness(MatCheckboxHarness.with({label: 'Second'})); expect(await checkbox.getAriaLabelledby()).toBe('second-label'); }); it('should get label text', async () => { - const [firstCheckbox, secondCheckbox] = await loader.getAllHarnesses(checkboxHarness); + const [firstCheckbox, secondCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness); expect(await firstCheckbox.getLabelText()).toBe('First'); expect(await secondCheckbox.getLabelText()).toBe('Second'); }); it('should focus checkbox', async () => { - const checkbox = await loader.getHarness(checkboxHarness.with({label: 'First'})); + const checkbox = await loader.getHarness(MatCheckboxHarness.with({label: 'First'})); expect(getActiveElementTagName()).not.toBe('input'); await checkbox.focus(); expect(getActiveElementTagName()).toBe('input'); }); it('should blur checkbox', async () => { - const checkbox = await loader.getHarness(checkboxHarness.with({label: 'First'})); + const checkbox = await loader.getHarness(MatCheckboxHarness.with({label: 'First'})); await checkbox.focus(); expect(getActiveElementTagName()).toBe('input'); await checkbox.blur(); @@ -152,7 +121,7 @@ function runTests() { it('should toggle checkbox', async () => { fixture.componentInstance.disabled = false; - const [checkedCheckbox, uncheckedCheckbox] = await loader.getAllHarnesses(checkboxHarness); + const [checkedCheckbox, uncheckedCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness); await checkedCheckbox.toggle(); await uncheckedCheckbox.toggle(); expect(await checkedCheckbox.isChecked()).toBe(false); @@ -161,7 +130,7 @@ function runTests() { it('should check checkbox', async () => { fixture.componentInstance.disabled = false; - const [checkedCheckbox, uncheckedCheckbox] = await loader.getAllHarnesses(checkboxHarness); + const [checkedCheckbox, uncheckedCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness); await checkedCheckbox.check(); await uncheckedCheckbox.check(); expect(await checkedCheckbox.isChecked()).toBe(true); @@ -170,7 +139,7 @@ function runTests() { it('should uncheck checkbox', async () => { fixture.componentInstance.disabled = false; - const [checkedCheckbox, uncheckedCheckbox] = await loader.getAllHarnesses(checkboxHarness); + const [checkedCheckbox, uncheckedCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness); await checkedCheckbox.uncheck(); await uncheckedCheckbox.uncheck(); expect(await checkedCheckbox.isChecked()).toBe(false); @@ -178,12 +147,12 @@ function runTests() { }); it('should not toggle disabled checkbox', async () => { - const disabledCheckbox = await loader.getHarness(checkboxHarness.with({label: 'Second'})); + const disabledCheckbox = await loader.getHarness(MatCheckboxHarness.with({label: 'Second'})); expect(await disabledCheckbox.isChecked()).toBe(false); await disabledCheckbox.toggle(); expect(await disabledCheckbox.isChecked()).toBe(false); }); -} +}); function getActiveElementTagName() { return document.activeElement ? document.activeElement.tagName.toLowerCase() : ''; diff --git a/src/material-experimental/mdc-checkbox/harness/checkbox-harness.ts b/src/material/checkbox/testing/checkbox-harness.ts similarity index 100% rename from src/material-experimental/mdc-checkbox/harness/checkbox-harness.ts rename to src/material/checkbox/testing/checkbox-harness.ts index 5ca7c2577ede..3194941bdd5b 100644 --- a/src/material-experimental/mdc-checkbox/harness/checkbox-harness.ts +++ b/src/material/checkbox/testing/checkbox-harness.ts @@ -6,8 +6,8 @@ * found in the LICENSE file at https://angular.io/license */ -import {ComponentHarness, HarnessPredicate} from '@angular/cdk/testing'; import {coerceBooleanProperty} from '@angular/cdk/coercion'; +import {ComponentHarness, HarnessPredicate} from '@angular/cdk/testing'; import {CheckboxHarnessFilters} from './checkbox-harness-filters'; /** diff --git a/src/material/checkbox/testing/index.ts b/src/material/checkbox/testing/index.ts new file mode 100644 index 000000000000..676ca90f1ffa --- /dev/null +++ b/src/material/checkbox/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/checkbox/testing/public-api.ts b/src/material/checkbox/testing/public-api.ts new file mode 100644 index 000000000000..1ea7015aa5ce --- /dev/null +++ b/src/material/checkbox/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 './checkbox-harness'; +export * from './checkbox-harness-filters'; From bd2f4821245787c8ae6576a1333594a5af8e3e45 Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Thu, 12 Sep 2019 12:01:23 -0700 Subject: [PATCH 2/4] move tests into separate file --- .../mdc-checkbox/testing/BUILD.bazel | 5 +- .../testing/checkbox-harness.spec.ts | 178 +---------------- src/material/checkbox/testing/BUILD.bazel | 14 +- .../checkbox/testing/checkbox-harness.spec.ts | 179 +---------------- src/material/checkbox/testing/shared.spec.ts | 185 ++++++++++++++++++ 5 files changed, 203 insertions(+), 358 deletions(-) create mode 100644 src/material/checkbox/testing/shared.spec.ts diff --git a/src/material-experimental/mdc-checkbox/testing/BUILD.bazel b/src/material-experimental/mdc-checkbox/testing/BUILD.bazel index 4fa21e77a0a7..8971ad8c2165 100644 --- a/src/material-experimental/mdc-checkbox/testing/BUILD.bazel +++ b/src/material-experimental/mdc-checkbox/testing/BUILD.bazel @@ -21,11 +21,8 @@ ng_test_library( srcs = glob(["**/*.spec.ts"]), deps = [ ":testing", - "//src/cdk/testing", - "//src/cdk/testing/testbed", "//src/material-experimental/mdc-checkbox", - "@npm//@angular/forms", - "@npm//@angular/platform-browser", + "//src/material/checkbox/testing:shared_unit_tests", ], ) diff --git a/src/material-experimental/mdc-checkbox/testing/checkbox-harness.spec.ts b/src/material-experimental/mdc-checkbox/testing/checkbox-harness.spec.ts index f292e96521ee..a26bf1300aef 100644 --- a/src/material-experimental/mdc-checkbox/testing/checkbox-harness.spec.ts +++ b/src/material-experimental/mdc-checkbox/testing/checkbox-harness.spec.ts @@ -1,181 +1,7 @@ -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 {FormControl, ReactiveFormsModule} from '@angular/forms'; import {MatCheckboxModule} from '@angular/material-experimental/mdc-checkbox'; import {MatCheckboxHarness} from '@angular/material-experimental/mdc-checkbox/testing'; +import {runTests} from '@angular/material/checkbox/testing/shared.spec'; describe('MDC-based MatCheckboxHarness', () => { - let fixture: ComponentFixture; - let loader: HarnessLoader; - - beforeEach(async () => { - await TestBed - .configureTestingModule({ - imports: [MatCheckboxModule, ReactiveFormsModule], - declarations: [CheckboxHarnessTest], - }) - .compileComponents(); - - fixture = TestBed.createComponent(CheckboxHarnessTest); - fixture.detectChanges(); - loader = TestbedHarnessEnvironment.loader(fixture); - }); - - it('should load all checkbox harnesses', async () => { - const checkboxes = await loader.getAllHarnesses(MatCheckboxHarness); - expect(checkboxes.length).toBe(2); - }); - - it('should load checkbox with exact label', async () => { - const checkboxes = await loader.getAllHarnesses(MatCheckboxHarness.with({label: 'First'})); - expect(checkboxes.length).toBe(1); - expect(await checkboxes[0].getLabelText()).toBe('First'); - }); - - it('should load checkbox with name', async () => { - const checkboxes = await loader.getAllHarnesses(MatCheckboxHarness.with({name: 'first-name'})); - expect(checkboxes.length).toBe(1); - expect(await checkboxes[0].getLabelText()).toBe('First'); - }); - - it('should load checkbox with regex label match', async () => { - const checkboxes = await loader.getAllHarnesses(MatCheckboxHarness.with({label: /^s/i})); - expect(checkboxes.length).toBe(1); - expect(await checkboxes[0].getLabelText()).toBe('Second'); - }); - - it('should get checked state', async () => { - const [checkedCheckbox, uncheckedCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness); - expect(await checkedCheckbox.isChecked()).toBe(true); - expect(await uncheckedCheckbox.isChecked()).toBe(false); - }); - - it('should get indeterminate state', async () => { - const [checkedCheckbox, indeterminateCheckbox] = - await loader.getAllHarnesses(MatCheckboxHarness); - expect(await checkedCheckbox.isIndeterminate()).toBe(false); - expect(await indeterminateCheckbox.isIndeterminate()).toBe(true); - }); - - it('should get disabled state', async () => { - const [enabledCheckbox, disabledCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness); - expect(await enabledCheckbox.isDisabled()).toBe(false); - expect(await disabledCheckbox.isDisabled()).toBe(true); - }); - - it('should get required state', async () => { - const [requiredCheckbox, optionalCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness); - expect(await requiredCheckbox.isRequired()).toBe(true); - expect(await optionalCheckbox.isRequired()).toBe(false); - }); - - it('should get valid state', async () => { - const [requiredCheckbox, optionalCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness); - expect(await optionalCheckbox.isValid()).toBe(true); - expect(await requiredCheckbox.isValid()).toBe(true); - await requiredCheckbox.uncheck(); - expect(await requiredCheckbox.isValid()).toBe(false); - }); - - it('should get name', async () => { - const checkbox = await loader.getHarness(MatCheckboxHarness.with({label: 'First'})); - expect(await checkbox.getName()).toBe('first-name'); - }); - - it('should get value', async () => { - const checkbox = await loader.getHarness(MatCheckboxHarness.with({label: 'First'})); - expect(await checkbox.getValue()).toBe('first-value'); - }); - - it('should get aria-label', async () => { - const checkbox = await loader.getHarness(MatCheckboxHarness.with({label: 'First'})); - expect(await checkbox.getAriaLabel()).toBe('First checkbox'); - }); - - it('should get aria-labelledby', async () => { - const checkbox = await loader.getHarness(MatCheckboxHarness.with({label: 'Second'})); - expect(await checkbox.getAriaLabelledby()).toBe('second-label'); - }); - - it('should get label text', async () => { - const [firstCheckbox, secondCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness); - expect(await firstCheckbox.getLabelText()).toBe('First'); - expect(await secondCheckbox.getLabelText()).toBe('Second'); - }); - - it('should focus checkbox', async () => { - const checkbox = await loader.getHarness(MatCheckboxHarness.with({label: 'First'})); - expect(getActiveElementTagName()).not.toBe('input'); - await checkbox.focus(); - expect(getActiveElementTagName()).toBe('input'); - }); - - it('should blur checkbox', async () => { - const checkbox = await loader.getHarness(MatCheckboxHarness.with({label: 'First'})); - await checkbox.focus(); - expect(getActiveElementTagName()).toBe('input'); - await checkbox.blur(); - expect(getActiveElementTagName()).not.toBe('input'); - }); - - it('should toggle checkbox', async () => { - fixture.componentInstance.disabled = false; - const [checkedCheckbox, uncheckedCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness); - await checkedCheckbox.toggle(); - await uncheckedCheckbox.toggle(); - expect(await checkedCheckbox.isChecked()).toBe(false); - expect(await uncheckedCheckbox.isChecked()).toBe(true); - }); - - it('should check checkbox', async () => { - fixture.componentInstance.disabled = false; - const [checkedCheckbox, uncheckedCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness); - await checkedCheckbox.check(); - await uncheckedCheckbox.check(); - expect(await checkedCheckbox.isChecked()).toBe(true); - expect(await uncheckedCheckbox.isChecked()).toBe(true); - }); - - it('should uncheck checkbox', async () => { - fixture.componentInstance.disabled = false; - const [checkedCheckbox, uncheckedCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness); - await checkedCheckbox.uncheck(); - await uncheckedCheckbox.uncheck(); - expect(await checkedCheckbox.isChecked()).toBe(false); - expect(await uncheckedCheckbox.isChecked()).toBe(false); - }); - - it('should not toggle disabled checkbox', async () => { - const disabledCheckbox = await loader.getHarness(MatCheckboxHarness.with({label: 'Second'})); - expect(await disabledCheckbox.isChecked()).toBe(false); - await disabledCheckbox.toggle(); - expect(await disabledCheckbox.isChecked()).toBe(false); - }); + runTests(MatCheckboxModule, MatCheckboxHarness as any); }); - -function getActiveElementTagName() { - return document.activeElement ? document.activeElement.tagName.toLowerCase() : ''; -} - -@Component({ - template: ` - - First - - - Second - - Second checkbox - ` -}) -class CheckboxHarnessTest { - ctrl = new FormControl(true); - disabled = true; -} diff --git a/src/material/checkbox/testing/BUILD.bazel b/src/material/checkbox/testing/BUILD.bazel index ce36788047dd..bb25351234f1 100644 --- a/src/material/checkbox/testing/BUILD.bazel +++ b/src/material/checkbox/testing/BUILD.bazel @@ -16,8 +16,8 @@ ng_module( ) ng_test_library( - name = "unit_tests_lib", - srcs = glob(["**/*.spec.ts"]), + name = "shared_unit_tests", + srcs = ["shared.spec.ts"], deps = [ ":testing", "//src/cdk/testing", @@ -25,6 +25,16 @@ ng_test_library( "//src/material/checkbox", "@npm//@angular/forms", "@npm//@angular/platform-browser", + ] +) + +ng_test_library( + name = "unit_tests_lib", + srcs = glob(["**/*.spec.ts"], exclude = ["shared.spec.ts"]), + deps = [ + ":testing", + ":shared_unit_tests", + "//src/material/checkbox", ], ) diff --git a/src/material/checkbox/testing/checkbox-harness.spec.ts b/src/material/checkbox/testing/checkbox-harness.spec.ts index f9c855d561d8..51157562e33e 100644 --- a/src/material/checkbox/testing/checkbox-harness.spec.ts +++ b/src/material/checkbox/testing/checkbox-harness.spec.ts @@ -1,180 +1,7 @@ -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 {FormControl, ReactiveFormsModule} from '@angular/forms'; import {MatCheckboxModule} from '@angular/material/checkbox'; -import {MatCheckboxHarness} from '@angular/material/checkbox/testing'; +import {MatCheckboxHarness} from '@angular/material/checkbox/testing/checkbox-harness'; +import {runTests} from '@angular/material/checkbox/testing/shared.spec'; describe('Non-MDC-based MatCheckboxHarness', () => { - let fixture: ComponentFixture; - let loader: HarnessLoader; - - beforeEach(async () => { - await TestBed - .configureTestingModule({ - imports: [MatCheckboxModule, ReactiveFormsModule], - declarations: [CheckboxHarnessTest], - }) - .compileComponents(); - - fixture = TestBed.createComponent(CheckboxHarnessTest); - fixture.detectChanges(); - loader = TestbedHarnessEnvironment.loader(fixture); - }); - - it('should load all checkbox harnesses', async () => { - const checkboxes = await loader.getAllHarnesses(MatCheckboxHarness); - expect(checkboxes.length).toBe(2); - }); - - it('should load checkbox with exact label', async () => { - const checkboxes = await loader.getAllHarnesses(MatCheckboxHarness.with({label: 'First'})); - expect(checkboxes.length).toBe(1); - expect(await checkboxes[0].getLabelText()).toBe('First'); - }); - - it('should load checkbox with name', async () => { - const checkboxes = await loader.getAllHarnesses(MatCheckboxHarness.with({name: 'first-name'})); - expect(checkboxes.length).toBe(1); - expect(await checkboxes[0].getLabelText()).toBe('First'); - }); - - it('should load checkbox with regex label match', async () => { - const checkboxes = await loader.getAllHarnesses(MatCheckboxHarness.with({label: /^s/i})); - expect(checkboxes.length).toBe(1); - expect(await checkboxes[0].getLabelText()).toBe('Second'); - }); - - it('should get checked state', async () => { - const [checkedCheckbox, uncheckedCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness); - expect(await checkedCheckbox.isChecked()).toBe(true); - expect(await uncheckedCheckbox.isChecked()).toBe(false); - }); - - it('should get indeterminate state', async () => { - const [checkedCheckbox, indeterminateCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness); - expect(await checkedCheckbox.isIndeterminate()).toBe(false); - expect(await indeterminateCheckbox.isIndeterminate()).toBe(true); - }); - - it('should get disabled state', async () => { - const [enabledCheckbox, disabledCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness); - expect(await enabledCheckbox.isDisabled()).toBe(false); - expect(await disabledCheckbox.isDisabled()).toBe(true); - }); - - it('should get required state', async () => { - const [requiredCheckbox, optionalCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness); - expect(await requiredCheckbox.isRequired()).toBe(true); - expect(await optionalCheckbox.isRequired()).toBe(false); - }); - - it('should get valid state', async () => { - const [requiredCheckbox, optionalCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness); - expect(await optionalCheckbox.isValid()).toBe(true); - expect(await requiredCheckbox.isValid()).toBe(true); - await requiredCheckbox.uncheck(); - expect(await requiredCheckbox.isValid()).toBe(false); - }); - - it('should get name', async () => { - const checkbox = await loader.getHarness(MatCheckboxHarness.with({label: 'First'})); - expect(await checkbox.getName()).toBe('first-name'); - }); - - it('should get value', async () => { - const checkbox = await loader.getHarness(MatCheckboxHarness.with({label: 'First'})); - expect(await checkbox.getValue()).toBe('first-value'); - }); - - it('should get aria-label', async () => { - const checkbox = await loader.getHarness(MatCheckboxHarness.with({label: 'First'})); - expect(await checkbox.getAriaLabel()).toBe('First checkbox'); - }); - - it('should get aria-labelledby', async () => { - const checkbox = await loader.getHarness(MatCheckboxHarness.with({label: 'Second'})); - expect(await checkbox.getAriaLabelledby()).toBe('second-label'); - }); - - it('should get label text', async () => { - const [firstCheckbox, secondCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness); - expect(await firstCheckbox.getLabelText()).toBe('First'); - expect(await secondCheckbox.getLabelText()).toBe('Second'); - }); - - it('should focus checkbox', async () => { - const checkbox = await loader.getHarness(MatCheckboxHarness.with({label: 'First'})); - expect(getActiveElementTagName()).not.toBe('input'); - await checkbox.focus(); - expect(getActiveElementTagName()).toBe('input'); - }); - - it('should blur checkbox', async () => { - const checkbox = await loader.getHarness(MatCheckboxHarness.with({label: 'First'})); - await checkbox.focus(); - expect(getActiveElementTagName()).toBe('input'); - await checkbox.blur(); - expect(getActiveElementTagName()).not.toBe('input'); - }); - - it('should toggle checkbox', async () => { - fixture.componentInstance.disabled = false; - const [checkedCheckbox, uncheckedCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness); - await checkedCheckbox.toggle(); - await uncheckedCheckbox.toggle(); - expect(await checkedCheckbox.isChecked()).toBe(false); - expect(await uncheckedCheckbox.isChecked()).toBe(true); - }); - - it('should check checkbox', async () => { - fixture.componentInstance.disabled = false; - const [checkedCheckbox, uncheckedCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness); - await checkedCheckbox.check(); - await uncheckedCheckbox.check(); - expect(await checkedCheckbox.isChecked()).toBe(true); - expect(await uncheckedCheckbox.isChecked()).toBe(true); - }); - - it('should uncheck checkbox', async () => { - fixture.componentInstance.disabled = false; - const [checkedCheckbox, uncheckedCheckbox] = await loader.getAllHarnesses(MatCheckboxHarness); - await checkedCheckbox.uncheck(); - await uncheckedCheckbox.uncheck(); - expect(await checkedCheckbox.isChecked()).toBe(false); - expect(await uncheckedCheckbox.isChecked()).toBe(false); - }); - - it('should not toggle disabled checkbox', async () => { - const disabledCheckbox = await loader.getHarness(MatCheckboxHarness.with({label: 'Second'})); - expect(await disabledCheckbox.isChecked()).toBe(false); - await disabledCheckbox.toggle(); - expect(await disabledCheckbox.isChecked()).toBe(false); - }); + runTests(MatCheckboxModule, MatCheckboxHarness); }); - -function getActiveElementTagName() { - return document.activeElement ? document.activeElement.tagName.toLowerCase() : ''; -} - -@Component({ - template: ` - - First - - - Second - - Second checkbox - ` -}) -class CheckboxHarnessTest { - ctrl = new FormControl(true); - disabled = true; -} diff --git a/src/material/checkbox/testing/shared.spec.ts b/src/material/checkbox/testing/shared.spec.ts new file mode 100644 index 000000000000..6c9418b7c76f --- /dev/null +++ b/src/material/checkbox/testing/shared.spec.ts @@ -0,0 +1,185 @@ +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 {FormControl, ReactiveFormsModule} from '@angular/forms'; +import {MatCheckboxModule} from '@angular/material/checkbox'; +import {MatCheckboxHarness} from '@angular/material/checkbox/testing/checkbox-harness'; + +/** + * Function that can be used to run the shared checkbox harness tests for either the non-MDC or + * MDC based checkbox harness. + */ +export function runTests( + checkboxModule: typeof MatCheckboxModule, checkboxHarness: typeof MatCheckboxHarness) { + let fixture: ComponentFixture; + let loader: HarnessLoader; + + beforeEach(async () => { + await TestBed + .configureTestingModule({ + imports: [checkboxModule, ReactiveFormsModule], + declarations: [CheckboxHarnessTest], + }) + .compileComponents(); + + fixture = TestBed.createComponent(CheckboxHarnessTest); + fixture.detectChanges(); + loader = TestbedHarnessEnvironment.loader(fixture); + }); + + it('should load all checkbox harnesses', async () => { + const checkboxes = await loader.getAllHarnesses(checkboxHarness); + expect(checkboxes.length).toBe(2); + }); + + it('should load checkbox with exact label', async () => { + const checkboxes = await loader.getAllHarnesses(checkboxHarness.with({label: 'First'})); + expect(checkboxes.length).toBe(1); + expect(await checkboxes[0].getLabelText()).toBe('First'); + }); + + it('should load checkbox with name', async () => { + const checkboxes = await loader.getAllHarnesses(checkboxHarness.with({name: 'first-name'})); + expect(checkboxes.length).toBe(1); + expect(await checkboxes[0].getLabelText()).toBe('First'); + }); + + it('should load checkbox with regex label match', async () => { + const checkboxes = await loader.getAllHarnesses(checkboxHarness.with({label: /^s/i})); + expect(checkboxes.length).toBe(1); + expect(await checkboxes[0].getLabelText()).toBe('Second'); + }); + + it('should get checked state', async () => { + const [checkedCheckbox, uncheckedCheckbox] = await loader.getAllHarnesses(checkboxHarness); + expect(await checkedCheckbox.isChecked()).toBe(true); + expect(await uncheckedCheckbox.isChecked()).toBe(false); + }); + + it('should get indeterminate state', async () => { + const [checkedCheckbox, indeterminateCheckbox] = await loader.getAllHarnesses(checkboxHarness); + expect(await checkedCheckbox.isIndeterminate()).toBe(false); + expect(await indeterminateCheckbox.isIndeterminate()).toBe(true); + }); + + it('should get disabled state', async () => { + const [enabledCheckbox, disabledCheckbox] = await loader.getAllHarnesses(checkboxHarness); + expect(await enabledCheckbox.isDisabled()).toBe(false); + expect(await disabledCheckbox.isDisabled()).toBe(true); + }); + + it('should get required state', async () => { + const [requiredCheckbox, optionalCheckbox] = await loader.getAllHarnesses(checkboxHarness); + expect(await requiredCheckbox.isRequired()).toBe(true); + expect(await optionalCheckbox.isRequired()).toBe(false); + }); + + it('should get valid state', async () => { + const [requiredCheckbox, optionalCheckbox] = await loader.getAllHarnesses(checkboxHarness); + expect(await optionalCheckbox.isValid()).toBe(true); + expect(await requiredCheckbox.isValid()).toBe(true); + await requiredCheckbox.uncheck(); + expect(await requiredCheckbox.isValid()).toBe(false); + }); + + it('should get name', async () => { + const checkbox = await loader.getHarness(checkboxHarness.with({label: 'First'})); + expect(await checkbox.getName()).toBe('first-name'); + }); + + it('should get value', async () => { + const checkbox = await loader.getHarness(checkboxHarness.with({label: 'First'})); + expect(await checkbox.getValue()).toBe('first-value'); + }); + + it('should get aria-label', async () => { + const checkbox = await loader.getHarness(checkboxHarness.with({label: 'First'})); + expect(await checkbox.getAriaLabel()).toBe('First checkbox'); + }); + + it('should get aria-labelledby', async () => { + const checkbox = await loader.getHarness(checkboxHarness.with({label: 'Second'})); + expect(await checkbox.getAriaLabelledby()).toBe('second-label'); + }); + + it('should get label text', async () => { + const [firstCheckbox, secondCheckbox] = await loader.getAllHarnesses(checkboxHarness); + expect(await firstCheckbox.getLabelText()).toBe('First'); + expect(await secondCheckbox.getLabelText()).toBe('Second'); + }); + + it('should focus checkbox', async () => { + const checkbox = await loader.getHarness(checkboxHarness.with({label: 'First'})); + expect(getActiveElementTagName()).not.toBe('input'); + await checkbox.focus(); + expect(getActiveElementTagName()).toBe('input'); + }); + + it('should blur checkbox', async () => { + const checkbox = await loader.getHarness(checkboxHarness.with({label: 'First'})); + await checkbox.focus(); + expect(getActiveElementTagName()).toBe('input'); + await checkbox.blur(); + expect(getActiveElementTagName()).not.toBe('input'); + }); + + it('should toggle checkbox', async () => { + fixture.componentInstance.disabled = false; + const [checkedCheckbox, uncheckedCheckbox] = await loader.getAllHarnesses(checkboxHarness); + await checkedCheckbox.toggle(); + await uncheckedCheckbox.toggle(); + expect(await checkedCheckbox.isChecked()).toBe(false); + expect(await uncheckedCheckbox.isChecked()).toBe(true); + }); + + it('should check checkbox', async () => { + fixture.componentInstance.disabled = false; + const [checkedCheckbox, uncheckedCheckbox] = await loader.getAllHarnesses(checkboxHarness); + await checkedCheckbox.check(); + await uncheckedCheckbox.check(); + expect(await checkedCheckbox.isChecked()).toBe(true); + expect(await uncheckedCheckbox.isChecked()).toBe(true); + }); + + it('should uncheck checkbox', async () => { + fixture.componentInstance.disabled = false; + const [checkedCheckbox, uncheckedCheckbox] = await loader.getAllHarnesses(checkboxHarness); + await checkedCheckbox.uncheck(); + await uncheckedCheckbox.uncheck(); + expect(await checkedCheckbox.isChecked()).toBe(false); + expect(await uncheckedCheckbox.isChecked()).toBe(false); + }); + + it('should not toggle disabled checkbox', async () => { + const disabledCheckbox = await loader.getHarness(checkboxHarness.with({label: 'Second'})); + expect(await disabledCheckbox.isChecked()).toBe(false); + await disabledCheckbox.toggle(); + expect(await disabledCheckbox.isChecked()).toBe(false); + }); +} + +function getActiveElementTagName() { + return document.activeElement ? document.activeElement.tagName.toLowerCase() : ''; +} + +@Component({ + template: ` + + First + + + Second + + Second checkbox + ` +}) +class CheckboxHarnessTest { + ctrl = new FormControl(true); + disabled = true; +} From ac4075baf973955247cc5f0013cfe2a2d154a7ce Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Thu, 12 Sep 2019 12:02:10 -0700 Subject: [PATCH 3/4] fix bazel files --- .../mdc-checkbox/testing/BUILD.bazel | 6 +++--- src/material/checkbox/testing/BUILD.bazel | 13 ++++++++----- 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/src/material-experimental/mdc-checkbox/testing/BUILD.bazel b/src/material-experimental/mdc-checkbox/testing/BUILD.bazel index 8971ad8c2165..2f29d10d8862 100644 --- a/src/material-experimental/mdc-checkbox/testing/BUILD.bazel +++ b/src/material-experimental/mdc-checkbox/testing/BUILD.bazel @@ -1,18 +1,18 @@ package(default_visibility = ["//visibility:public"]) -load("//tools:defaults.bzl", "ng_test_library", "ng_web_test_suite", "ng_module") +load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite") ng_module( name = "testing", - module_name = "@angular/material-experimental/mdc-checkbox/testing", srcs = glob( ["**/*.ts"], exclude = ["**/*.spec.ts"], ), + module_name = "@angular/material-experimental/mdc-checkbox/testing", deps = [ - "//src/material/checkbox/testing", "//src/cdk/coercion", "//src/cdk/testing", + "//src/material/checkbox/testing", ], ) diff --git a/src/material/checkbox/testing/BUILD.bazel b/src/material/checkbox/testing/BUILD.bazel index bb25351234f1..ce939855ab44 100644 --- a/src/material/checkbox/testing/BUILD.bazel +++ b/src/material/checkbox/testing/BUILD.bazel @@ -1,14 +1,14 @@ package(default_visibility = ["//visibility:public"]) -load("//tools:defaults.bzl", "ng_test_library", "ng_web_test_suite", "ng_module") +load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite") ng_module( name = "testing", - module_name = "@angular/material/checkbox/testing", srcs = glob( ["**/*.ts"], exclude = ["**/*.spec.ts"], ), + module_name = "@angular/material/checkbox/testing", deps = [ "//src/cdk/coercion", "//src/cdk/testing", @@ -25,15 +25,18 @@ ng_test_library( "//src/material/checkbox", "@npm//@angular/forms", "@npm//@angular/platform-browser", - ] + ], ) ng_test_library( name = "unit_tests_lib", - srcs = glob(["**/*.spec.ts"], exclude = ["shared.spec.ts"]), + srcs = glob( + ["**/*.spec.ts"], + exclude = ["shared.spec.ts"], + ), deps = [ - ":testing", ":shared_unit_tests", + ":testing", "//src/material/checkbox", ], ) From 8ad3e079a8285eb7b515e6f3d3bd5343d943b51f Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Fri, 13 Sep 2019 10:30:24 -0700 Subject: [PATCH 4/4] fix gulp tests --- .../mdc-checkbox/testing/checkbox-harness.spec.ts | 4 ++-- src/material/checkbox/testing/checkbox-harness.spec.ts | 2 +- src/material/tsconfig-tests.json | 2 +- test/karma-system-config.js | 4 ++++ 4 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/material-experimental/mdc-checkbox/testing/checkbox-harness.spec.ts b/src/material-experimental/mdc-checkbox/testing/checkbox-harness.spec.ts index a26bf1300aef..5810986efca2 100644 --- a/src/material-experimental/mdc-checkbox/testing/checkbox-harness.spec.ts +++ b/src/material-experimental/mdc-checkbox/testing/checkbox-harness.spec.ts @@ -1,5 +1,5 @@ -import {MatCheckboxModule} from '@angular/material-experimental/mdc-checkbox'; -import {MatCheckboxHarness} from '@angular/material-experimental/mdc-checkbox/testing'; +import {MatCheckboxModule} from '../index'; +import {MatCheckboxHarness} from './checkbox-harness'; import {runTests} from '@angular/material/checkbox/testing/shared.spec'; describe('MDC-based MatCheckboxHarness', () => { diff --git a/src/material/checkbox/testing/checkbox-harness.spec.ts b/src/material/checkbox/testing/checkbox-harness.spec.ts index 51157562e33e..93d0348b409c 100644 --- a/src/material/checkbox/testing/checkbox-harness.spec.ts +++ b/src/material/checkbox/testing/checkbox-harness.spec.ts @@ -1,5 +1,5 @@ import {MatCheckboxModule} from '@angular/material/checkbox'; -import {MatCheckboxHarness} from '@angular/material/checkbox/testing/checkbox-harness'; +import {MatCheckboxHarness} from './checkbox-harness'; import {runTests} from '@angular/material/checkbox/testing/shared.spec'; describe('Non-MDC-based MatCheckboxHarness', () => { diff --git a/src/material/tsconfig-tests.json b/src/material/tsconfig-tests.json index 5f9a37a56dec..e38ccb187d72 100644 --- a/src/material/tsconfig-tests.json +++ b/src/material/tsconfig-tests.json @@ -27,7 +27,7 @@ }, "include": [ "**/*.spec.ts", - "index.ts" + "./**/index.ts" ], "exclude": [ "**/schematics/**/*.ts", diff --git a/test/karma-system-config.js b/test/karma-system-config.js index 4dd9fea1dd6b..7bc238de9084 100644 --- a/test/karma-system-config.js +++ b/test/karma-system-config.js @@ -102,6 +102,8 @@ System.config({ '@angular/material/button-toggle': 'dist/packages/material/button-toggle/index.js', '@angular/material/card': 'dist/packages/material/card/index.js', '@angular/material/checkbox': 'dist/packages/material/checkbox/index.js', + '@angular/material/checkbox/testing': 'dist/packages/material/checkbox/testing/index.js', + '@angular/material/checkbox/testing/shared.spec': 'dist/packages/material/checkbox/testing/shared.spec.js', '@angular/material/chips': 'dist/packages/material/chips/index.js', '@angular/material/core': 'dist/packages/material/core/index.js', '@angular/material/datepicker': 'dist/packages/material/datepicker/index.js', @@ -138,6 +140,8 @@ System.config({ 'dist/packages/material-experimental/mdc-card/index.js', '@angular/material-experimental/mdc-checkbox': 'dist/packages/material-experimental/mdc-checkbox/index.js', + '@angular/material-experimental/mdc-checkbox/testing': + 'dist/packages/material-experimental/mdc-checkbox/testing/index.js', '@angular/material-experimental/mdc-chips': 'dist/packages/material-experimental/mdc-chips/index.js', '@angular/material-experimental/mdc-helpers':