johannesnormannjensen

Briebug repository: https://github.com/briebug/jest-schematic

`ng add @briebug/jest-schematic`

when migrating to jest be sure to:

run npm install jest-preset-angular

import 'jest-preset-angular/setup-jest'; <-in the top of setup-jest.ts file

johannesnormannjensen

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { ButtonModule } from '../button/button.component';
import { AuthService } from '../service/auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',

johannesnormannjensen

import { AuthService } from './auth.service';

describe('AuthService', () => {
  let service: AuthService;
  
  beforeEach(() => {
    service = new AuthService();
  });

  it("should login with email & password", () => {

johannesnormannjensen

it("should call '/api/login'", (done) => {
  // Arrange
  const email = 'email@email.com';
  const password = 'password';
  const login$ = service.login(email, password);
  // Act
  login$.subscribe({
    next: () => {
      expect(httpClientMock.post).toHaveBeenCalledWith('/api/login', { email, password });
      done();

johannesnormannjensen

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { BehaviorSubject, first, map, Observable, shareReplay, switchMap } from 'rxjs';
import { AuthUser } from '../model/auth-user';
import { isNullOrUndefined } from '../utils/object-utils';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

johannesnormannjensen

import { firstValueFrom, of } from 'rxjs';
import { first } from 'rxjs/operators';
import { AuthService } from './auth.service';

describe('AuthService', () => {

  describe("Always", () => {
    let service: AuthService;

    beforeEach(() => {

johannesnormannjensen

import { provideHttpClient } from '@angular/common/http';
import { provideHttpClientTesting } from '@angular/common/http/testing';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Router } from '@angular/router';
import { firstValueFrom, of } from 'rxjs';
import { AuthService } from '../service/auth.service';
import { LoginComponent } from './login.component';

describe('LoginComponent', () => {
  let component: LoginComponent;

johannesnormannjensen

  it('should login with email & password from form', () => {
    // Arrange
    const email = 'email@email.com';
    const password = 'pword';
    const authService = TestBed.inject(AuthService);
    const authSpy = jest.spyOn(authService, 'login');

    // Act
    component.fg.patchValue({ email, password });
    component.login();

johannesnormannjensen

<div class="d-flex align-items-center h-100">
    <div class="card form-signin">
        <form [formGroup]="fg" (submit)="login()">
            <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
            <input formControlName="email" type="email" class="form-control" placeholder="Email address" autofocus="">
            <input formControlName="password" type="password" class="mt-2 mb-3 form-control" placeholder="Password">
            <button class="mt-5 btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
        </form>
    </div>
</div>

johannesnormannjensen

import { AuthService } from './auth.service';

describe('AuthService', () => {

  describe("Always", () => {
    let service: AuthService;

    beforeEach(() => {
      service = new AuthService();
    });