From ab0aa2fae6885e2dcfcdb3a4cbf01dbacbfa559d Mon Sep 17 00:00:00 2001
From: Jipson Minibhavan <jipson.minibhavan@googlemail.com>
Date: Mon, 5 Feb 2024 11:20:15 +0100
Subject: [PATCH] localhost to env

---
 frontend/.gitignore                           |  2 +-
 frontend/cypress.config.ts                    |  2 +-
 frontend/cypress/cypress.config.js            |  9 +++++++
 .../cypress/cypress/fixtures/example.json     |  5 ++++
 frontend/cypress/cypress/support/commands.js  | 25 +++++++++++++++++++
 frontend/cypress/cypress/support/e2e.js       | 20 +++++++++++++++
 frontend/cypress/e2e/tsconfig.json            |  1 +
 frontend/env.d.ts                             |  8 ++++++
 frontend/package.json                         | 10 +++++---
 frontend/src/components/BasisHeader.vue       |  3 ++-
 frontend/src/components/BasisLogin.vue        |  8 +++---
 frontend/src/components/CreateLink.vue        |  4 +--
 frontend/src/components/EditLink.vue          |  5 ++--
 frontend/src/components/LinkList.vue          |  6 ++---
 frontend/src/store/link.ts                    |  6 ++---
 frontend/src/utils/config.ts                  |  3 +++
 frontend/src/utils/cypress.config.ts          |  1 +
 frontend/test/test.js                         |  2 ++
 frontend/tsconfig.node.json                   |  3 ++-
 19 files changed, 102 insertions(+), 21 deletions(-)
 create mode 100644 frontend/cypress/cypress.config.js
 create mode 100644 frontend/cypress/cypress/fixtures/example.json
 create mode 100644 frontend/cypress/cypress/support/commands.js
 create mode 100644 frontend/cypress/cypress/support/e2e.js
 create mode 100644 frontend/src/utils/config.ts
 create mode 100644 frontend/src/utils/cypress.config.ts
 create mode 100644 frontend/test/test.js

diff --git a/frontend/.gitignore b/frontend/.gitignore
index cfa7514..a6dd390 100644
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -13,7 +13,7 @@ dist
 dist-ssr
 coverage
 *.local
-
+.env
 /cypress/videos/
 /cypress/screenshots/
 
diff --git a/frontend/cypress.config.ts b/frontend/cypress.config.ts
index f5a7e44..e80e0e1 100644
--- a/frontend/cypress.config.ts
+++ b/frontend/cypress.config.ts
@@ -3,6 +3,6 @@ import { defineConfig } from 'cypress'
 export default defineConfig({
   e2e: {
     specPattern: 'cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}',
-    baseUrl: 'http://localhost:4000'
+    baseUrl: process.env.CYPRESS_BASE_URL
   }
 })
