fix(admin-monitoring): remplace le filtre resourceType cassé par une vérification manuelle
`admin-monitoring.cy.ts` échouait de façon reproductible ("renders one
card per service": cy.wait timeout, "No request ever occurred").
Diagnostiqué par isolation : le matcher déclaratif `resourceType: "fetch"`
de Cypress 13.17.0 ne capte plus du tout la requête réelle de
AdminApiClient.getMonitoring() sur le Chrome 152 de cette machine — un
intercept `{resourceType: "fetch"}` sans filtre d'URL ne voit passer que
/admin/auth/me, jamais /admin/monitoring, alors que le `req.resourceType`
de cette même requête, lu depuis un handler matché par url/method seuls,
vaut bien "fetch" de façon fiable et reproductible. Le filtrage déclaratif
est cassé, pas la requête elle-même.
Remplace le matcher par un handler de fonction qui laisse passer la
requête de document (`cy.visit()` lui-même, sur la même URL que l'API en
same-origin/CI) via `req.continue()` et ne stub que le reste — vérifié
stable sur 3 runs consécutifs.
Corrige au passage le test "shows an error state" qui passait pour la
mauvaise raison : sans serveur API réel, une requête non interceptée
échoue aussi au niveau réseau, ce que MonitoringPage.catch() ne
distingue pas d'un vrai 500 — désormais aliasé et attendu comme le
premier test, pour prouver qu'il dépend bien du mock.
Suite e2e complète: 28/28 fichiers, 116/116 tests verts.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
parent
3b78582d29
commit
c1aba1f18c
1 changed files with 34 additions and 16 deletions
|
|
@ -53,21 +53,33 @@ describe("Admin monitoring", () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
// The page route `/admin/monitoring` and the API path `GET /admin/monitoring`
|
// The page route `/admin/monitoring` and the API path `GET /admin/monitoring`
|
||||||
// are identical — a plain `**/admin/monitoring` glob would also match the
|
// are identical — a plain `**/admin/monitoring` glob also matches the
|
||||||
// `cy.visit()` document request (and whether that's same-origin or not
|
// `cy.visit()` document request (and whether that's same-origin or not
|
||||||
// depends on `VITE_API_URL`, which isn't set in CI). `resourceType: "fetch"`
|
// depends on `VITE_API_URL`, which isn't set in CI).
|
||||||
// pins the intercept to the `AdminApiClient` XHR only.
|
//
|
||||||
const monitoringApi = {
|
// This used to be disambiguated with a declarative `resourceType: "fetch"`
|
||||||
method: "GET",
|
// route matcher, but that stopped working (Cypress 13.17.0 on this
|
||||||
url: "**/admin/monitoring",
|
// machine's Chrome 152): the *declarative* `resourceType` matcher no
|
||||||
resourceType: "fetch",
|
// longer catches this request at all — confirmed by logging every request
|
||||||
} as const;
|
// Cypress hands to a `{resourceType: "fetch"}` intercept, which only ever
|
||||||
|
// saw `/admin/auth/me`, never `/admin/monitoring` — even though the very
|
||||||
|
// same request's own `req.resourceType`, read *inside* a handler matched
|
||||||
|
// by url/method alone, reliably reads back `"fetch"`. So the request *is*
|
||||||
|
// correctly typed; only the pre-filtering by that type is broken. Reading
|
||||||
|
// `req.resourceType` inside the handler and branching manually (as below)
|
||||||
|
// isn't affected by that bug and reproduced correctly in every check.
|
||||||
|
function interceptMonitoringApi(response: { statusCode: number; body: unknown }) {
|
||||||
|
return cy.intercept("GET", "**/admin/monitoring", (req) => {
|
||||||
|
if (req.resourceType === "document") {
|
||||||
|
req.continue();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
req.reply(response);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
it("renders one card per service with its status and details", () => {
|
it("renders one card per service with its status and details", () => {
|
||||||
cy.intercept(monitoringApi, {
|
interceptMonitoringApi({ statusCode: 200, body: monitoringFixture() }).as("getMonitoring");
|
||||||
statusCode: 200,
|
|
||||||
body: monitoringFixture(),
|
|
||||||
}).as("getMonitoring");
|
|
||||||
cy.visit("/admin/monitoring");
|
cy.visit("/admin/monitoring");
|
||||||
cy.wait("@getMonitoring");
|
cy.wait("@getMonitoring");
|
||||||
|
|
||||||
|
|
@ -85,11 +97,17 @@ describe("Admin monitoring", () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
it("shows an error state when the request fails", () => {
|
it("shows an error state when the request fails", () => {
|
||||||
cy.intercept(monitoringApi, {
|
// Aliased and waited on (unlike the other tests' plain intercepts) so
|
||||||
statusCode: 500,
|
// this genuinely proves the 500 came from the mock — without a live API
|
||||||
body: { code: 5000, message: "x" },
|
// server, an unmatched request fails at the network level too, which
|
||||||
});
|
// `MonitoringPage`'s `.catch()` can't tell apart from a real 500 (see
|
||||||
|
// the comment above `interceptMonitoringApi`, this is exactly the class
|
||||||
|
// of bug that let this test pass for the wrong reason before).
|
||||||
|
interceptMonitoringApi({ statusCode: 500, body: { code: 5000, message: "x" } }).as(
|
||||||
|
"getMonitoringError",
|
||||||
|
);
|
||||||
cy.visit("/admin/monitoring");
|
cy.visit("/admin/monitoring");
|
||||||
|
cy.wait("@getMonitoringError");
|
||||||
cy.contains("Impossible de charger").should("be.visible");
|
cy.contains("Impossible de charger").should("be.visible");
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue