test(material/core): combine shared tests

Since we only have one module, we don't need separate shared tests anymore.

Author: crisbeto

src/material/core/testing/BUILD.bazel

@@ -19,11 +19,8 @@ filegroup(
 )
 
 ng_test_library(
-    name = "harness_tests_lib",
-    srcs = [
-        "optgroup-shared.spec.ts",
-        "option-shared.spec.ts",
-    ],
+    name = "unit_tests_lib",
+    srcs = glob(["**/*.spec.ts"]),
     deps = [
         ":testing",
         "//src/cdk/testing",
@@ -32,22 +29,6 @@ ng_test_library(
     ],
 )
 
-ng_test_library(
-    name = "unit_tests_lib",
-    srcs = glob(
-        ["**/*.spec.ts"],
-        exclude = [
-            "option-shared.spec.ts",
-            "optgroup-shared.spec.ts",
-        ],
-    ),
-    deps = [
-        ":harness_tests_lib",
-        ":testing",
-        "//src/material/core",
-    ],
-)
-
 ng_web_test_suite(
     name = "unit_tests",
     deps = [":unit_tests_lib"],

src/material/core/testing/optgroup-harness.spec.ts

@@ -1,7 +1,77 @@
+import {Component} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {HarnessLoader, parallel} from '@angular/cdk/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
 import {MatOptionModule} from '@angular/material/core';
-import {runHarnessTests} from './optgroup-shared.spec';
 import {MatOptgroupHarness} from './optgroup-harness';
 
-describe('MDC-based MatOptgroupHarness', () => {
-  runHarnessTests(MatOptionModule, MatOptgroupHarness);
+describe('MatOptgroupHarness', () => {
+  let fixture: ComponentFixture<OptgroupHarnessTest>;
+  let loader: HarnessLoader;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MatOptionModule],
+      declarations: [OptgroupHarnessTest],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(OptgroupHarnessTest);
+    fixture.detectChanges();
+    loader = TestbedHarnessEnvironment.loader(fixture);
+  });
+
+  it('should load all option group harnesses', async () => {
+    const groups = await loader.getAllHarnesses(MatOptgroupHarness);
+    expect(groups.length).toBe(2);
+  });
+
+  it('should filter groups based on their text', async () => {
+    const groups = await loader.getAllHarnesses(
+      MatOptgroupHarness.with({
+        labelText: 'Disabled group',
+      }),
+    );
+
+    expect(groups.length).toBe(1);
+  });
+
+  it('should filter group label text by a pattern', async () => {
+    const groups = await loader.getAllHarnesses(MatOptgroupHarness.with({labelText: /group/}));
+    expect(groups.length).toBe(2);
+  });
+
+  it('should get the group label text', async () => {
+    const groups = await loader.getAllHarnesses(MatOptgroupHarness);
+    const texts = await parallel(() => groups.map(group => group.getLabelText()));
+    expect(texts).toEqual(['Plain group', 'Disabled group']);
+  });
+
+  it('should get the group disabled state', async () => {
+    const groups = await loader.getAllHarnesses(MatOptgroupHarness);
+    const disabledStates = await parallel(() => groups.map(group => group.isDisabled()));
+    expect(disabledStates).toEqual([false, true]);
+  });
+
+  it('should get the options inside the groups', async () => {
+    const group = await loader.getHarness(MatOptgroupHarness);
+    const optionTexts = await group.getOptions().then(async options => {
+      return await parallel(() => options.map(option => option.getText()));
+    });
+
+    expect(optionTexts).toEqual(['Option 1', 'Option 2']);
+  });
 });
+
+@Component({
+  template: `
+    <mat-optgroup label="Plain group">
+      <mat-option>Option 1</mat-option>
+      <mat-option>Option 2</mat-option>
+    </mat-optgroup>
+
+    <mat-optgroup label="Disabled group" disabled>
+      <mat-option>Disabled option 1</mat-option>
+    </mat-optgroup>
+  `,
+})
+class OptgroupHarnessTest {}

src/material/core/testing/optgroup-shared.spec.ts

@@ -1,7 +1,120 @@
-import {MatOptionModule, MatOption} from '@angular/material/core';
-import {runHarnessTests} from './option-shared.spec';
+import {Component, ViewChildren, QueryList} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {HarnessLoader, parallel} from '@angular/cdk/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {
+  MatOption,
+  MatOptionModule,
+  MAT_OPTION_PARENT_COMPONENT,
+  MatOptionParentComponent,
+} from '@angular/material/core';
 import {MatOptionHarness} from './option-harness';
 