diff --git a/frontend/cypress/cypress.config.js b/frontend/cypress/cypress.config.js
new file mode 100644
index 0000000..97f47c4
--- /dev/null
+++ b/frontend/cypress/cypress.config.js
@@ -0,0 +1,9 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});
diff --git a/frontend/cypress/cypress/fixtures/example.json b/frontend/cypress/cypress/fixtures/example.json
new file mode 100644
index 0000000..02e4254
--- /dev/null
+++ b/frontend/cypress/cypress/fixtures/example.json
@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}
diff --git a/frontend/cypress/cypress/support/commands.js b/frontend/cypress/cypress/support/commands.js
new file mode 100644
index 0000000..66ea16e
--- /dev/null
+++ b/frontend/cypress/cypress/support/commands.js
@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
\ No newline at end of file
diff --git a/frontend/cypress/cypress/support/e2e.js b/frontend/cypress/cypress/support/e2e.js
new file mode 100644
index 0000000..0e7290a
--- /dev/null
+++ b/frontend/cypress/cypress/support/e2e.js
@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
\ No newline at end of file
diff --git a/frontend/cypress/e2e/tsconfig.json b/frontend/cypress/e2e/tsconfig.json
index 37748fe..12b2725 100644
--- a/frontend/cypress/e2e/tsconfig.json
+++ b/frontend/cypress/e2e/tsconfig.json
@@ -2,6 +2,7 @@
   "extends": "@vue/tsconfig/tsconfig.dom.json",
   "include": ["./**/*", "../support/**/*"],
   "compilerOptions": {
+    "baseUrl": "./",
     "isolatedModules": false,
     "target": "es5",
     "lib": ["es5", "dom"],
diff --git a/frontend/env.d.ts b/frontend/env.d.ts
index 11f02fe..51c9d4d 100644
--- a/frontend/env.d.ts
+++ b/frontend/env.d.ts
@@ -1 +1,9 @@
 /// <reference types="vite/client" />
+interface ImportMetaEnv {
+  readonly VITE_API_URL: string
+  // more env variables...
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
diff --git a/frontend/package.json b/frontend/package.json
index e2048df..acd60cc 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -4,16 +4,18 @@
   "private": true,
   "scripts": {
     "build": "run-p type-check build-only",
+    "cypress:open": "cypress open",
+    "cypress:run": "cypress run --e2e",
     "test:unit": "vitest",
-    "test:e2e": "start-server-and-test preview http://localhost:4000 'cypress run --e2e'",
+    "test:e2e": "start-server-and-test preview  'cypress run --e2e'",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
     "build-only": "vite build",
     "build-storybook": "storybook build",
-    "dev": "vite",
+    "dev": "vite ",
     "format": "prettier --write src/",
-    "preview": "vite preview --host --port 4000",
+    "preview": "vite preview --host ",
     "storybook": "storybook dev -p 6006",
-    "test:e2e:dev": "start-server-and-test 'vite dev --port 4000' http://localhost:4000 'cypress open --e2e'",
+    "test:e2e:dev": "start-server-and-test 'vite dev --host' $VITE_DEV_SERVER_URL 'cypress open --e2e'",
     "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false"
   },
   "dependencies": {
diff --git a/frontend/src/components/BasisHeader.vue b/frontend/src/components/BasisHeader.vue
index ab7a8b3..d971236 100644
--- a/frontend/src/components/BasisHeader.vue
+++ b/frontend/src/components/BasisHeader.vue
@@ -25,6 +25,7 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
 import { userSessionStore } from '@/store/session'
+import { API_URL } from '@/utils/config.ts'
 import axios from 'axios'
 export default defineComponent({
   name: 'Header',
@@ -36,7 +37,7 @@ export default defineComponent({
   methods: {
     async logout() {
       try {
-        const response = await axios.post('http://localhost:8080/logout')
+        const response = await axios.post(API_URL + '/logout')
         this.sessionStore.logout()
       } catch (error) {
         console.error(error)
diff --git a/frontend/src/components/BasisLogin.vue b/frontend/src/components/BasisLogin.vue
index f1f3e22..bee68fb 100644
--- a/frontend/src/components/BasisLogin.vue
+++ b/frontend/src/components/BasisLogin.vue
@@ -34,6 +34,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { userSessionStore } from '@/store/session'
+import { API_URL } from '@/utils/config.ts'
 import axios from 'axios'
 
 export default defineComponent({
@@ -46,8 +47,8 @@ export default defineComponent({
 
   data() {
     return {
-      email: '', //'julia12345@test.com',
-      password: '', //'password1234',
+      email: 'julia12345@test.com',
+      password: 'password1234',
       errorMessage: ''
     }
   },
@@ -55,7 +56,8 @@ export default defineComponent({
   methods: {
     async login() {
       try {
-        const response = await axios.post('http://localhost:8080/login', {
+        console.log('API URL:', API_URL)
+        const response = await axios.post(API_URL + '/login', {
           username: this.email,
           password: this.password
         })
diff --git a/frontend/src/components/CreateLink.vue b/frontend/src/components/CreateLink.vue
index eb5e793..a1133aa 100644
--- a/frontend/src/components/CreateLink.vue
+++ b/frontend/src/components/CreateLink.vue
@@ -29,7 +29,7 @@
 <script lang="ts">
 import axios from 'axios'
 import { defineComponent } from 'vue'
-
+import { API_URL } from '@/utils/config.ts'
 interface Data {
   url: string
   success: boolean
@@ -57,7 +57,7 @@ export default defineComponent({
           return
         }
         const payload = { url: this.url, path: this.path }
-        const response = await axios.post('http://localhost:8080/link', payload)
+        const response = await axios.post(API_URL + '/link', payload)
 
         if (!response) {
           throw new Error('Network response was not ok')
diff --git a/frontend/src/components/EditLink.vue b/frontend/src/components/EditLink.vue
index bbc4e4c..bb8054b 100644
--- a/frontend/src/components/EditLink.vue
+++ b/frontend/src/components/EditLink.vue
@@ -22,6 +22,7 @@
 <script lang="ts">
 import axios from 'axios'
 import { defineComponent } from 'vue'
+import { API_URL } from '@/utils/config'
 
 interface Data {
   url: string
@@ -57,7 +58,7 @@ export default defineComponent({
     async loadLinkData() {
       console.log(`Loading data for ID: ${this.id}`)
       try {
-        const response = await axios.get(`http://localhost:8080/link/${this.id}`)
+        const response = await axios.get(API_URL + `/link/${this.id}`)
         console.log(response)
         if (response.data) {
           this.url = response.data.url
@@ -79,7 +80,7 @@ export default defineComponent({
         path: this.path
       }
       try {
-        const response = await axios.put(`http://localhost:8080/link/${this.id}`, payload)
+        const response = await axios.put(API_URL + `/link/${this.id}`, payload)
 
         if (response && response.data) {
           alert('Link updated succesfully')
diff --git a/frontend/src/components/LinkList.vue b/frontend/src/components/LinkList.vue
index 60878d8..31fc519 100644
--- a/frontend/src/components/LinkList.vue
+++ b/frontend/src/components/LinkList.vue
@@ -75,7 +75,7 @@
 <script lang="ts">
 import { defineComponent, type PropType } from 'vue'
 import axios from 'axios'
-
+import { API_URL } from '@/utils/config.ts'
 interface LinkRow {
   _id: string
   url: string
@@ -125,7 +125,7 @@ export default defineComponent({
     async fetchLinks() {
       console.log('Stored token:', localStorage.getItem('access_token'))
       try {
-        const response = await axios.get('http://localhost:8080/link')
+        const response = await axios.get(API_URL + '/link')
 
         console.log('Response data:', response.data)
         this.rows = response.data.sort(
@@ -138,7 +138,7 @@ export default defineComponent({
     async deleteRow(rowToDelete: LinkRow) {
       if (confirm('Are you sure you want to delete this link?'))
         try {
-          const response = await axios.delete(`http://localhost:8080/link/${rowToDelete._id}`)
+          const response = await axios.delete(API_URL + `/link/${rowToDelete._id}`)
           console.log(this.rows)
           if (response.status === 200) {
             this.rows = this.rows.filter((row) => row._id !== rowToDelete._id)
diff --git a/frontend/src/store/link.ts b/frontend/src/store/link.ts
index 96457b3..a48c2b5 100644
--- a/frontend/src/store/link.ts
+++ b/frontend/src/store/link.ts
@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import router from '@/router/index'
 import axios from 'axios'
-
+import { API_URL } from '@/utils/config'
 interface LinkRow {
   _id: string
   url: string
@@ -27,7 +27,7 @@ export const useLinkStore = defineStore({
     async fetchLinks() {
       console.log('Stored token:', localStorage.getItem('access_token'))
       try {
-        const response = await axios.get('http://localhost:8080/link')
+        const response = await axios.get(API_URL + '/link')
 
         console.log('Response data:', response.data)
         this.rows = response.data
@@ -39,7 +39,7 @@ export const useLinkStore = defineStore({
     async deleteRow(rowToDelete: LinkRow) {
       if (confirm('Are you sure you want to delete this link?'))
         try {
-          const response = await axios.delete(`http://localhost:8080/link/${rowToDelete._id}`)
+          const response = await axios.delete(API_URL + `/link/${rowToDelete._id}`)
           console.log(this.rows)
           if (response.status === 200) {
             this.rows = this.rows.filter((row) => row._id !== rowToDelete._id)
diff --git a/frontend/src/utils/config.ts b/frontend/src/utils/config.ts
new file mode 100644
index 0000000..c618182
--- /dev/null
+++ b/frontend/src/utils/config.ts
@@ -0,0 +1,3 @@
+const env = import.meta.env
+
+export const API_URL = env.VITE_API_URL
diff --git a/frontend/src/utils/cypress.config.ts b/frontend/src/utils/cypress.config.ts
new file mode 100644
index 0000000..d7ab592
--- /dev/null
+++ b/frontend/src/utils/cypress.config.ts
@@ -0,0 +1 @@
+baseUrl: process.env.CYPRESS_BASE_URL
diff --git a/frontend/test/test.js b/frontend/test/test.js
new file mode 100644
index 0000000..2a3907b
--- /dev/null
+++ b/frontend/test/test.js
@@ -0,0 +1,2 @@
+const env = process.env
+console.log(env.USER)
diff --git a/frontend/tsconfig.node.json b/frontend/tsconfig.node.json
index dee96be..1c6e0f9 100644
--- a/frontend/tsconfig.node.json
+++ b/frontend/tsconfig.node.json
@@ -5,7 +5,8 @@
     "vitest.config.*",
     "cypress.config.*",
     "nightwatch.conf.*",
-    "playwright.config.*"
+    "playwright.config.*",
+    "cypress/e2e/cypress.config.ts"
   ],
   "compilerOptions": {
     "composite": true,