test(material-experimental/mdc-radio): add e2e tests (#19932)

* test(material-experimental/mdc-radio): add e2e tests

* lint

Author: andrewseguin

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

@@ -1 +1,12 @@
-<!-- TODO: copy implementation from existing mat-radio e2e page. -->
+<section>
+  <mat-radio-group [disabled]="isGroupDisabled"
+                   [value]="groupValue"
+                   id="test-group" aria-label="Select a Pokemon">
+
+    <mat-radio-button value="fire" id="fire">Charmander</mat-radio-button>
+    <mat-radio-button value="water" id="water">Squirtle</mat-radio-button>
+    <mat-radio-button value="leaf" id="leaf">Bulbasaur</mat-radio-button>
+
+  </mat-radio-group>
+  <button (click)="isGroupDisabled=!isGroupDisabled" id="toggle-disable">Disable/enable group</button>
+</section>

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

@@ -13,5 +13,6 @@ import {Component} from '@angular/core';
   templateUrl: 'mdc-radio-e2e.html',
 })
 export class MdcRadioE2e {
-  // TODO: copy implementation from existing mat-radio e2e page.
+  isGroupDisabled: boolean = false;
+  groupValue: string;
 }

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

@@ -1,5 +1,7 @@
+load("//src/e2e-app:test_suite.bzl", "e2e_test_suite")
 load(
     "//tools:defaults.bzl",
+    "ng_e2e_test_library",
     "ng_module",
     "ng_test_library",
     "ng_web_test_suite",
@@ -80,3 +82,19 @@ ng_web_test_suite(
         "//src/material-experimental:mdc_require_config.js",
     ],
 )
+
+ng_e2e_test_library(
+    name = "e2e_test_sources",
+    srcs = glob(["**/*.e2e.spec.ts"]),
+    deps = [
+        "//src/cdk/testing/private/e2e",
+    ],
+)
+
+e2e_test_suite(
+    name = "e2e_tests",
+    deps = [
+        ":e2e_test_sources",
+        "//src/cdk/testing/private/e2e",
+    ],
+)

src/material-experimental/mdc-radio/radio.e2e.spec.ts

@@ -1 +1,23 @@
-// TODO: copy tests from existing mat-radio, update as necessary to fix.
+import {browser, by, element} from 'protractor';
+
+
+describe('radio', () => {
+  describe('disabling behavior', () => {
+    beforeEach(async () => await browser.get('/mdc-radio'));
+
+    it('should be checked when clicked', async () => {
+      await element(by.id('water')).click();
+      expect(await element(by.css('input:checked')).getAttribute('value')).toBe('water');
+
+      await element(by.id('leaf')).click();
+      expect(await element(by.css('input:checked')).getAttribute('value')).toBe('leaf');
+    });
+
+    it('should be disabled when disable the radio group', async () => {
+      await element(by.id('toggle-disable')).click();
+      await element(by.id('water')).click();
+
+      expect(await element(by.css('input[id=water-input]')).getAttribute('disabled')).toBe('true');
+    });
+  });
+});