Merge branch 'development' of github.com:valor-software/ngx-bootstrap…

… into fix-tooltip-delay-disposal
valor-software · Feb 27, 2020 · ea2a31c · ea2a31c
2 parents 628a497 + c4f5236
commit ea2a31c
Show file tree

Hide file tree

Showing 220 changed files with 5,934 additions and 1,276 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -1,4 +1,4 @@
-# http://editorconfig.org
+# https://editorconfig.org
 
 root = true
 
@@ -8,4 +8,4 @@ indent_style = space
 indent_size = 2
 end_of_line = lf
 insert_final_newline = true
-trim_trailing_whitespace = true
+trim_trailing_whitespace = true
diff --git a/.travis.yml b/.travis.yml
@@ -146,7 +146,9 @@ jobs:
   - &surge
     stage: deploy
     script:
-    - if [[ "$NGV" == "ivy" ]]; then npm run demo.build:ivy; else npm run demo.build; fi
+    - if [[ "$NGV" == "ivy" ]]; then npm run demo.build:ivy; fi
+    - if [[ "$NGV" == "latest" ]]; then npm run demo.build:latest; fi
+    - if [[ "$NGV" != "latest"  &&  "$NGV" != "ivy" ]]; then npm run demo.build; fi
     deploy:
       provider: surge
       project: ./gh-pages/

diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/angular.json b/angular.json
@@ -111,7 +111,7 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "scripts/test.ts",
+            "main": "scripts/test-demo.ts",
             "karmaConfig": "karma-demo.conf.js",
             "polyfills": "demo/src/polyfills.ts",
             "tsConfig": "src/tsconfig.spec.json",
@@ -151,6 +151,53 @@
           }
         }
       }
+    },
+    "ngx-bootstrap-source": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "library",
+      "architect": {
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "scripts/test-source.ts",
+            "karmaConfig": "karma-source.conf.js",
+            "polyfills": "demo/src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "codeCoverageExclude": ["dist/**/*"],
+            "sourceMap": false,
+            "scripts": [],
+            "styles": [
+              "src/datepicker/bs-datepicker.scss",
+              "demo/src/assets/css/style.scss",
+              "demo/src/assets/css/prettify-angulario.css"
+            ],
+            "assets": []
+          },
+          "configurations": {
+            "ivy": {
+              "tsConfig": "src/tsconfig-ivy.spec.json"
+            }
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "../tslint.json"
+            ],
+            "exclude": []
+          }
+        },
+        "server": {
+          "builder": "@angular-devkit/build-angular:server",
+          "options": {
+            "outputPath": "demo/dist/server",
+            "main": "demo/src/main.server.ts",
+            "tsConfig": "demo/src/tsconfig.server.json"
+          }
+        }
+      }
     }
   },
   "defaultProject": "ngx-bootstrap",

diff --git a/cypress/full/datepicker/config_method_spec.ts b/cypress/full/datepicker/config_method_spec.ts
@@ -40,14 +40,16 @@ describe('Datepicker demo test suite: Config method', () => {
   it(`when user clicks on "Set min date" button, then container opens,
                  when user click on date after 13 of June 2018 - then this date chosen and appear in the input`, () => {
     datepicker.clickOnDatepickerInput(configMethod);
-    datepicker.clearInputAndSendKeys(configMethod, '05/08/2018');
+    datepicker.clearInputAndSendKeys(configMethod, '05/09/2018');
     datepicker.clickEnterOnInput(configMethod);
     datepicker.isDatepickerOpened(false);
     datepicker.clickOnBtn(configMethod);
     datepicker.isDatepickerOpened(true);
     datepicker.isSelectedDateExist('datepicker', false, 'body');
-    datepicker.clickOnDatepickerTableItem('date', 'body', undefined, '14');
-    datepicker.clickEnterOnInput(configMethod);
-    datepicker.isSelectedDateExist('datepicker', true, 'body', '14');
+    datepicker.clickOnDatepickerTableItem('date', 'body', undefined, '16');
+    datepicker.isDatepickerOpened(false);
+    datepicker.clickOnBtn(configMethod);
+    datepicker.isDatepickerOpened(true);
+    datepicker.isSelectedDateExist('datepicker', true, 'body', '16');
   });
 });
