JordanChester's questions

Tenho uma função ngOnInit() em um componente que verifica o armazenamento de sessão por meio de um StorageService para ver se um usuário está logado e qual é o tipo de conta dele. Ele então atribuirá um bool isAdmin como true se o tipo de conta for 0, ou isGuest true se isLoggedIn() retornar false.

Aqui está o código relevante:

Componente

import { Component, OnInit } from '@angular/core';
import { StorageService } from '../_services/storage.service';
import { AuthService } from '../_services/auth.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrl: './navbar.component.css'
})
export class NavbarComponent implements OnInit {
  isLoggedIn = false;
  isAdmin = false;
  isGuest = true;

  constructor(private authService: AuthService, private storageService: StorageService, private router: Router) { }

  ngOnInit(): void {
    if (this.storageService.isLoggedIn()) {
      this.isLoggedIn = true;
      this.isGuest = false;
      if (this.storageService.getAccountType() == 0) {
        this.isAdmin = true;
      }
    }
  }

  logout(): void {
    sessionStorage.clear();
    this.reloadPage();
  }

  search(text: string): void {
    this.router.navigate(['/library', {search: text}])
  }

  reloadPage(): void {
    window.location.reload();
  }
}

Serviço de Armazenamento

import { Injectable } from '@angular/core';

const USER_KEY = 'auth-user';

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

  clean(): void {
    window.sessionStorage.clear();
  }

  public saveUser(user: any): void {
    window.sessionStorage.removeItem(USER_KEY);
    window.sessionStorage.setItem(USER_KEY, JSON.stringify(user));
  }

  public getUser(): any {
    const user = window.sessionStorage.getItem(USER_KEY);
    if (user) {
      return JSON.parse(user);
    }

    return {};
  }

  public isLoggedIn(): boolean {
    const user = window.sessionStorage.getItem(USER_KEY);
    if (user) {
      return true;
    }

    return false;
  }

  public getAccountType() {
    const user = window.sessionStorage.getItem(USER_KEY);
    if (user) {
      var parsedUser = JSON.parse(user);
      return parsedUser.accountType;
    }
  }
}

Estou com problemas para simular este serviço. Quero simular os valores de retorno dos métodos isLoggedIn() e getAccountType() chamados no componente ngOnInit() para simular um tipo de conta de administrador. Como eu faria isso? Primeira vez tentando testes de unidade com Jasmine.

Minha tentativa atual:

Arquivo de teste de unidade

import { FormsModule } from "@angular/forms";
import { NavbarComponent } from "./navbar.component";
import { ComponentFixture, TestBed } from "@angular/core/testing";
import { provideHttpClient } from "@angular/common/http";
import { StorageService } from "../_services/storage.service";

describe('NavbarComponent', () => {
  let component: NavbarComponent;
  let fixture: ComponentFixture<NavbarComponent>;
  let mockStorageService: jasmine.SpyObj<StorageService>;

  beforeEach(async () => {
    mockStorageService = jasmine.createSpyObj('StorageService', ['isLoggedIn', 'getAccountType']);
    mockStorageService.isLoggedIn.and.returnValue(true);
    mockStorageService.getAccountType.and.returnValue(0);

    await TestBed.configureTestingModule({
      declarations: [NavbarComponent],
      imports: [FormsModule],
      providers: [{ provide: StorageService, useValue: mockStorageService }]
    })
      .compileComponents();

    fixture = TestBed.createComponent(NavbarComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should set isLoggedIn to true on init', () => {
    component.ngOnInit();
    expect(component.isLoggedIn).toBe(true);
  });

  it('should detect admin', () => {
    component.ngOnInit();
    expect(component.isAdmin).toBe(true);
  });
});

Estou criando um formulário de registro de usuário no Angular, aqui está o ts

import { Component } from '@angular/core';
import { AuthService } from '../_services/auth.service';

@Component({
  selector: 'app-registration',
  templateUrl: './registration.component.html',
  styleUrl: './registration.component.css'
})
export class RegistrationComponent {
  form: any = {
    email: null,
    password: null,
    accountType: 1,
    name: null,
    address: null,
    phone: null
  };
  isSuccessful = false;
  isSignUpFailed = false;
  errorMessage = '';

  constructor(private authService: AuthService) { }

  onSubmit(): void {
    const { email, password, accountType, name, address, phone } = this.form;

    this.authService.register(email, password, accountType, name, address, phone).subscribe({
      next: data => {
        console.log(data);
        this.isSuccessful = true;
        this.isSignUpFailed = false;
      },
      error: err => {
        this.errorMessage = err.error.message;
        this.isSignUpFailed = true;
      }
    });
  }

}

Em submit chama meu método de registro authService (abaixo) que deve chamar o endpoint register-account na minha API

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { AccountType } from '../_classes/AccountType';
import { RegisterRequest } from '../_DTOs/RegisterRequest';

const AUTH_API = 'https://localhost:7033/api/account/';

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable({
  providedIn: 'root',
})
export class AuthService {
  constructor(private http: HttpClient) { }

  register(email: string, password: string, accountType: AccountType, name: string, address: string, phone: string): Observable<any> {
    const request: RegisterRequest = {
      email: email,
      password: password,
      accountType: accountType,
      name: name,
      address: address,
      phone: phone
    }

    return this.http.post(
      AUTH_API + 'register-account',
      {
        request
      },
      httpOptions
    );
  }
}

Com um ponto de interrupção no meu AccountController, o método nunca parece ser atingido. Aqui está o controlador

using AML.Server.Interfaces;
using AML.Server.Models;
using Microsoft.AspNetCore.Mvc;

namespace AML.Server.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class AccountController : ControllerBase
    {
        private readonly IAccountRepository _accountRepository;

        public AccountController(IAccountRepository accountRepository)
        {
            this._accountRepository = accountRepository;
        }

        [HttpPost]
        [Route("register-account")]
        public async Task<bool> RegisterAccount(RegisterRequest request)
{
    bool success = false;

    if (request.Email == "[email protected]")
    {
        success = true;
    }

    // Logic going to repo & return success response
    return success;
}
    }
}

