0
votes

Cas d'essai angulaire Retours TypeError: _Chis.recaptchaapi.Render n'est pas une fonction

J'ai mis en œuvre la NGX-CAPTCHA dans des formes réactives angulaires 6. La fonctionnalité fonctionne bien pour moi, mais lorsque j'exécute le boîtier de test de l'unité, le boîtier de test échoue avec le message suivant:

TypeError: _Chis.recaptchaapi.Render n'est pas une fonction. P> BlockQuote>

J'ai implémenté le NGX-CAPTCHA (type visible) dans deux composants. Pour que les deux composants fonctionnent bien pour moi, mais pendant la course de test de l'unité, je reçois l'erreur mentionnée ci-dessus. P>

J'ai essayé avec les éléments suivants: p>

captcha-test.html p> xxx pré>

captca-test.ts p> xxx pré>

// captcha-test.spec.ts p>

import { async, ComponentFixture, TestBed } from 
"@angular/core/testing";
import { HttpClientModule } from "@angular/common/http";
import { CaptchaTestComponent } from "./captcha-test.component";
import { BrowserAnimationsModule } from "@angular/platform- 
browser/animations";
import { RouterTestingModule } from "@angular/router/testing";
import { MatProgressSpinnerModule, MatFormFieldModule, MatInputModule } 
from "@angular/material";
import { ReactiveFormsModule, FormBuilder } from "@angular/forms";
import { TestConstants } from "src/app/test/constants";
import { NgxCaptchaModule } from "ngx-captcha";

describe("CaptchaTestComponent", () => {
jasmine.getEnv().allowRespy(true);
let fixture: ComponentFixture<CaptchaTestComponent>;

beforeEach(async(function () {
TestBed.configureTestingModule({
  imports: [RouterTestingModule, BrowserAnimationsModule,
    ReactiveFormsModule, HttpClientModule, MatProgressSpinnerModule,
    MatFormFieldModule, MatInputModule, NgxCaptchaModule],
  providers: [FormBuilder
  ],
  declarations: [CaptchaTestComponent]
  }).compileComponents();
}));

beforeEach(function () {
 fixture = TestBed.createComponent(CaptchaTestComponent);
 this.component = fixture.componentInstance;
 this.component.captchaExampleForm.controls["captcha"].setValue(TestConstan ts.validCaptcha); //manually set a string data as input data.

fixture.detectChanges();
});

it("should init component properly", function () {
  this.component.ngOnInit();
  expect(this.component.captchaExampleForm).toBeDefined();
});

it("should return submit as false when we submit the form", async 
  function () {
    const result = await this.component.exapmleFormSubmit();
    expect(result).toBeFalsy();
  });
});


2 commentaires

Veuillez inclure l'ensemble du fichier .spec que vous avez tenté.


J'ajoute le fichier .Spec sur la section question. Merci. @dmcgandle


3 Réponses :


0
votes

On dirait que c'était un problème de synchronisation. Je mets ce que vous avez posté jusqu'à présent dans un Stackblitz pour reproduire votre problème. Comme vous pouvez le constater dans la Stackblitz, les deux tests passent maintenant.

Le changement que j'ai fait à la suite de tests était de modifier l'ordre de la manière dont vous avez appelé Fixture.Detectchanges () dans la seconde < Code> avant () . Avant le changement, il ressemblait à ceci: xxx

et après le changement, il ressemble à ceci: xxx

la raison est significatif est parce que fixture.detChanges () appels ngoninit () , et vous configurez votre formulaire à l'intérieur de ngoninit () . Si vous essayez de modifier le formulaire avec SETVALUE avant qu'il soit configuré, cela ne fonctionnera pas. Problème de poulet et d'oeuf. :)

J'espère que cela aide.


2 commentaires

Cela ne fonctionne pas, nous obtenons toujours la même erreur de rendu, mais parfois il est en train de passer donc une possibilité de conditions de course pendant que des tests sont en cours d'exécution?


Intéressant. Il semble y avoir une consigne systématiquement dans la collerblitz. Peut-être que vous pourriez forcer la Stackblitz à votre propre compte et mettre à jour avec toutes les données de votre composant et de votre modèle. Il peut y avoir quelque chose dans ce code causant la question.



0
votes

J'ai résolu ce problème en remplaçant le module contenant le composant NGX-RECAPTCHA2.

MockComponent pour RECAPTCHA V2 P>

beforeEach(async(function () {
    TestBed.configureTestingModule({
      imports: [BrowserAnimationsModule, ReactiveFormsModule, NgxCaptchaModule],
      declarations: [SignupComponent, MockRecaptchaV2Component],
    }).overrideModule(NgxCaptchaModule, {
      remove: {
        // SignupComponent is needed as ReCaptcha2Component is used as child component inside SignupComponent
        declarations: [SignupComponent, ReCaptcha2Component], 
        exports: [SignupComponent, ReCaptcha2Component]
      }
    }).compileComponents();
  }));


0 commentaires

1
votes

À mon avis, c'est de loin la solution la plus propre, utilisez simplement le package NG-Mocks et se moquez de la ngxcaptchamodule dans vos importations.

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        // other imports
        MockModule(NgxCaptchaModule),
      ],
      declarations: [
        SignUpComponent
      ]
    }).compileComponents();
  }));


0 commentaires