[affected:*][ci:force] Fixing e2e - the long painful journey

lib/content-services/src/lib/search/components/search-slider/search-slider.component.html

@@ -1,14 +1,11 @@
 <mat-slider
-    [min]="min"
-    [max]="max"
-    [step]="step"
     class="adf-search-slider"
-    data-automation-id="slider-range" #ngSlider><input matSliderThumb />
-    <input
-        matSliderThumb
-        (change)="onChangedHandler({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value})"
-        #ngSliderThumb="matSliderThumb"
-        [(value)]="value" />
+    data-automation-id="slider-range"
+    [max]="max"
+    [min]="min"
+    [step]="step"
+    [discrete]="thumbLabel">
+    <input matSliderThumb (change)="onChangedHandler()" [(ngModel)]="value">
 </mat-slider>
 
 <div class="adf-facet-buttons" *ngIf="!settings?.hideDefaultAction">

lib/content-services/src/lib/search/components/search-slider/search-slider.component.spec.ts

@@ -15,7 +15,6 @@
  * limitations under the License.
  */
 
-import { MatSliderChange } from '@angular/material/slider';
 import { SearchSliderComponent } from './search-slider.component';
 import { ContentTestingModule } from '../../../testing/content.testing.module';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
@@ -49,14 +48,6 @@ describe('SearchSliderComponent', () => {
         expect(component.thumbLabel).toEqual(settings.thumbLabel);
     });
 
-    it('should update value on slider change', () => {
-        component.onChangedHandler({ value: 10 } as MatSliderChange);
-        expect(component.value).toEqual(10);
-
-        component.onChangedHandler({ value: 20 } as MatSliderChange);
-        expect(component.value).toEqual(20);
-    });
-
     it('should update its query part on slider change', () => {
         const context: any = {
             queryFragments: {},
@@ -68,13 +59,15 @@ describe('SearchSliderComponent', () => {
         component.context = context;
         component.id = 'contentSize';
         component.settings = { field: 'cm:content.size' };
+        component.value = 10;
         fixture.detectChanges();
 
-        component.onChangedHandler({ value: 10 } as MatSliderChange);
+        component.onChangedHandler();
         expect(context.queryFragments[component.id]).toEqual('cm:content.size:[0 TO 10]');
         expect(context.update).toHaveBeenCalled();
 
-        component.onChangedHandler({ value: 20 } as MatSliderChange);
+        component.value = 20;
+        component.onChangedHandler();
         expect(context.queryFragments[component.id]).toEqual('cm:content.size:[0 TO 20]');
     });
 

lib/content-services/src/lib/search/components/search-slider/search-slider.component.ts

@@ -19,7 +19,6 @@ import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import { SearchWidget } from '../../models/search-widget.interface';
 import { SearchWidgetSettings } from '../../models/search-widget-settings.interface';
 import { SearchQueryBuilderService } from '../../services/search-query-builder.service';
-import { MatSliderChange } from '@angular/material/slider';
 import { Subject } from 'rxjs';
 
 @Component({
@@ -82,8 +81,7 @@ export class SearchSliderComponent implements SearchWidget, OnInit {
         this.updateQuery(null);
     }
 
-    onChangedHandler(event: MatSliderChange) {
-        this.value = event.value;
+    onChangedHandler() {
         if (this.enableChangeUpdate) {
             this.updateQuery(this.value);
         }

lib/testing/src/lib/protractor/content-services/pages/search/search-slider.page.ts

@@ -44,8 +44,9 @@ export class SearchSliderPage {
 
     async setValue(value: number): Promise<void> {
         const elem = this.filter.$(this.slider).$('.mdc-slider__thumb-knob');
+        await BrowserVisibility.waitUntilElementIsVisible(elem);
         await browser.actions().mouseMove(elem, { x: 0, y: 0 }).perform();
-        await browser.actions().mouseDown().mouseMove({x: value * 25, y: 0}).mouseUp().perform();
+        await browser.actions().mouseDown().mouseMove({x: value * 7, y: 0}).mouseUp().perform();
     }
 
     async checkSliderIsDisplayed(): Promise<void> {

lib/testing/src/lib/protractor/core/pages/material/material-locators.ts

@@ -31,7 +31,7 @@ export const materialLocators = {
   Button: {
     class: '.mat-mdc-button',
     disabled: 'mat-button-disabled',
-    wrapper: '.mat-mdc-button-wrapper'
+    label: '.mdc-button__label'
   },
   Calendar: {
     root: 'mat-calendar',
@@ -394,7 +394,7 @@ export const materialLocators = {
     },
     label: {
       class: '.mdc-tab',
-      root: 'mat-tab-label',
+      root: 'mat-mdc-tab-labels',
       active: {
         class: '.mdc-tab--active',
         root: 'mat-tab-label-active'

lib/testing/src/lib/protractor/core/pages/material/toggle.page.ts

@@ -24,7 +24,7 @@ export class TogglePage {
     async enableToggle(toggle: ElementFinder): Promise<void> {
         const check = await BrowserActions.getAttribute(toggle, 'class');
         if (check.indexOf(materialLocators.Checked.root) < 0) {
-            const elem = toggle.$$('input').first();
+            const elem = toggle.$$('button').first();
             await BrowserActions.clickScript(elem);
         }
     }