4.3. Copy over e2e tests if any exist

Adds MDC-based MatCheckbox to the e2e app and copies over the tests for
the existing MatCheckbox.

Author: mmalerba

.github/CODEOWNERS

@@ -167,6 +167,7 @@
 /e2e/components/icon-e2e.spec.ts                   @jelbourn
 /e2e/components/input-e2e.spec.ts                  @mmalerba
 /e2e/components/list-e2e.spec.ts                   @jelbourn @crisbeto @devversion
+/e2e/components/mdc-checkbox-e2e.spec.ts           @mmalerba
 /e2e/components/menu-e2e.spec.ts                   @crisbeto
 /e2e/components/progress-bar-e2e.spec.ts           @jelbourn @crisbeto @josephperrott
 /e2e/components/progress-spinner-e2e.spec.ts       @jelbourn @crisbeto @josephperrott
@@ -192,6 +193,7 @@
 /src/e2e-app/icon/**                               @jelbourn
 /src/e2e-app/input/**                              @mmalerba
 /src/e2e-app/list/**                               @jelbourn
+/src/e2e-app/mdc-checkbox/**                       @mmalerba
 /src/e2e-app/menu/**                               @crisbeto
 /src/e2e-app/progress-bar/**                       @jelbourn @crisbeto @josephperrott
 /src/e2e-app/progress-spinner/**                   @jelbourn @crisbeto @josephperrott

e2e/components/mdc-checkbox-e2e.spec.ts

@@ -0,0 +1,33 @@
+import {browser, by, element, Key} from 'protractor';
+
+describe('MDC checkbox', () => {
+  describe('check behavior', () => {
+    beforeEach(async () => await browser.get('/mdc-checkbox'));
+
+    it('should be checked when clicked, and unchecked when clicked again', async () => {
+      const checkboxEl = element(by.id('test-checkbox'));
+      const inputEl = element(by.css('input[id=test-checkbox-input]'));
+
+      await checkboxEl.click();
+
+      expect(await inputEl.getAttribute('checked'))
+          .toBeTruthy('Expect checkbox "checked" property to be true');
+
+      await checkboxEl.click();
+
+      expect(await inputEl.getAttribute('checked'))
+          .toBeFalsy('Expect checkbox "checked" property to be false');
+    });
+
+    it('should toggle the checkbox when pressing space', async () => {
+      const inputEl = element(by.css('input[id=test-checkbox-input]'));
+
+      expect(await inputEl.getAttribute('checked'))
+          .toBeFalsy('Expect checkbox "checked" property to be false');
+      await inputEl.sendKeys(Key.SPACE);
+
+      expect(await inputEl.getAttribute('checked'))
+          .toBeTruthy('Expect checkbox "checked" property to be true');
+    });
+  });
+});

src/e2e-app/BUILD.bazel

@@ -25,14 +25,20 @@ ng_module(
     "//src/material-examples:examples",
     "//src/cdk-experimental/dialog",
     "//src/cdk-experimental/scrolling",
+    "//src/material-experimental/mdc-checkbox",
   ],
 )
 
 sass_binary(
   name = "theme",
   src = "theme.scss",
+  include_paths = [
+    "external/npm/node_modules",
+  ],
   deps = [
-    "//src/lib/core:all_themes"
+    "//src/lib/core:all_themes",
+    "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
+    "//src/material-experimental/mdc-checkbox:checkbox_scss_lib",
   ]
 )
 

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

@@ -22,6 +22,7 @@
   <a mat-list-item [routerLink]="['cards']">Cards</a>
   <a mat-list-item [routerLink]="['toolbar']">Toolbar</a>
   <a mat-list-item [routerLink]="['virtual-scroll']">Virtual Scroll</a>
+  <a mat-list-item [routerLink]="['mdc-checkbox']">MDC Checkbox</a>
 </mat-nav-list>
 
 <main>

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

@@ -10,6 +10,7 @@ import {GridListE2E} from '../grid-list/grid-list-e2e';
 import {IconE2E} from '../icon/icon-e2e';
 import {InputE2E} from '../input/input-e2e';
 import {ListE2e} from '../list/list-e2e';
+import {MdcCheckboxE2e} from '../mdc-checkbox/mdc-checkbox-e2e';
 import {MenuE2E} from '../menu/menu-e2e';
 import {ProgressBarE2E} from '../progress-bar/progress-bar-e2e';
 import {ProgressSpinnerE2E} from '../progress-spinner/progress-spinner-e2e';
@@ -34,6 +35,7 @@ export const E2E_APP_ROUTES: Routes = [
   {path: 'icon', component: IconE2E},
   {path: 'input', component: InputE2E},
   {path: 'list', component: ListE2e},
+  {path: 'mdc-checkbox', component: MdcCheckboxE2e},
   {path: 'menu', component: MenuE2E},
   {path: 'progress-bar', component: ProgressBarE2E},
   {path: 'progress-spinner', component: ProgressSpinnerE2E},

src/e2e-app/main-module.ts

@@ -18,6 +18,7 @@ import {GridListE2eModule} from './grid-list/grid-list-e2e-module';
 import {IconE2eModule} from './icon/icon-e2e-module';
 import {InputE2eModule} from './input/input-e2e-module';
 import {ListE2eModule} from './list/list-e2e-module';
+import {MdcCheckboxE2eModule} from './mdc-checkbox/mdc-checkbox-e2e-module';
 import {MenuE2eModule} from './menu/menu-e2e-module';
 import {ProgressBarE2eModule} from './progress-bar/progress-bar-e2e-module';
 import {ProgressSpinnerE2eModule} from './progress-spinner/progress-spinner-e2e-module';
@@ -48,6 +49,7 @@ import {VirtualScrollE2eModule} from './virtual-scroll/virtual-scroll-e2e-module
     IconE2eModule,
     InputE2eModule,
     ListE2eModule,
+    MdcCheckboxE2eModule,
     MenuE2eModule,
     ProgressBarE2eModule,
     ProgressSpinnerE2eModule,

src/e2e-app/mdc-checkbox/mdc-checkbox-e2e-module.ts

@@ -0,0 +1,18 @@
+/**
+ * @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 {MatCheckboxModule} from '@angular/material-experimental/mdc-checkbox';
+import {MdcCheckboxE2e} from './mdc-checkbox-e2e';
+
+@NgModule({
+  imports: [MatCheckboxModule],
+  declarations: [MdcCheckboxE2e],
+})
+export class MdcCheckboxE2eModule {
+}

src/e2e-app/mdc-checkbox/mdc-checkbox-e2e.html

@@ -0,0 +1 @@
+<mat-checkbox id="test-checkbox">Check this button</mat-checkbox>

src/e2e-app/mdc-checkbox/mdc-checkbox-e2e.ts

@@ -0,0 +1,18 @@
+/**
+ * @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({
+  moduleId: module.id,
+  selector: 'mdc-checkbox-e2e',
+  templateUrl: 'mdc-checkbox-e2e.html',
+})
+export class MdcCheckboxE2e {
+  selected: string = '';
+}

src/e2e-app/theme.scss

@@ -1,11 +1,14 @@
 @import '../lib/core/theming/all-theme';
+@import '../material-experimental/mdc-checkbox/mdc-checkbox';
+@import '../material-experimental/mdc-helpers/mdc-helpers';
 
 // Plus imports for other components in your app.
 
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 // **Be sure that you only ever include this mixin once!**
 @include mat-core();
+@include mat-checkbox-typography-mdc(mat-typography-config());
 
 // Define the default theme (same as the example above).
 $candy-app-primary: mat-palette($mat-indigo);
@@ -14,3 +17,5 @@ $candy-app-theme:   mat-light-theme($candy-app-primary, $candy-app-accent);
 
 // Include the default theme styles.
 @include angular-material-theme($candy-app-theme);
+@include mat-checkbox-theme-mdc($candy-app-theme);
+