Confirming MR yml job is functioning appropriately :)

Checkly CI/CD refinement

.github/workflows/checkly-fail-safe.yml

@@ -0,0 +1,55 @@
+name: Checkly Fail Safe
+on:
+  pull_request:
+    types:
+      - closed
+jobs:
+  test-e2e:
+    if: github.event.pull_request.merged == true
+    name: Merge Test Deploy
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+      - name: Restore or cache node_modules
+        id: cache-node-modules
+        uses: actions/cache@v3
+        with:
+          path: node_modules
+          key: node-modules-${{ hashFiles('package-lock.json') }}
+      - name: Install dependencies
+        if: steps.cache-node-modules.outputs.cache-hit != 'true'
+        run: cd next-webstore && npm ci
+      - name: Set Environment Variables
+        run: |
+          if [ ${{ github.ref }} = 'refs/heads/main' ]; then
+            echo "NEXT_PUBLIC_NODE_ENV=production" >> $GITHUB_ENV
+          else if [ ${{ github.ref }} = 'refs/heads/staging' ]; then
+            echo "NEXT_PUBLIC_NODE_ENV=staging" >> $GITHUB_ENV
+          else
+            echo "NEXT_PUBLIC_NODE_ENV=test" >> $GITHUB_ENV
+          fi
+      - name: Run checks
+        id: run-checks
+        run: NEXT_PUBLIC_NODE_ENV=${{ env.NEXT_PUBLIC_NODE_ENV }} npx checkly test
+          -e NEXT_PUBLIC_NODE_ENV=${{ env.NEXT_PUBLIC_NODE_ENV }} NEXT_PUBLIC_ENVIRONMENT_URL=${{ env.ENVIRONMENT_URL }} \
+          --reporter=github
+          --record
+      - name: Create summary
+        id: create-summary
+        run: cat checkly-github-report.md > $GITHUB_STEP_SUMMARY
+      - name: Deploy checks
+        id: deploy-checks
+        if: steps.run-checks.outcome == 'success' && github.ref == 'refs/heads/main'
+        run: npx checkly deploy --force
+      - name: Rollback
+        if: steps.run-checks.outcome != 'success' && github.ref == 'refs/heads/main'
+        run: |
+          git revert HEAD
+          git push origin main
+
+          - name: Deploy checks
+          if: steps.run-checks.outcome == 'success'
+          working-directory: next-webstore
+          run: | 
+            echo "yes" | NEXT_PUBLIC_NODE_ENV=${{ env.NEXT_PUBLIC_NODE_ENV }} npx checkly deploy

.github/workflows/checkly.yml → .github/workflows/checkly-preview-test.yml

@@ -7,22 +7,22 @@
 # - If the dry run passes, deploy the checks.
 #
 #  You can of course trigger the Checkly CLI in other workflows or steps inside your GH Action configuration.
-name: checkly
+name: Checkly Preview Test
 on: [deployment_status]
 env:
   ENVIRONMENT_URL: ${{ github.event.deployment_status.target_url }}
   CHECKLY_API_KEY: ${{ secrets.CHECKLY_API_KEY }}
   CHECKLY_ACCOUNT_ID: ${{ secrets.CHECKLY_ACCOUNT_ID }}
 jobs:
   test-e2e:
-    if: github.event.deployment_status.state == 'success'
-    name: Test E2E on Checkly
+    if: |
+      github.event.deployment_status.state == 'success' &&
+      !contains(github.event.deployment_status.target_url, 'backend')
+    name: Checkly Preview Deploy Check
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
-        # with:
-        #   node-version-file: '.nvmrc'
       - name: Restore or cache node_modules
         id: cache-node-modules
         uses: actions/cache@v3
@@ -32,20 +32,8 @@ jobs:
       - name: Install dependencies
         if: steps.cache-node-modules.outputs.cache-hit != 'true'
         run: cd next-webstore && npm ci
-      - name: Set Environment Variables
-        run: |
-          if [ ${{ github.ref }} = 'refs/heads/main' ]; then
-            echo "NEXT_PUBLIC_NODE_ENV=production" >> $GITHUB_ENV
-          else
-            echo "NEXT_PUBLIC_NODE_ENV=test" >> $GITHUB_ENV
-          fi
       - name: Run checks
         id: run-checks
         working-directory: next-webstore
