batchCooking/apps/web/cypress/support/step_definitions/common.steps.ts

import { Given, Then, When } from "@badeball/cypress-cucumber-preprocessor";
import { buildProfile, currentProfile, resetProfile, setCurrentProfile } from "../profile";

// Steps shared across every feature — signing in/out, navigation, and
// generic UI assertions/interactions phrased the same way regardless of
// which page they happen to run against. Anything specific to one feature
// (its own API responses, its own DOM structure) lives in that feature's
// own `<name>.steps.ts` instead — same split as apps/api's
// step-definitions/ (shared "profile already exists" vs. feature-specific
// steps).
//
// Mocks the API via `cy.intercept` — this job doesn't run a live backend
// (see .github/workflows/ci.yml); apps/api's own Mocha/Cucumber suites
// cover real API behavior against a real database.

Given("I am not signed in", () => {
  cy.intercept("GET", "**/auth/me", { statusCode: 401 });
});

// No `Before()` hook for this reset (deliberately) — registering any
// Cucumber hook makes the preprocessor's browser runtime read
// `messages.HookType.{BEFORE,AFTER}_TEST_CASE` to report it, and that enum
// doesn't exist on the older, CommonJS-only `@cucumber/messages` this repo
// is pinned to (see `pnpm.overrides` in package.json, and this branch's
// commit history for why) — every scenario crashed on "Cannot read
// properties of undefined (reading 'BEFORE_TEST_CASE')" the moment this
// file registered one. Resetting right here instead, at the one step every
// profile-building chain always starts with, is equivalent for our
// purposes without needing a hook at all.
Given("I am signed in as {string} {string}", (firstName: string, lastName: string) => {
  resetProfile();
  setCurrentProfile(
    buildProfile({
      firstName,
      lastName,
      email: `${firstName.toLowerCase()}@example.com`,
    }),
  );
  cy.intercept("GET", "**/auth/me", { statusCode: 200, body: currentProfile });
});

// Composable with the step above — re-registers the same intercept with an
// updated profile field. Order between these doesn't matter as long as they
// all run before the scenario's `visit`/`When` step: Cypress resolves
// multiple `cy.intercept` calls on the same route by giving the
// most-recently-registered one priority, so the final, fully-assembled
// profile is always what the app actually receives.
Given("my household id is {int}", (houseId: number) => {
  if (!currentProfile) {
    throw new Error('"my household id is" must follow "I am signed in as ..."');
  }
  setCurrentProfile({ ...currentProfile, houseId });
  cy.intercept("GET", "**/auth/me", { statusCode: 200, body: currentProfile });
});

Given("my diet id is {int}", (dietId: number) => {
  if (!currentProfile) {
    throw new Error('"my diet id is" must follow "I am signed in as ..."');
  }
  setCurrentProfile({ ...currentProfile, dietId });
  cy.intercept("GET", "**/auth/me", { statusCode: 200, body: currentProfile });
});

Given("my user id is {int}", (id: number) => {
  if (!currentProfile) {
    throw new Error('"my user id is" must follow "I am signed in as ..."');
  }
  setCurrentProfile({ ...currentProfile, id });
  cy.intercept("GET", "**/auth/me", { statusCode: 200, body: currentProfile });
});

When("I visit {string}", (path: string) => {
  cy.visit(path);
});

Then("the URL should include {string}", (fragment: string) => {
  cy.url().should("include", fragment);
});

Then("the URL should not include {string}", (fragment: string) => {
  cy.url().should("not.include", fragment);
});

Then("the URL should be the home page", () => {
  cy.url().should("eq", `${Cypress.config().baseUrl}/`);
});

Then("I should see {string}", (text: string) => {
  cy.contains(text).should("be.visible");
});

Then("I should see the heading {string}", (text: string) => {
  cy.contains("h1", text).should("be.visible");
});

Then("I should not see {string}", (text: string) => {
  cy.contains(text).should("not.exist");
});

When("I click the button {string}", (text: string) => {
  cy.contains("button", text).click();
});

When("I click the link {string}", (text: string) => {
  cy.contains("a", text).click();
});

When("I fill in the {string} field with {string}", (fieldId: string, value: string) => {
  cy.get(`#${fieldId}`).type(value);
});

