ci: add continuous integration and deployment (#1)

* chore: add continuous integration

* ci: fix tooling

* test: fix unit tests

.github/workflows/deployment.yaml

@@ -0,0 +1,45 @@
+name: continuous deployment
+
+on:
+  workflow_dispatch:
+  push:
+    branches: [main]
+
+jobs:
+  deployment:
+    runs-on: ubuntu-latest
+    steps:
+
+      - name: Checkout source files
+        uses: actions/checkout@v3
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build project
+        run: npm exec nx build --prod
+
+      - name: Find new product version
+        uses: arwynfr/actions-conventional-versioning/get-newVersion@v3
+        id: next-version
+        with:
+          allow-additional-modifiers: true
+          feat-upgrades-minor: false
+          strict-types: true
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v2
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build and publish docker image
+        run: >
+          docker build --push
+            --file build/Dockerfile
+            --tag ghcr.io/team-gsri/apps-admin-client:${{ steps.next-version.outputs.next-version }}
+            dist/gsri-admin
+
+      - name: Publish GitHub release
+        uses: arwynfr/actions-conventional-versioning@v2

.github/workflows/integration.yaml

@@ -0,0 +1,26 @@
+name: continuous integration
+
+on:
+  workflow_dispatch:
+  pull_request:
+    branches: [main]
+
+jobs:
+  integration:
+    runs-on: ubuntu-latest
+    steps:
+
+      - name: Checkout source files
+        uses: actions/checkout@v3
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Lint sources
+        run: npm exec nx lint
+
+      - name: Run unit tests
+        run: npm exec nx test
+
+      - name: Build project
+        run: npm exec nx build

build/Dockerfile

@@ -0,0 +1,2 @@
+FROM nginx:1.25.0-alpine
+COPY . /srv/www

build/Dockerize.ps1

@@ -0,0 +1,28 @@
+[CmdletBinding()]
+param (
+  [Parameter()]
+  [ValidateScript({ $_ | Test-Path -PathType Container }, ErrorMessage = 'Path must be a valid directory')]
+  [string]
+  $Path = (Join-Path $PSScriptRoot ../dist/gsri-admin | Convert-Path),
+
+  [Parameter()]
+  [string]
+  $Image = 'ghcr.io/team-gsri/apps-admin-client',
+
+  [Parameter()]
+  [semver]
+  $Tag,
+
+  [Parameter()]
+  [ValidateScript({ $_ | Test-Path -PathType Leaf }, ErrorMessage = 'Path must be a valid file')]
+  [string]
+  $Dockerfile = (Join-Path $PSScriptRoot Dockerfile | Convert-Path)
+)
+
+if ($null -eq $Tag) {
+  Import-Module -Force StepSemVer
+  $Tag = [semver]$(git describe --tags 2>&1) | Step-SemVer -BumpType patch -PreRelease 'SNAPSHOT'
+  Write-Verbose "Docker tag: $Tag"
+}
+
+docker build --file "$Dockerfile" --tag "${Image}:${Tag}" "${Path}"

project.json

@@ -6,6 +6,21 @@
   "sourceRoot": "./src",
   "tags": [],
   "targets": {
+    "dockerize": {
+      "command": "pwsh build/Dockerize.ps1 -Verbose",
+      "dependsOn": ["build"]
+    },
+    "analyze": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+          "nx build --configuration=development",
+          "source-map-explorer dist/gsri-admin/*.js --sort"
+        ],
+        "parallel": false
+      },
+      "outputs": ["{workspaceRoot}/dist/gsri-admin/stats.json"]
+    },
     "build": {
       "executor": "@angular-devkit/build-angular:browser",
       "outputs": ["{options.outputPath}"],
@@ -24,8 +39,8 @@
           "budgets": [
             {
               "type": "initial",
-              "maximumWarning": "500kb",
-              "maximumError": "1mb"
+              "maximumWarning": "2mb",
+              "maximumError": "5mb"
             },
             {
               "type": "anyComponentStyle",

src/app/app.component.html

@@ -1,5 +1,5 @@
 <div class="container-fluid p-5 bg-dark text-white text-center">
-  <h1> {{title}} </h1>
+  <h1>{{title}}</h1>
 </div>
 
 <nav class="navbar navbar-expand-sm bg-primary navbar-dark">

src/app/app.component.spec.ts

@@ -14,13 +14,13 @@ describe('AppComponent', () => {
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
     expect(compiled.querySelector('h1')?.textContent).toContain(
-      'Welcome gsri-admin'
+      'GSRI Administration'
     );
   });
 
-  it(`should have as title 'gsri-admin'`, () => {
+  it(`should have as title 'GSRI Administration'`, () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
-    expect(app.title).toEqual('gsri-admin');
+    expect(app.title).toEqual('GSRI Administration');
   });
 });

src/app/app.component.ts

@@ -2,14 +2,14 @@ import { Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { FormsModule } from '@angular/forms';
 import { MessagesComponent } from './messages/messages.component';
-import { JoueursComponent } from './joueurs/joueurs-list/joueurs-list.component';
+import { JoueursListComponent } from './joueurs/joueurs-list/joueurs-list.component';
 
 @Component({
   standalone: true,
   imports: [
     RouterModule,
     FormsModule,
-    JoueursComponent,
+    JoueursListComponent,
     MessagesComponent,
   ],
   selector: 'gsri-admin-root',

src/app/app.routes.ts

@@ -1,9 +1,9 @@
 import { Route } from '@angular/router';
-import { JoueursComponent } from './joueurs/joueurs-list/joueurs-list.component';
+import { JoueursListComponent } from './joueurs/joueurs-list/joueurs-list.component';
 import { JoueursDetailsComponent } from './joueurs/joueurs-details/joueurs-details.component';
 
 export const appRoutes: Route[] = [
   { path: '', redirectTo: '/joueurs', pathMatch: 'full' },
   { path: 'joueurs/:id', component: JoueursDetailsComponent },
-  { path: 'joueurs', component: JoueursComponent },
+  { path: 'joueurs', component: JoueursListComponent },
 ];

src/app/configuration/configuration.service.spec.ts

@@ -1,12 +1,15 @@
 import { TestBed } from '@angular/core/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 
 import { ConfigurationService } from './configuration.service';
 
 describe('ConfigurationService', () => {
   let service: ConfigurationService;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({});
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule]
+    });
     service = TestBed.inject(ConfigurationService);
   });
 

src/app/joueurs/joueur.service.spec.ts

@@ -1,12 +1,15 @@
 import { TestBed } from '@angular/core/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 
 import { JoueurService } from './joueur.service';
 
 describe('JoueursService', () => {
   let service: JoueurService;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({});
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule]
+    });
     service = TestBed.inject(JoueurService);
   });
 

