- Add auto-complete quest command

- Change spec name
- Add spec complete all quests
- Add Icon (totem version)
- Add some id for tests
- Add answer.sh for all quests

tests/cypress/e2e/UItests.cy.js

@@ -1,8 +1,6 @@
 /// <reference types="cypress" />
 export default function checkLoginUI() {
-  cy.get('h1.text-text-primary')
-    .should('contain', 'Linux Odyssey')
-    .and('be.visible')
+  cy.get('#title').should('contain', 'Linux Odyssey').and('be.visible')
   cy.CheckPlaceholder('#password', '密碼', 'Password')
 }
 describe('example helloworld app', () => {
@@ -13,7 +11,7 @@ describe('example helloworld app', () => {
     it('Check Login Page Elements-Register', () => {
       checkLoginUI()
       cy.CheckPlaceholder('#username', '帳號名稱', 'Username')
-      cy.get('label.text-text-secondary').should('be.visible') // check the rules is displayed
+      cy.get('#NameRules').should('be.visible') // check the rules is displayed
       cy.CheckPlaceholder('#email', '電子郵件', 'Email')
       cy.CheckTextElement(
         '#CheckRegistered',
@@ -79,15 +77,23 @@ describe('example helloworld app', () => {
       cy.PrepareForGame()
     })
     it('Check Header', () => {
-      cy.get('#HeaderText').should('contain', 'Linux Odyssey').and('be.visible')
+      cy.get('#GameTitle').should('contain', 'Linux Odyssey').and('be.visible')
+      cy.get('#QuestTitle').should('contain', title).and('be.visible')
+      cy.get('#UsernameText')
+        .should('contain', Cypress.env('defaultAccount'))
+        .and('be.visible')
       cy.findByRole('link', { name: 'Bug Report' }).should('be.visible')
       cy.findByRole('button', { name: 'Sign Out' }).should('be.visible')
+      cy.findByRole('button', { name: 'Map' }).should('be.visible')
+      cy.findByRole('button', { name: 'LeaderBoard' }).should('be.visible')
+      cy.findByRole('link', { name: 'Survey' }).should('be.visible')
     })
     it('Check QuestInfo', () => {
       cy.get('#topic').should('contain', title)
-      cy.get('#quest').find('p.text-text').should('have.length', 4)
+      cy.get('#topic').should('be.visible')
+      cy.get('#tasks').should('be.visible')
+      cy.get('#quest').find('p.text-text').should('have.length', 2)
       cy.CheckTextElement('#tasks', '任務', 'Tasks:')
-      cy.getQuestInfo('輸入 `echo help` 來朗誦咒語').should('be.visible')
     })
     it('Check Terminal', () => {
       cy.get('#terminal', { timeout: 20000 }).within(($terminal) => {
@@ -114,6 +120,7 @@ describe('example helloworld app', () => {
       cy.CheckTextElement('#solution', '解答', 'Solution')
       cy.CheckTextElement('#reset', '重來', 'Reset')
       cy.CheckTextElement('#continue', '繼續', 'Continue')
+      cy.CheckTextElement('#survey', '問卷', 'Survey')
     })
   })
   describe('Game Play', () => {
@@ -126,42 +133,31 @@ describe('example helloworld app', () => {
         .should('contain', '12345')
         .and('contain', 'zsh: command not found: 12345', { timeout: 50000 })
     })
-    it('Complete the Game(relating UI)', () => {
-      // Stage1
-      cy.log('Stage1')
+    it('Complete the First Quest(relating UI)', () => {
+      cy.checkTaskInit()
+      cy.InitTerminal()
       cy.typeInCommand('echo start{enter}')
       cy.checkPending()
       cy.waitUntilActive()
       cy.get('#Lbutton').should('be.visible').and('be.disabled')
       cy.get('#Rbutton').should('be.visible').and('be.disabled')
       cy.checkHint(1, 1)
-      cy.getQuestInfo('✓ 輸入 `echo start` 來開始教程').should('be.visible')
-      cy.getQuestInfo('➤ 在終端機輸入 `echo hello`').should('be.visible')
-      // Stage2
-      cy.log('Stage2')
+      cy.getQuestInfo('✓ 輸入 echo start 來開始教程').should('be.visible')
+      cy.getQuestInfo('➤ 在終端機輸入 echo hello').should('be.visible')
       cy.typeInCommand('echo hello{enter}')
       cy.checkPending()
       cy.waitUntilActive()
-      // cy.get('#tree')
-      //   .get('a')
-      //   .should('contain', 'forgotten_scroll.txt')
-      //   .and('be.visible')
       cy.get('#Lbutton').should('be.visible').and('be.enabled')
       cy.get('#Rbutton').should('be.visible').and('be.disabled')
       cy.checkHint(2, 2)
       cy.get('#Lbutton').click()
       cy.get('#Rbutton').should('be.enabled')
-      cy.getQuestInfo('✓ 在終端機輸入 `echo hello`').should('be.visible')
+      cy.getQuestInfo('✓ 在終端機輸入 echo hello').should('be.visible')
       cy.getQuestInfo('➤ 結束關卡').should('be.visible')
-      // Stage3
-      cy.log('Stage3')
       cy.typeInCommand('echo finish{enter}')
-      cy.checkPending()
-      cy.waitUntilActive()
-      cy.getQuestInfo('✓ 結束關卡').should('be.visible')
       cy.CheckTextElement('#QuestCompleted', '關卡完成！', 'Quest Completed!')
       cy.get('div[class="modal"]').find('p').should('be.visible')
-      cy.findByRole('link', { name: '填寫問卷' }).should('be.visible')
+      cy.get('#BacktoMap').should('be.visible').and('contain', '回到地圖')
     })
   })
 })

tests/cypress/e2e/completeQuests.cy.js

@@ -0,0 +1,36 @@
+/// <reference types="cypress" />
+describe('Complete quests with only commands', () => {
+  beforeEach(() => {
+    cy.PrepareForGame()
+  })
+  it('Complete quest : get-started', () => {
+    cy.CompleteStageWithCommands('get-started')
+  })
+  it('Complete quest : cast', () => {
+    cy.CompleteStageWithCommands('cast')
+  })
+  it('Complete quest : explore', () => {
+    cy.CompleteStageWithCommands('explore')
+  })
+  it('Complete quest : path', () => {
+    cy.CompleteStageWithCommands('path')
+  })
+  it('Complete quest : read', () => {
+    cy.CompleteStageWithCommands('read')
+  })
+  it('Complete quest : create', () => {
+    cy.CompleteStageWithCommands('create')
+  })
+  it('Complete quest : copy', () => {
+    cy.CompleteStageWithCommands('copy')
+  })
+  it('Complete quest : move', () => {
+    cy.CompleteStageWithCommands('move')
+  })
+  it('Complete quest : remove', () => {
+    cy.CompleteStageWithCommands('remove')
+  })
+  it('Complete quest : helloworld', () => {
+    cy.CompleteStageWithCommands('helloworld')
+  })
+})

tests/cypress/support/commands.js

@@ -25,15 +25,20 @@ Cypress.Commands.add('PrepareForGame', () => {
   cy.get('.xterm-screen', { timeout: 10000 })
     .as('Terminaltextbox')
     .should('be.visible')
+  cy.checkTaskInit()
   cy.CheckTextElement('#reset', '重來', 'Reset').click()
-  cy.typeInCommand('clear{enter}')
+  cy.checkTaskInit()
+  cy.InitTerminal()
+})
+Cypress.Commands.add('InitTerminal', () => {
   cy.get('@Terminaltextbox', { timeout: 150000 }).should(
     'contain',
     'commander:~ $'
   )
+  cy.log('Check terminal init done')
 })
 Cypress.Commands.add('typeInCommand', (command) => {
-  cy.get('.xterm-screen', { timeout: 150000 }).type(command)
+  cy.get('.xterm-screen', { timeout: 150000 }).type(command, { delay: 10 })
 })
 Cypress.Commands.add('getQuestInfo', (id) => {
   return cy
@@ -48,6 +53,9 @@ Cypress.Commands.add('checkHint', (index, total) => {
     .contains(`${index}/${total}`)
     .should('be.visible')
 })
+Cypress.Commands.add('checkTaskInit', () => {
+  cy.get('#tasks').next().children().should('be.visible')
+})
 Cypress.Commands.add('waitUntilActive', () => {
   cy.get('input[id="currentStatus"]', { timeout: 1000000 })
     .invoke('val')
@@ -66,8 +74,25 @@ Cypress.Commands.add('checkPending', () => {
     'pending'
   )
 })
-Cypress.Commands.add('Complete the Stage (only command)', () => {
-  cy.log('')
+Cypress.Commands.add('CompleteStageWithCommands', (stagename) => {
+  cy.visit(`/game/${stagename}`)
+  cy.url().should('include', `/game/${stagename}`)
+  cy.log(`Completing stage :${stagename}`)
+  cy.checkTaskInit()
+  cy.CheckTextElement('#reset', '重來', 'Reset').click()
+  cy.checkTaskInit()
+  cy.InitTerminal()
+  cy.readFile(`../quests/${stagename}/answer.sh`, 'utf-8').as('answers')
+  cy.get('@answers').then((answers) => {
+    const answerarr = answers.split('\n')
+    for (const element of answerarr) {
+      cy.typeInCommand(`${element}{enter}`)
+      if (answerarr.indexOf(element) + 1 !== answerarr.length) {
+        cy.checkPending()
+        cy.waitUntilActive()
+      }
+    }
+  })
 })
 Cypress.Commands.add('CheckTextElement', (id, chText, enText) => {
   cy.get(id).within(($element) => {
@@ -89,3 +114,6 @@ Cypress.Commands.add('CheckPlaceholder', (id, chText, enText) => {
       }
     })
 })
+Cypress.Commands.add('CheckTreeElement', (element) => {
+  cy.get('#tree').get('a').should('contain', `${element}`).and('be.visible')
+})