Merge pull request #102 from muratkeremozcan/q/feature/upgrade_repo_to_current

Q/feature/upgrade repo to current

Author: QuantariusRay

angular.json

@@ -1,5 +1,8 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "cli": {
+    "analytics": "4733bdc6-4499-456d-a65e-edf55e5fe368"
+  },
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
@@ -35,7 +38,6 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "extractLicenses": true,
               "vendorChunk": false,
@@ -53,6 +55,32 @@
               ],
               "serviceWorker": true,
               "ngswConfigPath": "ngsw-config.json"
+            },
+            "dev": {
+              "fileReplacements": [{
+                "replace": "src/environments/environment.ts",
+                "with": "src/environments/environment.dev.ts"
+              }],
+              "optimization": false,
+              "outputHashing": "all",
+              "sourceMap": true,
+              "namedChunks": true,
+              "extractLicenses": false,
+              "vendorChunk": true,
+              "buildOptimizer": false,
+              "budgets": [{
+                "type": "initial",
+                "maximumWarning": "2mb",
+                "maximumError": "5mb"
+              },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb",
+                  "maximumError": "10kb"
+                }
+              ],
+              "serviceWorker": true,
+              "ngswConfigPath": "ngsw-config.json"
             }
           }
         },
@@ -65,6 +93,9 @@
           "configurations": {
             "production": {
               "browserTarget": "angular-unit-testing:build:production"
+            },
+            "dev": {
+              "browserTarget": "angular-unit-testing:build:dev"
             }
           }
         },
@@ -77,7 +108,7 @@
         "test": {
           "builder": "@angular-builders/jest:run",
           "options": {
-            "polyfills": "src/polyfills.ts",
+            "polyfills": ["src/polyfills.ts"],
             "tsConfig": "tsconfig.spec.json",
             "assets": [
               "src/favicon.ico",
@@ -99,4 +130,4 @@
     }
   },
   "defaultProject": "angular-unit-testing"
-}
+}

cypress.config.ts

@@ -0,0 +1,32 @@
+import { defineConfig } from "cypress";
+import * as cyExtendsTask from "@bahmutov/cypress-extends";
+import * as cyCodeCoverageTask from "@cypress/code-coverage/task";
+
+export default defineConfig({
+  projectId: "4mhoqq",
+  chromeWebSecurity: false,
+  retries: {
+    runMode: 2,
+    openMode: 0,
+  },
+  videoUploadOnPasses: false,
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+      return Object.assign(
+        {},
+        cyCodeCoverageTask(on, config),
+        cyExtendsTask(config.configFile)
+      );
+    },
+    baseUrl: "http://localhost:4200",
+    specPattern: "cypress/e2e/**/*.ts",
+  },
+  component: {
+    devServer: {
+      framework: "angular",
+      bundler: "webpack",
+    },
+    specPattern: "**/*.cy.ts",
+  },
+});

cypress.json

@@ -0,0 +1,21 @@
+import { defineConfig } from 'cypress';
+import * as cyExtendsTask from '@bahmutov/cypress-extends';
+import * as cyCodeCoverageTask from '@cypress/code-coverage/task';
+
+export default defineConfig({
+  projectId: '4mhoqq',
+  chromeWebSecurity: false,
+  retries: {
+    runMode: 2,
+    openMode: 0
+  },
+  videoUploadOnPasses: false,
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+      return Object.assign({}, cyCodeCoverageTask(on, config), cyExtendsTask(config.configFile));
+    },
+    baseUrl: 'https://d1kaucldkbcik4.cloudfront.net',
+    specPattern: 'cypress/e2e/**/*.ts'
+  }
+});

cypress/config/dev.config.ts

@@ -0,0 +1,36 @@
+import { defineConfig } from "cypress";
+import * as cyExtendsTask from "@bahmutov/cypress-extends";
+import * as cyCodeCoverageTask from "@cypress/code-coverage/task";
+
+export default defineConfig({
+  projectId: "4mhoqq",
+  chromeWebSecurity: false,
+
+  retries: {
+    runMode: 2,
+    openMode: 0,
+  },
+
+  videoUploadOnPasses: false,
+
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+      return Object.assign(
+        {},
+        cyCodeCoverageTask(on, config),
+        cyExtendsTask(config.configFile)
+      );
+    },
+    baseUrl: "http://localhost:4200",
+    specPattern: "cypress/e2e/**/*.ts",
+  },
+
+  component: {
+    devServer: {
+      framework: "angular",
+      bundler: "webpack",
+    },
+    specPattern: "**/*.cy.ts",
+  },
+});

cypress/config/dev.json

@@ -1,18 +1,18 @@
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.(js|ts)$/,
-        loader: '@skyux-sdk/istanbul-instrumenter-loader',
-        options: { esModules: true },
-        enforce: 'post',
-        include: require('path').join(__dirname, '..', 'src'),
-        exclude: [
-          /\.(e2e|spec|module|mock)\.ts$/,
-          /node_modules/,
-          /(ngfactory|ngstyle)\.js/
-        ]
-      }
-    ]
-  }
-};
+// module.exports = {
+//   module: {
+//     rules: [
+//       {
+//         test: /\.(js|ts)$/,
+//         loader: '@skyux-sdk/istanbul-instrumenter-loader',
+//         options: { esModules: true },
+//         enforce: 'post',
+//         include: require('path').join(__dirname, '..', 'src'),
+//         exclude: [
+//           /\.(e2e|spec|module|mock)\.ts$/,
+//           /node_modules/,
+//           /(ngfactory|ngstyle)\.js/
+//         ]
+//       }
+//     ]
+//   }
+// };

cypress/config/local.config.ts

@@ -1,5 +1,6 @@
-describe('dashboard', () => {
+/// <reference types="Cypress" />
 
+describe('dashboard', () => {
   before(() => cy.visit('/'));
 
   it('should default to dashboard', () => {

cypress/config/local.json

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

cypress/coverage.webpack.js

@@ -0,0 +1,39 @@
+// ***********************************************************
+// This example support/component.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+import { mount } from 'cypress/angular'
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount
+    }
+  }
+}
+
+Cypress.Commands.add('mount', mount)
+
+// Example use:
+// cy.mount(MyComponent)

cypress/integration/about.spec.ts renamed to cypress/e2e/about.spec.ts

@@ -1,5 +1,5 @@
 // ***********************************************************
-// This example support/index.js is processed and
+// This example support/e2e.ts is processed and
 // loaded automatically before your test files.
 //
 // This is a great place to put global configuration and
@@ -13,7 +13,8 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 
-// When a command from ./commands is ready to use, import with `import './commands'` syntax
-// import './commands';
+// Import commands.js using ES2015 syntax:
+import './commands'
 
-import '@cypress/code-coverage/support'
+// Alternatively you can use CommonJS syntax:
+// require('./commands')