fix(autoclose): using each dropdown component inside OnPush component

ng-bootstrap · Jan 21, 2019 · 1b7614c · 1b7614c
1 parent 0c91b05
commit 1b7614c
Show file tree

Hide file tree

Showing 25 changed files with 269 additions and 165 deletions.
diff --git a/e2e-app/src/app/datepicker/autoclose/datepicker-autoclose.component.html b/e2e-app/src/app/datepicker/autoclose/datepicker-autoclose.component.html
@@ -1,8 +1,10 @@
-<h3>Datepicker autoclose tests</h3>
+<h3>
+  Datepicker autoclose tests
+  <span class="ml-1 badge {{d.isOpen() ? 'badge-success' : 'badge-danger'}}" id="open-status">{{d.isOpen() ? 'open' : 'closed'}}</span>
+</h3>
 
 <form id="default">
   <div class="form-group form-inline">
-
     <div class="input-group">
       <input class="form-control" name="dp" placeholder="yyyy-mm-dd" #d="ngbDatepicker" ngbDatepicker
              [autoClose]="autoClose" [(ngModel)]="model" [displayMonths]="displayMonths">

diff --git a/e2e-app/src/app/datepicker/autoclose/datepicker-autoclose.component.ts b/e2e-app/src/app/datepicker/autoclose/datepicker-autoclose.component.ts
@@ -1,6 +1,6 @@
-import {Component} from '@angular/core';
+import {Component, ChangeDetectionStrategy} from '@angular/core';
 