diff --git a/cypress/full/datepicker/quick_select_ranges_spec.ts b/cypress/full/datepicker/quick_select_ranges_spec.ts
@@ -0,0 +1,42 @@
+import { DatepickerPo } from '../../support/datepicker.po';
+
+describe('Datepicker demo test suite: Quick-select-ranges', () => {
+  const datepicker = new DatepickerPo();
+  const quickSelectRange = datepicker.exampleDemosArr.quickSelectRange;
+
+  beforeEach(() => {
+    datepicker.navigateTo();
+    datepicker.scrollToMenu('Quick select ranges');
+  });
+
+  it(`example contains 1 input of Daterangepicker`, () => {
+    datepicker.isInputValueEqual(quickSelectRange, '');
+  });
+
+  it(`when user clicks on Daterangepicker input, then container opened and user see list of quick ranges to select`, () => {
+    datepicker.clickOnDaterangepickerInput(quickSelectRange);
+    datepicker.isDaterangepickerOpened(true);
+    datepicker.isDaterangePickerBodyExistAndCorrect('date');
+    datepicker.isQuickSelectRangesDisplayed();
+  });
+
+  it('when no date value is selected, then custom range button should be active', () => {
+    datepicker.clickOnDaterangepickerInput(quickSelectRange);
+    datepicker.isQuickSelectRangeButtonHighlighted(2);
+  });
+
+  it('when user clicks on a range from quick select list, that range is applied to datepicker', () => {
+    datepicker.clickOnDaterangepickerInput(quickSelectRange);
+    datepicker.isDaterangepickerOpened(true);
+    datepicker.isQuickSelectLastDaysApplied(quickSelectRange, 0);
+    datepicker.clickOnDaterangepickerInput(quickSelectRange);
+    datepicker.isQuickSelectLastDaysApplied(quickSelectRange, 1);
+  });
+
+  it('when user clicks on a range from quick select, then that button should be selected/highlighted', () => {
+    datepicker.clickOnDaterangepickerInput(quickSelectRange);
+    datepicker.clickOnQuickRangeBtn(0);
+    datepicker.clickOnDaterangepickerInput(quickSelectRange);
+    datepicker.isQuickSelectRangeButtonHighlighted(0);
+  });
+});
diff --git a/cypress/full/modals_service_page_spec.ts b/cypress/full/modals_service_page_spec.ts
@@ -133,8 +133,8 @@ describe('Modals demo page test suite: Service examples', () => {
     "onHide event has been fired" and "onHidden event has been fired"`, () => {
         modals.clickByText(eventsDemo, btnText);
         modals.isModalVisible(modals.modalContainer, true);
-        modals.clickOnBackdrop();
-        modals.clickOutside('modal-container');
+        modals.clickOnModalCorner('topLeft');
+        modals.clickOutside(modals.modalContainer);
         modals.isDemoContainsTxt(eventsDemo, demoOnHideFired);
         modals.isDemoContainsTxt(eventsDemo, demoHideDismissed);
         modals.isDemoContainsTxt(eventsDemo, demoHiddenDismissed);

diff --git a/cypress/full/popover_page_spec.ts b/cypress/full/popover_page_spec.ts
@@ -360,4 +360,24 @@ describe('Popover demo page test suite', () => {
       popover.isPopoverDismiss(popoverContext);
     });
   });
+
+  describe('Popover with delay', () => {
+    const delayPopover = popover.exampleDemosArr.delayPopover;
+    it('when user clicks on "Popover with 0.5sec delay", then popover-container appear', () => {
+      cy.viewport(1440, 900);
+      popover.clickOnDemoMenu('Popover with delay');
+      popover.clickOnBtn(delayPopover);
+      popover.isPopoverAppears(delayPopover);
+      popover.isPopoverVisible(delayPopover);
+    });
+
+    it('when user clicks on "Popover with 0.5sec delay" again, then popover-container disappeared', () => {
+      cy.viewport(1440, 900);
+      popover.clickOnDemoMenu('Popover with delay');
+      popover.clickOnBtn(delayPopover);
+      popover.isPopoverAppears(delayPopover);
+      popover.clickOnBtn(delayPopover);
+      popover.isPopoverDismiss(delayPopover);
+    });
+  });
 });
diff --git a/cypress/full/progressbar_page_spec.ts b/cypress/full/progressbar_page_spec.ts
@@ -25,7 +25,8 @@ export function checkDynamicProgressbar() {
   progressbar.isBarHaveAnimation(dynamic, false, 2);
 }
 
-describe('Progressbar demo page test suite', () => {
+// TODO: Tests are broken with Angular latest on Travis, need to investigate, excluded for now
+xdescribe('Progressbar demo page test suite', () => {
   const progressbar = new ProgressbarPo();
 
   beforeEach(() => progressbar.navigateTo());

diff --git a/cypress/full/typeahead_page_spec.ts b/cypress/full/typeahead_page_spec.ts
@@ -75,14 +75,14 @@ describe('Typeahead demo page test suite', () => {
       typeahead.isElementVisible(asyncData, typeahead.cardHeader);
       typeahead.isPreviewExist(asyncData, formTemplate);
       typeahead.isElementVisible(asyncData, typeahead.inputSelector);
-      typeahead.isInputHaveAttrs(asyncData, [{ attr: 'placeholder', value: 'Locations loaded with timeout' }]);
+      typeahead.isInputHaveAttrs(asyncData, [{ attr: 'placeholder', value: 'Locations loaded via observable' }]);
     });
 
-    it('when user starts to type a name of a State a drop-down with matches is shown, only 7 matches are shown',
+    it('when user starts to type a name of a State a drop-down with matches is shown, only 20 matches are shown',
       () => {
         typeahead.clearInputAndSendKeys(asyncData, 'a');
         typeahead.isElementVisible(asyncData, typeahead.activeDropdown);
-        typeahead.isDropdownHasNItems(typeahead.dropdownBtn, 7);
+        typeahead.isDropdownHasNItems(typeahead.dropdownBtn, 20);
       });
 
     it('when user clicks on any item in typeahead drop-down, then typeahead container auto-fills with a selected State',
@@ -436,7 +436,7 @@ describe('Typeahead demo page test suite', () => {
       typeahead.isElementVisible(scrollable, typeahead.inputSelector);
     });
 
-    it.only(`when there are any matches then a drop-down with a list of States matches is shown. user is able to scroll
+    it(`when there are any matches then a drop-down with a list of States matches is shown. user is able to scroll
       down/up to see the matches list`, () => {
       typeahead.clearInputAndSendKeys(scrollable, textToInput);
       typeahead.isElementVisible(scrollable, typeahead.activeDropdown);

diff --git a/cypress/integration/modals_page_spec.ts b/cypress/integration/modals_page_spec.ts
@@ -44,5 +44,11 @@ describe('Modals demo page test suite', () => {
       modals.isModalEnabled(modals.modalContainer, false);
       modals.isBackdropExist(false);
     });
+
+    it('when user starts to click on body then release click on backdrop then the modal is not closed', () => {
+      modals.clickByText(templateDemo, btnText);
+      modals.startClickOnModalReleaseOnBackdrop(modals.modalContainer);
+      modals.isModalVisible(modals.modalContainerVisible, true);
+    });
   });
 });
