feat(material-experimental/mdc-slider): implement some basic unit tests (#22072)

* feat(material-experimental/mdc-slider): implement some basic unit tests

* implement unit tests for the standard slider, standard range slider, and for the slider ripple states
* add mdc-slider theme to all-theme
* use #waitForAsync to wait for foundation to finish initializing & layout
* use forwardRef to avoid injection errors that only throw on ci
* disable the mat ripple on the slider thumbs to prevent the automatic launch that happens on click/touch
  the problem is easily reproduced if you undo this change and test it out on a mobile device.
* note: we use touch events instead of pointer events when testing on ios because pointerdown,
  pointerup, and pointermove are not supported

Author: wagnermaciel

src/cdk/testing/testbed/fake-events/dispatch-events.ts

@@ -65,6 +65,7 @@ export function dispatchPointerEvent(node: Node, type: string, clientX = 0, clie
  * Shorthand to dispatch a touch event on the specified coordinates.
  * @docs-private
  */
-export function dispatchTouchEvent(node: Node, type: string, x = 0, y = 0) {
-  return dispatchEvent(node, createTouchEvent(type, x, y));
+export function dispatchTouchEvent(node: Node, type: string, pageX = 0, pageY = 0, clientX = 0,
+                                   clientY = 0) {
+  return dispatchEvent(node, createTouchEvent(type, pageX, pageY, clientX, clientY));
 }

src/cdk/testing/testbed/fake-events/event-objects.ts

@@ -79,11 +79,11 @@ export function createPointerEvent(type: string, clientX = 0, clientY = 0,
  * Creates a browser TouchEvent with the specified pointer coordinates.
  * @docs-private
  */
-export function createTouchEvent(type: string, pageX = 0, pageY = 0) {
+export function createTouchEvent(type: string, pageX = 0, pageY = 0, clientX = 0, clientY = 0) {
   // In favor of creating events that work for most of the browsers, the event is created
   // as a basic UI Event. The necessary details for the event will be set manually.
   const event = document.createEvent('UIEvent');
-  const touchDetails = {pageX, pageY};
+  const touchDetails = {pageX, pageY, clientX, clientY};
 
   // TS3.6 removes the initUIEvent method and suggests porting to "new UIEvent()".
   (event as any).initUIEvent(type, true, true, window, 0);

src/material-experimental/mdc-slider/BUILD.bazel

@@ -75,8 +75,10 @@ ng_test_library(
         "//src/cdk/keycodes",
         "//src/cdk/platform",
         "//src/cdk/testing/private",
+        "//src/material/core",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
+        "@npm//@material/slider",
     ],
 )
 

src/material-experimental/mdc-slider/slider-thumb.html

@@ -4,4 +4,4 @@
   </div>
 </div>
 <div class="mdc-slider__thumb-knob" #knob></div>
-<div matRipple></div>
+<div matRipple [matRippleDisabled]="true"></div>