Finished project

Author: patrick.flege@rabobank.nl

cypress/integration/home.test.js

@@ -1,64 +1,11 @@
-
-
-
-describe('Home Page', () => {
-
-    beforeEach(() => {
-
-        cy.fixture('courses.json').as("coursesJSON");
-
-        cy.server();
-
-        cy.route('/api/courses', "@coursesJSON").as("courses");
-
-        cy.visit('/');
-
-    });
-
-    it('should display a list of courses', () => {
-
-        cy.contains("All Courses");
-
-        cy.wait('@courses');
-
-        cy.get("mat-card").should("have.length", 9);
-
-    });
-
-    it('should display the advanced courses', () => {
-
-        cy.get('.mat-tab-label').should("have.length", 2);
-
-        cy.get('.mat-tab-label').last().click();
-
-        cy.get('.mat-tab-body-active .mat-card-title').its('length').should('be.gt', 1);
-
-        cy.get('.mat-tab-body-active .mat-card-title').first()
-            .should('contain', "Angular Security Course");
-
-    });
-
-
-});
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+describe("Homepage", () => {
+  it("should display all courses", () => {
+    //cy.fixture('courses.json').as('courses');
+    cy.intercept('GET', 'localhost:9000/api/courses',{
+      fixture: 'courses.json'
+    })
+    cy.visit('/');
+    cy.contains('All Courses')
+    //cy.get('mat-card').should('have.length', 9)
+  })
+})

package.json

@@ -11,11 +11,12 @@
     "lint": "ng lint",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run",
-    "build:prod": "ng build --prod",
+    "build:prod": "ng build --optimization",
     "start:prod": "http-server ./dist -a localhost -p 4200",
     "build-and-start:prod": "run-s build:prod start:prod",
     "e2e": "start-server-and-test build-and-start:prod http://localhost:4200 cypress:run"