Ele gera uma resposta ruim de 400, a resposta que recebo no DevTools é

{
    "type": "https://tools.ietf.org/html/rfc9110#section-15.5.1",
    "title": "One or more validation errors occurred.",
    "status": 400,
    "errors": {
        "name": [
            "The name field is required."
        ],
        "email": [
            "The email field is required."
        ],
        "phone": [
            "The phone field is required."
        ],
        "address": [
            "The address field is required."
        ],
        "password": [
            "The password field is required."
        ]
    },
    "traceId": "00-ef5889b3c6e2444528b8799e51a3107b-8ca9bab2705e4cc0-00"
}

Parece que os parâmetros não estão passando, mas não sei como resolver o problema. Alguém tem alguma ideia?

Editar - Informações adicionais potencialmente úteis

Solicitar carga útil

{"request":{"email":"[email protected]","password":"testtest","accountType":1,"name":"Jordan Abc","address":"123 Fake Street","phone":"07123456789"}}

Formulário de inscrição html

<app-navbar></app-navbar>
<div class="font-weight-bold">
  <h3 class="title-text">Registration</h3>
</div>
<div class="content col-md-12">
  <div class="registration-form">
    @if (!isSuccessful) {
    <form name="form"
          (ngSubmit)="f.form.valid && onSubmit()"
          #f="ngForm"
          novalidate>
      <div class="form-group">
        <label for="email">Email</label>
        <input type="email"
               class="form-control"
               name="email"
               [(ngModel)]="form.email"
               required
               email
               #email="ngModel"
               [ngClass]="{ 'is-invalid': f.submitted && email.errors }" />
        @if (email.errors && f.submitted) {
        <div class="invalid-feedback">
          @if (email.errors['required']) {
          <div>Email is required</div>
          }
          @if (email.errors['email']) {
          <div>Email must be a valid email address</div>
          }
        </div>
        }
      </div>
      <div class="form-group">
        <label for="password">Password</label>
        <input type="password"
               class="form-control"
               name="password"
               [(ngModel)]="form.password"
               required
               minlength="6"
               #password="ngModel"
               [ngClass]="{ 'is-invalid': f.submitted && password.errors }" />
        @if (password.errors && f.submitted) {
        <div class="invalid-feedback">
          @if (password.errors['required']) {
          <div>Password is required</div>
          }
          @if (password.errors['minlength']) {
          <div>Password must be at least 6 characters</div>
          }
        </div>
        }
      </div>
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text"
               class="form-control"
               name="name"
               [(ngModel)]="form.name"
               required
               minlength="1"
               maxlength="30"
               #name="ngModel"
               [ngClass]="{ 'is-invalid': f.submitted && name.errors }" />
        @if (name.errors && f.submitted) {
        <div class="invalid-feedback">
          @if (name.errors['required']) {
          <div>Name is required</div>
          }
          @if (name.errors['minlength']) {
          <div>Name is required</div>
          }
          @if (name.errors['maxlength']) {
          <div>Name must be at most 30 characters</div>
          }
        </div>
        }
      </div>
      <div class="form-group">
        <label for="address">Address</label>
        <input type="text"
               class="form-control"
               name="address"
               [(ngModel)]="form.address"
               required
               minlength="1"
               maxlength="75"
               #address="ngModel"
               [ngClass]="{ 'is-invalid': f.submitted && address.errors }" />
        @if (address.errors && f.submitted) {
        <div class="invalid-feedback">
          @if (address.errors['required']) {
          <div>Address is required</div>
          }
          @if (address.errors['minlength']) {
          <div>Address is required</div>
          }
          @if (address.errors['maxlength']) {
          <div>Address must be at most 75 characters</div>
          }
        </div>
        }
      </div>
      <div class="form-group">
        <label for="phone">Phone Number</label>
        <input type="tel"
               class="form-control"
               name="phone"
               [(ngModel)]="form.phone"
               required
               pattern="[0-9]{11}"
               #phone="ngModel"
               [ngClass]="{ 'is-invalid': f.submitted && phone.errors }" />
        @if (phone.errors && f.submitted) {
        <div class="invalid-feedback">
          @if (phone.errors['required']) {
          <div>Phone Number is required</div>
          }
          @if (phone.errors['tel']) {
          <div>Valid UK Phone Number is required</div>
          }
          @if (phone.errors['pattern']) {
          <div>Valid UK Phone Number is required (No spaces)</div>
          }
        </div>
        }
      </div>
      <div class="form-group">
        <button class="btn btn-primary btn-block">Register</button>
      </div>

      @if (f.submitted && isSignUpFailed) {
      <div class="alert alert-warning">
        Signup failed!<br />{{ errorMessage }}
      </div>
      }
    </form>
    } @else {
    <div class="alert alert-success">Your registration is successful!</div>
    }
  </div>
</div>

proxy.conf.js

const { env } = require('process');

const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :
    env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'https://localhost:7033';

const PROXY_CONFIG = [
  {
    context: [
      "/api/*"
    ],
    target,
    secure: false,
    
  }
]

module.exports = PROXY_CONFIG;