Frontend/create room

packages/frontend/.eslintignore

@@ -1,2 +1,3 @@
 build
 node_modules
+cypress

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

@@ -0,0 +1,46 @@
+beforeEach(() => {
+  cy.setupIntercept()
+})
+
+describe('Modal E2E Test', () => {
+  //創建房間成功案例
+  it('should open modal, input room name, send POST request, and verify response', () => {
+    cy.visit('http://localhost:3001/rooms')
+
+    cy.get('.navbar__btn').click()
+
+    // 顯示modal
+    cy.get('.modal-content').should('be.visible')
+
+    // 輸入欄位輸入'一起玩富饒之城'
+    cy.get('#roomName').type('一起玩富饒之城')
+
+    // 按下確認按鈕
+    cy.get('.blue-btn').click()
+
+    // 創建房間POST應該拿到statusOK和200
+    cy.wait('@createRoomRequest').should(({ request, response }) => {
+      expect(response.statusCode).to.equal(200)
+      expect(response.body.status).to.equal('OK')
+    })
+  })
+
+  it('should handle connection error and display error modal', () => {
+    //創建房間失敗案例
+    cy.setupInterceptWithError()
+
+    cy.visit('http://localhost:3001/rooms')
+
+    cy.get('.navbar__btn').click()
+
+    cy.get('.modal-content').should('be.visible')
+
+    cy.get('#roomName').type('一起玩富饒之城')
+
+    cy.get('.blue-btn').click()
+
+    cy.wait('@errorRequest')
+
+    cy.get('.error-modal').should('be.visible')
+  })
+})

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

@@ -1,9 +1,6 @@
-// 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',
@@ -13,17 +10,13 @@ describe('E2E Tests to MockAPI', () => {
     ).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/createRoom.json

@@ -0,0 +1,20 @@
+{
+  "createTime": "2023-07-04T19:29:54.001Z",
+  "status": "OK",
+  "msg": "",
+  "room": {
+    "roomId": "sxsxs111",
+    "roomName": "一起玩富饒之城",
+    "holderId": "player1",
+    "holderName": "陳XX",
+    "users": [
+      {
+        "userId": "player1",
+        "userImage": "imageName1",
+        "userName": "陳XX"
+      }
+    ],
+    "status": "OPEN",
+    "totalUsers": 1
+  }
+}

packages/frontend/cypress/support/commands.js

@@ -23,3 +23,35 @@
 //
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+
+//POST成功API
+Cypress.Commands.add('setupIntercept', () => {
+  cy.intercept(
+    'POST',
+    'https://001f08b9-acb7-4c3a-a54f-a9254b7e8e55.mock.pstmn.io/createroom',
+    (req) => {
+      req.body = {
+        roomName: '一起玩富饒之城',
+        userName: '陳XX',
+        userImage: 'imageName1'
+      }
+      req.reply({
+        fixture: 'createRoom.json'
+      })
+    }
+  ).as('createRoomRequest')
+})
+
+//POST失敗API
+Cypress.Commands.add('setupInterceptWithError', () => {
+  cy.intercept(
+    'POST',
+    'https://001f08b9-acb7-4c3a-a54f-a9254b7e8e55.mock.pstmn.io/createroom',
+    (req) => {
+      req.reply({
+        statusCode: 500, // Simulate a server error
+        body: 'Error occurred'
+      })
+    }
+  ).as('errorRequest')
+})

packages/frontend/js/api/index.js

@@ -0,0 +1,19 @@
+import axiosInstance from '../common/axiosInstance'
+
+const url =
+  process.env.NODE_ENV === 'development'
+    ? 'https://001f08b9-acb7-4c3a-a54f-a9254b7e8e55.mock.pstmn.io'
+    : ''
+const axios = axiosInstance(url)
+
+export const getRoomList = (payload) => {
+  return axios.get('/games', payload)
+}
+
+export const createRoom = (payload) => {
+  return axios.post('/createroom', payload)
+}
+
+export const getSpecificRoom = (payload) => {
+  return axios.get('/rooms', payload)
+}

packages/frontend/js/common/axiosInstance.js

@@ -0,0 +1,26 @@
+import axios from 'axios'
+
+export default (baseUrl) => {
+  const instance = axios.create({
+    baseURL: baseUrl
+  })
+  instance.interceptors.response.use(
+    (res) => {
+      if (res && res.status === 200) {
+        return res.data
+      }
+    },
+    (error) => {
+      if (error.response) {
+        switch (error.response.status) {
+          case 404:
+            break
+          default:
+            console.log(error.message)
+        }
+      }
+      return Promise.reject(error)
+    }
+  )
+  return instance
+}

packages/frontend/js/components/App.jsx

@@ -1,10 +1,18 @@
+import { Routes, Route, Navigate } from 'react-router-dom'
+import RoomList from './RoomList'
+import Game from './Game'
 import getAPI from '../api/getAPI'
 
 const App = () => {
   const { data } = getAPI()
   return (
     <>
-      <div>title:{data.msg}</div>
+      {/* <div>title:{data.msg}</div> */}
+      <Routes>
+        <Route path='/' element={<Navigate to='/rooms' />} />
+        <Route path='/rooms' element={<RoomList />} />
+        <Route path='/game/:roomId' element={<Game />} />
+      </Routes>
     </>
   )
 }

packages/frontend/js/components/ErrorModal.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const ErrorModal = (props) => {
+  const { isErrorVisible, onClose, errorText } = props
+  return (
+    <>
+      {isErrorVisible && (
+        <div className='error-modal'>
+          <div className='error-modal-content'>
+            <span className='error-text'>{errorText}</span>
+            <button className='cancel-btn' onClick={onClose}>
+              Close
+            </button>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}
+
+ErrorModal.propTypes = {
+  isErrorVisible: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  errorText: PropTypes.node.isRequired
+}
+
+export default ErrorModal