From 9f13740af3494ba3f0b120a0f9e926680a31198c Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Wed, 29 Apr 2020 14:37:21 -0700 Subject: [PATCH 1/4] fix(cdk/testing): Make harnesses click on the center of the element by default This is Protractor's default behavior. Prior to this PR we had been clicking the top-left corner, but that didn't trigger the click event in Protractor. --- .../testing/protractor/protractor-element.ts | 2 +- src/cdk/testing/testbed/unit-test-element.ts | 2 +- src/material/button/testing/BUILD.bazel | 26 +++++++++++++++++-- .../button/testing/button-harness.e2e.spec.ts | 17 ++++++++++++ 4 files changed, 43 insertions(+), 4 deletions(-) create mode 100644 src/material/button/testing/button-harness.e2e.spec.ts diff --git a/src/cdk/testing/protractor/protractor-element.ts b/src/cdk/testing/protractor/protractor-element.ts index 4c4f70c489ec..ad74c1de0c89 100644 --- a/src/cdk/testing/protractor/protractor-element.ts +++ b/src/cdk/testing/protractor/protractor-element.ts @@ -73,7 +73,7 @@ export class ProtractorElement implements TestElement { return this.element.clear(); } - async click(relativeX = 0, relativeY = 0): Promise { + async click(relativeX = 1, relativeY = 1): Promise { await browser.actions() .mouseMove(await this.element.getWebElement(), {x: relativeX, y: relativeY}) .click() diff --git a/src/cdk/testing/testbed/unit-test-element.ts b/src/cdk/testing/testbed/unit-test-element.ts index 976d4b32e4f1..0cf5bc46c41f 100644 --- a/src/cdk/testing/testbed/unit-test-element.ts +++ b/src/cdk/testing/testbed/unit-test-element.ts @@ -71,7 +71,7 @@ export class UnitTestElement implements TestElement { await this._stabilize(); } - async click(relativeX = 0, relativeY = 0): Promise { + async click(relativeX = 1, relativeY = 1): Promise { await this._stabilize(); const {left, top} = this.element.getBoundingClientRect(); // Round the computed click position as decimal pixels are not diff --git a/src/material/button/testing/BUILD.bazel b/src/material/button/testing/BUILD.bazel index ac0af333015b..9ad59514f19a 100644 --- a/src/material/button/testing/BUILD.bazel +++ b/src/material/button/testing/BUILD.bazel @@ -1,4 +1,5 @@ -load("//tools:defaults.bzl", "ng_test_library", "ng_web_test_suite", "ts_library") +load("//src/e2e-app:test_suite.bzl", "e2e_test_suite") +load("//tools:defaults.bzl", "ng_e2e_test_library", "ng_test_library", "ng_web_test_suite", "ts_library") package(default_visibility = ["//visibility:public"]) @@ -38,7 +39,10 @@ ng_test_library( name = "unit_tests_lib", srcs = glob( ["**/*.spec.ts"], - exclude = ["shared.spec.ts"], + exclude = [ + "**/*.e2e.spec.ts", + "shared.spec.ts", + ], ), deps = [ ":harness_tests_lib", @@ -51,3 +55,21 @@ ng_web_test_suite( name = "unit_tests", deps = [":unit_tests_lib"], ) + +ng_e2e_test_library( + name = "e2e_test_sources", + srcs = glob(["**/*.e2e.spec.ts"]), + deps = [ + "//src/cdk/testing/private/e2e", + "//src/cdk/testing/protractor", + "//src/material/button/testing", + ], +) + +e2e_test_suite( + name = "e2e_tests", + deps = [ + ":e2e_test_sources", + "//src/cdk/testing/private/e2e", + ], +) diff --git a/src/material/button/testing/button-harness.e2e.spec.ts b/src/material/button/testing/button-harness.e2e.spec.ts new file mode 100644 index 000000000000..b811edc8cad3 --- /dev/null +++ b/src/material/button/testing/button-harness.e2e.spec.ts @@ -0,0 +1,17 @@ +import {ProtractorHarnessEnvironment} from '@angular/cdk/testing/protractor'; +import {MatButtonHarness} from '@angular/material/button/testing/button-harness'; +import {browser} from 'protractor'; + +describe('button harness', () => { + beforeEach(async () => await browser.get('/button')); + + it('can click button', async () => { + const loader = ProtractorHarnessEnvironment.loader(); + const disableToggle = await loader.getHarness(MatButtonHarness.with({text: 'Disable buttons'})); + const testButton = await loader.getHarness(MatButtonHarness.with({selector: '#test-button'})); + + expect(await testButton.isDisabled()).toBe(false); + await disableToggle.click(); + expect(await testButton.isDisabled()).toBe(true); + }); +}); From 2f7a5ff1468afba2d7835297ddd485804fdad9f3 Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Thu, 30 Apr 2020 13:46:50 -0700 Subject: [PATCH 2/4] address feedback --- src/cdk/testing/protractor/protractor-element.ts | 5 +++-- src/cdk/testing/test-element.ts | 7 +++++-- src/cdk/testing/testbed/unit-test-element.ts | 8 +++++--- src/material/button/testing/button-harness.e2e.spec.ts | 2 +- 4 files changed, 14 insertions(+), 8 deletions(-) diff --git a/src/cdk/testing/protractor/protractor-element.ts b/src/cdk/testing/protractor/protractor-element.ts index ad74c1de0c89..4662b0b0b2e7 100644 --- a/src/cdk/testing/protractor/protractor-element.ts +++ b/src/cdk/testing/protractor/protractor-element.ts @@ -73,9 +73,10 @@ export class ProtractorElement implements TestElement { return this.element.clear(); } - async click(relativeX = 1, relativeY = 1): Promise { + async click(...args: number[]): Promise { + const offsetArgs = args.length ? [{x: args[0], y: args[1]}] : []; await browser.actions() - .mouseMove(await this.element.getWebElement(), {x: relativeX, y: relativeY}) + .mouseMove(await this.element.getWebElement(), ...offsetArgs) .click() .perform(); } diff --git a/src/cdk/testing/test-element.ts b/src/cdk/testing/test-element.ts index 56ad7be4e732..eef0b3ca34e9 100644 --- a/src/cdk/testing/test-element.ts +++ b/src/cdk/testing/test-element.ts @@ -67,12 +67,15 @@ export interface TestElement { /** Clear the element's input (for input and textarea elements only). */ clear(): Promise; + /** Click the element at the element's center. */ + click(): Promise; + /** - * Click the element. + * Click the element at the specified coordinates relative to the top-left of the element. * @param relativeX Coordinate within the element, along the X-axis at which to click. * @param relativeY Coordinate within the element, along the Y-axis at which to click. */ - click(relativeX?: number, relativeY?: number): Promise; + click(relativeX: number, relativeY: number): Promise; /** Focus the element. */ focus(): Promise; diff --git a/src/cdk/testing/testbed/unit-test-element.ts b/src/cdk/testing/testbed/unit-test-element.ts index 0cf5bc46c41f..eea12805b349 100644 --- a/src/cdk/testing/testbed/unit-test-element.ts +++ b/src/cdk/testing/testbed/unit-test-element.ts @@ -71,9 +71,11 @@ export class UnitTestElement implements TestElement { await this._stabilize(); } - async click(relativeX = 1, relativeY = 1): Promise { - await this._stabilize(); - const {left, top} = this.element.getBoundingClientRect(); + async click(...args: number[]): Promise { + const {left, top, width, height} = await this.getDimensions(); + const relativeX = args.length ? args[0] : width / 2; + const relativeY = args.length ? args[1] : height / 2; + // Round the computed click position as decimal pixels are not // supported by mouse events and could lead to unexpected results. const clientX = Math.round(left + relativeX); diff --git a/src/material/button/testing/button-harness.e2e.spec.ts b/src/material/button/testing/button-harness.e2e.spec.ts index b811edc8cad3..ef61130d13a5 100644 --- a/src/material/button/testing/button-harness.e2e.spec.ts +++ b/src/material/button/testing/button-harness.e2e.spec.ts @@ -1,5 +1,5 @@ import {ProtractorHarnessEnvironment} from '@angular/cdk/testing/protractor'; -import {MatButtonHarness} from '@angular/material/button/testing/button-harness'; +import {MatButtonHarness} from '@angular/material/button/testing'; import {browser} from 'protractor'; describe('button harness', () => { From f6f1fd467caa72d8b9c0e9473ce611186b3de52a Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Thu, 30 Apr 2020 14:02:04 -0700 Subject: [PATCH 3/4] clarifying comment --- src/cdk/testing/protractor/protractor-element.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/cdk/testing/protractor/protractor-element.ts b/src/cdk/testing/protractor/protractor-element.ts index 4662b0b0b2e7..75bea77b5044 100644 --- a/src/cdk/testing/protractor/protractor-element.ts +++ b/src/cdk/testing/protractor/protractor-element.ts @@ -74,7 +74,11 @@ export class ProtractorElement implements TestElement { } async click(...args: number[]): Promise { + // Omitting the offset argument to mouseMove results in clicking the center. + // This is the default behavior we want, so we use an empty array of offsetArgs if no args are + // passed to this method. const offsetArgs = args.length ? [{x: args[0], y: args[1]}] : []; + await browser.actions() .mouseMove(await this.element.getWebElement(), ...offsetArgs) .click() From 0d36a0cdde77b1112c69a25b36a863cf3d75d957 Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Thu, 30 Apr 2020 14:03:46 -0700 Subject: [PATCH 4/4] update api goldens --- tools/public_api_guard/cdk/testing.d.ts | 3 ++- tools/public_api_guard/cdk/testing/protractor.d.ts | 2 +- tools/public_api_guard/cdk/testing/testbed.d.ts | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/tools/public_api_guard/cdk/testing.d.ts b/tools/public_api_guard/cdk/testing.d.ts index 22ca48b285b4..c353c3fce6b1 100644 --- a/tools/public_api_guard/cdk/testing.d.ts +++ b/tools/public_api_guard/cdk/testing.d.ts @@ -107,7 +107,8 @@ export interface ModifierKeys { export interface TestElement { blur(): Promise; clear(): Promise; - click(relativeX?: number, relativeY?: number): Promise; + click(): Promise; + click(relativeX: number, relativeY: number): Promise; focus(): Promise; getAttribute(name: string): Promise; getCssValue(property: string): Promise; diff --git a/tools/public_api_guard/cdk/testing/protractor.d.ts b/tools/public_api_guard/cdk/testing/protractor.d.ts index 0761944d3d74..b142d71a1530 100644 --- a/tools/public_api_guard/cdk/testing/protractor.d.ts +++ b/tools/public_api_guard/cdk/testing/protractor.d.ts @@ -3,7 +3,7 @@ export declare class ProtractorElement implements TestElement { constructor(element: ElementFinder); blur(): Promise; clear(): Promise; - click(relativeX?: number, relativeY?: number): Promise; + click(...args: number[]): Promise; focus(): Promise; getAttribute(name: string): Promise; getCssValue(property: string): Promise; diff --git a/tools/public_api_guard/cdk/testing/testbed.d.ts b/tools/public_api_guard/cdk/testing/testbed.d.ts index a44594f0b0ef..d807e1ff6669 100644 --- a/tools/public_api_guard/cdk/testing/testbed.d.ts +++ b/tools/public_api_guard/cdk/testing/testbed.d.ts @@ -20,7 +20,7 @@ export declare class UnitTestElement implements TestElement { constructor(element: Element, _stabilize: () => Promise); blur(): Promise; clear(): Promise; - click(relativeX?: number, relativeY?: number): Promise; + click(...args: number[]): Promise; focus(): Promise; getAttribute(name: string): Promise; getCssValue(property: string): Promise;