ci: test mdc-slider flaky tests on edge 17

.circleci/config.yml

@@ -501,46 +501,11 @@ jobs:
 workflows:
   version: 2
 
-  bazel_targets:
-    jobs:
-      - bazel_build:
-          filters: *ignore_presubmit_branch_filter
-      - ivy_test:
-          filters: *ignore_presubmit_branch_filter
-      - api_golden_checks:
-          filters: *ignore_presubmit_branch_filter
-      - tests_local_browsers:
-          filters: *ignore_presubmit_branch_filter
-
   unit_tests:
     jobs:
-      - tests_browserstack:
-          filters: *ignore_presubmit_branch_filter
       - tests_saucelabs:
           filters: *ignore_presubmit_branch_filter
 
-  integration_tests:
-    jobs:
-      - e2e_tests:
-          filters: *ignore_presubmit_branch_filter
-      - prerender_build:
-          filters: *ignore_presubmit_branch_filter
-
-  release_output:
-    jobs:
-      - build_release_packages:
-          filters: *ignore_presubmit_branch_filter
-      - publish_snapshots:
-          filters: *publish_branches_filter
-          requires:
-            - build_release_packages
-
-  # Lint workflow. As we want to lint in one job, this is a workflow with just one job.
-  lint:
-    jobs:
-      - lint:
-          filters: *ignore_presubmit_branch_filter
-
   # Snapshot tests workflow that is scheduled to run all specified jobs every hour.
   # This workflow runs various jobs against the Angular snapshot builds from Github.
   snapshot_tests:

src/material-experimental/mdc-slider/slider.spec.ts

@@ -538,18 +538,19 @@ describe('MatMdcSlider', () => {
       flushRequestAnimationFrame();
     }));
 
-    it('should initialize based on bound value', () => {
+    it('should initialize based on bound value', async () => {
       expect(sliderInstance.value).toBe(50);
       expect(thumbContainerEl.style.transform).toContain('translateX(50px)');
-    });
+    }, 1000000);
 
     it('should update when bound value changes', fakeAsync(() => {
+      console.error('Running test!');
       testComponent.val = 75;
       fixture.detectChanges();
       flushRequestAnimationFrame();
 
       expect(sliderInstance.value).toBe(75);
-      expect(thumbContainerEl.style.transform).toContain('translateX(75px)');
+      expect(thumbContainerEl.style.transform).toContain('translateX(76px)');
     }));
   });
 
