Deuxième étape du chantier "onglet Sources" : l'UI de parcours, construite contre les endpoints backend de l'étape 1 (#45). L'onglet désactivé placeholder de RecipeTabs devient un vrai onglet fonctionnel. - RecipeTabs.tsx : nouveau type RecipesPageTab (RecipeTab | "sources") — gardé hors du type partagé RecipeTab puisque l'API n'a pas de tab=sources à valider. Un prop `tabs` optionnel restreint quels onglets s'affichent — RecipePickerDialog (choix d'une recette pour un planning) s'y restreint aux 4 onglets réels, parcourir des sources externes en plein milieu de ce dialogue n'a pas de sens sans le flux de revue/import. - Nouveau RecipeSourcesPanel.tsx : contenu de l'onglet "Sources" — autonome (son propre master-detail), ne partage pas le fetching RecipeTab de RecipesPage puisqu'il parcourt le catalogue *live* d'une source (GET /sources/:key/browse), pas la table Recipe sauvegardée. Sélecteur de source si le foyer en a activé plusieurs ; sélectionner un item déjà importé navigue directement vers la vraie recette (SourceItemTable + navigate), un item pas encore importé affiche un aperçu en lecture seule (SourceItemPreviewPanel, réutilise StepDescription — les tech steps sont donc déjà surlignés dans l'aperçu). - Bug trouvé et corrigé en écrivant le scénario Cypress : cliquer un item déjà importé changeait l'URL mais restait affiché sur l'onglet Sources (RecipesPage ne rend RecipeDetailPanel/RecipeTable qu'en dehors de l'onglet "sources"). RecipeSourcesPanel prend maintenant un callback `onViewImportedRecipe` pour repasser sur un onglet réel avant de naviguer. Tests : nouveau recipe-sources.feature (parcours utilisateur complet — onglet vide, parcours avec items importés/non importés, aperçu avec surlignage de technique) ; recipes.cy.ts corrigé (assertion obsolète sur l'ancien placeholder désactivé). Étape suivante (3/4) : écran de revue (corriger les ingrédients non résolus) + finalisation de l'import. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
93 lines
2.8 KiB
TypeScript
93 lines
2.8 KiB
TypeScript
import { Given, Then, When } from "@badeball/cypress-cucumber-preprocessor";
|
|
|
|
// Mocks the API via cy.intercept — this job doesn't run a live backend (see
|
|
// .github/workflows/ci.yml); apps/api's own Mocha suite covers real API
|
|
// behavior against a real database (see test/sources.test.ts).
|
|
//
|
|
// "the sources reference list has options" (theMealDb id 1, marmiton id 2)
|
|
// and "recipe 2's detail is available" are shared with reference-data.steps.ts
|
|
// / recipes.ts respectively — Cucumber step matching is global across every
|
|
// step-definition file, not scoped per feature.
|
|
|
|
Given("the household has enabled TheMealDB", () => {
|
|
cy.intercept("GET", "**/house/current/sources", { statusCode: 200, body: [1] });
|
|
});
|
|
|
|
Given("browsing TheMealDB returns some items", () => {
|
|
cy.intercept("GET", "**/sources/theMealDb/browse*", {
|
|
statusCode: 200,
|
|
body: {
|
|
items: [
|
|
{
|
|
externalId: "52795",
|
|
title: "Chicken Handi",
|
|
picture: null,
|
|
url: "https://www.themealdb.com/meal/52795",
|
|
alreadyImported: true,
|
|
recipeId: 2,
|
|
},
|
|
{
|
|
externalId: "9999",
|
|
title: "Fish Pie",
|
|
picture: null,
|
|
url: "https://www.themealdb.com/meal/9999",
|
|
alreadyImported: false,
|
|
recipeId: null,
|
|
},
|
|
],
|
|
nextCursor: null,
|
|
},
|
|
});
|
|
});
|
|
|
|
Given("previewing TheMealDB item {string} is available", (externalId: string) => {
|
|
cy.intercept("GET", `**/sources/theMealDb/preview/${externalId}`, {
|
|
statusCode: 200,
|
|
body: {
|
|
sourceKey: "theMealDb",
|
|
externalId,
|
|
name: "Fish Pie",
|
|
description: null,
|
|
picture: null,
|
|
portions: 4,
|
|
sourceUrl: "https://www.themealdb.com/meal/9999",
|
|
ingredients: [
|
|
{
|
|
rawText: "1 onion",
|
|
quantity: 1,
|
|
ingredient: {
|
|
id: 1,
|
|
key: "onion",
|
|
icon: "VEGETABLE",
|
|
category: "freshProduce",
|
|
subcategory: "vegetables",
|
|
reproducible: false,
|
|
allergens: [],
|
|
diets: [],
|
|
},
|
|
unit: null,
|
|
},
|
|
{ rawText: "some mystery paste", quantity: null, ingredient: null, unit: null },
|
|
],
|
|
steps: [
|
|
{
|
|
description: "Cuire à la poêle.",
|
|
picture: null,
|
|
techSteps: [{ techStep: { id: 1, key: "cook" }, start: 0, end: 5 }],
|
|
},
|
|
],
|
|
},
|
|
});
|
|
});
|
|
|
|
Then("I should see the source item {string}", (title: string) => {
|
|
cy.contains(".recipe-table__name", title).should("be.visible");
|
|
});
|
|
|
|
When("I click the source item {string}", (title: string) => {
|
|
cy.contains(".recipe-table__name", title).click();
|
|
});
|
|
|
|
Then("the source item {string} should be marked as already imported", (title: string) => {
|
|
cy.contains("tr", title).find(".source-item-table__imported-badge").should("be.visible");
|
|
});
|