From 0ac74a81dc1202aece7dfafbfadbb33dcfbb60c8 Mon Sep 17 00:00:00 2001 From: jonathan Date: Wed, 17 May 2023 11:44:02 -0400 Subject: [PATCH 01/11] renamed yml files, refining how pw & checkly work to optimize for integration, checking preview & checking deployed site & rollbacks. --- .github/workflows/checkly-fail-safe.yml | 56 +++++++++++++++++++ .../{checkly.yml => checkly-preview-test.yml} | 9 +-- .github/workflows/playwright.yml | 5 +- next-webstore/checkly.config.ts | 4 +- next-webstore/playwright.config.ts | 3 +- next-webstore/tests/defaults.ts | 6 +- next-webstore/tests/login.spec.ts | 2 +- next-webstore/tests/visit.spec.ts | 2 +- 8 files changed, 72 insertions(+), 15 deletions(-) create mode 100644 .github/workflows/checkly-fail-safe.yml rename .github/workflows/{checkly.yml => checkly-preview-test.yml} (86%) diff --git a/.github/workflows/checkly-fail-safe.yml b/.github/workflows/checkly-fail-safe.yml new file mode 100644 index 0000000..3ec5daa --- /dev/null +++ b/.github/workflows/checkly-fail-safe.yml @@ -0,0 +1,56 @@ +name: checkly fail safe +on: + pull_request: + types: + - closed +jobs: + test-e2e: + if: github.event.pull_request.merged == true + name: Checkly 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: npx checkly test + -e 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 \ No newline at end of file diff --git a/.github/workflows/checkly.yml b/.github/workflows/checkly-preview-test.yml similarity index 86% rename from .github/workflows/checkly.yml rename to .github/workflows/checkly-preview-test.yml index a480359..b08d185 100644 --- a/.github/workflows/checkly.yml +++ b/.github/workflows/checkly-preview-test.yml @@ -7,7 +7,7 @@ # - 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 }} @@ -43,9 +43,4 @@ jobs: 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 - 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 \ No newline at end of file + continue-on-error: false \ No newline at end of file diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml index 40633c8..57da0ab 100644 --- a/.github/workflows/playwright.yml +++ b/.github/workflows/playwright.yml @@ -1,4 +1,4 @@ -name: Playwright Tests +name: Playwright Integration Tests on: push: branches: @@ -20,7 +20,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: diff --git a/next-webstore/checkly.config.ts b/next-webstore/checkly.config.ts index e997a52..08689b9 100644 --- a/next-webstore/checkly.config.ts +++ b/next-webstore/checkly.config.ts @@ -12,12 +12,12 @@ const config = defineConfig({ runtimeId: "2022.10", frequency: 60, locations: ["us-east-1", "eu-west-1"], - tags: ["website", "critical-user-flows"], + tags: ["website", "critical-user-flows", `${process.env.NEXT_PUBLIC_NODE_ENV}`], alertChannels: [], checkMatch: "*/**/*.check.ts", ignoreDirectoriesMatch: [], browserChecks: { - frequency: 1, + frequency: 60, testMatch: "*/**/*.spec.ts", }, }, diff --git a/next-webstore/playwright.config.ts b/next-webstore/playwright.config.ts index 122f9b7..35bb014 100644 --- a/next-webstore/playwright.config.ts +++ b/next-webstore/playwright.config.ts @@ -1,4 +1,5 @@ import { defineConfig, devices } from "@playwright/test"; +import {defaults} from "./tests/defaults" require("dotenv").config({ path: '.env.local' }); // Use process.env.PORT by default and fallback to port 3000 @@ -18,7 +19,7 @@ export default defineConfig({ webServer: { command: "npm run dev", - url: baseURL, + url: defaults.pageUrl, timeout: 60 * 1000, reuseExistingServer: !process.env.CI, }, diff --git a/next-webstore/tests/defaults.ts b/next-webstore/tests/defaults.ts index 1b69200..f069d83 100644 --- a/next-webstore/tests/defaults.ts +++ b/next-webstore/tests/defaults.ts @@ -15,10 +15,14 @@ export const defaults = { ? "https://next-danube-webshop.vercel.app" : process.env.NEXT_PUBLIC_NODE_ENV === "staging" ? "https://next-danube-webshop-staging.vercel.app" - : "http://localhost:3000", + : process.env.NEXT_PUBLIC_ENVIRONMENT_URL, 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", }; + +// run test preview env // + +// how can \ No newline at end of file diff --git a/next-webstore/tests/login.spec.ts b/next-webstore/tests/login.spec.ts index adc3b0b..fb728d0 100644 --- a/next-webstore/tests/login.spec.ts +++ b/next-webstore/tests/login.spec.ts @@ -3,7 +3,7 @@ import { defaults } from "./defaults"; test("login", async ({ page }) => { test.setTimeout(defaults.testTime); - await page.goto(defaults.pageUrl); + await page.goto("/"); await page.getByRole("link", { name: "login" }).click(); await page.waitForLoadState("networkidle"); diff --git a/next-webstore/tests/visit.spec.ts b/next-webstore/tests/visit.spec.ts index 3a3ab17..04b3364 100644 --- a/next-webstore/tests/visit.spec.ts +++ b/next-webstore/tests/visit.spec.ts @@ -5,7 +5,7 @@ test("has title", async ({ page }) => { test.setTimeout(60000); console.log(defaults.pageUrl, "pageUrl") - await page.goto(defaults.pageUrl) + await page.goto("/") const response = await page.waitForResponse(`${defaults.apiUrl}/books`); From ea1eee6c1258a5be74ecf1782d8d7f462d98a2aa Mon Sep 17 00:00:00 2001 From: jonathan Date: Wed, 17 May 2023 11:50:37 -0400 Subject: [PATCH 02/11] checkly preview test file updated. --- .github/workflows/checkly-preview-test.yml | 18 +++++++++--------- next-webstore/tests/defaults.ts | 6 +----- 2 files changed, 10 insertions(+), 14 deletions(-) diff --git a/.github/workflows/checkly-preview-test.yml b/.github/workflows/checkly-preview-test.yml index b08d185..07d29e9 100644 --- a/.github/workflows/checkly-preview-test.yml +++ b/.github/workflows/checkly-preview-test.yml @@ -16,7 +16,7 @@ env: jobs: test-e2e: if: github.event.deployment_status.state == 'success' - name: Test E2E on Checkly + name: Checkly Preview Deploy Check runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 @@ -32,15 +32,15 @@ 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: 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 ENVIRONMENT_URL=${{ env.ENVIRONMENT_URL}} npx checkly test --record continue-on-error: false \ No newline at end of file diff --git a/next-webstore/tests/defaults.ts b/next-webstore/tests/defaults.ts index f069d83..592ce44 100644 --- a/next-webstore/tests/defaults.ts +++ b/next-webstore/tests/defaults.ts @@ -21,8 +21,4 @@ export const defaults = { 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", -}; - -// run test preview env // - -// how can \ No newline at end of file +}; \ No newline at end of file From 7d49d9d8dec89a156613ed835e992cf4c7e674af Mon Sep 17 00:00:00 2001 From: jonathan Date: Wed, 17 May 2023 12:52:59 -0400 Subject: [PATCH 03/11] updated PW config to drop baseUrl as it was interfering with running tests on localHost as it was stacking. This makes the connect b/w checkly & pw more seemless. --- .github/workflows/playwright.yml | 4 +--- next-webstore/playwright.config.ts | 7 ------- next-webstore/tests/login.spec.ts | 3 ++- next-webstore/tests/visit.spec.ts | 5 ++++- 4 files changed, 7 insertions(+), 12 deletions(-) diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml index 57da0ab..39c4c23 100644 --- a/.github/workflows/playwright.yml +++ b/.github/workflows/playwright.yml @@ -3,8 +3,6 @@ on: push: branches: - "*" - pull_request: - branches: [main, staging] jobs: test: timeout-minutes: 30 @@ -21,7 +19,7 @@ jobs: - name: Run Playwright tests working-directory: ./next-webstore # 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 + run: NEXT_PUBLIC_NODE_ENV=test NEXT_PUBLIC_ENVIRONMENT_URL=http://localhost:3000 npx playwright test - uses: actions/upload-artifact@v3 if: always() with: diff --git a/next-webstore/playwright.config.ts b/next-webstore/playwright.config.ts index 35bb014..7969d53 100644 --- a/next-webstore/playwright.config.ts +++ b/next-webstore/playwright.config.ts @@ -2,12 +2,6 @@ import { defineConfig, devices } from "@playwright/test"; import {defaults} from "./tests/defaults" require("dotenv").config({ path: '.env.local' }); -// Use process.env.PORT by default and fallback to port 3000 -const PORT = process.env.PORT || 3000; - -// Set webServer.url and use.baseURL with the location of the WebServer respecting the correct set port -const baseURL = `http://localhost:${PORT}`; - export default defineConfig({ timeout: 60 * 1000, testDir: "./tests", @@ -24,7 +18,6 @@ export default defineConfig({ reuseExistingServer: !process.env.CI, }, use: { - baseURL, trace: "on", actionTimeout: 6000, navigationTimeout: 5000 diff --git a/next-webstore/tests/login.spec.ts b/next-webstore/tests/login.spec.ts index fb728d0..455a32f 100644 --- a/next-webstore/tests/login.spec.ts +++ b/next-webstore/tests/login.spec.ts @@ -3,7 +3,8 @@ import { defaults } from "./defaults"; test("login", async ({ page }) => { test.setTimeout(defaults.testTime); - await page.goto("/"); + + await page.goto(defaults.pageUrl) await page.getByRole("link", { name: "login" }).click(); await page.waitForLoadState("networkidle"); diff --git a/next-webstore/tests/visit.spec.ts b/next-webstore/tests/visit.spec.ts index 04b3364..0a0b113 100644 --- a/next-webstore/tests/visit.spec.ts +++ b/next-webstore/tests/visit.spec.ts @@ -5,7 +5,10 @@ test("has title", async ({ page }) => { test.setTimeout(60000); console.log(defaults.pageUrl, "pageUrl") - await page.goto("/") + + // Will clean this up in a BeforeEach + defaults.pageUrl === "http://localhost:3000"? + await page.goto("/"):await page.goto(defaults.pageUrl) const response = await page.waitForResponse(`${defaults.apiUrl}/books`); From ac6a5b45049cf5f0d45bf15b6b5c94714fead5b5 Mon Sep 17 00:00:00 2001 From: jonathan Date: Wed, 17 May 2023 13:22:34 -0400 Subject: [PATCH 04/11] trying to see what apiUrl is being hit w/ PW in CI. --- .github/workflows/checkly-preview-test.yml | 2 +- next-webstore/tests/login.spec.ts | 5 ++++- next-webstore/tests/visit.spec.ts | 4 +--- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/.github/workflows/checkly-preview-test.yml b/.github/workflows/checkly-preview-test.yml index 07d29e9..9b8f367 100644 --- a/.github/workflows/checkly-preview-test.yml +++ b/.github/workflows/checkly-preview-test.yml @@ -42,5 +42,5 @@ jobs: - name: Run checks id: run-checks working-directory: next-webstore - run: NEXT_PUBLIC_NODE_ENV=test ENVIRONMENT_URL=${{ env.ENVIRONMENT_URL}} npx checkly test --record + run: NEXT_PUBLIC_NODE_ENV=test NEXT_PUBLIC_NODE_ENVIRONMENT_URL=${{ env.ENVIRONMENT_URL}} npx checkly test --record continue-on-error: false \ No newline at end of file diff --git a/next-webstore/tests/login.spec.ts b/next-webstore/tests/login.spec.ts index 455a32f..e3c5a39 100644 --- a/next-webstore/tests/login.spec.ts +++ b/next-webstore/tests/login.spec.ts @@ -14,8 +14,11 @@ test("login", async ({ page }) => { await page.getByRole("button", { name: "Login" }).click(); + const response = await page.waitForResponse((response) => { - return response.url().includes(`${defaults.apiUrl}/auth/login`); + console.log(response.url(), "response url being hit") + // return response.url().includes(`${defaults.apiUrl}/auth/login`); + return response.url().includes(`/auth/login`); }); const responseBody = await response.json(); const success = responseBody.success; diff --git a/next-webstore/tests/visit.spec.ts b/next-webstore/tests/visit.spec.ts index 0a0b113..84f00c2 100644 --- a/next-webstore/tests/visit.spec.ts +++ b/next-webstore/tests/visit.spec.ts @@ -6,9 +6,7 @@ test("has title", async ({ page }) => { console.log(defaults.pageUrl, "pageUrl") - // Will clean this up in a BeforeEach - defaults.pageUrl === "http://localhost:3000"? - await page.goto("/"):await page.goto(defaults.pageUrl) + await page.goto(defaults.pageUrl) const response = await page.waitForResponse(`${defaults.apiUrl}/books`); From 4a3ff174b5329e47684132f1b89829db764c7f23 Mon Sep 17 00:00:00 2001 From: jonathan Date: Wed, 17 May 2023 14:07:24 -0400 Subject: [PATCH 05/11] silly goose moment, didn't update env variables on the front end. te he. --- next-webstore/app/components/bookCards.jsx | 2 +- next-webstore/app/user/page.jsx | 2 +- next-webstore/tests/login.spec.ts | 1 - 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/next-webstore/app/components/bookCards.jsx b/next-webstore/app/components/bookCards.jsx index 6adde83..8800ca4 100644 --- a/next-webstore/app/components/bookCards.jsx +++ b/next-webstore/app/components/bookCards.jsx @@ -6,7 +6,7 @@ import { useState, useEffect } from "react"; async function fetchBooks() { try { - const response = await fetch(`${process.env.NEXT_PUBLIC_ENV_URL}/books`); + const response = await fetch(`${process.env.NEXT_PUBLIC_ENV_URL}/api/v1/books`); const responseJSON = await response.json(); const books = await responseJSON.data; return books; diff --git a/next-webstore/app/user/page.jsx b/next-webstore/app/user/page.jsx index 3db7d22..f61fd11 100644 --- a/next-webstore/app/user/page.jsx +++ b/next-webstore/app/user/page.jsx @@ -25,7 +25,7 @@ const UserPage = () => { const token = getCookie("token"); // Fetch user data with token in headers - const response = await fetch(`${process.env.ENV_URL}auth/me`, { + const response = await fetch(`${process.env.NEXT_PUBLIC_ENVIRONMENT_URL}/api/v1/auth/me`, { method: 'GET', headers: { Authorization: `Bearer ${token}`, diff --git a/next-webstore/tests/login.spec.ts b/next-webstore/tests/login.spec.ts index e3c5a39..28b2bed 100644 --- a/next-webstore/tests/login.spec.ts +++ b/next-webstore/tests/login.spec.ts @@ -14,7 +14,6 @@ test("login", async ({ page }) => { await page.getByRole("button", { name: "Login" }).click(); - const response = await page.waitForResponse((response) => { console.log(response.url(), "response url being hit") // return response.url().includes(`${defaults.apiUrl}/auth/login`); From 170d4ac31f4a0abd2690f930482b05f74e77fe85 Mon Sep 17 00:00:00 2001 From: jonathan Date: Wed, 17 May 2023 14:17:00 -0400 Subject: [PATCH 06/11] updated bookCards & loginForm to hit the right URL. --- next-webstore/app/components/bookCards.jsx | 2 +- next-webstore/app/components/loginForm.jsx | 5 ++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/next-webstore/app/components/bookCards.jsx b/next-webstore/app/components/bookCards.jsx index 8800ca4..52a20bd 100644 --- a/next-webstore/app/components/bookCards.jsx +++ b/next-webstore/app/components/bookCards.jsx @@ -6,7 +6,7 @@ import { useState, useEffect } from "react"; async function fetchBooks() { try { - const response = await fetch(`${process.env.NEXT_PUBLIC_ENV_URL}/api/v1/books`); + const response = await fetch(`${process.env.NEXT_PUBLIC_ENVIRONMENT_URL}/api/v1/books`); const responseJSON = await response.json(); const books = await responseJSON.data; return books; diff --git a/next-webstore/app/components/loginForm.jsx b/next-webstore/app/components/loginForm.jsx index 5b25581..8981ded 100644 --- a/next-webstore/app/components/loginForm.jsx +++ b/next-webstore/app/components/loginForm.jsx @@ -13,7 +13,7 @@ const LoginForm = () => { e.preventDefault(); if (isLogin) { try { - const response = await fetch(`${process.env.NEXT_PUBLIC_ENV_URL}/auth/login`, { + const response = await fetch(`${process.env.NEXT_PUBLIC_ENVIRONMENT_URL}api/v1/auth/login`, { method: "POST", headers: { "Content-Type": "application/json", @@ -47,8 +47,7 @@ const LoginForm = () => { } } else { try { - const response = await fetch( - "https://next-danube-webshop-backend.vercel.app/api/v1/auth/register", + const response = await fetch(`${process.env.NEXT_PUBLIC_ENVIRONMENT_URL}api/v1/auth/register`, { method: "POST", headers: { From 4323b5c721873a822dde42bda02643374bc95bf3 Mon Sep 17 00:00:00 2001 From: jonathan Date: Wed, 17 May 2023 16:34:54 -0400 Subject: [PATCH 07/11] handled variables on the front end more efficiently. --- next-webstore/app/components/bookCards.jsx | 110 ++++++++++++++++++++- next-webstore/app/components/loginForm.jsx | 49 +++++---- next-webstore/app/user/page.jsx | 47 ++++----- next-webstore/tests/defaults.ts | 8 +- 4 files changed, 158 insertions(+), 56 deletions(-) diff --git a/next-webstore/app/components/bookCards.jsx b/next-webstore/app/components/bookCards.jsx index 52a20bd..29590d3 100644 --- a/next-webstore/app/components/bookCards.jsx +++ b/next-webstore/app/components/bookCards.jsx @@ -1,3 +1,97 @@ +// "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 && ( +//
+// {books ? ( +// <> +// {books.map((book) => ( +//
handleBookClick(book)} +// > +//
+//