@@ -1229,7 +1230,11 @@ function flushRequestAnimationFrame() {
 // Disable animations and make the slider an even 100px, so that we get nice
 // round values in tests.
 const styles = `
-  .mat-mdc-slider { min-width: 100px !important; }
+  .mat-mdc-slider {
+    min-width: 100px !important;
+    width: 100px !important;
+    margin: 0px !important;
+  }
 `;
 
 @Component({

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

@@ -15,6 +15,7 @@ sass_library(
         "//src/material-experimental/mdc-menu:mdc_menu_scss_lib",
         "//src/material-experimental/mdc-radio:mdc_radio_scss_lib",
         "//src/material-experimental/mdc-slide-toggle:mdc_slide_toggle_scss_lib",
+        "//src/material-experimental/mdc-slider:mdc_slider_scss_lib",
         "//src/material-experimental/mdc-tabs:mdc_tabs_scss_lib",
     ],
 )

src/material-experimental/mdc-theming/_all-theme.scss

@@ -5,6 +5,7 @@
 @import '../mdc-menu/mdc-menu';
 @import '../mdc-radio/mdc-radio';
 @import '../mdc-slide-toggle/mdc-slide-toggle';
+@import '../mdc-slider/mdc-slider';
 @import '../mdc-tabs/mdc-tabs';
 
 @mixin angular-material-theme-mdc($theme) {
@@ -17,5 +18,6 @@
   @include mat-menu-theme-mdc($theme);
   @include mat-radio-theme-mdc($theme);
   @include mat-slide-toggle-theme-mdc($theme);
+  @include mat-slider-theme-mdc($theme);
   @include mat-tabs-theme-mdc($theme);
 }

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

@@ -15,6 +15,7 @@ sass_library(
         "//src/material-experimental/mdc-menu:mdc_menu_scss_lib",
         "//src/material-experimental/mdc-radio:mdc_radio_scss_lib",
         "//src/material-experimental/mdc-slide-toggle:mdc_slide_toggle_scss_lib",
+        "//src/material-experimental/mdc-slider:mdc_slider_scss_lib",
         "//src/material-experimental/mdc-tabs:mdc_tabs_scss_lib",
     ],
 )

src/material-experimental/mdc-typography/_all-typography.scss

@@ -5,6 +5,7 @@
 @import '../mdc-menu/mdc-menu';
 @import '../mdc-radio/mdc-radio';
 @import '../mdc-slide-toggle/mdc-slide-toggle';
+@import '../mdc-slider/mdc-slider';
 @import '../mdc-tabs/mdc-tabs';
 
 @mixin angular-material-typography-mdc($config: null) {
@@ -17,5 +18,6 @@
   @include mat-menu-typography-mdc($config);
   @include mat-radio-typography-mdc($config);
   @include mat-slide-toggle-typography-mdc($config);
+  @include mat-slider-typography-mdc($config);
   @include mat-tabs-typography-mdc($config);
 }

test/browser-providers.js

@@ -19,7 +19,7 @@ const browserConfig = {
   'IE9':               { unitTest: {target: null, }},
   'IE10':              { unitTest: {target: null, }},
   'IE11':              { unitTest: {target: null, }},
-  'Edge':              { unitTest: {target: 'browserstack', }},
+  'Edge':              { unitTest: {target: 'saucelabs', }},
   'Android4.1':        { unitTest: {target: null, }},
   'Android4.2':        { unitTest: {target: null, }},
   'Android4.3':        { unitTest: {target: null, }},
@@ -33,7 +33,7 @@ const browserConfig = {
   'iOS8':              { unitTest: {target: null, }},
   'iOS9':              { unitTest: {target: null, }},
   'iOS10':             { unitTest: {target: null, }},
-  'iOS11':             { unitTest: {target: 'saucelabs', }},
+  'iOS11':             { unitTest: {target: null, }},
   'WindowsPhone':      { unitTest: {target: null, }}
 };
 

test/karma.conf.js

@@ -55,12 +55,18 @@ module.exports = config => {
       {pattern: 'test/karma-system-config.js', included: true, watched: false},
       {pattern: 'test/karma-test-shim.js', included: true, watched: false},
 
-      // Include a Material theme in the test suite.
+      // Include a Material theme in the test suite. Also include the MDC theme as
+      // karma runs tests for the mdc prototype component as well.
       {
         pattern: 'dist/packages/**/core/theming/prebuilt/indigo-pink.css',
         included: true,
         watched: true
       },
+      {
+        pattern: 'dist/packages/material-experimental/mdc-theming/prebuilt/indigo-pink.css',
+        included: true,
+        watched: true
+      },
 
       // Includes all package tests and source files into karma. Those files will be watched.
       // This pattern also matches all sourcemap files and TypeScript files for debugging.
@@ -77,9 +83,9 @@ module.exports = config => {
     sauceLabs: {
       testName: 'Angular Material Unit Tests',
       startConnect: false,
-      recordVideo: false,
+      recordVideo: true,
       recordScreenshots: false,
-      idleTimeout: 600,
+      idleTimeout: 6000,
       commandTimeout: 600,
       maxDuration: 5400,
     },
@@ -89,7 +95,7 @@ module.exports = config => {
       startTunnel: false,
       retryLimit: 3,
       timeout: 1800,
-      video: false,
+      video: true,
     },
 
     browserDisconnectTolerance: 1,