Release

.github/workflows/build.yml

@@ -174,4 +174,6 @@ jobs:
           sleep 30
 
       - name: Run Playwright tests
+        env:
+          CI: true
         run: npx playwright test

.gitignore

@@ -37,4 +37,7 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
-test-results/.last-run.json
+
+# tests
+test-results/
+playwright-report/

package.json

@@ -25,7 +25,7 @@
   "dependencies": {
     "@ducanh2912/next-pwa": "^10.2.9",
     "@ericblade/quagga2": "^1.8.4",
-    "@frontendnetwork/veganify": "^1.2.9",
+    "@frontendnetwork/veganify": "^1.3.0",
     "@types/node": "22.8.1",
     "@types/react-dom": "npm:[email protected]",
     "jest-worker": "^29.7.0",

playwright.config.ts

@@ -1,5 +1,20 @@
 import { defineConfig } from "@playwright/test";
 
+// Default to localhost for local development, use staging URL for CI
+const baseURL = process.env.CI
+  ? "https://staging.veganify.app"
+  : "http://localhost:3000";
+
 export default defineConfig({
   testMatch: ["**/*.spec.ts"],
+  use: {
+    baseURL,
+  },
+  webServer: process.env.CI
+    ? undefined
+    : {
+        command: "pnpm dev",
+        url: "http://localhost:3000",
+        reuseExistingServer: true,
+      },
 });

src/components/IngredientsCheck/IngredientsForm.tsx

@@ -14,14 +14,21 @@ export function IngredientsForm() {
     vegan: null,
     surelyVegan: [],
     notVegan: [],
-    maybeVegan: [],
+    maybeNotVegan: [],
+    unknown: [],
   });
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
 
   async function handleSubmit(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
-    setResult({ vegan: null, surelyVegan: [], notVegan: [], maybeVegan: [] });
+    setResult({
+      vegan: null,
+      surelyVegan: [],
+      notVegan: [],
+      maybeNotVegan: [],
+      unknown: [],
+    });
     setError(null);
 
     const formData = new FormData(event.currentTarget);

src/components/IngredientsCheck/IngredientsList.tsx

@@ -1,23 +1,41 @@
-import React from "react";
+import { IconClassType } from "./models/Tooltip";
+import { TranslationFunction } from "./models/TranslateFunction";
+import { TooltipClient } from "./shared/Tooltip";
 
-export function IngredientList({
-  items,
-  iconClass,
-}: {
+interface IngredientListProps {
   items: string[];
-  iconClass: string;
-}) {
+  iconClass: IconClassType;
+  t: TranslationFunction;
+}
+
+export function IngredientList({ items, iconClass, t }: IngredientListProps) {
+  const tooltipMessages = {
+    "maybe-vegan": t("maybe_vegan"),
+    "unknown-vegan": t("unknown_vegan"),
+  } as const;
+
+  const shouldShowTooltip =
+    iconClass.includes("maybe-vegan") || iconClass.includes("unknown-vegan");
+  const tooltipBaseClass = iconClass.split(
+    " "
+  )[0] as keyof typeof tooltipMessages;
+  const tooltipMessage = shouldShowTooltip
+    ? tooltipMessages[tooltipBaseClass]
+    : "";
+
   return (
     <>
       {items.map((item) => (
-        <div className="Grid" key={item}>
-          <div className="Grid-cell description">
-            {item.charAt(0).toUpperCase() + item.slice(1)}
-          </div>
-          <div className="Grid-cell icons">
-            <span className={iconClass}></span>
+        <TooltipClient message={tooltipMessage as string} key={item}>
+          <div className="Grid">
+            <div className="Grid-cell description">
+              {item.charAt(0).toUpperCase() + item.slice(1)}
+            </div>
+            <div className="Grid-cell icons">
+              <span className={iconClass}></span>
+            </div>
           </div>
-        </div>
+        </TooltipClient>
       ))}
     </>
   );

src/components/IngredientsCheck/ResultsDisplay.tsx

@@ -1,14 +1,14 @@
 import { IngredientList } from "./IngredientsList";
 import { IngredientResult } from "./models/IngredientResult";
+import { TranslationFunction } from "./models/TranslateFunction";
 import { SourceInfo } from "./SourceInfo";
 
-export function ResultDisplay({
-  result,
-  t,
-}: {
+interface ResultDisplayProps {
   result: IngredientResult;
-  t: (key: string, values?: Record<string, string>) => string;
-}) {
+  t: TranslationFunction;
+}
+
+export function ResultDisplay({ result, t }: ResultDisplayProps) {
   return (
     <div id="result">
       <div className="">
@@ -28,14 +28,22 @@ export function ResultDisplay({
           <IngredientList
             items={result.notVegan}
             iconClass="non-vegan icon-cancel"
+            t={t}
+          />
+          <IngredientList
+            items={result.unknown}
+            iconClass="unknown-vegan icon-help"
+            t={t}
           />
           <IngredientList
-            items={result.maybeVegan}
-            iconClass="maybe-vegan icon-help"
+            items={result.maybeNotVegan}
+            iconClass="maybe-vegan icon-attention-alt"
+            t={t}
           />
           <IngredientList
             items={result.surelyVegan}
             iconClass="vegan icon-ok"
+            t={t}
           />
           <SourceInfo t={t} />
         </div>

src/components/IngredientsCheck/models/IngredientResult.ts

@@ -2,5 +2,6 @@ export interface IngredientResult {
   vegan: boolean | null;
   surelyVegan: string[];
   notVegan: string[];
-  maybeVegan: string[];
+  maybeNotVegan: string[];
+  unknown: string[];
 }

src/components/IngredientsCheck/models/Tooltip.ts

@@ -0,0 +1,10 @@
+export type IconClassType =
+  | "vegan icon-ok"
+  | "non-vegan icon-cancel"
+  | "unknown-vegan icon-help"
+  | "maybe-vegan icon-attention-alt";
+
+export interface TooltipMessages {
+  "maybe-vegan": string;
+  "unkown-vegan": string;
+}

src/components/IngredientsCheck/models/TranslateFunction.ts

@@ -0,0 +1,4 @@
+export type TranslationFunction = (
+  key: string,
+  values?: Record<string, string>
+) => string;

src/components/IngredientsCheck/shared/Tooltip.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { useState } from "react";
+
+interface TooltipProps {
+  message: string;
+  children: React.ReactNode;
+}
+
+export function TooltipClient({ message, children }: TooltipProps) {
+  const [isVisible, setIsVisible] = useState(false);
+
+  if (!message) {
+    return children;
+  }
+
+  return (
+    <div
+      className="tooltip-wrapper"
+      onMouseEnter={() => setIsVisible(true)}
+      onMouseLeave={() => setIsVisible(false)}
+    >
+      {children}
+      {isVisible && (
+        <div className="tooltip">
+          {message}
+          <div className="tooltip-arrow"></div>
+        </div>
+      )}
+    </div>
+  );
+}