From 5728fb4ac1c461230d94be258c3335e93733f9be Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Wed, 12 May 2021 18:12:33 +0200 Subject: [PATCH] test(material/slider): clean up harness testing setup Now that we know that the MDC-based slider won't have the same API as the non-MDC version, we can avoid sharing the test harness tests and clean up some of the logic. --- .../mdc-slider/testing/BUILD.bazel | 1 - src/material/slider/testing/BUILD.bazel | 19 +- src/material/slider/testing/shared.spec.ts | 202 ------------------ .../slider/testing/slider-harness.spec.ts | 189 +++++++++++++++- 4 files changed, 188 insertions(+), 223 deletions(-) delete mode 100644 src/material/slider/testing/shared.spec.ts diff --git a/src/material-experimental/mdc-slider/testing/BUILD.bazel b/src/material-experimental/mdc-slider/testing/BUILD.bazel index 62cc7a5115d4..7a7346ff3340 100644 --- a/src/material-experimental/mdc-slider/testing/BUILD.bazel +++ b/src/material-experimental/mdc-slider/testing/BUILD.bazel @@ -24,7 +24,6 @@ ng_test_library( deps = [ ":testing", "//src/material-experimental/mdc-slider", - "//src/material/slider/testing:harness_tests_lib", ], ) diff --git a/src/material/slider/testing/BUILD.bazel b/src/material/slider/testing/BUILD.bazel index 17fac3501f86..aad3027e1815 100644 --- a/src/material/slider/testing/BUILD.bazel +++ b/src/material/slider/testing/BUILD.bazel @@ -20,29 +20,18 @@ filegroup( srcs = glob(["**/*.ts"]), ) -ng_test_library( - name = "harness_tests_lib", - srcs = ["shared.spec.ts"], - deps = [ - ":testing", - "//src/cdk/testing", - "//src/cdk/testing/testbed", - "//src/material/slider", - "@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/cdk/testing", + "//src/cdk/testing/testbed", "//src/material/slider", + "@npm//@angular/forms", + "@npm//@angular/platform-browser", ], ) diff --git a/src/material/slider/testing/shared.spec.ts b/src/material/slider/testing/shared.spec.ts deleted file mode 100644 index 080f873ddf20..000000000000 --- a/src/material/slider/testing/shared.spec.ts +++ /dev/null @@ -1,202 +0,0 @@ -import {HarnessLoader} from '@angular/cdk/testing'; -import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed'; -import {Component, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; -import {ComponentFixture, TestBed} from '@angular/core/testing'; -import {MatSliderModule} from '@angular/material/slider'; -import {MatSliderHarness} from '@angular/material/slider/testing/slider-harness'; - -/** Shared tests to run on both the original and MDC-based sliders. */ -export function runHarnessTests( - sliderModule: typeof MatSliderModule, - sliderHarness: typeof MatSliderHarness, - options: {supportsVertical: boolean, supportsInvert: boolean}) { - let fixture: ComponentFixture; - let loader: HarnessLoader; - - beforeEach(async () => { - await TestBed - .configureTestingModule({ - imports: [sliderModule], - declarations: [SliderHarnessTest], - // Use custom element schema since some inputs (like vertical or invert) do not - // exist in the MDC implementation of the slider. Though we still want to re-use - // the same test component. - schemas: [CUSTOM_ELEMENTS_SCHEMA], - }) - .compileComponents(); - - fixture = TestBed.createComponent(SliderHarnessTest); - fixture.detectChanges(); - loader = TestbedHarnessEnvironment.loader(fixture); - }); - - it('should load all slider harnesses', async () => { - const sliders = await loader.getAllHarnesses(sliderHarness); - expect(sliders.length).toBe(3); - }); - - it('should load slider harness by id', async () => { - const sliders = await loader.getAllHarnesses(sliderHarness.with({selector: '#my-slider'})); - expect(sliders.length).toBe(1); - }); - - it('should get id of slider', async () => { - const sliders = await loader.getAllHarnesses(sliderHarness); - expect(await sliders[0].getId()).toBe(null); - expect(await sliders[1].getId()).toBe('my-slider'); - expect(await sliders[2].getId()).toBe(null); - }); - - it('should get value of slider', async () => { - const sliders = await loader.getAllHarnesses(sliderHarness); - expect(await sliders[0].getValue()).toBe(50); - expect(await sliders[1].getValue()).toBe(0); - expect(await sliders[2].getValue()).toBe(225); - }); - - it('should get percentage of slider', async () => { - const sliders = await loader.getAllHarnesses(sliderHarness); - expect(await sliders[0].getPercentage()).toBe(0.5); - expect(await sliders[1].getPercentage()).toBe(0); - expect(await sliders[2].getPercentage()).toBe(0.5); - }); - - it('should get max value of slider', async () => { - const sliders = await loader.getAllHarnesses(sliderHarness); - expect(await sliders[0].getMaxValue()).toBe(100); - expect(await sliders[1].getMaxValue()).toBe(100); - expect(await sliders[2].getMaxValue()).toBe(250); - }); - - it('should get min value of slider', async () => { - const sliders = await loader.getAllHarnesses(sliderHarness); - expect(await sliders[0].getMinValue()).toBe(0); - expect(await sliders[1].getMinValue()).toBe(0); - expect(await sliders[2].getMinValue()).toBe(200); - }); - - it('should get display value of slider', async () => { - const sliders = await loader.getAllHarnesses(sliderHarness); - expect(await sliders[0].getDisplayValue()).toBe(null); - expect(await sliders[1].getDisplayValue()).toBe('Null'); - expect(await sliders[2].getDisplayValue()).toBe('#225'); - }); - - it('should get orientation of slider', async () => { - const sliders = await loader.getAllHarnesses(sliderHarness); - expect(await sliders[0].getOrientation()).toBe('horizontal'); - expect(await sliders[1].getOrientation()).toBe('horizontal'); - expect(await sliders[2].getOrientation()).toBe(options.supportsVertical ? - 'vertical' : 'horizontal'); - }); - - it('should be able to focus slider', async () => { - // the first slider is disabled. - const slider = (await loader.getAllHarnesses(sliderHarness))[1]; - expect(await slider.isFocused()).toBe(false); - await slider.focus(); - expect(await slider.isFocused()).toBe(true); - }); - - it('should be able to blur slider', async () => { - // the first slider is disabled. - const slider = (await loader.getAllHarnesses(sliderHarness))[1]; - expect(await slider.isFocused()).toBe(false); - await slider.focus(); - expect(await slider.isFocused()).toBe(true); - await slider.blur(); - expect(await slider.isFocused()).toBe(false); - }); - - it('should be able to set value of slider', async () => { - const sliders = await loader.getAllHarnesses(sliderHarness); - expect(await sliders[1].getValue()).toBe(0); - expect(await sliders[2].getValue()).toBe(225); - - await sliders[1].setValue(33); - await sliders[2].setValue(300); - - expect(await sliders[1].getValue()).toBe(33); - // value should be clamped to the maximum. - expect(await sliders[2].getValue()).toBe(250); - }); - - it('should be able to set value of slider in rtl', async () => { - const sliders = await loader.getAllHarnesses(sliderHarness); - expect(await sliders[1].getValue()).toBe(0); - expect(await sliders[2].getValue()).toBe(225); - - // should not retrieve incorrect values in case slider is inverted - // due to RTL page layout. - fixture.componentInstance.dir = 'rtl'; - fixture.detectChanges(); - - await sliders[1].setValue(80); - expect(await sliders[1].getValue()).toBe(80); - }); - - it('should get disabled state of slider', async () => { - const sliders = await loader.getAllHarnesses(sliderHarness); - expect(await sliders[0].isDisabled()).toBe(true); - expect(await sliders[1].isDisabled()).toBe(false); - expect(await sliders[2].isDisabled()).toBe(false); - }); - - if (options.supportsInvert) { - it('should be able to set value of inverted slider', async () => { - const sliders = await loader.getAllHarnesses(sliderHarness); - expect(await sliders[1].getValue()).toBe(0); - expect(await sliders[2].getValue()).toBe(225); - - fixture.componentInstance.invertSliders = true; - fixture.detectChanges(); - - await sliders[1].setValue(75); - await sliders[2].setValue(210); - - expect(await sliders[1].getValue()).toBe(75); - expect(await sliders[2].getValue()).toBe(210); - }); - - it('should be able to set value of inverted slider in rtl', async () => { - const sliders = await loader.getAllHarnesses(sliderHarness); - expect(await sliders[1].getValue()).toBe(0); - expect(await sliders[2].getValue()).toBe(225); - - fixture.componentInstance.invertSliders = true; - fixture.componentInstance.dir = 'rtl'; - fixture.detectChanges(); - - await sliders[1].setValue(75); - await sliders[2].setValue(210); - - expect(await sliders[1].getValue()).toBe(75); - expect(await sliders[2].getValue()).toBe(210); - }); - } -} - -@Component({ - template: ` - -
- -
- - - `, -}) -class SliderHarnessTest { - sliderId = 'my-slider'; - invertSliders = false; - dir = 'ltr'; - - displayFn(value: number|null) { - if (!value) { - return 'Null'; - } - return `#${value}`; - } -} diff --git a/src/material/slider/testing/slider-harness.spec.ts b/src/material/slider/testing/slider-harness.spec.ts index b11832e8c142..b5f4f7b49e47 100644 --- a/src/material/slider/testing/slider-harness.spec.ts +++ b/src/material/slider/testing/slider-harness.spec.ts @@ -1,10 +1,189 @@ +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 {MatSliderModule} from '@angular/material/slider'; -import {runHarnessTests} from '@angular/material/slider/testing/shared.spec'; -import {MatSliderHarness} from './slider-harness'; +import {MatSliderHarness} from '@angular/material/slider/testing/slider-harness'; describe('Non-MDC-based MatSliderHarness', () => { - runHarnessTests(MatSliderModule, MatSliderHarness, { - supportsInvert: true, - supportsVertical: true, + let fixture: ComponentFixture; + let loader: HarnessLoader; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [MatSliderModule], + declarations: [SliderHarnessTest], + }).compileComponents(); + + fixture = TestBed.createComponent(SliderHarnessTest); + fixture.detectChanges(); + loader = TestbedHarnessEnvironment.loader(fixture); + }); + + it('should load all slider harnesses', async () => { + const sliders = await loader.getAllHarnesses(MatSliderHarness); + expect(sliders.length).toBe(3); + }); + + it('should load slider harness by id', async () => { + const sliders = await loader.getAllHarnesses(MatSliderHarness.with({selector: '#my-slider'})); + expect(sliders.length).toBe(1); + }); + + it('should get id of slider', async () => { + const sliders = await loader.getAllHarnesses(MatSliderHarness); + expect(await sliders[0].getId()).toBe(null); + expect(await sliders[1].getId()).toBe('my-slider'); + expect(await sliders[2].getId()).toBe(null); + }); + + it('should get value of slider', async () => { + const sliders = await loader.getAllHarnesses(MatSliderHarness); + expect(await sliders[0].getValue()).toBe(50); + expect(await sliders[1].getValue()).toBe(0); + expect(await sliders[2].getValue()).toBe(225); + }); + + it('should get percentage of slider', async () => { + const sliders = await loader.getAllHarnesses(MatSliderHarness); + expect(await sliders[0].getPercentage()).toBe(0.5); + expect(await sliders[1].getPercentage()).toBe(0); + expect(await sliders[2].getPercentage()).toBe(0.5); + }); + + it('should get max value of slider', async () => { + const sliders = await loader.getAllHarnesses(MatSliderHarness); + expect(await sliders[0].getMaxValue()).toBe(100); + expect(await sliders[1].getMaxValue()).toBe(100); + expect(await sliders[2].getMaxValue()).toBe(250); + }); + + it('should get min value of slider', async () => { + const sliders = await loader.getAllHarnesses(MatSliderHarness); + expect(await sliders[0].getMinValue()).toBe(0); + expect(await sliders[1].getMinValue()).toBe(0); + expect(await sliders[2].getMinValue()).toBe(200); + }); + + it('should get display value of slider', async () => { + const sliders = await loader.getAllHarnesses(MatSliderHarness); + expect(await sliders[0].getDisplayValue()).toBe(null); + expect(await sliders[1].getDisplayValue()).toBe('Null'); + expect(await sliders[2].getDisplayValue()).toBe('#225'); + }); + + it('should get orientation of slider', async () => { + const sliders = await loader.getAllHarnesses(MatSliderHarness); + expect(await sliders[0].getOrientation()).toBe('horizontal'); + expect(await sliders[1].getOrientation()).toBe('horizontal'); + expect(await sliders[2].getOrientation()).toBe('vertical'); + }); + + it('should be able to focus slider', async () => { + // the first slider is disabled. + const slider = (await loader.getAllHarnesses(MatSliderHarness))[1]; + expect(await slider.isFocused()).toBe(false); + await slider.focus(); + expect(await slider.isFocused()).toBe(true); + }); + + it('should be able to blur slider', async () => { + // the first slider is disabled. + const slider = (await loader.getAllHarnesses(MatSliderHarness))[1]; + expect(await slider.isFocused()).toBe(false); + await slider.focus(); + expect(await slider.isFocused()).toBe(true); + await slider.blur(); + expect(await slider.isFocused()).toBe(false); + }); + + it('should be able to set value of slider', async () => { + const sliders = await loader.getAllHarnesses(MatSliderHarness); + expect(await sliders[1].getValue()).toBe(0); + expect(await sliders[2].getValue()).toBe(225); + + await sliders[1].setValue(33); + await sliders[2].setValue(300); + + expect(await sliders[1].getValue()).toBe(33); + // value should be clamped to the maximum. + expect(await sliders[2].getValue()).toBe(250); + }); + + it('should be able to set value of slider in rtl', async () => { + const sliders = await loader.getAllHarnesses(MatSliderHarness); + expect(await sliders[1].getValue()).toBe(0); + expect(await sliders[2].getValue()).toBe(225); + + // should not retrieve incorrect values in case slider is inverted + // due to RTL page layout. + fixture.componentInstance.dir = 'rtl'; + fixture.detectChanges(); + + await sliders[1].setValue(80); + expect(await sliders[1].getValue()).toBe(80); + }); + + it('should get disabled state of slider', async () => { + const sliders = await loader.getAllHarnesses(MatSliderHarness); + expect(await sliders[0].isDisabled()).toBe(true); + expect(await sliders[1].isDisabled()).toBe(false); + expect(await sliders[2].isDisabled()).toBe(false); + }); + + it('should be able to set value of inverted slider', async () => { + const sliders = await loader.getAllHarnesses(MatSliderHarness); + expect(await sliders[1].getValue()).toBe(0); + expect(await sliders[2].getValue()).toBe(225); + + fixture.componentInstance.invertSliders = true; + fixture.detectChanges(); + + await sliders[1].setValue(75); + await sliders[2].setValue(210); + + expect(await sliders[1].getValue()).toBe(75); + expect(await sliders[2].getValue()).toBe(210); + }); + + it('should be able to set value of inverted slider in rtl', async () => { + const sliders = await loader.getAllHarnesses(MatSliderHarness); + expect(await sliders[1].getValue()).toBe(0); + expect(await sliders[2].getValue()).toBe(225); + + fixture.componentInstance.invertSliders = true; + fixture.componentInstance.dir = 'rtl'; + fixture.detectChanges(); + + await sliders[1].setValue(75); + await sliders[2].setValue(210); + + expect(await sliders[1].getValue()).toBe(75); + expect(await sliders[2].getValue()).toBe(210); }); }); + +@Component({ + template: ` + +
+ +
+ + + `, +}) +class SliderHarnessTest { + sliderId = 'my-slider'; + invertSliders = false; + dir = 'ltr'; + + displayFn(value: number|null) { + if (!value) { + return 'Null'; + } + return `#${value}`; + } +}