docs(material/slider): add harness example for slider (#21466)

Author: annieyw

src/components-examples/material/slider/BUILD.bazel

@@ -11,11 +11,17 @@ ng_module(
     ]),
     module_name = "@angular/components-examples/material/slider",
     deps = [
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
         "//src/material/card",
         "//src/material/checkbox",
         "//src/material/input",
         "//src/material/slider",
+        "//src/material/slider/testing",
         "@npm//@angular/forms",
+        "@npm//@angular/platform-browser",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@types/jasmine",
     ],
 )
 

src/components-examples/material/slider/index.ts

@@ -8,16 +8,19 @@ import {MatSliderModule} from '@angular/material/slider';
 import {SliderConfigurableExample} from './slider-configurable/slider-configurable-example';
 import {SliderFormattingExample} from './slider-formatting/slider-formatting-example';
 import {SliderOverviewExample} from './slider-overview/slider-overview-example';
+import {SliderHarnessExample} from './slider-harness/slider-harness-example';
 
 export {
   SliderConfigurableExample,
   SliderFormattingExample,
+  SliderHarnessExample,
   SliderOverviewExample,
 };
 
 const EXAMPLES = [
   SliderConfigurableExample,
   SliderFormattingExample,
+  SliderHarnessExample,
   SliderOverviewExample,
 ];
 

src/components-examples/material/slider/slider-harness/slider-harness-example.html

@@ -0,0 +1 @@
+<mat-slider value="50"></mat-slider>

src/components-examples/material/slider/slider-harness/slider-harness-example.spec.ts

@@ -0,0 +1,59 @@
+import {TestBed, ComponentFixture, waitForAsync} from '@angular/core/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {MatSliderHarness} from '@angular/material/slider/testing';
+import {HarnessLoader} from '@angular/cdk/testing';
+import {BrowserDynamicTestingModule, platformBrowserDynamicTesting}
+  from '@angular/platform-browser-dynamic/testing';
+import {MatSliderModule} from '@angular/material/slider';
+import {SliderHarnessExample} from './slider-harness-example';
+
+describe('SliderHarnessExample', () => {
+  let fixture: ComponentFixture<SliderHarnessExample>;
+  let loader: HarnessLoader;
+
+  beforeAll(() => {
+    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+  });
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [MatSliderModule],
+        declarations: [SliderHarnessExample]
+      }).compileComponents();
+      fixture = TestBed.createComponent(SliderHarnessExample);
+      fixture.detectChanges();
+      loader = TestbedHarnessEnvironment.loader(fixture);
+    })
+  );
+
+  it('should load all slider harnesses', async () => {
+    const sliders = await loader.getAllHarnesses(MatSliderHarness);
+    expect(sliders.length).toBe(1);
+  });
+
+  it('should get value of slider', async () => {
+    const slider = await loader.getHarness(MatSliderHarness);
+    expect(await slider.getValue()).toBe(50);
+  });
+
+  it('should get percentage of slider', async () => {
+    const slider = await loader.getHarness(MatSliderHarness);
+    expect(await slider.getPercentage()).toBe(0.5);
+  });
+
+  it('should get max value of slider', async () => {
+    const slider = await loader.getHarness(MatSliderHarness);
+    expect(await slider.getMaxValue()).toBe(100);
+  });
+
+
+  it('should be able to set value of slider', async () => {
+    const slider = await loader.getHarness(MatSliderHarness);
+    expect(await slider.getValue()).toBe(50);
+
+    await slider.setValue(33);
+
+    expect(await slider.getValue()).toBe(33);
+  });
+});

src/components-examples/material/slider/slider-harness/slider-harness-example.ts

@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Testing with MatSliderHarness
+ */
+@Component({
+  selector: 'slider-harness-example',
+  templateUrl: 'slider-harness-example.html',
+})
+export class SliderHarnessExample {}