test: actions tests config

Author: Alain Boudard

.github/workflows/build.yml

@@ -13,6 +13,16 @@ jobs:
       - uses: actions/checkout@v4
         with:
           fetch-depth: 0  # Shallow clones should be disabled for a better relevancy of analysis
+      - uses: actions/setup-node@v2
+        with:
+            node-version: '20'
+
+      - name: Node install dependencies
+        run: npm install
+
+      - name: Run unit tests
+        run: npm run test
+        
       - name: SonarCloud Scan
         uses: SonarSource/sonarcloud-github-action@master
         env:

angular.json

@@ -3,7 +3,7 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
-    "testTesting": {
+    "angularTesting": {
       "projectType": "application",
       "schematics": {
         "@schematics/angular:component": {
@@ -62,18 +62,18 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "buildTarget": "testTesting:build:production"
+              "buildTarget": "angularTesting:build:production"
             },
             "development": {
-              "buildTarget": "testTesting:build:development"
+              "buildTarget": "angularTesting:build:development"
             }
           },
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "buildTarget": "testTesting:build"
+            "buildTarget": "angularTesting:build"
           }
         },
         "test": {
@@ -92,7 +92,8 @@
             "styles": [
               "src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [],
+            "karmaConfig": "karma.conf.js"
           }
         }
       }

karma.conf.js

@@ -0,0 +1,46 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, './coverage/angular-testing'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' },
+        { type: 'lcov' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml', 'coverage'],
+    browsers: ['ChromeHeadlessNoSandbox'],
+    restartOnFileChange: true,
+    customLaunchers: {
+      ChromeHeadlessNoSandbox: {
+        base: 'ChromeHeadless',
+        flags: ['--no-sandbox']
+      }
+    }
+  });
+};

package.json

@@ -6,7 +6,7 @@
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "test": "ng test"
+    "test": "ng test --code-coverage --watch=false"
   },
   "private": true,
   "dependencies": {

sonar-project.properties

@@ -5,9 +5,13 @@ sonar.organization=aboudard
 sonar.projectName=angular-testing
 sonar.projectVersion=1.0
 
+sonar.coverage.exclusions=**/*.spec.ts
 
 # Path is relative to the sonar-project.properties file. Replace "\" by "/" on Windows.
-#sonar.sources=.
+sonar.sources=src
 
 # Encoding of the source code. Default is default system encoding
-#sonar.sourceEncoding=UTF-8
+#sonar.sourceEncoding=UTF-8
+
+sonar.typescript.tsconfigPath=tsconfig.json
+sonar.javascript.lcov.reportPaths=./coverage/angular-testing/lcov.info

src/app/app.component.spec.ts

@@ -14,16 +14,18 @@ describe('AppComponent', () => {
     expect(app).toBeTruthy();
   });
 
-  it(`should have the 'testTesting' title`, () => {
+  it(`should have the 'angularTesting' title`, () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
-    expect(app.title).toEqual('testTesting');
+    expect(app.title).toEqual('angularTesting');
   });
 
   it('should render title', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, testTesting');
+    expect(compiled.querySelector('h1')?.textContent).toContain(
+      'Hello, angularTesting'
+    );
   });
 });

src/app/app.component.ts

@@ -6,8 +6,8 @@ import { RouterOutlet } from '@angular/router';
   standalone: true,
   imports: [RouterOutlet],
   templateUrl: './app.component.html',
-  styleUrl: './app.component.scss'
+  styleUrl: './app.component.scss',
 })
 export class AppComponent {
-  title = 'testTesting';
+  title = 'angularTesting';
 }

src/app/components/dumb/dumb.component.html

@@ -0,0 +1 @@
+<p>dumb works!</p>

src/app/components/dumb/dumb.component.scss

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DumbComponent } from './dumb.component';
+
+describe('DumbComponent', () => {
+  let component: DumbComponent;
+  let fixture: ComponentFixture<DumbComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DumbComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(DumbComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});