feat(Tests): Added more front-end tests

Author: philipbrembeck

src/tests/usability.spec.ts

@@ -15,11 +15,14 @@ test("User should be able to input a barcode and get a result", async ({
   page,
 }) => {
   await page.goto("http://localhost:3000/en");
+
   const inputField = await page.$('input[name="barcode"]');
   await inputField.type("4066600204404");
   const submitButton = await page.$('button[name="submit"]');
   await submitButton.click();
+
   await page.waitForSelector(".loading_skeleton", { state: "hidden" });
+
   const resultText = await page.textContent("#result");
   expect(resultText).toContain("Paulaner Spezi Zero");
 });
@@ -28,13 +31,35 @@ test("User should be able to input ingredients and get a result", async ({
   page,
 }) => {
   await page.goto("http://localhost:3000/en/ingredients");
+
   const inputField = await page.$('textarea[id="ingredients"]');
   await inputField.type("Duck");
   const submitButton = await page.$('button[name="checkingredients"]');
   await submitButton.click();
+
   await page.waitForSelector(".loading_skeleton", { state: "hidden" });
   const resultText = await page.textContent(".resultborder");
   expect(resultText).toContain("Duck");
+
+  await page.route("**/v0/ingredients/*", (route) => {
+    expect(route.request().url()).toBe(
+      "https://api.vegancheck.me/v0/ingredients/Duck"
+    );
+    expect(route.request().method()).toBe("GET");
+    route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify({
+        code: "OK",
+        status: "200",
+        message: "Success",
+        data: {
+          vegan: "false",
+          flagged: ["duck"],
+        },
+      }),
+    });
+  });
 });
 
 test("User should be able to switch on OLED mode in darkmode, in lightmode, user should get an error", async ({
@@ -46,7 +71,7 @@ test("User should be able to switch on OLED mode in darkmode, in lightmode, user
   const switchInput = await page.$("#oled-switch");
   await switchInput.click();
 
-  // Wait for either the "animated shake" class or the background color to change
+  // Wait for either the "animated shake" class (error) or the background color to change
   await Promise.any([
     page.waitForSelector(".switch.animated.shake", { timeout: 5000 }),
     page.waitForFunction(
@@ -74,3 +99,48 @@ test("User should be able to switch on OLED mode in darkmode, in lightmode, user
     );
   }
 });
+
+test("User should be able to input a barcode via the URL parameter `ean` ", async ({
+  page,
+}) => {
+  await page.route("**/v0/product/*", (route) => {
+    expect(route.request().url()).toBe(
+      "https://api.vegancheck.me/v0/product/4066600204404"
+    );
+    expect(route.request().method()).toBe("POST");
+    route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify({
+        status: 200,
+        product: {
+          productname: "Paulaner Spezi Zero",
+          vegan: "true",
+          vegetarian: "true",
+          animaltestfree: "n/a",
+          palmoil: "false",
+          nutriscore: "c",
+          grade: "B",
+        },
+        sources: {
+          processed: "false",
+          api: "OpenFoodFacts",
+          baseuri: "https://world.openfoodfacts.org",
+        },
+      }),
+    });
+  });
+
+  await page.goto("http://localhost:3000/en?ean=4066600204404");
+
+  const inputField = await page.waitForSelector('input[name="barcode"]', {
+    visible: true,
+  });
+  const inputValue = await inputField.evaluate((el) => el.value);
+  expect(inputValue).toBe("4066600204404");
+
+  await page.waitForSelector(".loading_skeleton", { state: "hidden" });
+
+  const resultText = await page.textContent("#result");
+  expect(resultText).toContain("Paulaner Spezi Zero");
+});