add tests for recipe page

test/e2e/tests/helpers.ts

@@ -4,8 +4,13 @@ import path from "path";
 /**
  * Uploads a photo to the server, redirects to the photo page
  * @param page {Page}
+ * @param photo {object} - The photo object to upload, overrides the default values
+ * @returns {Promise<{photo: object, goToPhoto: Function}>} - The uploaded photo object and a function to navigate to the photo page if needed
  */
-export const uploadPhoto = async (page: Page, photo: any = {}) => {
+export const uploadPhoto = async (
+  page: Page,
+  photo: any = {}
+): Promise<{ photo: object; goToPhoto: Function }> => {
   await page.goto("/fh");
 
   photo = Object.assign(
@@ -30,7 +35,11 @@ export const uploadPhoto = async (page: Page, photo: any = {}) => {
   await expect(uploadForm).toContainText(photo.title);
   await page.fill("#photo_tags", photo.tags.join(", "));
   await page.locator("button[type=submit]", { hasText: "submit" }).click();
-  return { photo };
+
+  return {
+    photo,
+    goToPhoto: async () => await page.goto(page.url()),
+  };
 };
 
 export const openDeletePhotoModal = async (page: Page) => {

test/e2e/tests/photo.spec.ts

@@ -34,6 +34,7 @@ test.describe("Photo Page: Static", () => {
   });
 
   test("can download photo", async ({ page, context }) => {
+    await uploadPhoto(page);
     const downloadPromise = page.waitForEvent("download");
     await page.locator("a", { hasText: "Download" }).click();
 

test/e2e/tests/recipe.spec.ts

@@ -1,16 +1,33 @@
 import { test, expect } from "../fixtures/axe-test";
 import { recipeManagementEnabled, userFixture } from "./helpers";
 
-test.describe("User Settings page", () => {
+test.describe("Recipe page", () => {
   test.beforeEach(async ({ page }) => {
     if (recipeManagementEnabled) {
-      // TODO
-      test.fail();
+      await page.goto("/fh/en_US/recipes/1");
     } else {
       console.info(
         `Skipping Recipe tests because environment variables are not set.`
       );
       test.skip();
     }
   });
+
+  test("should not have any automatically detectable accessibility issues", async ({
+    makeAxeBuilder,
+  }) => {
+    test.slow();
+    const accessibilityScanResults = await makeAxeBuilder().analyze();
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+
+  test("should not have any automatically detectable accessibility issues in dark mode", async ({
+    page,
+    makeAxeBuilder,
+  }) => {
+    test.slow();
+    await page.emulateMedia({ colorScheme: "dark" });
+    const accessibilityScanResults = await makeAxeBuilder().analyze();
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
 });