-@Component({templateUrl: './datepicker-autoclose.component.html'})
+@Component({templateUrl: './datepicker-autoclose.component.html', changeDetection: ChangeDetectionStrategy.OnPush})
 export class DatepickerAutoCloseComponent {
   autoClose: boolean | 'inside' | 'outside' = true;
   model = null;

diff --git a/e2e-app/src/app/datepicker/autoclose/datepicker-autoclose.e2e-spec.ts b/e2e-app/src/app/datepicker/autoclose/datepicker-autoclose.e2e-spec.ts
@@ -7,6 +7,26 @@ describe('Datepicker Autoclose', () => {
 
   beforeAll(() => page = new DatepickerAutoClosePage());
 
+  const expectDatepickerToBeOpen = async(message: string) => {
+    expect(await page.getDatepicker().isPresent()).toBeTruthy(message);
+    expect(await page.getOpenStatus().getText()).toBe('open', message);
+  };
+
+  const expectDatepickerToBeClosed = async(message: string) => {
+    expect(await page.getDatepicker().isPresent()).toBeFalsy(message);
+    expect(await page.getOpenStatus().getText()).toBe('closed', message);
+  };
+
+  const openDatepicker = async(message: string) => {
+    await page.openDatepicker();
+    await expectDatepickerToBeOpen(message);
+  };
+
+  const closeDatepicker = async(message: string) => {
+    await page.closeDatepicker();
+    await expectDatepickerToBeClosed(message);
+  };
+
   for (let displayMonths of[1, 2]) {
     describe(`displayMonths = ${displayMonths}`, () => {
 
@@ -23,117 +43,113 @@ describe('Datepicker Autoclose', () => {
         await page.selectAutoClose('true');
 
         // escape
-        await page.openDatepicker();
+        await openDatepicker(`Opening datepicker for escape`);
         await sendKey(Key.ESCAPE);
-        expect(await page.getDatepicker().isPresent()).toBeFalsy(`Datepicker should be closed on ESC`);
+        await expectDatepickerToBeClosed(`Datepicker should be closed on ESC`);
 
         // outside click
-        await page.openDatepicker();
+        await openDatepicker(`Opening datepicker for outside click`);
         await page.clickOutside();
-        expect(await page.getDatepicker().isPresent()).toBeFalsy(`Datepicker should be closed on outside click`);
+        await expectDatepickerToBeClosed(`Datepicker should be closed on outside click`);
 
         // date selection
-        await page.openDatepicker();
+        await openDatepicker(`Opening datepicker for date selection`);
         await page.getDayElement(DATE_SELECT).click();
-        expect(await page.getDatepicker().isPresent()).toBeFalsy(`Datepicker should be closed on date selection`);
+        await expectDatepickerToBeClosed(`Datepicker should be closed on date selection`);
 
         // outside days click -> month before
-        await page.openDatepicker();
+        await openDatepicker(`Opening datepicker for outside days click -> month before`);
         await page.getDayElement(DATE_OUTSIDE_BEFORE).click();
-        expect(await page.getDatepicker().isPresent()).toBeFalsy(`Datepicker should be closed on outside day click`);
+        await expectDatepickerToBeClosed(`Datepicker should be closed on outside day click`);
 
         // outside days click -> month after
-        await page.openDatepicker();
+        await openDatepicker(`Opening datepicker for outside days click -> month after`);
         await page.getDayElement(DATE_OUTSIDE_AFTER).click();
-        expect(await page.getDatepicker().isPresent()).toBeFalsy(`Datepicker should be closed on outside day click`);
+        await expectDatepickerToBeClosed(`Datepicker should be closed on outside day click`);
       });
 
       it(`should work when autoClose === false`, async() => {
         await page.selectAutoClose('false');
 
         // escape
-        await page.openDatepicker();
+        await openDatepicker(`Opening datepicker`);
         await sendKey(Key.ESCAPE);
-        expect(await page.getDatepicker().isPresent()).toBeTruthy(`Datepicker should NOT be closed on ESC`);
+        await expectDatepickerToBeOpen(`Datepicker should NOT be closed on ESC`);
 
         // outside click
         await page.clickOutside();
-        expect(await page.getDatepicker().isPresent()).toBeTruthy(`Datepicker should NOT be closed on outside click`);
+        await expectDatepickerToBeOpen(`Datepicker should NOT be closed on outside click`);
 
         // date selection
         await page.getDayElement(DATE_SELECT).click();
-        expect(await page.getDatepicker().isPresent()).toBeTruthy(`Datepicker should NOT be closed on date selection`);
+        await expectDatepickerToBeOpen(`Datepicker should NOT be closed on date selection`);
 
         // outside days click -> month before
         await page.getDayElement(DATE_OUTSIDE_BEFORE).click();
-        expect(await page.getDatepicker().isPresent())
-            .toBeTruthy(`Datepicker should NOT be closed on outside day click`);
+        await expectDatepickerToBeOpen(`Datepicker should NOT be closed on outside day click`);
 
         // outside days click -> month after
-        await page.closeDatepicker();
-        await page.openDatepicker();  // to reset visible month
+        await closeDatepicker(`Closing datepicker`);
+        await openDatepicker(`Reopening datepicker`);  // to reset visible month
         await page.getDayElement(DATE_OUTSIDE_AFTER).click();
-        expect(await page.getDatepicker().isPresent())
-            .toBeTruthy(`Datepicker should NOT be closed on outside day click`);
+        await expectDatepickerToBeOpen(`Datepicker should NOT be closed on outside day click`);
       });
 
       it(`should work when autoClose === 'outside'`, async() => {
         await page.selectAutoClose('outside');
 
         // escape
-        await page.openDatepicker();
+        await openDatepicker(`Opening datepicker for escape`);
         await sendKey(Key.ESCAPE);
-        expect(await page.getDatepicker().isPresent()).toBeFalsy(`Datepicker should be closed on ESC`);
+        await expectDatepickerToBeClosed(`Datepicker should be closed on ESC`);
 
         // outside click
-        await page.openDatepicker();
+        await openDatepicker(`Opening datepicker for outside click`);
         await page.clickOutside();
-        expect(await page.getDatepicker().isPresent()).toBeFalsy(`Datepicker should be closed on outside click`);
+        await expectDatepickerToBeClosed(`Datepicker should be closed on outside click`);
 
         // date selection
-        await page.openDatepicker();
+        await openDatepicker(`Opening datepicker for date selection`);
         await page.getDayElement(DATE_SELECT).click();
-        expect(await page.getDatepicker().isPresent()).toBeTruthy(`Datepicker should NOT be closed on date selection`);
+        await expectDatepickerToBeOpen(`Datepicker should NOT be closed on date selection`);
 
         // outside days click -> month before
         await page.getDayElement(DATE_OUTSIDE_BEFORE).click();
-        expect(await page.getDatepicker().isPresent())
-            .toBeTruthy(`Datepicker should NOT be closed on outside day click`);
+        await expectDatepickerToBeOpen(`Datepicker should NOT be closed on outside day click`);
 
         // outside days click -> month after
-        await page.closeDatepicker();
-        await page.openDatepicker();  // to reset visible month
+        await closeDatepicker(`Closing datepicker`);
+        await openDatepicker(`Reopening datepicker`);  // to reset visible month
         await page.getDayElement(DATE_OUTSIDE_AFTER).click();
-        expect(await page.getDatepicker().isPresent())
-            .toBeTruthy(`Datepicker should NOT be closed on outside day click`);
+        await expectDatepickerToBeOpen(`Datepicker should NOT be closed on outside day click`);
       });
 
       it(`should work when autoClose === 'inside'`, async() => {
         await page.selectAutoClose('inside');
 
         // escape
-        await page.openDatepicker();
+        await openDatepicker(`Opening datepicker for escape`);
         await sendKey(Key.ESCAPE);
-        expect(await page.getDatepicker().isPresent()).toBeFalsy(`Datepicker should be closed on ESC`);
+        await expectDatepickerToBeClosed(`Datepicker should be closed on ESC`);
 
         // outside click
-        await page.openDatepicker();
+        await openDatepicker(`Opening datepicker for outside click`);
         await page.clickOutside();
-        expect(await page.getDatepicker().isPresent()).toBeTruthy(`Datepicker should NOT be closed on outside click`);
+        await expectDatepickerToBeOpen(`Datepicker should NOT be closed on outside click`);
 
         // date selection
         await page.getDayElement(DATE_SELECT).click();
-        expect(await page.getDatepicker().isPresent()).toBeFalsy(`Datepicker should be closed on date selection`);
+        await expectDatepickerToBeClosed(`Datepicker should be closed on date selection`);
 
         // outside days click -> month before
-        await page.openDatepicker();
+        await openDatepicker(`Opening datepicker for outside days click -> month before`);
         await page.getDayElement(DATE_OUTSIDE_BEFORE).click();
-        expect(await page.getDatepicker().isPresent()).toBeFalsy(`Datepicker should be closed on outside day click`);
+        await expectDatepickerToBeClosed(`Datepicker should be closed on outside day click`);
 
         // outside days click -> month after
-        await page.openDatepicker();
+        await openDatepicker(`Opening datepicker for outside days click -> month after`);
         await page.getDayElement(DATE_OUTSIDE_AFTER).click();
-        expect(await page.getDatepicker().isPresent()).toBeFalsy(`Datepicker should be closed on outside day click`);
+        await expectDatepickerToBeClosed(`Datepicker should be closed on outside day click`);
       });
     });
   }

diff --git a/e2e-app/src/app/datepicker/autoclose/datepicker-autoclose.po.ts b/e2e-app/src/app/datepicker/autoclose/datepicker-autoclose.po.ts
@@ -2,6 +2,8 @@ import {$} from 'protractor';
 import {DatepickerPage} from '../datepicker.po';
 
 export class DatepickerAutoClosePage extends DatepickerPage {
+  getOpenStatus() { return $('#open-status'); }
+
   async closeDatepicker() { await $('#close').click(); }
 
   async clickOutside() { await $('#outside-button').click(); }

diff --git a/e2e-app/src/app/dropdown/autoclose/dropdown-autoclose.component.html b/e2e-app/src/app/dropdown/autoclose/dropdown-autoclose.component.html
@@ -1,9 +1,12 @@
-<h3>Dropdown autoclose tests</h3>
+<h3>
+  Dropdown autoclose tests
+  <span class="ml-1 badge {{d.isOpen() ? 'badge-success' : 'badge-danger'}}" id="open-status">{{d.isOpen() ? 'open' : 'closed'}}</span>
+</h3>
 
 <form id="default">
   <div class="form-group form-inline">
 
-    <div id="dropdown"ngbDropdown class="d-inline-block" [autoClose]="autoClose">
+    <div id="dropdown" #d="ngbDropdown" ngbDropdown class="d-inline-block" [autoClose]="autoClose">
       <button class="btn btn-outline-secondary" ngbDropdownToggle>Dropdown</button>
       <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
         <button class="dropdown-item">Item</button>

diff --git a/e2e-app/src/app/dropdown/autoclose/dropdown-autoclose.component.ts b/e2e-app/src/app/dropdown/autoclose/dropdown-autoclose.component.ts
@@ -1,6 +1,6 @@
-import {Component} from '@angular/core';
+import {Component, ChangeDetectionStrategy} from '@angular/core';
 
-@Component({templateUrl: './dropdown-autoclose.component.html'})
+@Component({templateUrl: './dropdown-autoclose.component.html', changeDetection: ChangeDetectionStrategy.OnPush})
 export class DropdownAutoCloseComponent {
   autoClose: boolean | 'inside' | 'outside' = true;
 }
diff --git a/e2e-app/src/app/dropdown/autoclose/dropdown-autoclose.e2e-spec.ts b/e2e-app/src/app/dropdown/autoclose/dropdown-autoclose.e2e-spec.ts
@@ -1,10 +1,25 @@
-import {Key} from 'protractor';
+import {Key, ElementFinder} from 'protractor';
 import {sendKey, openUrl} from '../../tools.po';
 import {DropdownAutoClosePage} from './dropdown-autoclose.po';
 
 describe('Dropdown Autoclose', () => {
   let page: DropdownAutoClosePage;
 
+  const expectDropdownToBeVisible = async(dropdown: ElementFinder, message: string) => {
+    expect(await page.isOpened(dropdown)).toBeTruthy(message);
+    expect(await page.getOpenStatus().getText()).toBe('open', message);
+  };
+
+  const expectDropdownToBeHidden = async(dropdown: ElementFinder, message: string) => {
+    expect(await page.isOpened(dropdown)).toBeFalsy(message);
+    expect(await page.getOpenStatus().getText()).toBe('closed', message);
+  };
+
+  const openDropdown = async(dropdown: ElementFinder, message: string) => {
+    await page.open(dropdown);
+    await expectDropdownToBeVisible(dropdown, message);
+  };
+
   beforeAll(() => page = new DropdownAutoClosePage());
 
   beforeEach(async() => await openUrl('dropdown/autoclose'));
@@ -14,75 +29,75 @@ describe('Dropdown Autoclose', () => {
     const dropdown = page.getDropdown('#dropdown');
 
     // escape
-    await page.open(dropdown);
+    await openDropdown(dropdown, `Opening dropdown for escape`);
     await sendKey(Key.ESCAPE);
-    expect(await page.isOpened(dropdown)).toBeFalsy(`Dropdown should be closed on ESC`);
+    await expectDropdownToBeHidden(dropdown, `Dropdown should be closed on ESC`);
 
     // outside click
-    await page.open(dropdown);
+    await openDropdown(dropdown, `Opening dropdown for outside click`);
     await page.clickOutside();
-    expect(await page.isOpened(dropdown)).toBeFalsy(`Dropdown should be closed on outside click`);
+    await expectDropdownToBeHidden(dropdown, `Dropdown should be closed on outside click`);
 
     // inside click
-    await page.open(dropdown);
+    await openDropdown(dropdown, `Opening dropdown for inside click`);
     await page.getFirstItem(dropdown).click();
-    expect(await page.isOpened(dropdown)).toBeFalsy(`Dropdown should be closed on date selection`);
+    await expectDropdownToBeHidden(dropdown, `Dropdown should be closed on inside click`);
   });
 
   it(`should work when autoClose === false`, async() => {
     await page.selectAutoClose('false');
     const dropdown = page.getDropdown('#dropdown');
 
     // escape
-    await page.open(dropdown);
+    await openDropdown(dropdown, `Opening dropdown for escape`);
     await sendKey(Key.ESCAPE);
-    expect(await page.isOpened(dropdown)).toBeTruthy(`Dropdown should NOT be closed on ESC`);
+    await expectDropdownToBeVisible(dropdown, `Dropdown should NOT be closed on ESC`);
 
     // outside click
     await page.clickOutside();
-    expect(await page.isOpened(dropdown)).toBeTruthy(`Dropdown should NOT be closed on outside click`);
+    await expectDropdownToBeVisible(dropdown, `Dropdown should NOT be closed on outside click`);
 
     // inside click
     await page.getFirstItem(dropdown).click();
-    expect(await page.isOpened(dropdown)).toBeTruthy(`Dropdown should NOT be closed on date selection`);
+    await expectDropdownToBeVisible(dropdown, `Dropdown should NOT be closed on inside click`);
   });
 
   it(`should work when autoClose === 'outside'`, async() => {
     await page.selectAutoClose('outside');
     const dropdown = page.getDropdown('#dropdown');
 
     // escape
-    await page.open(dropdown);
+    await openDropdown(dropdown, `Opening dropdown for escape`);
     await sendKey(Key.ESCAPE);
-    expect(await page.isOpened(dropdown)).toBeFalsy(`Dropdown should be closed on ESC`);
+    await expectDropdownToBeHidden(dropdown, `Dropdown should be closed on ESC`);
 
     // outside click
-    await page.open(dropdown);
+    await openDropdown(dropdown, `Opening dropdown for outside click`);
     await page.clickOutside();
-    expect(await page.isOpened(dropdown)).toBeFalsy(`Dropdown should be closed on outside click`);
+    await expectDropdownToBeHidden(dropdown, `Dropdown should be closed on outside click`);
 
-    // date selection
-    await page.open(dropdown);
+    // inside click
+    await openDropdown(dropdown, `Opening dropdown for inside click`);
     await page.getFirstItem(dropdown).click();
-    expect(await page.isOpened(dropdown)).toBeTruthy(`Dropdown should NOT be closed on date selection`);
+    await expectDropdownToBeVisible(dropdown, `Dropdown should NOT be closed on inside click`);
   });
 
   it(`should work when autoClose === 'inside'`, async() => {
     await page.selectAutoClose('inside');
     const dropdown = page.getDropdown('#dropdown');
 
     // escape
-    await page.open(dropdown);
+    await openDropdown(dropdown, `Opening dropdown for escape`);
     await sendKey(Key.ESCAPE);
-    expect(await page.isOpened(dropdown)).toBeFalsy(`Dropdown should be closed on ESC`);
+    await expectDropdownToBeHidden(dropdown, `Dropdown should be closed on ESC`);
 
     // outside click
-    await page.open(dropdown);
+    await openDropdown(dropdown, `Opening dropdown for outside click`);
     await page.clickOutside();
-    expect(await page.isOpened(dropdown)).toBeTruthy(`Dropdown should NOT be closed on outside click`);
+    await expectDropdownToBeVisible(dropdown, `Dropdown should NOT be closed on outside click`);
 
-    // date selection
+    // inside click
     await page.getFirstItem(dropdown).click();
-    expect(await page.isOpened(dropdown)).toBeFalsy(`Dropdown should be closed on date selection`);
+    await expectDropdownToBeHidden(dropdown, `Dropdown should be closed on inside click`);
   });
 });
diff --git a/e2e-app/src/app/dropdown/autoclose/dropdown-autoclose.po.ts b/e2e-app/src/app/dropdown/autoclose/dropdown-autoclose.po.ts
@@ -7,6 +7,8 @@ export class DropdownAutoClosePage {
 
   getFirstItem(dropdown: ElementFinder) { return dropdown.$$(`.dropdown-item`).first(); }
 
+  getOpenStatus() { return $('#open-status'); }
+
   async open(dropdown: ElementFinder) {
     await dropdown.$(`button[ngbDropdownToggle]`).click();
     expect(await this.isOpened(dropdown)).toBeTruthy(`Dropdown should have been opened`);

diff --git a/e2e-app/src/app/popover/autoclose/popover-autoclose.component.html b/e2e-app/src/app/popover/autoclose/popover-autoclose.component.html
@@ -1,9 +1,12 @@
-<h3>Popover autoclose tests</h3>
+<h3>
+  Popover autoclose tests
+  <span class="ml-1 badge {{d.isOpen() ? 'badge-success' : 'badge-danger'}}" id="open-status">{{d.isOpen() ? 'open' : 'closed'}}</span>
+</h3>
 
 <form id="default">
   <div class="form-group form-inline">
 
-    <button ngbPopover="Popover here" [autoClose]="autoClose" triggers="click" type="button" class="btn btn-outline-secondary ml-2">
+    <button #d="ngbPopover" ngbPopover="Popover here" [autoClose]="autoClose" triggers="click" type="button" class="btn btn-outline-secondary ml-2">
       Popover
     </button>
 

diff --git a/e2e-app/src/app/popover/autoclose/popover-autoclose.component.ts b/e2e-app/src/app/popover/autoclose/popover-autoclose.component.ts
@@ -1,6 +1,6 @@
-import {Component} from '@angular/core';
+import {Component, ChangeDetectionStrategy} from '@angular/core';
 
-@Component({templateUrl: './popover-autoclose.component.html'})
+@Component({templateUrl: './popover-autoclose.component.html', changeDetection: ChangeDetectionStrategy.OnPush})
 export class PopoverAutocloseComponent {
   autoClose: boolean | 'inside' | 'outside' = true;
 }