add e2e tests

Author: annieyw

src/e2e-app/BUILD.bazel

@@ -40,6 +40,7 @@ ng_module(
         "//src/material-experimental/mdc-input",
         "//src/material-experimental/mdc-menu",
         "//src/material-experimental/mdc-progress-bar",
+        "//src/material-experimental/mdc-progress-spinner",
         "//src/material-experimental/mdc-radio",
         "//src/material-experimental/mdc-slide-toggle",
         "//src/material-experimental/mdc-slider",

src/e2e-app/e2e-app/e2e-app-layout.html

@@ -34,6 +34,7 @@
   <a mat-list-item [routerLink]="['mdc-table']">MDC Table</a>
   <a mat-list-item [routerLink]="['mdc-tabs']">MDC Tabs</a>
   <a mat-list-item [routerLink]="['mdc-progress-bar']">MDC Progress bar</a>
+  <a mat-list-item [routerLink]="['mdc-progress-spinner']">MDC Progress spinner</a>
 </mat-nav-list>
 
 <main>

src/e2e-app/e2e-app/routes.ts

@@ -23,6 +23,7 @@ import {MdcSliderE2e} from '../mdc-slider/mdc-slider-e2e';
 import {MdcTableE2e} from '../mdc-table/mdc-table-e2e';
 import {MdcTabsE2e} from '../mdc-tabs/mdc-tabs-e2e';
 import {MdcProgressBarE2E} from '../mdc-progress-bar/mdc-progress-bar-e2e';
+import {MdcProgressSpinnerE2e} from '../mdc-progress-spinner/mdc-progress-spinner-e2e';
 import {MenuE2E} from '../menu/menu-e2e';
 import {ProgressBarE2E} from '../progress-bar/progress-bar-e2e';
 import {ProgressSpinnerE2E} from '../progress-spinner/progress-spinner-e2e';
@@ -61,6 +62,7 @@ export const E2E_APP_ROUTES: Routes = [
   {path: 'mdc-tabs', component: MdcTabsE2e},
   {path: 'mdc-table', component: MdcTableE2e},
   {path: 'mdc-progress-bar', component: MdcProgressBarE2E},
+  {path: 'mdc-progress-spinner', component: MdcProgressSpinnerE2e},
   {path: 'menu', component: MenuE2E},
   {path: 'progress-bar', component: ProgressBarE2E},
   {path: 'progress-spinner', component: ProgressSpinnerE2E},

src/e2e-app/main-module.ts

@@ -40,6 +40,7 @@ import {TabsE2eModule} from './tabs/tabs-e2e-module';
 import {ToolbarE2eModule} from './toolbar/toolbar-e2e-module';
 import {VirtualScrollE2eModule} from './virtual-scroll/virtual-scroll-e2e-module';
 import {MdcProgressBarE2eModule} from './mdc-progress-bar/mdc-progress-bar-e2e-module';
+import {MdcProgressSpinnerE2eModule} from './mdc-progress-spinner/mdc-progress-spinner-module';
 
 @NgModule({
   imports: [
@@ -72,6 +73,7 @@ import {MdcProgressBarE2eModule} from './mdc-progress-bar/mdc-progress-bar-e2e-m
     MdcTableE2eModule,
     MdcTabsE2eModule,
     MdcProgressBarE2eModule,
+    MdcProgressSpinnerE2eModule,
     MenuE2eModule,
     ProgressBarE2eModule,
     ProgressSpinnerE2eModule,

src/e2e-app/mdc-progress-spinner/mdc-progress-spinner-e2e.html

@@ -0,0 +1,3 @@
+<mat-progress-spinner [value]="value" [strokeWidth]="strokeWidth"></mat-progress-spinner>
+<mat-progress-spinner mode="indeterminate" [diameter]="diameter"></mat-progress-spinner>
+<mat-spinner></mat-spinner>

src/e2e-app/mdc-progress-spinner/mdc-progress-spinner-e2e.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'mdc-progress-spinner-e2e',
+  templateUrl: 'mdc-progress-spinner-e2e.html'
+})
+export class MdcProgressSpinnerE2e {
+  value = 65;
+  diameter = 37;
+  strokeWidth = 6;
+}

src/e2e-app/mdc-progress-spinner/mdc-progress-spinner-module.ts

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+import {MatProgressSpinnerModule} from '@angular/material-experimental/mdc-progress-spinner';
+import {MdcProgressSpinnerE2e} from './mdc-progress-spinner-e2e';
+
+@NgModule({
+  imports: [MatProgressSpinnerModule],
+  declarations: [MdcProgressSpinnerE2e]
+})
+export class MdcProgressSpinnerE2eModule {}

src/material-experimental/mdc-progress-spinner/progress-spinner.e2e.spec.ts

@@ -0,0 +1,18 @@
+import {browser, by, element} from 'protractor';
+
+describe('progress-spinner', () => {
+  beforeEach(async () => await browser.get('/progress-spinner'));
+
+  it('should render a determinate progress spinner', async () => {
+    expect(await element(by.css('mat-progress-spinner')).isPresent()).toBe(true);
+  });
+
+  it('should render an indeterminate progress spinner', async () => {
+    expect(await element(by.css('mat-progress-spinner[mode="indeterminate"]')).isPresent())
+      .toBe(true);
+  });
+
+  it('should render a spinner', async () => {
+    expect(await element(by.css('mat-spinner')).isPresent()).toBe(true);
+  });
+});

src/material-experimental/mdc-progress-spinner/progress-spinner.scss

@@ -5,6 +5,8 @@
 @include mdc-circular-progress-core-styles($query: $mat-base-styles-without-animation-query);
 
 .mat-mdc-progress-spinner {
+  // Explicitly set to `block` since the browser defaults custom elements to `inline`.
+  display: block;
 
   .mdc-circular-progress {
     // MDC circular spinner sets width and height to 48px by default.

src/material-experimental/mdc-progress-spinner/progress-spinner.ts

@@ -52,40 +52,6 @@ const BASE_SIZE = 100;
  */
 const BASE_STROKE_WIDTH = 10;
 
-/** @docs-private */
-class ProgressSpinnerAdapter implements MDCCircularProgressAdapter {
-  constructor(private readonly _delegate: MatProgressSpinner) {
-  }
-
-  addClass(className: string) {
-    return this._delegate._rootElement.nativeElement.classList.add(className);
-  }
-
-  removeClass(className: string) {
-    return this._delegate._rootElement.nativeElement.classList.remove(className);
-  }
-
-  hasClass(className: string) {
-    return this._delegate._rootElement.nativeElement.classList.contains(className);
-  }
-
-  setAttribute(attributeName: string, value: string) {
-    return this._delegate._rootElement.nativeElement.setAttribute(attributeName, value);
-  }
-
-  removeAttribute(attributeName: string) {
-    return this._delegate._rootElement.nativeElement.removeAttribute(attributeName);
-  }
-
-  setDeterminateCircleAttribute(attributeName: string, value: string) {
-    return this._delegate._determinateCircle.nativeElement.setAttribute(attributeName, value);
-  }
-
-  getDeterminateCircleAttribute(attributeName: string) {
-    return this._delegate._determinateCircle.nativeElement.getAttribute(attributeName);
-  }
-}
-
 @Component({
   selector: 'mat-progress-spinner, mat-spinner',
   exportAs: 'matProgressSpinner',
@@ -121,6 +87,8 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
   /** The element of the determinate spinner. */
   @ViewChild('determinateSpinner') _determinateCircle: ElementRef<HTMLElement>;
 
+  /** Adapter used by MDC to interact with the DOM. */
+  // TODO: switch to class when MDC removes object spread in foundation
   private _adapter: MDCCircularProgressAdapter = {
     addClass: (className: string) => this._rootElement.nativeElement.classList.add(className),
     hasClass: (className: string) => this._rootElement.nativeElement.classList.contains(className),