Merge pull request #1350 from w3bdesign/develop

.

Author: w3bdesign

.github/workflows/playwright.yml

@@ -17,14 +17,36 @@ jobs:
       run: npm ci
     - name: Install Playwright Browsers
       run: npx playwright install --with-deps
+    - name: Build the project
+      run: npm run build
+      env:
+        NEXT_PUBLIC_GRAPHQL_URL: ${{ secrets.NEXT_PUBLIC_GRAPHQL_URL }}
+    - name: Start the application
+      run: npm run start &
+      env:
+        NEXT_PUBLIC_GRAPHQL_URL: ${{ secrets.NEXT_PUBLIC_GRAPHQL_URL }}
+    - name: Wait for the application to be ready
+      run: |
+        echo "Waiting for the application to be ready..."
+        timeout 300 bash -c 'while [[ "$(curl -s -o /dev/null -w ''%{http_code}'' localhost:3000)" != "200" ]]; do sleep 5; done' || false
+        echo "Application is ready!"
     - name: Run Playwright tests
       run: npx playwright test
       env:
-          CI: true
-          NEXT_PUBLIC_GRAPHQL_URL: ${{ secrets.NEXT_PUBLIC_GRAPHQL_URL }}
-    - uses: actions/upload-artifact@v4
+        CI: true
+        NEXT_PUBLIC_GRAPHQL_URL: ${{ secrets.NEXT_PUBLIC_GRAPHQL_URL }}
+        DEBUG: pw:api
+    - name: Upload test results
       if: always()
+      uses: actions/upload-artifact@v4
       with:
         name: playwright-report
         path: playwright-report/
         retention-days: 30
+    - name: Upload test traces
+      if: failure()
+      uses: actions/upload-artifact@v4
+      with:
+        name: playwright-traces
+        path: test-results/
+        retention-days: 30

playwright.config.ts