-        run: NEXT_PUBLIC_NODE_ENV=${{ env.NEXT_PUBLIC_NODE_ENV }} ENVIRONMENT_URL=${{ env.ENVIRONMENT_URL}} npx checkly test  --record
+        run: NEXT_PUBLIC_NODE_ENV=test npx checkly test -e NEXT_PUBLIC_NODE_ENV=test NEXT_PUBLIC_ENVIRONMENT_URL=${{ env.ENVIRONMENT_URL}}  --record
         continue-on-error: false
-      - name: Deploy checks
-        if: steps.run-checks.outcome == 'success'
-        working-directory: next-webstore
-        run: | 
-          echo "yes" | NEXT_PUBLIC_NODE_ENV=${{ env.NEXT_PUBLIC_NODE_ENV }} npx checkly deploy        

.github/workflows/playwright.yml

@@ -1,10 +1,8 @@
-name: Playwright Tests
+name: Playwright Integration Tests
 on:
   push:
     branches:
       - "*"
-  pull_request:
-    branches: [main, staging]
 jobs:
   test:
     timeout-minutes: 30
@@ -20,7 +18,8 @@ jobs:
         run: cd next-webstore && npx playwright install chromium --with-deps
       - name: Run Playwright tests
         working-directory: ./next-webstore
-        run: NEXT_PUBLIC_NODE_ENV=test NEXT_PUBLIC_ENV_URL=https://next-danube-webshop-backend-staging.vercel.app/api/v1 npx playwright test
+        # always setting NODE_ENV as test & running against localhost:3000
+        run: NEXT_PUBLIC_NODE_ENV=test NEXT_PUBLIC_ENVIRONMENT_URL=http://localhost:3000 npx playwright test
       - uses: actions/upload-artifact@v3
         if: always()
         with:

next-webstore/app/components/bookCards.jsx