diff --git a/cypress/integration/progressbar_page_spec.ts b/cypress/integration/progressbar_page_spec.ts
@@ -8,7 +8,7 @@ describe('Progressbar demo page test suite', () => {
   describe('Static', () => {
     const staticBars = progressbar.exampleDemosArr.static;
 
-    it('User see 3 progressbars, 1 value matches config, 2 - "warning", 3 - "danger", animation', () => {
+    xit('User see 3 progressbars, 1 value matches config, 2 - "warning", 3 - "danger", animation', () => {
       progressbar.scrollToMenu('Static');
       progressbar.isProgressbarHaveAttrs(staticBars, [{ attr: 'max', value: '100' }], 0);
       progressbar.isProgressbarHaveAttrs(staticBars, [{ attr: 'type', value: 'warning' },

diff --git a/cypress/support/datepicker.po.ts b/cypress/support/datepicker.po.ts
@@ -1,5 +1,6 @@
 import { BaseComponent } from './base.component';
 import * as globalLocales from 'ngx-bootstrap/locale';
+import { getDate } from '../../src/chronos/utils/date-getters';
 
 export class DatepickerPo extends BaseComponent {
   pageUrl = '/datepicker';
@@ -15,6 +16,7 @@ export class DatepickerPo extends BaseComponent {
   datepickerBodyDaysView = 'bs-days-calendar-view';
   datepickerBodyMonthView = 'bs-month-calendar-view';
   datepickerBodyYearsView = 'bs-years-calendar-view';
+  daterangepickerQuickSelectContainer = 'bs-custom-date-view';
   monthNames = ['January', 'February', 'March', 'April', 'May', 'June',
     'July', 'August', 'September', 'October', 'November', 'December', 'January'];
   locales = [];
@@ -45,7 +47,8 @@ export class DatepickerPo extends BaseComponent {
     customTriggers: 'demo-datepicker-triggers-custom',
     selectWeek: 'demo-datepicker-select-week',
     inlineDatepicker: 'bs-datepicker-inline',
-    customTodayClass: 'demo-datepicker-custom-today-class'
+    customTodayClass: 'demo-datepicker-custom-today-class',
+    quickSelectRange: 'demo-datepicker-quick-select-ranges'
   };
 
   clickOnDatepickerInput(baseSelector: string, datepickerIndex = 0) {
@@ -87,6 +90,43 @@ export class DatepickerPo extends BaseComponent {
       .and('to.have.text', expectedValueRight);
   }
 
+  isQuickSelectRangesDisplayed(baseSelector = 'body'){
+    cy.get(this.daterangepickerQuickSelectContainer)
+      .find('button')
+      .as('DateRangePicker');
+    cy.get('@DateRangePicker').eq(0)
+      .should('be.visible')
+      .and('to.have.text', ' Last 7 Days ');
+    cy.get('@DateRangePicker').eq(1)
+      .should('be.visible')
+      .and('to.have.text', ' Next 7 Days ');
+    cy.get('@DateRangePicker').eq(2)
+      .should('be.visible')
+      .and('to.have.text', ' Custom Range ');
+  }
+
+  clickOnQuickRangeBtn(countOfBtn: number) {
+    cy.get(this.daterangepickerQuickSelectContainer).find('button').eq(countOfBtn).click();
+  }
+
+  isQuickSelectLastDaysApplied(datepicker: string, countOfBtn: number, baseSelector = 'body') {
+    const todayDate = Cypress.moment().format('l');
+    const previousDate = Cypress.moment().subtract(7, 'days').calendar();
+    const nextDate = Cypress.moment().add(7, 'days').calendar();
+
+    this.clickOnQuickRangeBtn(countOfBtn);
+    cy.get(`${baseSelector} ${datepicker} ${this.daterangepickerInput}`)
+      .should('contain.value', todayDate)
+      .should('contain.value', countOfBtn === 0 ? previousDate : nextDate);
+  }
+
+  isQuickSelectRangeButtonHighlighted(rangeNumber: number, baseSelector = 'body') {
+    cy.get(`${baseSelector}>${this.daterangepickerContainer} ${this.daterangepickerQuickSelectContainer}`)
+      .find('button').as('DateRangePicker');
+    cy.get('@DateRangePicker').eq(rangeNumber)
+      .should('have.class', 'selected');
+  }
+
   isDatepickerNavigationFullyActiveAndCorrect(mode = 'date',
                                               baseSelector = 'body',
                                               expectedMonth?: string,
@@ -442,12 +482,30 @@ export class DatepickerPo extends BaseComponent {
         actualMonthArr = globalLocales.mnLocale.months;
         break;
 
+      case 'ka' :
+        actualMonthArr = globalLocales.kaLocale.months;
+        break;
+
+      case 'sq' :
+        actualMonthArr = globalLocales.sqLocale.months;
+        break;
+
+      case 'kk' :
+        actualMonthArr = globalLocales.kkLocale.months;
+        break;
+
       default:
         actualMonthArr = undefined;
     }
+
+    if (actualMonthArr) {
+      actualMonthArr = Array.isArray(actualMonthArr) ? actualMonthArr : actualMonthArr.standalone;
+    }
+
     cy.get(`${baseSelector}>${
       pickerType === 'datepicker' ? this.datepickerContainer : this.daterangepickerContainer} tbody td`)
-      .eq(0).each((month, monthIndex) => {
+      .eq(0)
+      .each((month, monthIndex) => {
       expect(month.text().toLowerCase()).to.contains(
         actualMonthArr ? actualMonthArr[monthIndex].toLowerCase() :
           new Date(2017, monthIndex)
@@ -554,7 +612,7 @@ export class DatepickerPo extends BaseComponent {
         .should(disabled ? 'have.class' : 'not.to.have.class', 'disabled');
     }
   }
-        
+
   isTodayHaveClass(className: string) {
     cy.get(`body>${this.datepickerContainer} tbody td`)
       .not('.week')

diff --git a/cypress/support/modals.po.ts b/cypress/support/modals.po.ts
@@ -6,6 +6,7 @@ export class ModalsPo extends BaseComponent {
   ghLinkToComponent = 'https://github.com/valor-software/ngx-bootstrap/tree/development/src/modal';
 
   modalContainer = 'modal-container';
+  modalContainerVisible = 'modal-container.show';
   modalContent = '.modal-content';
   modalDialog = '.modal-dialog';
   modalBody = '.modal-body';
@@ -77,6 +78,18 @@ export class ModalsPo extends BaseComponent {
     cy.get(`${baseSelector} .modal`).click();
   }
 
+  clickOnModalCorner(position: string) {
+    cy.get(this.modalContainer).click(position);
+  }
+
+  startClickOnModalReleaseOnBackdrop(baseSelector: string) {
+    cy.get(`${baseSelector} .modal-content`)
+      .trigger('mousedown')
+      .wait(100)
+      .get(this.modalContainer)
+      .trigger('mouseup');
+  }
+
   checkElementsQuantity(elementsSelector: string, expectedQuantity: number) {
     cy.get(elementsSelector).should('have.length', expectedQuantity);
   }

diff --git a/cypress/support/popover.po.ts b/cypress/support/popover.po.ts
@@ -25,7 +25,8 @@ export class PopoverPo extends BaseComponent {
     triggerIsOpen: 'demo-popover-trigger-by-isopen',
     componentLevelStyling: 'demo-popover-styling-local',
     customClass: 'demo-popover-class',
-    popoverContext: 'demo-popover-context'
+    popoverContext: 'demo-popover-context',
+    delayPopover: 'demo-popover-delay'
   };
 
   isPopoverPlacementCorrect(baseSelector: string, placement: string) {