feat: display list of ambassadors

.github/workflows/analysis.yml

@@ -22,7 +22,7 @@ jobs:
       - name: Install Dependencies
         run: npm ci
       - name: Test
-        run: npx ng test --no-watch --no-progress
+        run: npx ng test --karma-config karma.conf.ci.js
       - name: SonarCloud Scan
         uses: SonarSource/sonarcloud-github-action@master
         env:

karma.conf.ci.js

@@ -0,0 +1,42 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+process.env.CHROME_BIN = require('puppeteer').executablePath()
+
+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/thank-you-matcher'),
+      subdir: '.',
+      reporters: [
+        { type: 'lcovonly' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'coverage'],
+    browsers: ['ChromeHeadless'],
+    autoWatch: false,
+    singleRun: true
+  });
+};

karma.conf.js

@@ -1,8 +1,6 @@
 // Karma configuration file, see link for more information
 // https://karma-runner.github.io/1.0/config/configuration-file.html
 
-process.env.CHROME_BIN = require('puppeteer').executablePath()
-
 module.exports = function (config) {
   config.set({
     basePath: '',
@@ -28,14 +26,14 @@ module.exports = function (config) {
     },
     coverageReporter: {
       dir: require('path').join(__dirname, './coverage/thank-you-matcher'),
-      subdir: '.',
       reporters: [
-        { type: 'lcov' },
+        { type: 'html', subdir: 'html' },
+        { type: 'lcovonly', subdir: 'lcov'},
         { type: 'text-summary' }
       ]
     },
-    reporters: ['progress', 'kjhtml'],
-    browsers: ['ChromeHeadless'],
+    reporters: ['progress', 'kjhtml', 'coverage'],
+    browsers: ['Chrome'],
     restartOnFileChange: true
   });
 };

package.json

@@ -7,7 +7,7 @@
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
-    "ci": "ng test --no-watch --no-progress",
+    "ci": "ng test --karma-config karma.conf.ci.js",
     "semantic-release": "semantic-release"
   },
   "private": true,

src/app/ambassador/ambassador-list/ambassador-list.component.html

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

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

@@ -0,0 +1,64 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { of } from "rxjs";
+
+import SpyObj = jasmine.SpyObj;
+
+import { AmbassadorListComponent } from './ambassador-list.component';
+import { AmbassadorService } from "../ambassador.service";
+import { Ambassador } from "../ambassador";
+
+describe('AmbassadorListComponent', () => {
+  let component: AmbassadorListComponent;
+  let fixture: ComponentFixture<AmbassadorListComponent>;
+  let ambassadorService: SpyObj<AmbassadorService>;
+
+  beforeEach(async () => {
+    const ambassadorServiceSpy = jasmine.createSpyObj('AmbassadorService', ['getAmbassadors']);
+
+    await TestBed.configureTestingModule({
+      providers: [{provide: AmbassadorService, useValue: ambassadorServiceSpy}],
+      declarations: [ AmbassadorListComponent ]
+    })
+    .compileComponents();
+
+    ambassadorService = TestBed.inject(AmbassadorService) as jasmine.SpyObj<AmbassadorService>;
+
+    fixture = TestBed.createComponent(AmbassadorListComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should not have any ambassadors before construction', () => {
+        expect(component.getAmbassadors())
+      .withContext('should have empty list')
+      .toHaveSize(0);
+
+    expect(ambassadorService.getAmbassadors.calls.count())
+      .withContext('spy has not been called')
+      .toBe(0);
+  })
+
+  it('should have 2 ambassadors after construction', () => {
+    const kaffTagon: Ambassador = new Ambassador('Kaff', 'Tagon', 'Orange', 'R');
+    const karlTagon: Ambassador = new Ambassador('Karl', 'Tagon', 'Blue', 'G');
+    const ambassadorList: Ambassador[] = [kaffTagon, karlTagon];
+    ambassadorService.getAmbassadors.and.returnValue(of(ambassadorList));
+
+    fixture.detectChanges();
+
+    expect(component.getAmbassadors())
+      .withContext('should have 2 ambassadors')
+      .toHaveSize(2);
+    expect(component.getAmbassadors())
+      .withContext('should match stubbed list')
+      .toBe(ambassadorList);
+
+    expect(ambassadorService.getAmbassadors.calls.count())
+      .withContext('spy has been called')
+      .toBe(1);
+  })
+});

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

@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+
+import { AmbassadorService } from "../ambassador.service";
+import { Ambassador } from "../ambassador";
+
+@Component({
+  selector: 'app-ambassador-list',
+  templateUrl: './ambassador-list.component.html',
+  styleUrls: ['./ambassador-list.component.css']
+})
+export class AmbassadorListComponent implements OnInit {
+  private AMBASSADORS: Ambassador[] = [];
+
+  constructor(private ambassadorService: AmbassadorService) {}
+
+  ngOnInit(): void {
+    this.ambassadorService
+      .getAmbassadors()
+      .subscribe(ambassadors => this.AMBASSADORS = ambassadors);
+  }
+
+  public getAmbassadors(): Ambassador[] {
+    return this.AMBASSADORS;
+  }
+}

src/app/ambassador/ambassador-routing.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { AmbassadorListComponent } from "./ambassador-list/ambassador-list.component";
+
+const routes: Routes = [
+  { path: 'list', component: AmbassadorListComponent },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class AmbassadorRoutingModule { }

src/app/ambassador/ambassador.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { AmbassadorRoutingModule } from './ambassador-routing.module';
+import { AmbassadorListComponent } from './ambassador-list/ambassador-list.component';
+import { AmbassadorImportComponent } from './ambassador-import/ambassador-import.component';
+
+@NgModule({
+  declarations: [
+    AmbassadorListComponent,
+    AmbassadorImportComponent
+  ],
+  imports: [
+    CommonModule,
+    AmbassadorRoutingModule
+  ]
+})
+export class AmbassadorModule { }

src/app/ambassador/ambassador.service.spec.ts

@@ -0,0 +1,22 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AmbassadorService } from './ambassador.service';
+
+describe('AmbassadorService', () => {
+  let service: AmbassadorService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AmbassadorService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should return 8 Ambassadors', () => {
+    service.getAmbassadors().subscribe(ambassadors => {
+      expect(ambassadors.length).toBe(8);
+    });
+  });
+});

