merge component harness test-app into e2e-app

Author: mmalerba

src/cdk-experimental/testing/BUILD.bazel

@@ -6,7 +6,7 @@ load("@npm_angular_bazel//:index.bzl", "protractor_web_test_suite")
 
 ng_module(
   name = "testing",
-  srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts", "test-app/**"]),
+  srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts", "tests/**"]),
   module_name = "@angular/cdk-experimental/testing",
   deps = [
     "@npm//@angular/core",
@@ -16,19 +16,21 @@ ng_module(
 
 ng_web_test_suite(
   name = "unit_tests",
-  deps = ["//src/cdk-experimental/testing/test-app:test_app_test_sources"],
+  deps = ["//src/cdk-experimental/testing/tests:unit_test_sources"],
 )
 
 protractor_web_test_suite(
   name = "e2e_tests",
-  configuration = ":protractor.conf.js",
-  on_prepare = ":start-devserver.js",
-  server = "//src/cdk-experimental/testing/test-app:devserver",
+  tags = ["e2e"],
+  configuration = "//src/e2e-app:protractor.conf.js",
+  on_prepare = "//src/e2e-app:start-devserver.js",
+  server = "//src/e2e-app:devserver",
   deps = [
     "@npm//protractor",
-    "//src/cdk-experimental/testing/test-app:test_app_e2e_test_sources",
+    "//src/cdk-experimental/testing/tests:e2e_test_sources",
   ],
   data = [
     "@npm//@angular/bazel",
+    "//tools/axe-protractor",
   ],
 )

src/cdk-experimental/testing/protractor.conf.js

@@ -0,0 +1,39 @@
+package(default_visibility=["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_module", "ts_library", "ng_test_library", "ng_e2e_test_library")
+
+ng_module(
+  name = "test_components",
+  module_name = "@angular/cdk-experimental/testing/tests",
+  srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts", "harnesses/**"]),
+  deps = [
+    "@npm//@angular/forms",
+  ],
+)
+
+ts_library(
+  name = "test_harnesses",
+  srcs = glob(["harnesses/**/*.ts"]),
+  deps = [
+    "//src/cdk-experimental/testing",
+  ],
+)
+
+ng_test_library(
+  name = "unit_test_sources",
+  srcs = glob(["**/*.spec.ts"], exclude=["**/*.e2e.spec.ts"]),
+  deps = [
+    ":test_components",
+    ":test_harnesses",
+    "//src/cdk-experimental/testing",
+  ],
+)
+
+ng_e2e_test_library(
+   name = "e2e_test_sources",
+   srcs = glob(["**/*.e2e.spec.ts"]),
+   deps = [
+     ":test_harnesses",
+     "//src/cdk-experimental/testing",
+   ],
+)

src/cdk-experimental/testing/start-devserver.js

@@ -16,7 +16,7 @@ export class MainComponentHarness extends ComponentHarness {
   readonly input = this.find('#input');
   readonly value = this.find('#value');
   readonly allLabels = this.findAll('label');
-  readonly allLists = this.findAll(SubComponentHarness, 'sub');
+  readonly allLists = this.findAll(SubComponentHarness, 'test-sub');
   readonly memo = this.find('textarea');
   // Allow null for element
   readonly nullItem = this.find('wrong locator', {allowNull: true});
@@ -32,7 +32,7 @@ export class MainComponentHarness extends ComponentHarness {
     this.find('wrong locator', {global: true, allowNull: true});
 
   private _button = this.find('button');
-  private _testTools = this.find(SubComponentHarness, 'sub');
+  private _testTools = this.find(SubComponentHarness, 'test-sub');
 
   async increaseCounter(times: number) {
     const button = await this._button();

src/cdk-experimental/testing/test-app/BUILD.bazel

@@ -6,4 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-declare var module: { id: string };
+export * from './test-components-module';
+export * from './test-main-component';
+export * from './test-sub-component';

src/cdk-experimental/testing/test-app/devserver-configure.js

@@ -7,8 +7,8 @@ describe('Protractor Helper Test:', () => {
   let harness: MainComponentHarness;
 
   beforeEach(async () => {
-    await browser.get('/');
-    harness = await load(MainComponentHarness, 'main');
+    await browser.get('/component-harness');
+    harness = await load(MainComponentHarness, 'test-main');
   });
 
   describe('Locator ', () => {
@@ -174,7 +174,7 @@ describe('Protractor Helper Test:', () => {
 
   describe('getElementFinder', () => {
     it('should return the element finder', async () => {
-      const mainElement = await element(by.css('main'));
+      const mainElement = await element(by.css('test-main'));
       const elementFromHarness = getElementFinder(harness.host());
       expect(await elementFromHarness.getId())
         .toEqual(await mainElement.getId());

src/cdk-experimental/testing/test-app/index.html

@@ -0,0 +1,20 @@
+/**
+ * @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 {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {TestMainComponent} from './test-main-component';
+import {TestSubComponent} from './test-sub-component';
+
+@NgModule({
+  imports: [CommonModule, FormsModule],
+  declarations: [TestMainComponent, TestSubComponent],
+  exports: [TestMainComponent, TestSubComponent]
+})
+export class TestComponentsModule {}

src/cdk-experimental/testing/test-app/main.ts

@@ -15,7 +15,7 @@ import {
 
 @Component({
   moduleId: module.id,
-  selector: 'main',
+  selector: 'test-main',
   template: `
       <h1 style="height:50px">Main Component</h1>
       <div id = 'username'>Hello {{username}} from Angular 2!</div>
@@ -24,11 +24,11 @@ import {
       <div id = 'counter'>{{counter}}</div>
       <label>AsyncCounter:</label>
       <div id = 'asyncCounter'>{{asyncCounter}}</div>
-      <input [(ngModel)]='input' placeholder='' id = 'input'>
+      <input [(ngModel)]='input' placeholder='' id = 'input' aria-label="input">
       <div id = 'value'>Input:{{input}}</div>
-      <textarea id = 'memo'>{{memo}}</textarea>
-      <sub title = 'test tools' [items] = testTools></sub>
-      <sub title = 'test methods' [items] = testMethods></sub>
+      <textarea id = 'memo' aria-label="memo">{{memo}}</textarea>
+      <test-sub title = 'test tools' [items] = testTools></test-sub>
+      <test-sub title = 'test methods' [items] = testMethods></test-sub>
       `,
   host: {
     '[class.hovering]': '_isHovering',
@@ -39,7 +39,7 @@ import {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 
-export class MainComponent {
+export class TestMainComponent {
   username: string;
   counter: number;
   asyncCounter: number;

src/cdk-experimental/testing/test-app/test-app.ts

@@ -10,7 +10,7 @@ import {ChangeDetectionStrategy, Component, Input, ViewEncapsulation} from '@ang
 
 @Component({
   moduleId: module.id,
-  selector: 'sub',
+  selector: 'test-sub',
   template: `
       <h2>List of {{title}}</h2>
       <ul>
@@ -19,7 +19,7 @@ import {ChangeDetectionStrategy, Component, Input, ViewEncapsulation} from '@ang
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class SubComponent {
+export class TestSubComponent {
   // TODO: remove '!'.
   @Input() title!: string;
   // TODO: remove '!'.