From 869f01a62b68951f2bdf1f0f71bcd2b407a4cef5 Mon Sep 17 00:00:00 2001
From: Annie <an-hua.huang@ibm.com>
Date: Tue, 21 Nov 2023 12:56:15 +0800
Subject: [PATCH] Add check chtext element and ids,fix quest problem

---
 app/src/components/AuthForm.vue        | 20 ++++---
 app/src/components/CommandlistPart.vue |  2 +-
 app/src/components/CompleteModal.vue   |  3 +-
 app/src/components/GameHeaderPart.vue  |  2 +-
 app/src/components/QuestPart.vue       |  2 +-
 app/src/components/TerminalPart.vue    |  2 +-
 app/src/views/LoginPage.vue            |  2 +-
 server/src/containers/docker.js        | 28 ++++++---
 tests/cypress.config.js                |  1 +
 tests/cypress/e2e/helloworld.cy.js     | 80 +++++++++-----------------
 tests/cypress/support/commands.js      | 26 ++++++++-
 11 files changed, 90 insertions(+), 78 deletions(-)

diff --git a/app/src/components/AuthForm.vue b/app/src/components/AuthForm.vue
index 2317b7b..d1a0dfb 100644
--- a/app/src/components/AuthForm.vue
+++ b/app/src/components/AuthForm.vue
@@ -99,7 +99,7 @@ const handleChange = () => {
     </div>
     <form @submit.prevent="handleSubmit()" class="w-full">
       <div v-if="socialLogin && hasSocialLogins">
-        <a
+        <a id="GoogleLogin"
           v-if="availableMethods.google"
           class="inline-flex justify-center items-center rounded-lg py-2 mt-3 bg-bg-primary text-text-secondary w-full border-text-secondary border-2"
           href="/api/v1/auth/google"
@@ -113,7 +113,7 @@ const handleChange = () => {
             以Google繼續
           </span>
         </a>
-        <a
+        <a id="GitHubLogin"
           v-if="availableMethods.github"
           class="inline-flex justify-center items-center rounded-lg py-2 mt-3 bg-bg-primary text-text-secondary w-full border-text-secondary border-2"
           href="/api/v1/auth/github"
@@ -124,10 +124,11 @@ const handleChange = () => {
           />
           <span class="font-medium">
             <!-- Continue with GitHub -->
-            以Github繼續
+            以GitHub繼續
           </span>
         </a>
         <p
+          id="or"
           class="text-text-secondary flex justify-center mt-3"
           v-if="type === 'login' || type === 'register'"
         >
@@ -210,10 +211,11 @@ const handleChange = () => {
           @input="handleChange()"
         />
       </div>
-      <p class="text-error flex justify-center" v-if="errorMessage">
+      <p id="ErrorDisplay" class="text-error flex justify-center" v-if="errorMessage">
         {{ errorMessage }}
       </p>
       <button
+        id="LogInOrSignUp"
         class="inline-flex justify-center rounded-lg font-black py-2 bg-text-primary text-bg w-full"
         type="submit"
       >
@@ -227,21 +229,21 @@ const handleChange = () => {
         </span>
       </button>
 
-      <p class="text-text flex justify-center mt-3">
-        <span v-if="type === 'register'">
+      <p id="SwitchLoginRegister" class="text-text flex justify-center mt-3">
+        <span id="CheckRegistered" v-if="type === 'register'">
           <!-- Already have an account? -->
           已經有帳號了嗎？
-          <RouterLink class="text-text-primary font-bold" to="/login">
+          <RouterLink id="SwitchtoLogin" class="text-text-primary font-bold" to="/login">
             <u>
               <!-- Log in -->
               登入
             </u>
           </RouterLink></span
         >
-        <span v-else-if="type === 'login'">
+        <span id="CheckRegistered" v-else-if="type === 'login'">
           <!-- Don't have an account? -->
           還沒有帳號嗎？
-          <RouterLink class="text-text-primary font-bold" to="/register">
+          <RouterLink id="SwitchtoRegister" class="text-text-primary font-bold" to="/register">
             <u>
               <!-- Sign up -->
               註冊
diff --git a/app/src/components/CommandlistPart.vue b/app/src/components/CommandlistPart.vue
index 45660d0..8e05bc1 100644
--- a/app/src/components/CommandlistPart.vue
+++ b/app/src/components/CommandlistPart.vue
@@ -2,7 +2,7 @@
 
 <template>
   <font-awesome-icon :icon="['fas', 'list']" class="text-text-primary p-1" />
-  <h1 class="inline text-text-primary font-xl">
+  <h1 id="CommandBook" class="inline text-text-primary font-xl">
     <!-- Command Cheatsheets -->
     指令之書
   </h1>
diff --git a/app/src/components/CompleteModal.vue b/app/src/components/CompleteModal.vue
index 52fab75..fe1f9ff 100644
--- a/app/src/components/CompleteModal.vue
+++ b/app/src/components/CompleteModal.vue
@@ -18,7 +18,7 @@ setTimeout(() => {
   <div v-if="showModal" class="modal">
     <div class="modal-content bg-bg-secondary rounded-lg">
       <span class="close text-text" @click="closeModal">&times;</span>
-      <h2 class="text-2xl text-text mb-5 w-full inline-flex justify-center">
+      <h2 id="QuestCompleted" class="text-2xl text-text mb-5 w-full inline-flex justify-center">
         <!-- Quest Completed! -->
         關卡完成！
       </h2>
@@ -27,6 +27,7 @@ setTimeout(() => {
         如果您能撥冗填寫這份問卷，我們將不勝感激，這對我們非常重要！
       </p>
       <a
+        id="SurveyButton"
         :href="surveyUrl"
         target="_blank"
         class="inline-flex justify-center rounded-lg text-base font-black py-2 mt-3 bg-text-primary w-full"
diff --git a/app/src/components/GameHeaderPart.vue b/app/src/components/GameHeaderPart.vue
index 2ea091d..296484c 100644
--- a/app/src/components/GameHeaderPart.vue
+++ b/app/src/components/GameHeaderPart.vue
@@ -37,7 +37,7 @@ const handleLogout = async () => {
             class="text-text-tertiary h-full w-full"
           />
         </button> -->
-        <p
+        <p id="HeaderText"
           class="text-text-primary inline-block font-bold whitespace-nowrap"
           style="font-size: 2vh"
           v-if="sessionStore.quest"
diff --git a/app/src/components/QuestPart.vue b/app/src/components/QuestPart.vue
index 8fe0964..15ab4b0 100644
--- a/app/src/components/QuestPart.vue
+++ b/app/src/components/QuestPart.vue
@@ -12,7 +12,7 @@ import sessionStore from '../store/session'
       <div v-if="sessionStore.quest" class="whitespace-pre-wrap">
         <p class="text-text">{{ sessionStore.quest.instruction }}</p>
         <br />
-        <p class="text-text">
+        <p id="tasks" class="text-text">
           <!-- Tasks: -->
           任務：
         </p>
diff --git a/app/src/components/TerminalPart.vue b/app/src/components/TerminalPart.vue
index 7d50f34..3abc4d2 100644
--- a/app/src/components/TerminalPart.vue
+++ b/app/src/components/TerminalPart.vue
@@ -1,6 +1,6 @@
 <template>
   <font-awesome-icon :icon="['fas', 'terminal']" class="text-text p-1" />
-  <button class="text-text h-[5%]">
+  <button id="Terminal" class="text-text h-[5%]">
     <!-- Terminal -->
     終端機
   </button>
diff --git a/app/src/views/LoginPage.vue b/app/src/views/LoginPage.vue
index adedc60..a16357a 100644
--- a/app/src/views/LoginPage.vue
+++ b/app/src/views/LoginPage.vue
@@ -42,7 +42,7 @@ const handleLogin = async ({ username, password, success, error }) => {
       class="w-screen h-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
     >
       <div class="w-fit">
-        <AuthForm @onSubmit="handleLogin" type="login" />
+        <AuthForm  @onSubmit="handleLogin" type="login" />
       </div>
     </div>
   </div>
diff --git a/server/src/containers/docker.js b/server/src/containers/docker.js
index e71337f..9ec37e4 100644
--- a/server/src/containers/docker.js
+++ b/server/src/containers/docker.js
@@ -79,6 +79,16 @@ export async function deleteContainer(id) {
   await container.remove()
 }
 
+function parseJSONOutput(data) {
+  const { stream, error } = JSON.parse(data.toString())
+  if (stream) {
+    console.log(stream)
+  }
+  if (error) {
+    throw error
+  }
+}
+
 export function buildQuestImage(questPath, questId) {
   return new Promise((resolve, reject) => {
     engine.buildImage(
@@ -97,13 +107,17 @@ export function buildQuestImage(questPath, questId) {
         }
         response.on('data', (data) => {
           // Process the data (this could be Docker build output)
-          const { stream, error } = JSON.parse(data.toString())
-          if (stream) {
-            console.log(stream)
-          }
-          if (error) {
-            console.error(error)
-            reject(error)
+          try {
+            data
+              .toString()
+              .split('\n')
+              .map((line) => line.trim())
+              .filter((line) => line !== '')
+              .forEach((line) => {
+                parseJSONOutput(line.trim())
+              })
+          } catch (err) {
+            reject(err)
           }
         })
 
diff --git a/tests/cypress.config.js b/tests/cypress.config.js
index 9057bb2..79bb44d 100644
--- a/tests/cypress.config.js
+++ b/tests/cypress.config.js
@@ -24,6 +24,7 @@ module.exports = defineConfig({
   env: {
     defaultAccount: getOrFail('TESTING_USERNAME'),
     defaultPassword: getOrFail('TESTING_PASSWORD'),
+    isCHVersion:true,
     // google_username: process.env.GOOGLE_USERNAME,
     // google_password: process.env.GOOGLE_PASSWORD,
     // google_client_id: process.env.GOOGLE_CLIENT_ID,
diff --git a/tests/cypress/e2e/helloworld.cy.js b/tests/cypress/e2e/helloworld.cy.js
index 5894660..ad70fea 100644
--- a/tests/cypress/e2e/helloworld.cy.js
+++ b/tests/cypress/e2e/helloworld.cy.js
@@ -3,9 +3,7 @@ export default function checkLoginUI() {
   cy.get('h1.text-text-primary')
     .should('contain', 'Linux Odyssey')
     .and('be.visible')
-  cy.get('#password')
-    .invoke('attr', 'placeholder')
-    .should('contain', 'Password')
+  cy.CheckPlaceholder('#password','密碼','Password')
 }
 describe('example helloworld app', () => {
   describe('Login tests', () => {
@@ -14,51 +12,37 @@ describe('example helloworld app', () => {
     })
     it('Check Login Page Elements-Register', () => {
       checkLoginUI()
-      cy.get('#username')
-        .invoke('attr', 'placeholder')
-        .should('contain', 'Username')
+      cy.CheckPlaceholder('#username','帳號名稱','Username')
       cy.get('label.text-text-secondary').should('be.visible') // check the rules is displayed
-      cy.get('#email').invoke('attr', 'placeholder').should('contain', 'Email')
-      cy.get('span').contains('Already have an account?').should('be.visible')
-      cy.get('a.text-text-primary')
-        .should('contain', 'Log in')
-        .and('be.visible')
+      cy.CheckPlaceholder('#email','電子郵件','Email')
+      cy.CheckTextElement('#CheckRegistered','已經有帳號了嗎？','Already have an account?')
+      cy.CheckTextElement('#SwitchtoLogin','登入','Log in')
     })
     it('Check Login Page Elements-Login', () => {
-      cy.get('a.text-text-primary')
-        .should('contain', 'Log in')
-        .and('be.visible')
-        .click()
+      cy.get('#SwitchtoLogin').click()
       checkLoginUI()
-      cy.get('#username')
-        .invoke('attr', 'placeholder')
-        .should('contain', 'Email / Username')
-      cy.findByRole('button', { name: 'Log In' }).should('be.visible')
-      cy.get('span').contains("Don't have an account?").should('be.visible')
-      cy.get('a.text-text-primary')
-        .should('contain', 'Sign up')
-        .and('be.visible')
+      cy.CheckPlaceholder('#username','電子郵件 / 帳號名稱', 'Email / Username')
+      cy.get('#LogInOrSignUp').should('be.visible')
+      cy.CheckTextElement('#CheckRegistered','還沒有帳號嗎？',"Don't have an account?")
+      cy.CheckTextElement('#SwitchtoRegister','註冊','Sign up')
     })
     it('Check social account UI', () => {
-      cy.get('p').contains('or').should('be.visible')
-      cy.findByRole('link', { name: 'Continue with Google' }).should(
-        'be.visible'
-      )
-      cy.findByRole('link', { name: 'Continue with GitHub' }).should(
-        'be.visible'
-      )
+      cy.CheckTextElement('#or','或','or')
+      cy.CheckTextElement('#GoogleLogin','以Google繼續','Continue with Google')
+      cy.CheckTextElement('#GitHubLogin','以GitHub繼續','Continue with GitHub')
     })
     it('Check login fail', () => {
       cy.LoginWithPassword('dddd', '123456')
-      cy.get('p').contains('Wrong username or password.').should('be.visible')
+      cy.CheckTextElement('#ErrorDisplay','錯誤的帳號名稱或密碼。','Wrong username or password.')
       cy.LoginWithPassword(`ddd\``, '123456')
-      cy.get('p').contains('Invalid username or password.').should('be.visible')
+      cy.CheckTextElement('#ErrorDisplay','無效的帳號名稱或密碼。','Invalid username or password.')
     })
     it('Login-Password Already Register', () => {
       cy.LoginWithPassword(
         Cypress.env('defaultAccount'),
         Cypress.env('defaultPassword')
       )
+      cy.url().should('include', '/game')
     })
   })
   describe('Game Start Page UI', () => {
@@ -66,33 +50,29 @@ describe('example helloworld app', () => {
       cy.PrepareForGame()
     })
     it('Check Header', () => {
-      cy.findByRole('button', { name: 'Hello, Linux World!' }).should(
-        'be.visible'
-      )
+      cy.get('#HeaderText').should('contain','Hello, Linux World!').and('be.visible')
       cy.findByRole('link', { name: 'Bug Report' }).should('be.visible')
       cy.findByRole('button', { name: 'Sign Out' }).should('be.visible')
     })
     it('Check QuestInfo', () => {
       cy.get('#topic').should('contain', 'Hello, Linux World!')
       cy.get('#quest').find('p.text-text').should('have.length', 3)
-      cy.getQuestInfo('Tasks:').should('be.visible')
+      cy.CheckTextElement('#tasks','任務','Tasks:')
       cy.getQuestInfo('輸入 `echo help` 來朗誦咒語').should('be.visible')
     })
     it('Check Command Cheat Sheet', () => {
       cy.get('#cmdlist').within(($cmdlist) => {
         cy.get($cmdlist).should('be.visible')
         cy.get('svg[data-icon="list"]').should('be.visible')
-        cy.get('h1').should('contain', 'Command Cheatsheets').and('be.visible')
-        cy.get('#cheatsheets')
-          .should('contain', '--Command List--')
-          .and('be.visible')
+        cy.CheckTextElement('#CommandBook','指令之書','Command Cheatsheets')
+        cy.CheckTextElement('#cheatsheets','-- --指令列表-- --','--Command List--')
       })
     })
     it('Check Terminal', () => {
       cy.get('#terminal', { timeout: 20000 }).within(($terminal) => {
         cy.get($terminal).should('be.visible')
         cy.get('svg[data-icon="terminal"]').should('be.visible')
-        cy.findByRole('button').should('contain', 'Terminal').and('be.visible')
+        cy.CheckTextElement('#Terminal','終端機','Terminal')
         cy.get('@Terminaltextbox')
           .should('be.visible')
           .and('contain', 'commander:~ $')
@@ -102,19 +82,17 @@ describe('example helloworld app', () => {
       cy.get('#hint', { timeout: 20000 }).within(($hint) => {
         cy.get($hint).should('be.visible')
         cy.get('svg[data-icon="lightbulb"]').should('be.visible')
-        cy.get('h1').should('contain', 'Hint').and('be.visible')
       })
+      cy.CheckTextElement('#hint','提示','Hint')
     })
     it('Check File TreeChart', () => {
       cy.get('#tree').should('be.visible')
       cy.get('#tree').get('a').should('contain', '???').and('be.visible')
     })
     it('Check Fucnctional Buttons', () => {
-      cy.findByRole('button', { name: 'Solution' }, { timeout: 30000 }).should(
-        'be.visible'
-      )
-      cy.findByRole('button', { name: 'Reset' }).should('be.visible')
-      cy.findByRole('button', { name: 'Continue' }).should('be.visible')
+      cy.CheckTextElement('#solution','解答','Solution')
+      cy.CheckTextElement('#reset','重來','Reset')
+      cy.CheckTextElement('#continue','繼續','Continue')
     })
   })
   describe('Game Play', () => {
@@ -128,7 +106,7 @@ describe('example helloworld app', () => {
         .should('contain', 'zsh: command not found: 12345')
         .and('contain', '12345')
     })
-    it.only('Complete the Game(relating UI)', () => {
+    it('Complete the Game(relating UI)', () => {
       // get answersheet
       cy.get('@answers').then((answers) => {
         const answerarr = answers.split('\n')
@@ -172,12 +150,8 @@ describe('example helloworld app', () => {
         cy.checkPending()
         cy.waitUntilActive()
         cy.getQuestInfo('✓ 解除封印').should('be.visible')
-        cy.findByRole(
-          'heading',
-          { name: 'Quest Completed!' },
-          { timeout: 20000 }
-        ).should('be.visible')
         // Check survey dialog pop up
+        cy.CheckTextElement('#QuestCompleted','關卡完成！','Quest Completed!')
         cy.get('div[class="modal"]').find('p').should('be.visible')
         cy.findByRole('link', { name: '填寫問卷' }).should('be.visible')
       })
diff --git a/tests/cypress/support/commands.js b/tests/cypress/support/commands.js
index fa1d735..b29dc3d 100644
--- a/tests/cypress/support/commands.js
+++ b/tests/cypress/support/commands.js
@@ -5,8 +5,7 @@ Cypress.Commands.add('LoginWithPassword', (username, password) => {
   cy.visit('/login')
   cy.get('#username').type(username)
   cy.get('#password').type(password)
-  cy.findByRole('button', { name: 'Log In' }).click()
-  cy.url().should('include', '/game')
+  cy.get('#LogInOrSignUp').click()
 })
 Cypress.Commands.add('PrepareForGame', () => {
   cy.visit('/')
@@ -14,11 +13,12 @@ Cypress.Commands.add('PrepareForGame', () => {
     Cypress.env('defaultAccount'),
     Cypress.env('defaultPassword')
   )
+  cy.url().should('include', '/game')
   cy.visit('/game/helloworld')
   cy.get('.xterm-screen', { timeout: 10000 })
     .as('Terminaltextbox')
     .should('be.visible')
-  cy.findByRole('button', { name: 'Reset' }).click()
+  cy.CheckTextElement('#reset','重來','Reset').click()
   cy.typeInCommand('clear{enter}')
   cy.get('@Terminaltextbox', { timeout: 150000 }).should(
     'contain',
@@ -66,3 +66,23 @@ Cypress.Commands.add('checkPending', () => {
 Cypress.Commands.add('Complete the Stage (only command)', () => {
   cy.log('')
 })
+Cypress.Commands.add('CheckTextElement',(id,chText,enText)=>{
+    cy.get(id).within(($element)=>{
+      if(Cypress.env('isCHVersion')){
+      cy.get($element).should('contain',chText).and('be.visible')
+    }
+    else{
+      cy.get($element).should('contain',enText).and('be.visible')
+    }
+  })
+})
+Cypress.Commands.add('CheckPlaceholder',(id,chText,enText)=>{
+  cy.get(id).invoke('attr', 'placeholder').then(($placeHolder)=>{
+  if(Cypress.env('isCHVersion')){
+      expect($placeHolder).eq(chText)
+  }
+  else{
+    expect($placeHolder).eq(enText)
+  }
+})
+})