Angular 20

.gitignore

@@ -32,6 +32,11 @@ node_modules/*
 # logs
 *logs
 
+# Cypress
+cypress/videos
+cypress/screenshots
+cypress/downloads
+.cypress
 
 # dist
 dist/

angular.json

@@ -47,6 +47,11 @@
             },
             "production": {
               "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                },
                 {
                   "type": "anyComponentStyle",
                   "maximumWarning": "6kb"
@@ -56,7 +61,7 @@
                 "scripts": true,
                 "styles": {
                   "minify": true,
-                  "inlineCritical": false
+                  "inlineCritical": true
                 },
                 "fonts": true
               },
@@ -118,10 +123,30 @@
   "schematics": {
     "@schematics/angular:component": {
       "prefix": "app",
-      "style": "css"
+      "style": "css",
+      "type": "component"
     },
     "@schematics/angular:directive": {
-      "prefix": "app"
+      "prefix": "app",
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
     }
   },
   "cli": {

browserslist

@@ -5,8 +5,13 @@
 # You can see what browsers were selected by your queries by running:
 #   npx browserslist
 
-> 0.5%
-last 2 versions
-Firefox ESR
+last 2 Chrome versions
+last 2 Firefox versions
+last 2 Edge versions
+last 2 Safari versions
+last 2 iOS versions
 not dead
-not IE 9-11 # For IE 9-11 support, remove 'not'.
+not IE 11
+not op_mini all
+not kaios > 0
+not android < 5

cypress.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:4200',
+    specPattern: 'cypress/e2e/**/*.cy.ts',
+    supportFile: 'cypress/support/e2e.ts',
+    videosFolder: 'cypress/videos',
+    screenshotsFolder: 'cypress/screenshots',
+    video: false,
+    viewportWidth: 1280,
+    viewportHeight: 720,
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});

cypress/e2e/app.cy.ts

@@ -0,0 +1,13 @@
+describe('HPO App', () => {
+  beforeEach(() => {
+    cy.visit('/');
+  });
+
+  it('should display welcome message', () => {
+    cy.get('.info-section h2').should('contain', 'The Human Phenotype Ontology');
+  });
+
+  it('should load the homepage', () => {
+    cy.url().should('include', 'localhost:4200');
+  });
+});

cypress/support/commands.ts

@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      // Add custom commands here
+      // login(email: string, password: string): Chainable<void>
+    }
+  }
+}
+
+export {};

cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.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')

cypress/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "types": ["cypress", "node"],
+    "target": "es2021",
+    "lib": ["es2021", "dom"],
+    "isolatedModules": false
+  },
+  "include": ["**/*.ts"]
+}