When("I clear the {string} field", (fieldId: string) => {
  cy.get(`#${fieldId}`).clear();
});

Then("the {string} field should have the value {string}", (fieldId: string, value: string) => {
  cy.get(`#${fieldId}`).should("have.value", value);
});

When("I select {string} from the {string} field", (value: string, fieldId: string) => {
  cy.get(`#${fieldId}`).select(value);
});

Then("I should see the section {string}", (legend: string) => {
  cy.contains("legend", legend).should("be.visible");
});

// Needed for a section that can render below the fold of `.app-content`'s
// own scroll (see layout.cy.ts) — a bare `.should("be.visible")` doesn't
// auto-scroll (only interaction commands like `.click()`/`.check()` do),
// so a section low on a long page needs this before asserting on it.
When("I scroll to the section {string}", (legend: string) => {
  cy.contains("legend", legend).scrollIntoView();
});

// `.recipe-detail-panel` is used by both a saved recipe's real detail
// (RecipeDetailPanel) and an unsaved source item's read-only preview
// (SourceItemPreviewPanel) — recipes.feature and recipe-sources.feature
// both need this.
Then("the recipe detail panel heading should be {string}", (text: string) => {
  cy.get(".recipe-detail-panel").contains("h2", text).should("be.visible");
});

// `.step-tech-step`/`.tooltip__bubble` come from StepDescription/Tooltip
// (components/ui/), rendered by both of those same two panels — same
// reasoning as the detail-panel-heading step above.
Then("I should see the highlighted technique {string}", (text: string) => {
  // The steps section can sit below the panel's header/photo/description,
  // off the fold of `.app-content`'s own scroll (see layout.cy.ts) — a
  // bare `.should("be.visible")` doesn't auto-scroll.
  cy.contains(".step-tech-step", text).scrollIntoView().should("be.visible");
});

When("I focus the highlighted technique {string}", (text: string) => {
  cy.contains(".step-tech-step", text).focus();
});

Then("the tooltip should show {string}", (label: string) => {
  cy.get(".tooltip__bubble").contains(label).should("be.visible");
});

Then("the checkbox {string} should be checked", (label: string) => {
  cy.contains("label", label).find("input[type=checkbox]").should("be.checked");
});

Then("the checkbox {string} should not be checked", (label: string) => {
  cy.contains("label", label).find("input[type=checkbox]").should("not.be.checked");
});

When("I check the checkbox {string}", (label: string) => {
  cy.contains("label", label).find("input[type=checkbox]").check();
});

Then("the radio {string} should be checked", (label: string) => {
  cy.contains("label", label).find("input[type=radio]").should("be.checked");
});

Then("the radio {string} should not be checked", (label: string) => {
  cy.contains("label", label).find("input[type=radio]").should("not.be.checked");
});

When("I click the radio {string}", (label: string) => {
  cy.contains("label", label).click();
});

Then("the page should have no theme override", () => {
  cy.get("html").should("not.have.attr", "data-theme");
});

Then("the page theme should be {string}", (theme: string) => {
  cy.get("html").should("have.attr", "data-theme", theme);
});

// Freezes `Date` so "today"/"this week" assertions are deterministic
// instead of depending on the day the suite happens to run.
Given("today is frozen at {string}", (iso: string) => {
  cy.clock(new Date(iso), ["Date"]);
});

Given("the viewport is {int} by {int}", (width: number, height: number) => {
  cy.viewport(width, height);
});

Then("the {string} button should not be disabled", (text: string) => {
  cy.contains("button", text).should("not.be.disabled");
});

When("I open the account menu", () => {
  cy.get(".app-sidebar__account-toggle").click();
});

// Not "**/planning*" — that glob also matches the Vite dev request for
// planning-page.scss. Used by any feature that lands on the home page
// (Planning) but isn't itself testing the planning grid's content.
Given("the planning request returns nothing", () => {
  cy.intercept("GET", /\/planning\?/, { statusCode: 200, body: null });
});

Given("the household request returns no household", () => {
  cy.intercept("GET", "**/house/current", { statusCode: 200, body: null });
});

Then("the link {string} should point to {string}", (text: string, href: string) => {
  cy.contains("a", text).should("have.attr", "href", href);
});