@@ -12,13 +12,13 @@ import { devices } from '@playwright/test';
 const config: PlaywrightTestConfig = {
   testDir: './src/tests',
   /* Maximum time one test can run for. */
-  timeout: 30 * 1000,
+  timeout: 60 * 1000, // Increased to 60 seconds
   expect: {
     /**
      * Maximum time expect() should wait for the condition to be met.
      * For example in `await expect(locator).toHaveText();`
      */
-    timeout: 15000,
+    timeout: 30000, // Increased to 30 seconds
   },
   /* Run tests in files in parallel */
   fullyParallel: true,
@@ -33,7 +33,7 @@ const config: PlaywrightTestConfig = {
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
-    actionTimeout: 0,
+    actionTimeout: 30000, // Added 30 second timeout for actions
     /* Base URL to use in actions like `await page.goto('/')`. */
     baseURL: 'http://localhost:3000',
 
@@ -103,6 +103,7 @@ const config: PlaywrightTestConfig = {
     reuseExistingServer: true,
     command: 'npm run dev',
     port: 3000,
+    timeout: 120000, // Added 2 minute timeout for server start
   },
 };
 

src/components/Product/AddToCart.component.tsx

@@ -90,13 +90,12 @@ export interface IProductRootObject {
  * @param {number} variationId // Variation ID
  * @param {boolean} fullWidth // Whether the button should be full-width
  */
-
 const AddToCart = ({
   product,
   variationId,
   fullWidth = false,
 }: IProductRootObject) => {
-  const { setCart } = useContext(CartContext);
+  const { updateCart } = useContext(CartContext);
   const [requestError, setRequestError] = useState<boolean>(false);
 
   const productId = product?.databaseId ? product?.databaseId : variationId;
@@ -107,20 +106,14 @@ const AddToCart = ({
   };
 
   // Get cart data query
-  const { data, refetch } = useQuery(GET_CART, {
+  const { refetch } = useQuery(GET_CART, {
     notifyOnNetworkStatusChange: true,
-    onCompleted: () => {
-      // Update cart in the localStorage.
+    onCompleted: (data) => {
+      // Update cart in the localStorage and React Context.
       const updatedCart = getFormattedCart(data);
-
-      if (!updatedCart) {
-        return;
+      if (updatedCart) {
+        updateCart(updatedCart);
       }
-
-      localStorage.setItem('woocommerce-cart', JSON.stringify(updatedCart));
-
-      // Update cart data in React Context.
-      setCart(updatedCart);
     },
   });
 
@@ -129,34 +122,43 @@ const AddToCart = ({
     variables: {
       input: productQueryInput,
     },
-
-    onCompleted: () => {
-      // Update the cart with new values in React context.
-      refetch();
+    onCompleted: (data) => {
+      // Immediately update the cart with new values
+      const updatedCart = getFormattedCart(data);
+      if (updatedCart) {
+        updateCart(updatedCart);
+      }
     },
-
     onError: () => {
       setRequestError(true);
     },
   });
 
-  const handleAddToCart = () => {
-    addToCart();
-    // Refetch cart after 2 seconds
-    setTimeout(() => {
-      refetch();
-    }, 2000);
+  const handleAddToCart = async () => {
+    try {
+      await addToCart();
+      // Refetch cart immediately after adding to cart
+      await refetch();
+    } catch (error) {
+      setRequestError(true);
+    }
   };
 
   return (
     <>
       <Button
-        handleButtonClick={() => handleAddToCart()}
+        handleButtonClick={handleAddToCart}
         buttonDisabled={addToCartLoading || requestError}
         fullWidth={fullWidth}
       >
         KJØP
       </Button>
+      {requestError && (
+        <p>
+          Det oppstod en feil ved tillegging i handlekurven. Vennligst prøv
+          igjen.
+        </p>
+      )}
     </>
   );
 };

src/stores/CartProvider.tsx

@@ -6,6 +6,7 @@ import React, {
   JSXElementConstructor,
   ReactFragment,
   ReactPortal,
+  useMemo,
 } from 'react';
 
 interface ICartProviderProps {
@@ -49,37 +50,47 @@ export type TRootObjectNull = RootObject | null | undefined;
 interface ICartContext {
   cart: RootObject | null | undefined;
   setCart: React.Dispatch<React.SetStateAction<TRootObjectNull>>;
+  updateCart: (newCart: RootObject) => void;
 }
 
-const CartState = {
+const CartState: ICartContext = {
   cart: null,
   setCart: () => {},
+  updateCart: () => {},
 };
 
 export const CartContext = createContext<ICartContext>(CartState);
 
 /**
  * Provides a global application context for the entire application with the cart contents
-
  */
 export const CartProvider = ({ children }: ICartProviderProps) => {
   const [cart, setCart] = useState<RootObject | null>();
 
   useEffect(() => {
     // Check if we are client-side before we access the localStorage
-    if (!process.browser) {
-      return;
+    if (typeof window !== 'undefined') {
+      const localCartData = localStorage.getItem('woocommerce-cart');
+      if (localCartData) {
+        const cartData: RootObject = JSON.parse(localCartData);
+        setCart(cartData);
+      }
     }
-    const localCartData = localStorage.getItem('woocommerce-cart');
+  }, []);
 
-    if (localCartData) {
-      const cartData: RootObject = JSON.parse(localCartData);
-      setCart(cartData);
+  const updateCart = (newCart: RootObject) => {
+    setCart(newCart);
+    if (typeof window !== 'undefined') {
+      localStorage.setItem('woocommerce-cart', JSON.stringify(newCart));
     }
-  }, []);
+  };
+
+  const contextValue = useMemo(() => {
+    return { cart, setCart, updateCart };
+  }, [cart]);
 
   return (
-    <CartContext.Provider value={{ cart, setCart }}>
+    <CartContext.Provider value={contextValue}>
       {children}
     </CartContext.Provider>
   );