src/app/joueurs/joueurs-details/joueurs-details.component.spec.ts

@@ -1,13 +1,19 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { JoueursDetailsComponent } from './joueurs-details.component';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { RouterTestingModule } from '@angular/router/testing';
 
 describe('JoueursDetailsComponent', () => {
   let component: JoueursDetailsComponent;
   let fixture: ComponentFixture<JoueursDetailsComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [JoueursDetailsComponent],
+      imports: [
+        JoueursDetailsComponent,
+        HttpClientTestingModule,
+        RouterTestingModule
+      ],
     }).compileComponents();
 
     fixture = TestBed.createComponent(JoueursDetailsComponent);

src/app/joueurs/joueurs-list/joueurs-list.component.spec.ts

@@ -1,16 +1,17 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { JoueursComponent } from './joueurs-list.component';
+import { JoueursListComponent } from './joueurs-list.component';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 
 describe('JoueursComponent', () => {
-  let component: JoueursComponent;
-  let fixture: ComponentFixture<JoueursComponent>;
+  let component: JoueursListComponent;
+  let fixture: ComponentFixture<JoueursListComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [JoueursComponent],
+      imports: [JoueursListComponent, HttpClientTestingModule],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(JoueursComponent);
+    fixture = TestBed.createComponent(JoueursListComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/joueurs/joueurs-list/joueurs-list.component.ts

@@ -18,7 +18,7 @@ import { RouterModule } from '@angular/router';
   templateUrl: './joueurs-list.component.html',
   styleUrls: ['./joueurs-list.component.scss'],
 })
-export class JoueursComponent implements OnInit {
+export class JoueursListComponent implements OnInit {
 
   joueurs: Joueur[] = [];