-  },
+
+},
   "private": true,
   "dependencies": {
     "@angular/animations": "15.0.2",

src/app/courses/courses-card-list/courses-card-list.component.spec.ts

@@ -1,73 +1,61 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
 import {CoursesCardListComponent} from './courses-card-list.component';
-import {CoursesModule} from '../courses.module';
-import {COURSES} from '../../../../server/db-data';
-import {DebugElement} from '@angular/core';
-import {By} from '@angular/platform-browser';
-import {sortCoursesBySeqNo} from '../home/sort-course-by-seq';
-import {Course} from '../model/course';
-import {setupCourses} from '../common/setup-test-data';
+import {CommonModule} from "@angular/common";
+import {MatDialogModule} from "@angular/material/dialog";
+import {DebugElement} from "@angular/core";
+import {setupCourses} from "../common/setup-test-data";
+import {By} from "@angular/platform-browser";
+import {RouterTestingModule} from "@angular/router/testing";
 
 
 describe('CoursesCardListComponent', () => {
 
-    let component: CoursesCardListComponent;
-    let fixture: ComponentFixture<CoursesCardListComponent>;
-    let el: DebugElement;
+  let component: CoursesCardListComponent;
+  let fixture: ComponentFixture<CoursesCardListComponent>;
+  let el: DebugElement;
 
-    beforeEach(waitForAsync(() => {
-        TestBed.configureTestingModule({
-            imports: [CoursesModule]
-        })
+    beforeEach(waitForAsync (()=> {
+      TestBed.configureTestingModule(
+        {
+          imports: [CommonModule, MatDialogModule, RouterTestingModule]
+        }
+      )
         .compileComponents()
-        .then(() => {
-
-            fixture = TestBed.createComponent(CoursesCardListComponent);
-            component = fixture.componentInstance;
-            el = fixture.debugElement;
-
-        });
+          .then(() => {
+          fixture = TestBed.createComponent(CoursesCardListComponent);
+          component = fixture.componentInstance;
+          el = fixture.debugElement;
+      })
     }));
 
     it('should create the component', () => {
-
         expect(component).toBeTruthy();
-
     });
 
     it('should display the course list', () => {
+      component.courses = setupCourses();
 
-        component.courses = setupCourses();
-
-        fixture.detectChanges();
-
-        const cards = el.queryAll(By.css(".course-card"));
-
-        expect(cards).toBeTruthy("Could not find cards");
-        expect(cards.length).toBe(12, "Unexpected number of courses");
+      fixture.detectChanges();
 
+      console.log(el.nativeElement.outerHTML);
+      const res = el.queryAll(By.css('.course-card'))
+      expect(res.length).toEqual(12);
     });
 
     it('should display the first course', () => {
-
         component.courses = setupCourses();
 
         fixture.detectChanges();
 
         const course = component.courses[0];
 
-        const card = el.query(By.css(".course-card:first-child")),
-                title = card.query(By.css("mat-card-title")),
-                image = card.query(By.css("img"));
-
-        expect(card).toBeTruthy("Could not find course card");
+        const card = el.query(By.css('.course-card:first-child'));
+        const title = card.query(By.css('mat-card-title'));
+        const image = card.query(By.css('img'));
 
         expect(title.nativeElement.textContent).toBe(course.titles.description);
-
         expect(image.nativeElement.src).toBe(course.iconUrl);
-
     });
-
 });
 
 

src/app/courses/courses.module.ts

@@ -28,6 +28,7 @@ import {MatMomentDateModule} from '@angular/material-moment-adapter';
 import {ReactiveFormsModule} from '@angular/forms';
 import {CoursesService} from './services/courses.service';
 import {CourseResolver} from './services/course.resolver';
+import {HttpClientTestingModule} from "@angular/common/http/testing";
 
 @NgModule({
     declarations: [
@@ -39,6 +40,7 @@ import {CourseResolver} from './services/course.resolver';
     ],
     imports: [
         CommonModule,
+        HttpClientTestingModule,
         MatMenuModule,
         MatButtonModule,
         MatToolbarModule,

src/app/courses/home/async-examples.spec.ts

@@ -1,137 +1,102 @@
 import {fakeAsync, flush, flushMicrotasks, tick} from '@angular/core/testing';
-import {of} from 'rxjs';
-import {delay} from 'rxjs/operators';
+import {of} from "rxjs";
+import {delay} from "rxjs/operators";
 
 
-describe('Async Testing Examples', () => {
-
-    it('Asynchronous test example with Jasmine done()', (done: DoneFn) => {
 
-        let test = false;
-
-        setTimeout(() => {
+describe('Async Testing Examples', () => {
 
-            console.log('running assertions');
+    it('Asynchronous test example with Jasmine done()', (done) => {
 
-            test = true;
+      let flag = false;
 
-            expect(test).toBeTruthy();
+      setTimeout(()=>{
+        flag = true;
 
-            done();
+        console.log('Am in timeout-callback right now!');
 
-        }, 1000);
+        expect(flag).toBe(true);
 
+        done();
+      }, 500)
     });
 
 
     it('Asynchronous test example - setTimeout()', fakeAsync(() => {
 
-        let test = false;
-
-        setTimeout(() => {
-        });
-
-        setTimeout(() => {
-
-            console.log('running assertions setTimeout()');
-
-            test = true;
-
-        }, 1000);
-
-        flush();
-
-        expect(test).toBeTruthy();
+      let test = false;
 
+      setTimeout(() => {
+        console.log('In async timeout');
+        test = true;
+      }, 100000000);
+      flush();
+      expect(test).toBe(true)
     }));
 
 
     it('Asynchronous test example - plain Promise', fakeAsync(() => {
+      let test = false;
 
-        let test = false;
-
-        console.log('Creating promise');
-
-        Promise.resolve().then(() => {
+      console.log('Outside promise');
 
-            console.log('Promise first then() evaluated successfully');
+      Promise.resolve().then(()=>{
+        console.log('Inside promise')
+        test = true;
+      })
 
-            return Promise.resolve();
-        })
-        .then(() => {
-
-            console.log('Promise second then() evaluated successfully');
-
-            test = true;
-
-        });
-
-        flushMicrotasks();
-
-        console.log('Running test assertions');
-
-        expect(test).toBeTruthy();
+      flushMicrotasks();
 
+      expect(test).toBe(true);
     }));
 
 
     it('Asynchronous test example - Promises + setTimeout()', fakeAsync(() => {
 
-        let counter = 0;
-
-        Promise.resolve()
-            .then(() => {
+    let counter = 0;
 
-               counter+=10;
+    console.log('Outside async - operations');
 
-               setTimeout(() => {
+    Promise.resolve().then(() => {
 
-                   counter += 1;
+      console.log('In Promise');
 
-               }, 1000);
+      counter += 10;
 
-            });
-
-        expect(counter).toBe(0);
+      setTimeout(() => {
+          console.log('In timeout');
+          counter += 1;
+        }, 1000);
+      });
 
-        flushMicrotasks();
+      expect(counter).toBe(0);
 
-        expect(counter).toBe(10);
+      flushMicrotasks()
 
-        tick(500);
+      expect(counter).toBe(10);
 
-        expect(counter).toBe(10);
+      tick(500);
 
-        tick(500);
+      expect(counter).toBe(10);
 
-        expect(counter).toBe(11);
+      tick(500);
 
+      expect(counter).toBe(11);
     }));
 
     it('Asynchronous test example - Observables', fakeAsync(() => {
-
         let test = false;
 
-        console.log('Creating Observable');
-
         const test$ = of(test).pipe(delay(1000));
 
         test$.subscribe(() => {
-
-            test = true;
-
+          test = true;
         });
 
         tick(1000);
 
-        console.log('Running test assertions');
-
         expect(test).toBe(true);
-
-
     }));
-
-
 });