frontend WalkingSkeleton (#88)

Co-authored-by: Enya <[email protected]>

.gitignore

@@ -256,4 +256,9 @@ sketch
 .history
 .ionide
 
+#cypress
+/packages/frontend/cypress/videos/
+/packages/frontend/cypress/screenshots/
+
+
 # End of https://www.toptal.com/developers/gitignore/api/intellij,visualstudiocode,git,java,react,maven,eclipse

packages/frontend/cypress.config.js

@@ -1,9 +1,9 @@
-const { defineConfig } = require("cypress");
+const { defineConfig } = require('cypress')
 
 module.exports = defineConfig({
   e2e: {
     setupNodeEvents(on, config) {
       // implement node event listeners here
-    },
-  },
-});
+    }
+  }
+})

packages/frontend/cypress/e2e/APITesting.cy.js

@@ -0,0 +1,13 @@
+// eslint-disable-next-line no-undef
+describe('HTTPRequest', () => {
+  // eslint-disable-next-line no-undef
+  it('GET Call', () => {
+    // eslint-disable-next-line no-unused-expressions, no-undef
+    cy.request(
+      'GET',
+      'https://001f08b9-acb7-4c3a-a54f-a9254b7e8e55.mock.pstmn.io/get?msg=hello'
+    )
+      .its('status')
+      .should('equal', 200)
+  })
+})

packages/frontend/cypress/e2e/useMockAPI.cy.js

@@ -0,0 +1,30 @@
+// eslint-disable-next-line no-undef
+describe('E2E Tests to MockAPI', () => {
+  // eslint-disable-next-line no-undef
+  beforeEach(() => {
+    // 跑E2E測試時，intercept時會攔截XHR、fetch、跨域請求，將get方法呼叫的API改為放在fixtures資料夾的hello.json*
+    // eslint-disable-next-line no-undef
+    cy.intercept(
+      'GET',
+      'https://001f08b9-acb7-4c3a-a54f-a9254b7e8e55.mock.pstmn.io/get?msg=hello',
+      {
+        fixture: 'hello.json'
+      }
+    ).as('getAPI')
+  })
+
+  // eslint-disable-next-line no-undef
+  it('should load data from Local Mock API', () => {
+    // eslint-disable-next-line no-undef
+    cy.visit('http://localhost:3001/')
+
+    // eslint-disable-next-line no-undef
+    cy.wait('@getAPI', { timeout: 10000 })
+      .its('response.body')
+      .then((data) => {
+        // 在這裡設定預期從API獲取到的數據
+        // eslint-disable-next-line no-undef
+        expect(data.args.msg).to.equal('hello')
+      })
+  })
+})

packages/frontend/cypress/fixtures/hello.json

@@ -0,0 +1,18 @@
+{
+  "args": {
+    "msg": "hello"
+  },
+  "headers": {
+    "x-forwarded-proto": "https",
+    "x-forwarded-port": "443",
+    "host": "postman-echo.com",
+    "x-amzn-trace-id": "Root=1-64ac06fd-778a564925e76121259dd571",
+    "x-api-key": "PMAK-64a766dd07cb240031aee0fa-a5ac0a936c61951cec0d9a531788926d41",
+    "user-agent": "PostmanRuntime/7.32.3",
+    "accept": "*/*",
+    "cache-control": "no-cache",
+    "postman-token": "c462399d-5328-4c40-be44-c9f6ab7fdf4b",
+    "accept-encoding": "gzip, deflate, br"
+  },
+  "url": "https://postman-echo.com/get?msg=hello"
+}

packages/frontend/cypress/support/commands.js

@@ -22,4 +22,4 @@
 //
 //
 // -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

packages/frontend/cypress/support/e2e.js

@@ -17,4 +17,4 @@
 import './commands'
 
 // Alternatively you can use CommonJS syntax:
-// require('./commands')
+// require('./commands')

packages/frontend/js/api/getAPI.js

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react'
+import axios from 'axios'
+
+function getAPI() {
+  const [data, setData] = useState({})
+  useEffect(() => {
+    axios({
+      method: 'GET',
+      url: 'https://001f08b9-acb7-4c3a-a54f-a9254b7e8e55.mock.pstmn.io/get?msg=hello'
+    })
+      .then((res) => {
+        setData(res.data.args)
+      })
+      .catch((error) => {
+        console.log(error)
+      })
+  }, [])
+  return { data }
+}
+
+export default getAPI

packages/frontend/js/components/App.jsx

@@ -1,5 +1,11 @@
+import getAPI from '../api/getAPI'
+
 const App = () => {
-  return <div>Hello World!</div>
+  const { data } = getAPI()
+  return (
+    <>
+      <div>title:{data.msg}</div>
+    </>
+  )
 }
-
 export default App