{book.title}

+// User profile picture +//
+ +//
    +//
  • Author: {book.author}
    • +//
  • Publisher: {book.publisher}
    • +//
  • Genre: {book.genre}
    • +//
  • Price: {book.price}
    • +//
+// +//
+// ))} +// +// ) : ( +//

LOADING

+// )} +//
+// )} +// {selectedBook && ( +// +// )} +// +// ); +// }; + +// export default BookCards; + "use client"; import Link from "next/link"; @@ -5,30 +99,36 @@ 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_ENVIRONMENT_URL}/api/v1/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); }; diff --git a/next-webstore/app/components/loginForm.jsx b/next-webstore/app/components/loginForm.jsx index 8981ded..5bf3650 100644 --- a/next-webstore/app/components/loginForm.jsx +++ b/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_ENVIRONMENT_URL}api/v1/auth/login`, { + const response = await fetch(`${apiUrl}/auth/login`, { method: "POST", headers: { "Content-Type": "application/json", @@ -47,19 +52,17 @@ const LoginForm = () => { } } else { try { - const response = await fetch(`${process.env.NEXT_PUBLIC_ENVIRONMENT_URL}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"); } @@ -107,10 +110,11 @@ const LoginForm = () => { /> )} -
- - -
+
+ +

{isLogin ? "Don't have an account? " : "Already have an account? "} @@ -125,7 +129,14 @@ const LoginForm = () => {

- {message ?

{message}

: ""} + {message ? ( +

+ {" "} + {message}{" "} +

+ ) : ( + "" + )} ); }; diff --git a/next-webstore/app/user/page.jsx b/next-webstore/app/user/page.jsx index f61fd11..6b461b5 100644 --- a/next-webstore/app/user/page.jsx +++ b/next-webstore/app/user/page.jsx @@ -1,4 +1,4 @@ -"use client" +"use client"; import React, { useEffect, useState } from "react"; import BookCards from "../components/bookCards"; import UserPhoto from "../components/userPhoto"; @@ -6,16 +6,17 @@ import UserProfile from "../components/userProfile"; const UserPage = () => { const [userData, setUserData] = useState(null); - const [userMessage, setUserMessage] = useState("") + const [userMessage, setUserMessage] = useState(""); const [loading, setLoading] = useState(true); - console.log(process.env.NEXT_PUBLIC_LOG_ENV, "bananas log") - - useEffect(() => { const fetchData = async () => { + 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 { - console.log(process.env.NEXT_PUBLIC_LOG_ENV, "other bananas log") // Get token from cookies const getCookie = (name) => { const value = `; ${document.cookie}`; @@ -25,54 +26,46 @@ const UserPage = () => { const token = getCookie("token"); // Fetch user data with token in headers - const response = await fetch(`${process.env.NEXT_PUBLIC_ENVIRONMENT_URL}/api/v1/auth/me`, { - method: 'GET', + const response = await fetch(`${apiUrl}auth/me`, { + method: "GET", headers: { Authorization: `Bearer ${token}`, }, }); - + if (response.ok) { const data = await response.json(); setUserMessage("success"); setUserData(data); - console.log(data) + console.log(data); } else { setUserMessage("failed"); - console.error(error, "error") - console.log(error, "log error") - console.log("failed") + console.error(error, "error"); + console.log(error, "log error"); + console.log("failed"); } } catch (error) { setUserMessage("failed"); console.error(error); - console.log(error, "log error") + console.log(error, "log error"); } finally { setLoading(false); } }; - + fetchData(); }, []); - return (
- {loading ? ( -

Loading...

- ) : ( - - )}
+ {loading ?

Loading...

: }{" "} +
- {loading ? ( -

Loading...

- ) : ( - - )} + {loading ?

Loading...

: }
); }; -export default UserPage; \ No newline at end of file +export default UserPage; diff --git a/next-webstore/tests/defaults.ts b/next-webstore/tests/defaults.ts index 592ce44..78bcb52 100644 --- a/next-webstore/tests/defaults.ts +++ b/next-webstore/tests/defaults.ts @@ -1,8 +1,6 @@ export const defaults = { - testTime: process.env.NEXT_PUBLIC_NODE_ENV === "production" || "staging" - ? 60000: 45000, - waitTime: process.env.NEXT_PUBLIC_NODE_ENV === "production" || "staging" - ? 10000: 5000, + testTime: process.env.NEXT_PUBLIC_NODE_ENV === "production" || "staging" ? 60000 : 45000, + waitTime: process.env.NEXT_PUBLIC_NODE_ENV === "production" || "staging" ? 10000 : 5000, testUser: process.env.NEXT_PUBLIC_NODE_ENV === "production" ? { email: "jane@example.com", password: "password2" } @@ -21,4 +19,4 @@ export const defaults = { 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", -}; \ No newline at end of file +}; From 8bc47335f4265ec644c6734918217183b404d926 Mon Sep 17 00:00:00 2001 From: jonathan Date: Wed, 17 May 2023 18:23:16 -0400 Subject: [PATCH 08/11] updating checkly preview yml, defaults & checkly config to handle for env variables. --- next-webstore/checkly.config.ts | 1 + next-webstore/package.json | 5 +++-- next-webstore/tests/defaults.ts | 2 +- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/next-webstore/checkly.config.ts b/next-webstore/checkly.config.ts index 08689b9..45a7981 100644 --- a/next-webstore/checkly.config.ts +++ b/next-webstore/checkly.config.ts @@ -1,4 +1,5 @@ import { defineConfig } from 'checkly' +import {defaults} from './tests/defaults' // set path in terminal when testing locally require('dotenv').config() diff --git a/next-webstore/package.json b/next-webstore/package.json index 9e53f31..151026a 100644 --- a/next-webstore/package.json +++ b/next-webstore/package.json @@ -8,8 +8,9 @@ "start": "next start", "lint": "next lint", "checkly:test": "npx checkly test", - "checkly:deploy": "npx checkly deploy" - }, + "checkly:deploy": "npx checkly deploy", + "checkkly:unused": "NEXT_PUBLIC_NODE_ENV=test npx checkly test -e NEXT_PUBLIC_NODE_ENV=production NEXT_PUBLIC_ENVIRONMENT_URL=https://next-danube-webshop-staging.vercel.app --record" + }, "dependencies": { "@playwright/test": "^1.32.3", "checkly": "^4.0.5", diff --git a/next-webstore/tests/defaults.ts b/next-webstore/tests/defaults.ts index 78bcb52..6854526 100644 --- a/next-webstore/tests/defaults.ts +++ b/next-webstore/tests/defaults.ts @@ -1,6 +1,7 @@ export const defaults = { testTime: process.env.NEXT_PUBLIC_NODE_ENV === "production" || "staging" ? 60000 : 45000, waitTime: process.env.NEXT_PUBLIC_NODE_ENV === "production" || "staging" ? 10000 : 5000, + projectName: process.env.NEXT_PUBLIC_NODE_ENV, testUser: process.env.NEXT_PUBLIC_NODE_ENV === "production" ? { email: "jane@example.com", password: "password2" } @@ -14,7 +15,6 @@ export const defaults = { : process.env.NEXT_PUBLIC_NODE_ENV === "staging" ? "https://next-danube-webshop-staging.vercel.app" : process.env.NEXT_PUBLIC_ENVIRONMENT_URL, - apiUrl: process.env.NEXT_PUBLIC_NODE_ENV === "production" ? "https://next-danube-webshop-backend.vercel.app/api/v1" From 80f0d7f543aac240b2eb794a985d99fa9c47f9c8 Mon Sep 17 00:00:00 2001 From: jonathan Date: Wed, 17 May 2023 18:23:53 -0400 Subject: [PATCH 09/11] updating checkly preview yml, defaults & checkly config to handle for env variables. --- .github/workflows/checkly-preview-test.yml | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/.github/workflows/checkly-preview-test.yml b/.github/workflows/checkly-preview-test.yml index 9b8f367..6e5e98b 100644 --- a/.github/workflows/checkly-preview-test.yml +++ b/.github/workflows/checkly-preview-test.yml @@ -32,15 +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=test NEXT_PUBLIC_NODE_ENVIRONMENT_URL=${{ env.ENVIRONMENT_URL}} npx checkly test --record + run: npx checkly test -e NEXT_PUBLIC_NODE_ENV=test NEXT_PUBLIC_ENVIRONMENT_URL=${{ env.ENVIRONMENT_URL}} --record continue-on-error: false \ No newline at end of file From 6f8b852f3d0b625a511e5e6dd75fe178d245a664 Mon Sep 17 00:00:00 2001 From: jonathan Date: Wed, 17 May 2023 18:53:24 -0400 Subject: [PATCH 10/11] udpated checkly preview yml to control for backend deployment URL. --- .github/workflows/checkly-preview-test.yml | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/.github/workflows/checkly-preview-test.yml b/.github/workflows/checkly-preview-test.yml index 6e5e98b..3a509cd 100644 --- a/.github/workflows/checkly-preview-test.yml +++ b/.github/workflows/checkly-preview-test.yml @@ -7,7 +7,7 @@ # - 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 preview test +name: Checkly Preview Test on: [deployment_status] env: ENVIRONMENT_URL: ${{ github.event.deployment_status.target_url }} @@ -15,14 +15,14 @@ env: CHECKLY_ACCOUNT_ID: ${{ secrets.CHECKLY_ACCOUNT_ID }} jobs: test-e2e: - if: github.event.deployment_status.state == 'success' - name: Checkly Preview Deploy Check - runs-on: ubuntu-latest - steps: + 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 From ea6d9c2fd7030fa98db108e3f632c50f9369a14b Mon Sep 17 00:00:00 2001 From: jonathan Date: Wed, 17 May 2023 19:05:23 -0400 Subject: [PATCH 11/11] updated naming conventions, and targeting of env variables in MERGE REQ ' --- .github/workflows/checkly-fail-safe.yml | 11 +++++------ .github/workflows/checkly-preview-test.yml | 16 ++++++++-------- 2 files changed, 13 insertions(+), 14 deletions(-) diff --git a/.github/workflows/checkly-fail-safe.yml b/.github/workflows/checkly-fail-safe.yml index 3ec5daa..935040f 100644 --- a/.github/workflows/checkly-fail-safe.yml +++ b/.github/workflows/checkly-fail-safe.yml @@ -1,4 +1,4 @@ -name: checkly fail safe +name: Checkly Fail Safe on: pull_request: types: @@ -6,7 +6,7 @@ on: jobs: test-e2e: if: github.event.pull_request.merged == true - name: Checkly Test & Deploy + name: Merge Test Deploy runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 @@ -31,8 +31,8 @@ jobs: fi - name: Run checks id: run-checks - run: npx checkly test - -e NEXT_PUBLIC_ENVIRONMENT_URL=${{ env.ENVIRONMENT_URL }} \ + 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 @@ -48,9 +48,8 @@ jobs: 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 \ No newline at end of file + echo "yes" | NEXT_PUBLIC_NODE_ENV=${{ env.NEXT_PUBLIC_NODE_ENV }} npx checkly deploy diff --git a/.github/workflows/checkly-preview-test.yml b/.github/workflows/checkly-preview-test.yml index 3a509cd..ac96ee1 100644 --- a/.github/workflows/checkly-preview-test.yml +++ b/.github/workflows/checkly-preview-test.yml @@ -15,12 +15,12 @@ env: CHECKLY_ACCOUNT_ID: ${{ secrets.CHECKLY_ACCOUNT_ID }} jobs: test-e2e: - 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: + 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 - name: Restore or cache node_modules @@ -35,5 +35,5 @@ jobs: - name: Run checks id: run-checks working-directory: next-webstore - run: npx checkly test -e NEXT_PUBLIC_NODE_ENV=test NEXT_PUBLIC_ENVIRONMENT_URL=${{ env.ENVIRONMENT_URL}} --record - continue-on-error: false \ No newline at end of file + 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