AskOverflow.Dev

AskOverflow.Dev Logo AskOverflow.Dev Logo

AskOverflow.Dev Navigation

  • Início
  • system&network
  • Ubuntu
  • Unix
  • DBA
  • Computer
  • Coding
  • LangChain

Mobile menu

Close
  • Início
  • system&network
    • Recentes
    • Highest score
    • tags
  • Ubuntu
    • Recentes
    • Highest score
    • tags
  • Unix
    • Recentes
    • tags
  • DBA
    • Recentes
    • tags
  • Computer
    • Recentes
    • tags
  • Coding
    • Recentes
    • tags
Início / coding / Perguntas / 79555146
Accepted
JordanChester
JordanChester
Asked: 2025-04-04 19:10:53 +0800 CST2025-04-04 19:10:53 +0800 CST 2025-04-04 19:10:53 +0800 CST

Como simular respostas de serviço em teste de unidade Angular

  • 772

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);
  });
});

angular
  • 1 1 respostas
  • 18 Views

1 respostas

  • Voted
  1. Best Answer
    Naren Murali
    2025-04-04T19:41:28+08:002025-04-04T19:41:28+08:00

    Você fez isso corretamente, uma vez que a correção é executar o mocking em itbloco ou agrupar os casos de teste por categoria, como admindescrever o bloco, e então usar beforeEachpara chamar os mocks antes de cada caso de teste.

    import { TestBed, ComponentFixture, waitForAsync } from '@angular/core/testing';
    import { AppComponent, StorageService } from './app.component';
    import { AppModule } from './app.module';
    import { FormsModule } from '@angular/forms';
    
    describe('AppComponent', () => {
      let component: AppComponent;
      let fixture: ComponentFixture<AppComponent>;
      let mockStorageService: jasmine.SpyObj<StorageService>;
    
      beforeEach(async () => {
        mockStorageService = jasmine.createSpyObj('StorageService', [
          'isLoggedIn',
          'getAccountType',
        ]);
    
        await TestBed.configureTestingModule({
          declarations: [AppComponent],
          imports: [FormsModule],
          providers: [{ provide: StorageService, useValue: mockStorageService }],
        }).compileComponents();
    
        fixture = TestBed.createComponent(AppComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
      });
    
      it('should create', () => {
        expect(component).toBeTruthy();
      });
    
      it('should set isLoggedIn to true on init', () => {
        mockStorageService.isLoggedIn.and.returnValue(true);
        component.ngOnInit();
        expect(component.isLoggedIn).toBe(true);
      });
    
      it('should set isLoggedIn to false on init, when not logged in', () => {
        mockStorageService.isLoggedIn.and.returnValue(false);
        component.ngOnInit();
        expect(component.isLoggedIn).toBe(false);
      });
    
      it('should set isGuest to true on init, when not logged in', () => {
        mockStorageService.isLoggedIn.and.returnValue(false);
        component.ngOnInit();
        expect(component.isGuest).toBe(true);
      });
    
      // admin test case
      describe('admin test cases', () => {
        beforeEach(() => {
          mockStorageService.isLoggedIn.and.returnValue(true);
          mockStorageService.getAccountType.and.returnValue(0);
        });
    
        it('should detect admin', () => {
          component.ngOnInit();
          expect(component.isAdmin).toBe(true);
        });
      });
    
      it('should detect normal user', () => {
        mockStorageService.isLoggedIn.and.returnValue(true);
        mockStorageService.getAccountType.and.returnValue(1);
        component.ngOnInit();
        expect(component.isAdmin).toBe(false);
      });
    });
    
    • 2

relate perguntas

  • pipe de data não funciona para elementos com conjunto de propriedades FormControlName

  • Posso colocar o serviço do componente reutilizável no módulo principal em Angular de acordo com o cenário mencionado

  • A caixa de diálogo Mat não fecha depois que a vinculação de dados mat-dialog-close é verdadeira

  • Não é possível renderizar o componente personalizado em app.component.html

  • Reutilização de component.html em mais de 2 arquivos .ts

Sidebar

Stats

  • Perguntas 205573
  • respostas 270741
  • best respostas 135370
  • utilizador 68524
  • Highest score
  • respostas
  • Marko Smith

    Reformatar números, inserindo separadores em posições fixas

    • 6 respostas
  • Marko Smith

    Por que os conceitos do C++20 causam erros de restrição cíclica, enquanto o SFINAE antigo não?

    • 2 respostas
  • Marko Smith

    Problema com extensão desinstalada automaticamente do VScode (tema Material)

    • 2 respostas
  • Marko Smith

    Vue 3: Erro na criação "Identificador esperado, mas encontrado 'import'" [duplicado]

    • 1 respostas
  • Marko Smith

    Qual é o propósito de `enum class` com um tipo subjacente especificado, mas sem enumeradores?

    • 1 respostas
  • Marko Smith

    Como faço para corrigir um erro MODULE_NOT_FOUND para um módulo que não importei manualmente?

    • 6 respostas
  • Marko Smith

    `(expression, lvalue) = rvalue` é uma atribuição válida em C ou C++? Por que alguns compiladores aceitam/rejeitam isso?

    • 3 respostas
  • Marko Smith

    Um programa vazio que não faz nada em C++ precisa de um heap de 204 KB, mas não em C

    • 1 respostas
  • Marko Smith

    PowerBI atualmente quebrado com BigQuery: problema de driver Simba com atualização do Windows

    • 2 respostas
  • Marko Smith

    AdMob: MobileAds.initialize() - "java.lang.Integer não pode ser convertido em java.lang.String" para alguns dispositivos

    • 1 respostas
  • Martin Hope
    Fantastic Mr Fox Somente o tipo copiável não é aceito na implementação std::vector do MSVC 2025-04-23 06:40:49 +0800 CST
  • Martin Hope
    Howard Hinnant Encontre o próximo dia da semana usando o cronógrafo 2025-04-21 08:30:25 +0800 CST
  • Martin Hope
    Fedor O inicializador de membro do construtor pode incluir a inicialização de outro membro? 2025-04-15 01:01:44 +0800 CST
  • Martin Hope
    Petr Filipský Por que os conceitos do C++20 causam erros de restrição cíclica, enquanto o SFINAE antigo não? 2025-03-23 21:39:40 +0800 CST
  • Martin Hope
    Catskul O C++20 mudou para permitir a conversão de `type(&)[N]` de matriz de limites conhecidos para `type(&)[]` de matriz de limites desconhecidos? 2025-03-04 06:57:53 +0800 CST
  • Martin Hope
    Stefan Pochmann Como/por que {2,3,10} e {x,3,10} com x=2 são ordenados de forma diferente? 2025-01-13 23:24:07 +0800 CST
  • Martin Hope
    Chad Feller O ponto e vírgula agora é opcional em condicionais bash com [[ .. ]] na versão 5.2? 2024-10-21 05:50:33 +0800 CST
  • Martin Hope
    Wrench Por que um traço duplo (--) faz com que esta cláusula MariaDB seja avaliada como verdadeira? 2024-05-05 13:37:20 +0800 CST
  • Martin Hope
    Waket Zheng Por que `dict(id=1, **{'id': 2})` às vezes gera `KeyError: 'id'` em vez de um TypeError? 2024-05-04 14:19:19 +0800 CST
  • Martin Hope
    user924 AdMob: MobileAds.initialize() - "java.lang.Integer não pode ser convertido em java.lang.String" para alguns dispositivos 2024-03-20 03:12:31 +0800 CST

Hot tag

python javascript c++ c# java typescript sql reactjs html

Explore

  • Início
  • Perguntas
    • Recentes
    • Highest score
  • tag
  • help

Footer

AskOverflow.Dev

About Us

  • About Us
  • Contact Us

Legal Stuff

  • Privacy Policy

Language

  • Pt
  • Server
  • Unix

© 2023 AskOverflow.DEV All Rights Reserve