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 / 79554055
Accepted
C. Leroy
C. Leroy
Asked: 2025-04-04 05:37:52 +0800 CST2025-04-04 05:37:52 +0800 CST 2025-04-04 05:37:52 +0800 CST

Sinal angular 19 e teste através do RouterTestingHarness

  • 772

Encontro alguns problemas ao tentar escrever um teste.

Tenho um componente que inclui apenas um SignalStore

import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { FormulaireStore } from './store/formulaire-store';

@Component({
  selector: 'app-formulaire',
  imports: [],
  providers: [FormulaireStore],
  template: `
    <p>formulaire works!</p>
    @if(store.context(); as ctx) {
    <p>context : {{ ctx.informations }}</p>
    }
  `,
  styleUrl: './formulaire.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FormulaireComponent {
  readonly store = inject(FormulaireStore);
}
import { inject } from '@angular/core';
import {
  patchState,
  signalStore,
  withHooks,
  withMethods,
  withProps,
  withState,
} from '@ngrx/signals';
import { rxMethod } from '@ngrx/signals/rxjs-interop';
import { pipe, switchMap, tap } from 'rxjs';
import { FormsService } from '../../services/form.service';

export interface FormulaireContexte {
  informations: string;
}

type FormulaireState = {
  context: Partial<FormulaireContexte> | undefined;
};

const initialState: FormulaireState = {
  context: undefined,
};

export const FormulaireStore = signalStore(
  withState<FormulaireState>(initialState),
  withProps(() => ({
    _formService: inject(FormsService),
  })),
  withMethods((store) => {
    return {
      _getContext: rxMethod<void>(
        pipe(
          switchMap(() => {
            return store._formService.getContext();
          }),
          tap((context) => {
            patchState(store, {
              context,
            });
          })
        )
      ),
    };
  }),
  withHooks(({ _getContext }) => {
    return {
      onInit() {
        _getContext();
      },
    };
  })
);

e o serviço usado pelo SignalStore

import { HttpClient } from '@angular/common/http';
import { inject, Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { FormulaireContexte } from '../formulaire/store/formulaire-store';

@Injectable({ providedIn: 'root' })
export class FormsService {
  readonly #client = inject(HttpClient);

  getContext(): Observable<FormulaireContexte> {
    return this.#client.get<FormulaireContexte>(`/api/forms/context`);
  }
}

Portanto, estou tentando escrever um teste para interagir com a IU

import { TestBed } from '@angular/core/testing';
import { provideHttpClient } from '@angular/common/http';
import { FormulaireComponent } from './formulaire.component';
import { provideRouter } from '@angular/router';

import {
  HttpTestingController,
  provideHttpClientTesting,
} from '@angular/common/http/testing';
import { RouterTestingHarness } from '@angular/router/testing';

describe('FormulaireComponent', () => {
  const setup = async () => {
    TestBed.configureTestingModule({
      providers: [
        provideRouter([
          {
            path: 'formulaire',
            pathMatch: 'full',
            component: FormulaireComponent,
          },
        ]),
        provideHttpClient(),
        provideHttpClientTesting(),
      ],
    });

    const httpCtrl = TestBed.inject(HttpTestingController);

    const harness = await RouterTestingHarness.create('formulaire');
    harness.fixture.autoDetectChanges(true);

    httpCtrl
      .match((req) => Boolean(req.url.match(`/api/forms/context`)))[0]
      .flush({ informations: 'mocked informations' });
    httpCtrl.verify();

    return harness;
  };

  it('should create', async () => {
    const harness = await setup();

    //! This line is needed to see changes
    harness.detectChanges();

    debugger;

    expect(1).toBe(1);
  });
});

mas parece que preciso dessa linha específica

    //! This line is needed to see changes
    harness.detectChanges();

para entrar na condição @if do modelo.

o comportamento estranho é que se não chamar httpClient no serviço

  getContext(): Observable<FormulaireContexte> {
    //return this.#client.get<FormulaireContexte>(`/api/forms/context`);
    return of({ informations: 'informations from of operator' });
  }

Ele funciona sem a necessidade de

harness.detectChanges();

Não entendi o comportamento aqui, preciso de alguns conselhos para entendê-lo

angular
  • 1 1 respostas
  • 37 Views

1 respostas

  • Voted
  1. Best Answer
    Naren Murali
    2025-04-04T20:17:50+08:002025-04-04T20:17:50+08:00

    A única diferença que vejo é que:

    1. this.#client.get<FormulaireContexte>(/api/forms/context );-> demora um pouco para resolver, em vez de resolver imediatamente.

    2. of({ informations: 'informations from of operator' })-> resolve imediatamente em comparação com a forma anterior.

    Também observei que a linha abaixo autoDetectChangesacionará um ciclo de detecção de alterações.

    const harness = await RouterTestingHarness.create('formulaire');
    harness.fixture.autoDetectChanges(true);
    

    Então pode ser apenas uma questão de tempo. O ofé resolvido antes da detecção de alterações ser executada e a @ifcondição mostra o valor correto. Enquanto o this.#client.get<FormulaireContexte>(/api/forms/context );é resolvido após a detecção de alterações ser executada, portanto você precisa de um adicional fixture.detectChanges()para o @ifpara mostrar o valor correto.

    Para testar essa teoria, você pode fazer o ofobservável resolver com um atraso, se o comportamento for que os casos de teste passem sem chamar fixture.detectChanges(), então minha teoria está errada. Caso contrário, está correta.

    getContext(): Observable<FormulaireContexte> {
      //return this.#client.get<FormulaireContexte>(`/api/forms/context`);
      return of({ informations: 'informations from of operator' }).pipe(delay(1000));
    }
    
    • 1

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