refactor and update app dependencies

README.md

@@ -13,6 +13,8 @@ npm i @uiowa/date-range-picker
 
 ## [Demo](https://date-range-picker.firebaseapp.com)
 
+![date range picker demo](./date-range-picker-demo.gif)
+
 ## Models
 
 - `DateRange`: an object represents a date range, includes start date and end date. e.g.,

cypress/integration/date-picker.spec.ts

@@ -35,7 +35,7 @@ describe('date-picker tests', () => {
   it('should change date when click on Jan 18', () => {
     cy.get('date-picker input').click();
     cy.get('ngb-datepicker').should('have.class', 'show');
-    cy.get('.custom-day').then(days => {
+    cy.get('.custom-day').then((days) => {
       // should show correct number of days
       expect(days.length).to.be.equal(42);
 
@@ -45,9 +45,7 @@ describe('date-picker tests', () => {
         .to.have.class('outside')
         .to.have.class('weekend')
         .to.have.class('custom-day');
-      expect(days[1])
-        .to.contain('1')
-        .to.have.class('custom-day');
+      expect(days[1]).to.contain('1').to.have.class('custom-day');
       expect(days[6])
         .to.contain('6')
         .to.have.class('weekend')
@@ -63,19 +61,19 @@ describe('date-picker tests', () => {
         .to.have.class('outside')
         .to.have.class('weekend')
         .to.have.class('custom-day');
+    });
 
-      // pick another day
-      days[18].click();
-      cy.get('date-picker input')
-        .should('have.value', '01/18/2018')
-        .should('have.attr', 'readonly');
-      cy.get('#date8').should(
-        'have.text',
-        JSON.stringify(new Date(2018, 0, 18, 12))
-      );
+    // pick another day
+    cy.get('[aria-label="Thursday, January 18, 2018"] > .custom-day').click();
+    cy.get('date-picker input')
+      .should('have.value', '01/18/2018')
+      .should('have.attr', 'readonly');
+    cy.get('#date8').should(
+      'have.text',
+      JSON.stringify(new Date(2018, 0, 18, 12))
+    );
 
-      // should close calendar after picking a date
-      cy.get('ngb-datepicker').should('not.exist');
-    });
+    // should close calendar after picking a date
+    cy.get('ngb-datepicker').should('not.exist');
   });
 });

cypress/integration/date-range-picker.spec.ts

@@ -1,4 +1,3 @@
-import { DateRange } from '../../projects/uiowa/date-range-picker/src/lib/models/date-range';
 import { AppComponent } from '../../src/app/app.component';
 
 describe('date-range-picker tests', () => {
@@ -12,7 +11,7 @@ describe('date-range-picker tests', () => {
     cy.get('[data-cy=regular-date-range] input')
       .should('have.value', dateRangeString)
       .should('have.attr', 'readonly');
-    cy.get('[data-cy=regular-date-range] pre').then($el => {
+    cy.get('[data-cy=regular-date-range] pre').then(($el) => {
       const json = $el[0].textContent || '';
       expect(dateRange.equals(JSON.parse(json))).to.be.true;
     });
@@ -23,13 +22,13 @@ describe('date-range-picker tests', () => {
     cy.get('ngb-datepicker').should('not.exist');
     cy.get('[data-cy=regular-date-range] input').click();
     cy.get('ngb-datepicker').should('have.class', 'show');
-    cy.get('.ngb-dp-month').then($el => {
+    cy.get('.ngb-dp-month').then(($el) => {
       expect($el.length).to.be.equal(2);
     });
-    cy.get('.custom-day.range').then($el => {
+    cy.get('.custom-day.range').then(($el) => {
       expect($el.length).to.be.equal(15);
     });
-    cy.get('.custom-day.range.faded').then($el => {
+    cy.get('.custom-day.range.faded').then(($el) => {
       expect($el.length).to.be.equal(13);
     });
     cy.get('[data-cy=regular-date-range] input').click();
@@ -42,7 +41,7 @@ describe('date-range-picker tests', () => {
     cy.get('[data-cy=both-dates-not-null] input')
       .should('have.value', dateRangeString)
       .should('have.attr', 'readonly');
-    cy.get('[data-cy=both-dates-not-null] pre').then($el => {
+    cy.get('[data-cy=both-dates-not-null] pre').then(($el) => {
       const json = $el[0].textContent || '';
       expect(dateRange.equals(JSON.parse(json))).to.be.true;
     });
@@ -53,13 +52,13 @@ describe('date-range-picker tests', () => {
     cy.get('ngb-datepicker').should('not.exist');
     cy.get('[data-cy=both-dates-not-null] input').click();
     cy.get('ngb-datepicker').should('have.class', 'show');
-    cy.get('.ngb-dp-month').then($el => {
+    cy.get('.ngb-dp-month').then(($el) => {
       expect($el.length).to.be.equal(2);
     });
-    cy.get('.custom-day.range').then($el => {
+    cy.get('.custom-day.range').then(($el) => {
       expect($el.length).to.be.equal(9);
     });
-    cy.get('.custom-day.range.faded').then($el => {
+    cy.get('.custom-day.range.faded').then(($el) => {
       expect($el.length).to.be.equal(7);
     });
     cy.get('[data-cy=both-dates-not-null] input').click();
@@ -76,7 +75,7 @@ describe('date-range-picker tests', () => {
     cy.get('[data-cy=both-dates-not-null] input')
       .should('have.value', '10/16/2018 - 11/6/2018')
       .should('have.attr', 'readonly');
-    cy.get('[data-cy=both-dates-not-null] pre').then($el => {
+    cy.get('[data-cy=both-dates-not-null] pre').then(($el) => {
       const json = $el[0].textContent || '';
       expect(JSON.parse(json).start).to.be.equal(
         new Date(2018, 9, 16, 12).toISOString()
@@ -87,7 +86,29 @@ describe('date-range-picker tests', () => {
     });
   });
 
-  it('should change dates when click date picker: 1', () => {
+  it('should change dates using keyboard', () => {
+    cy.get('ngb-datepicker').should('not.exist');
+    cy.get('[data-cy=both-dates-not-null] input').click();
+    cy.get('ngb-datepicker').should('have.class', 'show');
+    cy.get('ngb-datepicker')
+      .type('{downArrow}{downArrow} ')
+      .type('{pageDown}{rightArrow} ');
+    cy.get('ngb-datepicker').should('not.exist');
+    cy.get('[data-cy=both-dates-not-null] input')
+      .should('have.value', '10/15/2018 - 11/16/2018')
+      .should('have.attr', 'readonly');
+    cy.get('[data-cy=both-dates-not-null] pre').then(($el) => {
+      const json = $el[0].textContent || '';
+      expect(JSON.parse(json).start).to.be.equal(
+        new Date(2018, 9, 15, 12).toISOString()
+      );
+      expect(JSON.parse(json).end).to.be.equal(
+        new Date(2018, 10, 16, 12).toISOString()
+      );
+    });
+  });
+
+  it('should change dates by clicking a button', () => {
     cy.get('ngb-datepicker').should('not.exist');
     cy.get('[data-cy=change-date-with-button] input')
       .should('have.value', '10/1/2018 - 10/9/2018')
@@ -98,7 +119,7 @@ describe('date-range-picker tests', () => {
     cy.get('[data-cy=change-date-with-button] input')
       .should('have.value', '10/1/2018 - 10/19/2018')
       .should('have.attr', 'readonly');
-    cy.get('[data-cy=change-date-with-button] pre').then($el => {
+    cy.get('[data-cy=change-date-with-button] pre').then(($el) => {
       const json = $el[0].textContent || '';
       expect(JSON.parse(json).start).to.be.equal(
         new Date(2018, 9, 1).toISOString()