-describe('MDC-based MatOptionHarness', () => {
-  runHarnessTests(MatOptionModule, MatOptionHarness, MatOption);
+describe('MatOptionHarness', () => {
+  let fixture: ComponentFixture<OptionHarnessTest>;
+  let loader: HarnessLoader;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MatOptionModule],
+      declarations: [OptionHarnessTest],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(OptionHarnessTest);
+    fixture.detectChanges();
+    loader = TestbedHarnessEnvironment.loader(fixture);
+  });
+
+  it('should load all option harnesses', async () => {
+    const options = await loader.getAllHarnesses(MatOptionHarness);
+    expect(options.length).toBe(2);
+  });
+
+  it('should filter options by text', async () => {
+    const options = await loader.getAllHarnesses(MatOptionHarness.with({text: 'Disabled option'}));
+    expect(options.length).toBe(1);
+  });
+
+  it('should filter options text by a pattern', async () => {
+    const options = await loader.getAllHarnesses(MatOptionHarness.with({text: /option/}));
+    expect(options.length).toBe(2);
+  });
+
+  it('should filter options text by its selected state', async () => {
+    const options = await loader.getAllHarnesses(MatOptionHarness);
+    let selectedOptions = await loader.getAllHarnesses(MatOptionHarness.with({isSelected: true}));
+
+    expect(options.length).toBe(2);
+    expect(selectedOptions.length).toBe(0);
+
+    await options[0].click();
+
+    selectedOptions = await loader.getAllHarnesses(MatOptionHarness.with({isSelected: true}));
+
+    expect(selectedOptions.length).toBe(1);
+  });
+
+  it('should get the text of options', async () => {
+    const options = await loader.getAllHarnesses(MatOptionHarness);
+    const texts = await parallel(() => options.map(option => option.getText()));
+    expect(texts).toEqual(['Plain option', 'Disabled option']);
+  });
+
+  it('should get whether an option is disabled', async () => {
+    const options = await loader.getAllHarnesses(MatOptionHarness);
+    const disabledStates = await parallel(() => options.map(option => option.isDisabled()));
+    expect(disabledStates).toEqual([false, true]);
+  });
+
+  it('should get whether an option is selected', async () => {
+    const option = await loader.getHarness(MatOptionHarness);
+
+    expect(await option.isSelected()).toBe(false);
+
+    await option.click();
+
+    expect(await option.isSelected()).toBe(true);
+  });
+
+  it('should get whether an option is active', async () => {
+    const option = await loader.getHarness(MatOptionHarness);
+
+    expect(await option.isActive()).toBe(false);
+
+    // Set the option as active programmatically since
+    // it's usually the parent component that does it.
+    fixture.componentInstance.options.first.setActiveStyles();
+    fixture.detectChanges();
+
+    expect(await option.isActive()).toBe(true);
+  });
+
+  it('should get whether an option is in multi-selection mode', async () => {
+    const option = await loader.getHarness(MatOptionHarness);
+
+    expect(await option.isMultiple()).toBe(false);
+
+    // Options take their `multiple` state from the parent component.
+    fixture.componentInstance.multiple = true;
+    fixture.detectChanges();
+
+    expect(await option.isMultiple()).toBe(true);
+  });
 });
+
+@Component({
+  providers: [
+    {
+      provide: MAT_OPTION_PARENT_COMPONENT,
+      useExisting: OptionHarnessTest,
+    },
+  ],
+  template: `
+    <mat-option>Plain option</mat-option>
+    <mat-option disabled>Disabled option</mat-option>
+  `,
+})
+class OptionHarnessTest implements MatOptionParentComponent {
+  @ViewChildren(MatOption) options: QueryList<{setActiveStyles(): void}>;
+  multiple = false;
+}