src/app/ambassador/ambassador.service.ts

@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import {Ambassador} from "./ambassador";
+import {Observable, of} from "rxjs";
+
+const AMBASSADORS: Ambassador[] = [
+  new Ambassador('Kaff', 'Tagon', 'Green', 'R'),
+  new Ambassador('Kevyn', 'Andreyasn', 'Blue', 'H'),
+  new Ambassador('Breya', 'Andreyasn', 'Red', 'B'),
+  new Ambassador('Gunther', 'Thurl', 'Orange', 'M'),
+  new Ambassador('Edward', 'Bunnigus', 'Purple', 'F'),
+  new Ambassador('Ellen', 'Foxworthy', 'Silver', 'I'),
+  new Ambassador('Theo', 'Fobius', 'Red', 'C'),
+  new Ambassador('Alexia', 'Murtaugh', 'Green', 'S'),
+]
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AmbassadorService {
+
+  constructor() { }
+
+  getAmbassadors(): Observable<Ambassador[]> {
+    const ambassadors = of(AMBASSADORS);
+    return ambassadors;
+  }
+}

src/app/ambassador/ambassador.spec.ts

@@ -0,0 +1,66 @@
+import { Ambassador } from './ambassador';
+
+describe('Ambassador', () => {
+  let classUnderTest: Ambassador;
+
+  beforeEach(() => {
+    classUnderTest = new Ambassador('John', 'Doe', 'Green', 'R');
+  });
+
+  it('should create an instance', () => {
+    expect(classUnderTest).toBeTruthy();
+  });
+
+  it('should set first name to Jane', () => {
+    expect(classUnderTest.firstName).toBe('John');
+    classUnderTest.firstName = 'Jane';
+    expect(classUnderTest.firstName).toBe('Jane');
+  });
+
+  it('should have first name John', () => {
+    expect(classUnderTest.firstName).toBe('John');
+  });
+
+  it('should set last name to Ray', () => {
+    expect(classUnderTest.lastName).toBe('Doe');
+    classUnderTest.lastName = 'Ray';
+    expect(classUnderTest.lastName).toBe('Ray');
+  });
+
+  it('should have last name Doe', () => {
+    expect(classUnderTest.lastName).toBe('Doe');
+  });
+
+  it('should set full name to Jane Ray', () => {
+    expect(classUnderTest.firstName).toBe('John');
+    expect(classUnderTest.lastName).toBe('Doe');
+    classUnderTest.firstName = 'Jane';
+    classUnderTest.lastName = 'Ray';
+    expect(classUnderTest.firstName).toBe('Jane');
+    expect(classUnderTest.lastName).toBe('Ray');
+  });
+
+  it('should have full name John Doe', () => {
+    expect(classUnderTest.fullName).toBe('John Doe');
+  });
+
+  it('should set color to Blue', () => {
+    expect(classUnderTest.color).toBe('Green');
+    classUnderTest.color = 'Blue';
+    expect(classUnderTest.color).toBe('Blue');
+  });
+
+  it('should be in color Green', () => {
+    expect(classUnderTest.color).toBe('Green');
+  });
+
+  it('should set group to B', () => {
+    expect(classUnderTest.group).toBe('R');
+    classUnderTest.group = 'B';
+    expect(classUnderTest.group).toBe('B');
+  });
+
+  it('should be in group R', () => {
+    expect(classUnderTest.group).toBe('R');
+  });
+});