docs(upgrade): add API docs for downgradeModule() (#18487) (#18487)

PR Close #18487

PR Close #18487

packages/examples/upgrade/static/ts/lite/e2e_test/e2e_util.ts

@@ -0,0 +1,64 @@
+/**
+ * @license
+ * Copyright Google Inc. 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 {ElementFinder, by} from 'protractor';
+
+declare global {
+  namespace jasmine {
+  interface Matchers {
+    toBeAHero(): Promise<void>;
+    toHaveName(exectedName: string): Promise<void>;
+  }
+  }
+}
+
+const isTitleCased = (text: string) =>
+    text.split(/\s+/).every(word => word[0] === word[0].toUpperCase());
+
+export function addCustomMatchers() {
+  jasmine.addMatchers({
+    toBeAHero:
+        () => ({
+          compare(actualNg1Hero: ElementFinder | undefined) {
+            const getText = (selector: string) =>
+                actualNg1Hero !.element(by.css(selector)).getText();
+            const result = {
+              message: 'Expected undefined to be an `ng1Hero` ElementFinder.',
+              pass: !!actualNg1Hero &&
+                  Promise.all(['.title', 'h2', 'p'].map(getText) as PromiseLike<string>[])
+                      .then(([actualTitle, actualName, actualDescription]) => {
+                        const pass = (actualTitle === 'Super Hero') && isTitleCased(actualName) &&
+                            (actualDescription.length > 0);
+
+                        const actualHero =
+                            `Hero(${actualTitle}, ${actualName}, ${actualDescription})`;
+                        result.message =
+                            `Expected ${actualHero}'${pass ? ' not' : ''} to be a real hero.`;
+
+                        return pass;
+                      })
+            };
+            return result;
+          }
+        }),
+        toHaveName: () => ({
+          compare(actualNg1Hero: ElementFinder | undefined, expectedName: string) {
+            const result = {
+              message: 'Expected undefined to be an `ng1Hero` ElementFinder.',
+              pass: !!actualNg1Hero && actualNg1Hero.element(by.css('h2')).getText().then(actualName => {
+                const pass = actualName === expectedName;
+                result.message =
+                    `Expected Hero(${actualName})${pass ? ' not' : ''} to have name '${expectedName}'.`;
+                return pass;
+              })
+            };
+            return result;
+          }
+        }),
+  } as any);
+}

packages/examples/upgrade/static/ts/lite/e2e_test/static_lite_spec.ts

@@ -0,0 +1,89 @@
+/**
+ * @license
+ * Copyright Google Inc. 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 {ElementArrayFinder, ElementFinder, browser, by, element} from 'protractor';
+
+import {verifyNoBrowserErrors} from '../../../../../_common/e2e_util';
+import {addCustomMatchers} from './e2e_util';
+
+function loadPage() {
+  browser.rootEl = 'example-app';
+  browser.get('/upgrade/static/ts/lite/');
+}
+
+describe('upgrade/static (lite)', () => {
+  let showHideBtn: ElementFinder;
+  let ng2Heroes: ElementFinder;
+  let ng2HeroesHeader: ElementFinder;
+  let ng2HeroesExtra: ElementFinder;
+  let ng2HeroesAddBtn: ElementFinder;
+  let ng1Heroes: ElementArrayFinder;
+
+  const expectHeroes = (isShown: boolean, ng1HeroCount = 3, statusMessage = 'Ready') => {
+    // Verify the show/hide button text.
+    expect(showHideBtn.getText()).toBe(isShown ? 'Hide heroes' : 'Show heroes');
+
+    // Verify the `<ng2-heroes>` component.
+    expect(ng2Heroes.isPresent()).toBe(isShown);
+    if (isShown) {
+      expect(ng2HeroesHeader.getText()).toBe('Heroes');
+      expect(ng2HeroesExtra.getText()).toBe(`Status: ${statusMessage}`);
+    }
+
+    // Verify the `<ng1-hero>` components.
+    expect(ng1Heroes.count()).toBe(isShown ? ng1HeroCount : 0);
+    if (isShown) {
+      ng1Heroes.each(ng1Hero => expect(ng1Hero).toBeAHero());
+    }
+  };
+
+  beforeEach(() => {
+    showHideBtn = element(by.binding('toggleBtnText'));
+
+    ng2Heroes = element(by.css('.ng2-heroes'));
+    ng2HeroesHeader = ng2Heroes.element(by.css('h1'));
+    ng2HeroesExtra = ng2Heroes.element(by.css('.extra'));
+    ng2HeroesAddBtn = ng2Heroes.element(by.buttonText('Add Hero'));
+
+    ng1Heroes = element.all(by.css('.ng1-hero'));
+  });
+  beforeEach(addCustomMatchers);
+  beforeEach(loadPage);
+  afterEach(verifyNoBrowserErrors);
+
+  it('should initially not render the heroes', () => expectHeroes(false));
+
+  it('should toggle the heroes when clicking the "show/hide" button', () => {
+    showHideBtn.click();
+    expectHeroes(true);
+
+    showHideBtn.click();
+    expectHeroes(false);
+  });
+
+  it('should add a new hero when clicking the "add" button', () => {
+    showHideBtn.click();
+    ng2HeroesAddBtn.click();
+
+    expectHeroes(true, 4, 'Added hero Kamala Khan');
+    expect(ng1Heroes.last()).toHaveName('Kamala Khan');
+  });
+
+  it('should remove a hero when clicking its "remove" button', () => {
+    showHideBtn.click();
+
+    const firstHero = ng1Heroes.first();
+    expect(firstHero).toHaveName('Superman');
+
+    const removeBtn = firstHero.element(by.buttonText('Remove'));
+    removeBtn.click();
+
+    expectHeroes(true, 2, 'Removed hero Superman');
+    expect(ng1Heroes.first()).not.toHaveName('Superman');
+  });
+});