Update solution to Angular v14

.travis.yml

@@ -5,7 +5,7 @@ addons:
 
 language: node_js
 node_js:
-  - node
+  - lts/*
 
 branches:
   only:

angular.json

@@ -24,11 +24,11 @@
         "@schematics/angular:pipe": {
           "skipTests": true
         },
-        "@schematics/angular:service": {
+        "@schematics/angular:resolver": {
           "skipTests": true
         },
-        "@schematics/angular:application": {
-          "strict": true
+        "@schematics/angular:service": {
+          "skipTests": true
         }
       },
       "root": "",
@@ -44,7 +44,10 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
             "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css"],
+            "styles": [
+              "node_modules/bootstrap/dist/css/bootstrap.min.css",
+              "src/styles.css"
+            ],
             "scripts": []
           },
           "configurations": {
@@ -124,7 +127,6 @@
       }
     }
   },
-  "defaultProject": "date-range-picker-demo",
   "cli": {
     "analytics": "a5f6fbb0-95ea-4983-b15e-5e1d669337ba"
   }

cypress.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  video: false,
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      return require('./cypress/plugins/index.js')(on, config)
+    },
+    baseUrl: 'http://localhost:4200',
+  },
+})

cypress/integration/date-picker.spec.ts → cypress/e2e/date-picker.cy.ts

@@ -1,79 +1,79 @@
-describe('date-picker tests', () => {
-  before(() => {
-    cy.visit('');
-  });
-
-  it('should show initial state', () => {
-    cy.get('#date-picker8')
-      .should('have.value', '01/24/2018')
-      .should('have.attr', 'readonly');
-    cy.get('#date8').should('have.text', JSON.stringify(new Date(2018, 0, 24)));
-    cy.get('date-picker ngb-datepicker').should('not.exist');
-  });
-
-  it('should click input and open', () => {
-    cy.get('#date-picker8').click();
-    cy.get('date-picker ngb-datepicker').should('have.class', 'show');
-    cy.get('#date-picker8').click();
-    cy.get('date-picker ngb-datepicker').should('not.exist');
-  });
-
-  it('should click icon and open', () => {
-    cy.get('#date-picker > date-picker > .input-group > .btn').click();
-    cy.get('date-picker ngb-datepicker').should('have.class', 'show');
-    cy.get('#date-picker > date-picker > .input-group > .btn').click();
-    cy.get('date-picker ngb-datepicker').should('not.exist');
-  });
-
-  it('should click outside and close', () => {
-    cy.get('#date-picker8').click();
-    cy.get('date-picker ngb-datepicker').should('have.class', 'show');
-    cy.get('#date8').click({force: true});
-    cy.get('date-picker ngb-datepicker').should('not.exist');
-  });
-
-  it('should change date when click on Jan 18', () => {
-    cy.get('#date-picker8').click();
-    cy.get('date-picker ngb-datepicker').should('have.class', 'show');
-    cy.get('date-picker .custom-day').then((days) => {
-      // should show correct number of days
-      expect(days.length).to.be.equal(42);
-
-      // should have correct styles
-      expect(days[0])
-        .to.contain('31')
-        .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[6])
-        .to.contain('6')
-        .to.have.class('weekend')
-        .to.have.class('custom-day');
-      expect(days[31].innerText).to.be.equal('31');
-      expect(days[31]).to.have.class('custom-day');
-      expect(days[32])
-        .to.contain('1')
-        .to.have.class('outside')
-        .to.have.class('custom-day');
-      expect(days[41])
-        .to.contain('10')
-        .to.have.class('outside')
-        .to.have.class('weekend')
-        .to.have.class('custom-day');
-    });
-
-    // pick another day
-    cy.get('[aria-label="Thursday, January 18, 2018"] > .custom-day').click();
-    cy.get('#date-picker8')
-      .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('date-picker ngb-datepicker').should('not.exist');
-  });
-});
+describe('date-picker tests', () => {
+  before(() => {
+    cy.visit('');
+  });
+
+  it('should show initial state', () => {
+    cy.get('#date-picker8')
+      .should('have.value', '01/24/2018')
+      .should('have.attr', 'readonly');
+    cy.get('#date8').should('have.text', JSON.stringify(new Date(2018, 0, 24)));
+    cy.get('date-picker ngb-datepicker').should('not.exist');
+  });
+
+  it('should click input and open', () => {
+    cy.get('#date-picker8').click();
+    cy.get('date-picker ngb-datepicker').should('have.class', 'show');
+    cy.get('#date-picker8').click();
+    cy.get('date-picker ngb-datepicker').should('not.exist');
+  });
+
+  it('should click icon and open', () => {
+    cy.get('#date-picker > date-picker > .input-group > .btn').click();
+    cy.get('date-picker ngb-datepicker').should('have.class', 'show');
+    cy.get('#date-picker > date-picker > .input-group > .btn').click();
+    cy.get('date-picker ngb-datepicker').should('not.exist');
+  });
+
+  it('should click outside and close', () => {
+    cy.get('#date-picker8').click();
+    cy.get('date-picker ngb-datepicker').should('have.class', 'show');
+    cy.get('#date8').click({force: true});
+    cy.get('date-picker ngb-datepicker').should('not.exist');
+  });
+
+  it('should change date when click on Jan 18', () => {
+    cy.get('#date-picker8').click();
+    cy.get('date-picker ngb-datepicker').should('have.class', 'show');
+    cy.get('date-picker .custom-day').then((days) => {
+      // should show correct number of days
+      expect(days.length).to.be.equal(42);
+
+      // should have correct styles
+      expect(days[0])
+        .to.contain('31')
+        .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[6])
+        .to.contain('6')
+        .to.have.class('weekend')
+        .to.have.class('custom-day');
+      expect(days[31].innerText).to.be.equal('31');
+      expect(days[31]).to.have.class('custom-day');
+      expect(days[32])
+        .to.contain('1')
+        .to.have.class('outside')
+        .to.have.class('custom-day');
+      expect(days[41])
+        .to.contain('10')
+        .to.have.class('outside')
+        .to.have.class('weekend')
+        .to.have.class('custom-day');
+    });
+
+    // pick another day
+    cy.get('[aria-label="Thursday, January 18, 2018"] > .custom-day').click();
+    cy.get('#date-picker8')
+      .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('date-picker ngb-datepicker').should('not.exist');
+  });
+});