@@ -1,34 +1,134 @@
+// "use client";
+
+// import Link from "next/link";
+// import BookProfile from "./bookProfile";
+// import { useState, useEffect } from "react";
+
+// async function fetchBooks() {
+//   try {
+//     const response = await fetch(`${NEXT_PUBLIC_ENVIRONMENT_URL}/api/v1/books`);
+//     const responseJSON = await response.json();
+//     const books = await responseJSON.data;
+//     return books;
+//   } catch (error) {
+//     console.log(error);
+//   }
+// }
+
+// const BookCards = () => {
+//   const [books, setBooks] = useState(null);
+
+//   useEffect(() => {
+//     async function getBooks() {
+//       const books = await fetchBooks();
+//       setBooks(books);
+//     }
+
+//     getBooks();
+//   }, []);
+
+//   const [selectedBook, setSelectedBook] = useState(null);
+
+//   const handleBookClick = (book) => {
+//     setSelectedBook(book);
+//   };
+
+//   return (
+//     <>
+//       {!selectedBook && (
+//         <div className="right-column">
+//           {books ? (
+//             <>
+//               {books.map((book) => (
+//                 <div
+//                   className="card"
+//                   data-test={book.title}
+//                   key={book.id}
+//                   onClick={() => handleBookClick(book)}
+//                 >
+//                   <div
+//                     data-test="book-div"
+//                     style={{ display: "flex", justifyContent: "center", flexDirection: "column" }}
+//                   >
+//                     <h3 style={{ display: "flex", justifyContent: "center" }}>{book.title}</h3>
+//                     <img
+//                       style={{ display: "flex", justifyContent: "center" }}
+//                       src="./gatsbycover.png"
+//                       width="200"
+//                       height="200"
+//                       alt="User profile picture"
+//                     />
+//                   </div>
+
+//                   <ul>
+//                     <li> Author: {book.author}</li>
+//                     <li> Publisher: {book.publisher}</li>
+//                     <li>Genre: {book.genre}</li>
+//                     <li> Price: {book.price}</li>
+//                   </ul>
+//                   <button className="btn" data-test="add-to-cart">
+//                     add to cart
+//                   </button>
+//                 </div>
+//               ))}
+//             </>
+//           ) : (
+//             <h1>LOADING</h1>
+//           )}
+//         </div>
+//       )}
+//       {selectedBook && (
+//         <BookProfile
+//           id={selectedBook.id}
+//           author={selectedBook.author}
+//           publisher={selectedBook.publisher}
+//           title={selectedBook.title}
+//           genre={selectedBook.genre}
+//         />
+//       )}
+//     </>
+//   );
+// };
+
+// export default BookCards;
+
 "use client";
 
 import Link from "next/link";
 import BookProfile from "./bookProfile";
 import { useState, useEffect } from "react";
 
 async function fetchBooks() {
+  const apiUrl =
+    process.env.NEXT_PUBLIC_NODE_ENV === "production"
+      ? "https://next-danube-webshop-backend.vercel.app/api/v1"
+      : "https://next-danube-webshop-backend-staging.vercel.app/api/v1";
+
   try {
-    const response = await fetch(`${process.env.NEXT_PUBLIC_ENV_URL}/books`);
+    console.log(apiUrl);
+    const response = await fetch(`${apiUrl}/books`);
     const responseJSON = await response.json();
     const books = await responseJSON.data;
     return books;
   } catch (error) {
     console.log(error);
+    return null;
   }
 }
 
 const BookCards = () => {
   const [books, setBooks] = useState(null);
+  const [selectedBook, setSelectedBook] = useState(null);
 
   useEffect(() => {
     async function getBooks() {
-      const books = await fetchBooks();
-      setBooks(books);
+      const fetchedBooks = await fetchBooks();
+      setBooks(fetchedBooks);
     }
 
     getBooks();
   }, []);
 
-  const [selectedBook, setSelectedBook] = useState(null);
-
   const handleBookClick = (book) => {
     setSelectedBook(book);
   };

next-webstore/app/components/loginForm.jsx

@@ -11,9 +11,14 @@ const LoginForm = () => {
 
   const handleSubmit = async (e) => {
     e.preventDefault();
+    const apiUrl =
+      process.env.NEXT_PUBLIC_NODE_ENV === "production"
+        ? "https://next-danube-webshop-backend.vercel.app/api/v1"
+        : "https://next-danube-webshop-backend-staging.vercel.app/api/v1";
+
     if (isLogin) {
       try {
-        const response = await fetch(`${process.env.NEXT_PUBLIC_ENV_URL}/auth/login`, {
+        const response = await fetch(`${apiUrl}/auth/login`, {
           method: "POST",
           headers: {
             "Content-Type": "application/json",
@@ -47,20 +52,17 @@ const LoginForm = () => {
       }
     } else {
       try {
-        const response = await fetch(
-          "https://next-danube-webshop-backend.vercel.app/api/v1/auth/register",
-          {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify({
-              email: email,
-              username: username,
-              password: password,
-            }),
-          }
-        );
+        const response = await fetch(`${apiUrl}/auth/register`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            email: email,
+            username: username,
+            password: password,
+          }),
+        });
         if (!response.ok) {
           throw new Error("Unable to create account");
         }
@@ -108,10 +110,11 @@ const LoginForm = () => {
             />
           </div>
         )}
-<div className="form">
-        <button class="search-button"type="submit">{isLogin ? "Login" : "Sign Up"}</button>
-
-</div>
+        <div className="form">
+          <button class="search-button" type="submit">
+            {isLogin ? "Login" : "Sign Up"}
+          </button>
+        </div>
       </form>
       <p>
         {isLogin ? "Don't have an account? " : "Already have an account? "}
@@ -126,7 +129,14 @@ const LoginForm = () => {
         </a>
       </p>
 
-      {message ? <h2 data-test="login-state" style={{ color: "blue" }}> {message} </h2> : ""}
+      {message ? (
+        <h2 data-test="login-state" style={{ color: "blue" }}>
+          {" "}
+          {message}{" "}
+        </h2>
+      ) : (
+        ""
+      )}
     </div>
   );
 };