feat: Enable Cooperative Intercept Mode for puppeteer E2E testing

Aperta
  • Qualcosa non va?
#4,504 0 commenti 4 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
45/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
typescript
Ambito
testing

Direzione di ricerca

Inizia in src/testing/puppeteer/puppeteer-page.ts, intorno al codice di intercettazione delle richieste indicato, e consulta la documentazione di Cooperative Intercept Mode di Puppeteer. Determina in che modo gli argomenti di priorità e la retrocompatibilità influiscono sull’API E2EPage esistente. Il lavoro è completato quando più gestori delle richieste possono coesistere senza interrompere il comportamento attuale dell’intercettazione.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Feature: Want this? Upvote it!
Prerequisites
Describe the Feature Request

Puppeteer provides what's called Cooperative Intercept Mode which would allow for multiple request handlers to be registered. I'm asking for the following code to be modified to take advantage of this feature:

https://github.com/ionic-team/stencil/blob/f722b24f56c428102f1f0acd7a9f58ce3b001a43/src/testing/puppeteer/puppeteer-page.ts#L242-L254

I think that passing a second argument to the .respond() and .continue() methods of 0 would allow multiple request interceptors to be added.

Describe the Use Case

I have a component that dynamically builds an href, and when the markup gets rendered a request is made to the URL. The file doesn't really exist since I'm passing in dummy values for the test, so I get console.error logs in the test output for the 404 even though my tests pass. I would like to intercept the request and respond with a mock so that I don't get the noisy messages that don't represent real-world use.

Describe Preferred Solution

I think this would be a starting point:

  const interceptedReqCallback = (interceptedRequest: any) => {
    if (pageUrl === interceptedRequest.url()) {
      interceptedRequest.respond({
        status: 200,
        contentType: 'text/html',
        body: output.join('\n'),
      }, 0);
    } else {
      interceptedRequest.continue({}, 0);
    }
  };

This is based on a few things from the documentation:

All resolutions must supply a numeric priority argument to abort/continue/respond.

There are more details on how to maintain backwards compatibility, so a full solution may involve another export on the E2EPage.

Describe Alternatives

This is a known issue and there is a workaround in https://github.com/ionic-team/stencil/issues/2434#issuecomment-714776773. However, it is admittedly hacky, especially since puppeteer provides a built-in way of handling this exact situation.

Related Code

No response

Additional Information

No response

Lingua principale
TypeScript
Stelle
13.2k
Fork
865
Merge medio
2g 16h
PR unite (30g)
29

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di stenciljs/core

Tutte le issue di stenciljs/core

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.