Cypress update (not yet for playing game)

tests/cypress.config.js

@@ -1,5 +1,5 @@
 const { defineConfig } = require('cypress')
-// require('./.env').config()
+require('dotenv').config()
 const process = require('process')
 
 const getConfig = (key, defaultValue) => {
@@ -12,8 +12,12 @@ module.exports = defineConfig({
     viewportWidth: 1920,
     viewportHeight: 1080,
     pageLoadTimeout: 120000,
+    setupNodeEvents(on, config) {},
   },
   env: {
+    ...process.env,
+    defaultAccount: process.env.default_USERNAME,
+    defaultPassword: process.env.default_PASSWORD,
     // google_username: process.env.GOOGLE_USERNAME,
     // google_password: process.env.GOOGLE_PASSWORD,
     // google_client_id: process.env.GOOGLE_CLIENT_ID,

tests/cypress/e2e/helloworld.cy.js

@@ -4,12 +4,9 @@ export default function checkLoginUI() {
   cy.get('h1.text-text-primary')
     .should('contain', 'Linux Odyssey')
     .and('be.visible')
-  cy.get('label[for="password"]')
-    .should('contain', 'Password')
-    .and('be.visible')
   cy.get('#password')
     .invoke('attr', 'placeholder')
-    .should('contain', 'Enter your password')
+    .should('contain', 'Password')
 }
 export function getTerminalrowsContain(content) {
   cy.get('@Terminaltextbox')
@@ -28,23 +25,17 @@ describe('example helloworld app', () => {
     })
     it('Check Login Page Elements-Register', () => {
       checkLoginUI()
-      cy.get('label[for="username"]')
-        .should('contain', 'Username')
-        .and('be.visible')
       cy.get('#username')
         .invoke('attr', 'placeholder')
-        .should('contain', 'Enter your username')
+        .should('contain', 'Username')
       cy.get('label.text-text-secondary')
-        .should(
+        .should('contain', `Username must begin with lowercase letter`)
+        .and(
           'contain',
-          `Username should start with lowercase and consist of lowercase, numbers, '_' and '-'`
+          `Username can consist of lowercase, numbers, "_", and "-"`
         )
         .and('be.visible')
-      cy.get('label[for="email"]').should('contain', 'Email').and('be.visible')
-      cy.get('#email')
-        .invoke('attr', 'placeholder')
-        .should('contain', 'Enter your email')
-      cy.findByRole('button', { name: 'Register' }).should('be.visible')
+      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')
@@ -56,33 +47,29 @@ describe('example helloworld app', () => {
         .and('be.visible')
         .click()
       checkLoginUI()
-      cy.get('label[for="username"]')
-        .should('contain', 'Email / Username')
-        .and('be.visible')
       cy.get('#username')
         .invoke('attr', 'placeholder')
-        .should('contain', 'Enter your email or username')
-      cy.findByRole('button', { name: 'Log in' }).should('be.visible')
+        .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', 'Register')
+        .should('contain', 'Sign up')
         .and('be.visible')
     })
     it('Check social account UI', () => {
-      cy.get('p').contains('Log in with social account').should('be.visible')
-      cy.findByRole('link', { name: 'Google' }).should('be.visible')
-      cy.findByRole('link', { name: 'GitHub' }).should('be.visible')
+      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'
+      )
     })
     it('Login-Password Already Register', () => {
-      cy.LoginWithPassword('alex', '123456')
-    })
-    it.skip('Login-Google', () => {
-      cy.clearCookies()
-      cy.findByRole('link', { name: 'Google' }).should('be.visible').click()
-    })
-    it.skip('Login-GitHub', () => {
-      cy.clearCookies()
-      cy.findByRole('link', { name: 'GitHub' }).should('be.visible').click()
+      cy.LoginWithPassword(
+        Cypress.env('defaultAccount'),
+        Cypress.env('defaultPassword')
+      )
     })
   })
   describe('Game Start Page UI', () => {
@@ -90,15 +77,9 @@ describe('example helloworld app', () => {
       cy.PrepareForGame()
     })
     it('Check Header', () => {
-      cy.get('#quest').should('be.visible')
-      cy.get('#stream').should('be.visible')
-      cy.get('#backward').should('be.visible')
-      cy.get('#warning').should('be.visible')
-      cy.get('#setting').should('be.visible')
-      cy.get('#fullscreen').should('be.visible')
-      cy.get('p').contains(" 1. Command's Basics ").should('be.visible')
-      cy.get('p').contains('●').should('be.visible')
-      cy.get('p').contains('1. Try Your First Command').should('be.visible')
+      cy.findByRole('button', { name: 'Hello, Linux World!' }).should(
+        'be.visible'
+      )
     })
     it('Check QuestInfo', () => {
       cy.get('#topic').should('contain', 'Hello, Linux World!')
@@ -112,35 +93,33 @@ describe('example helloworld app', () => {
       )
     })
     it('Check Command Cheat Sheet', () => {
-      cy.get('#cmdlist').should('be.visible')
-      cy.get('#cmdlist').get('svg[data-icon="list"]').should('be.visible')
-      cy.get('#cmdlist')
-        .get('h1')
-        .should('contain', 'Command Cheatsheets')
-        .and('be.visible')
-      cy.get('#cheatsheets')
-        .should('contain', '--Command List--')
-        .and('be.visible')
+      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')
+      })
     })
     it('Check Terminal', () => {
-      cy.get('#terminal', { timeout: 20000 }).should('be.visible')
-      cy.get('#terminal').get('svg[data-icon="terminal"]').should('be.visible')
-      cy.get('#terminal')
-        .findByRole('button')
-        .should('contain', 'Terminal')
-        .and('be.visible')
-      cy.get('@Terminaltextbox')
-        .should('be.visible')
-        .and('contain', 'Welcome to Linux Odyssey!')
-        .and('contain', 'commander:~ $')
+      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.get('@Terminaltextbox')
+          .should('be.visible')
+          .and('contain', 'commander:~ $')
+      })
     })
     it('Check Hint Part', () => {
-      cy.get('#hint', { timeout: 20000 }).should('be.visible')
-      cy.get('#hint').get('svg[data-icon="lightbulb"]').should('be.visible')
-      cy.get('#hint').get('h1').should('contain', 'Hint').and('be.visible')
+      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')
+      })
     })
     it('Check File TreeChart', () => {
-      cy.get('#visualization', { timeout: 20000 }).should('be.visible')
       cy.get('#tree').should('be.visible')
       cy.get('#tree').get('a').should('contain', '???').and('be.visible')
     })
@@ -152,7 +131,7 @@ describe('example helloworld app', () => {
       cy.findByRole('button', { name: 'Continue' }).should('be.visible')
     })
   })
-  describe('Game Play', () => {
+  describe.only('Game Play', () => {
     beforeEach(() => {
       cy.PrepareForGame()
       cy.readFile('../quests/helloworld/answer.sh', 'utf-8').as('answers')
@@ -170,9 +149,7 @@ describe('example helloworld app', () => {
         // Stage1
         cy.log('Stage1')
         cy.typeInCommand(answerarr[0])
-        cy.get('@Terminaltextbox')
-          // .should('contain', answers.start1)
-          .should('contain', continueSign)
+        cy.get('@Terminaltextbox').should('contain', continueSign)
         cy.typeInCommand(
           '{enter}{enter}{enter}{enter}{enter}{enter}{enter}{enter}{enter}'
         )

tests/cypress/support/commands.js

@@ -2,14 +2,17 @@ import '@testing-library/cypress/add-commands'
 
 Cypress.Commands.add('LoginWithPassword', (username, password) => {
   cy.clearAllCookies({ domain: null })
-  cy.get('a.text-text-primary').should('contain', 'Log in').click()
+  cy.get('a.text-text-primary', { timeout: 100000 }).contains('Log in').click()
   cy.get('#username').type(username)
   cy.get('#password').type(password)
-  cy.findByRole('button', { name: 'Log in' }).click()
+  cy.findByRole('button', { name: 'Log In' }).click()
 })
 Cypress.Commands.add('PrepareForGame', () => {
   cy.visit('/')
-  cy.LoginWithPassword('alex', '123456')
+  cy.LoginWithPassword(
+    Cypress.env('defaultAccount'),
+    Cypress.env('defaultPassword')
+  )
   cy.get('.xterm-screen').as('Terminaltextbox').should('be.visible')
   cy.findByRole('button', { name: 'Reset' }).click()
   cy.typeInCommand('clear{enter}')
@@ -26,7 +29,7 @@ Cypress.Commands.add('getTaskCheckbox', (id) => {
 })
 Cypress.Commands.add('checkHint', (index, total) => {
   cy.get('#hint')
-    .get('.flex-wrap')
+    .find('.flex-wrap')
     .contains(`${index}/${total}`)
     .should('be.visible')
 })

tests/package.json

@@ -13,6 +13,8 @@
     "cypress": "^13.3.2"
   },
   "dependencies": {
+    "dotenv": "^16.3.1",
+    "save": "^2.9.0",
     "yamljs": "^0.3.0"
   }
 }

yarn.lock

@@ -1415,6 +1415,11 @@ async@^3.2.0:
   resolved "https://registry.yarnpkg.com/async/-/async-3.2.4.tgz#2d22e00f8cddeb5fde5dd33522b56d1cf569a81c"
   integrity sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==
 
+async@^3.2.2:
+  version "3.2.5"
+  resolved "https://registry.yarnpkg.com/async/-/async-3.2.5.tgz#ebd52a8fdaf7a2289a24df399f8d8485c8a46b66"
+  integrity sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg==
+
 asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
@@ -2301,6 +2306,16 @@ dom-accessibility-api@^0.5.9:
   resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz#5a7429e6066eb3664d911e33fb0e45de8eb08453"
   integrity sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==
 
+dotenv@^16.3.1:
+  version "16.3.1"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.3.1.tgz#369034de7d7e5b120972693352a3bf112172cc3e"
+  integrity sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==
+
+duplexer@^0.1.1, duplexer@~0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"
+  integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==
+
 eastasianwidth@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
@@ -2737,6 +2752,19 @@ etag@~1.8.1:
   resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
   integrity sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==
 
+event-stream@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/event-stream/-/event-stream-4.0.1.tgz#4092808ec995d0dd75ea4580c1df6a74db2cde65"
+  integrity sha512-qACXdu/9VHPBzcyhdOWR5/IahhGMf0roTeZJfzz077GwylcDd90yOHLouhmv7GJ5XzPi6ekaQWd8AvPP2nOvpA==
+  dependencies:
+    duplexer "^0.1.1"
+    from "^0.1.7"
+    map-stream "0.0.7"
+    pause-stream "^0.0.11"
+    split "^1.0.1"
+    stream-combiner "^0.2.2"
+    through "^2.3.8"
+
 eventemitter2@6.4.7:
   version "6.4.7"
   resolved "https://registry.yarnpkg.com/eventemitter2/-/eventemitter2-6.4.7.tgz#a7f6c4d7abf28a14c1ef3442f21cb306a054271d"
@@ -3070,6 +3098,11 @@ fresh@0.5.2:
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
   integrity sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==
 
+from@^0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/from/-/from-0.1.7.tgz#83c60afc58b9c56997007ed1a768b3ab303a44fe"
+  integrity sha512-twe20eF1OxVxp/ML/kq2p1uc6KvFK/+vs8WjEbeKmV2He22MKm7YF2ANIt+EOqhJ5L3K/SuuPhk0hWQDjOM23g==
+
 fs-constants@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
@@ -4364,6 +4397,11 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
+lodash.assign@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
+  integrity sha512-hFuH8TY+Yji7Eja3mGiuAxBqLagejScbG8GbG0j6o9vzn0YL14My+ktnqtZgFTosKymC9/44wP6s7xyuLfnClw==
+
 lodash.includes@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/lodash.includes/-/lodash.includes-4.3.0.tgz#60bb98a87cb923c68ca1e51325483314849f553f"
@@ -4482,6 +4520,11 @@ makeerror@1.0.12:
   dependencies:
     tmpl "1.0.5"
 
+map-stream@0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/map-stream/-/map-stream-0.0.7.tgz#8a1f07896d82b10926bd3744a2420009f88974a8"
+  integrity sha512-C0X0KQmGm3N2ftbTGBhSyuydQ+vV1LC3f3zPvT3RXHXNZrvfPZcoXp/N5DOa8vedX/rTMm2CjTtivFg2STJMRQ==
+
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
@@ -4547,6 +4590,11 @@ mimic-fn@^4.0.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-4.0.0.tgz#60a90550d5cb0b239cca65d893b1a53b29871ecc"
   integrity sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==
 
+mingo@^6.1.0:
+  version "6.4.8"
+  resolved "https://registry.yarnpkg.com/mingo/-/mingo-6.4.8.tgz#e6de39921520bf1c139e9ce3ab72d05193cc1f60"
+  integrity sha512-mu7C7byBSpGGj6NllAKXLRr7L8gsZB6Yc4g4R22DDpLryvnH0tK+/X0BorMf3aXAr0pbmaG2O/2in9fUjV8Y8w==
+
 minimalistic-assert@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
@@ -5108,6 +5156,13 @@ path-to-regexp@0.1.7:
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
   integrity sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==
 
+pause-stream@^0.0.11:
+  version "0.0.11"
+  resolved "https://registry.yarnpkg.com/pause-stream/-/pause-stream-0.0.11.tgz#fe5a34b0cbce12b5aa6a2b403ee2e73b602f1445"
+  integrity sha512-e3FBlXLmN/D1S+zHzanP4E/4Z60oFAa3O051qt1pxa7DEJWKAyil6upYVXCWadEnuoqa4Pkc9oUx9zsxYeRv8A==
+  dependencies:
+    through "~2.3"
+
 pause@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/pause/-/pause-0.0.1.tgz#1d408b3fdb76923b9543d96fb4c9dfd535d9cb5d"
@@ -5520,6 +5575,16 @@ saslprep@^1.0.3:
   dependencies:
     sparse-bitfield "^3.0.3"
 
+save@^2.9.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/save/-/save-2.9.0.tgz#6659375fadeaf58e4abc6a90ec6b0fb2e2232e0f"
+  integrity sha512-eg8+g8CjvehE/2C6EbLdtK1pINVD27pcJLj4M9PjWWhoeha/y5bWf4dp/0RF+OzbKTcG1bae9qi3PAqiR8CJTg==
+  dependencies:
+    async "^3.2.2"
+    event-stream "^4.0.1"
+    lodash.assign "^4.2.0"
+    mingo "^6.1.0"
+
 semver@^6.0.0, semver@^6.3.0, semver@^6.3.1:
   version "6.3.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
@@ -5738,6 +5803,13 @@ split-ca@^1.0.1:
   resolved "https://registry.yarnpkg.com/split-ca/-/split-ca-1.0.1.tgz#6c83aff3692fa61256e0cd197e05e9de157691a6"
   integrity sha512-Q5thBSxp5t8WPTTJQS59LrGqOZqOsrhDGDVm8azCqIBjSBd7nd9o2PM+mDulQQkh8h//4U6hFZnc/mul8t5pWQ==
 
+split@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/split/-/split-1.0.1.tgz#605bd9be303aa59fb35f9229fbea0ddec9ea07d9"
+  integrity sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==
+  dependencies:
+    through "2"
+
 sprintf-js@~1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
@@ -5788,6 +5860,14 @@ stop-iteration-iterator@^1.0.0:
   dependencies:
     internal-slot "^1.0.4"
 
+stream-combiner@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/stream-combiner/-/stream-combiner-0.2.2.tgz#aec8cbac177b56b6f4fa479ced8c1912cee52858"
+  integrity sha512-6yHMqgLYDzQDcAkL+tjJDC5nSNuNIx0vZtRZeiPh7Saef7VHX9H5Ijn9l2VIol2zaNYlYEX6KyuT/237A58qEQ==
+  dependencies:
+    duplexer "~0.1.1"
+    through "~2.3.4"
+
 string-length@^4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.2.tgz#a8a8dc7bd5c1a82b9b3c8b87e125f66871b6e57a"
@@ -6040,7 +6120,7 @@ throttleit@^1.0.0:
   resolved "https://registry.yarnpkg.com/throttleit/-/throttleit-1.0.0.tgz#9e785836daf46743145a5984b6268d828528ac6c"
   integrity sha512-rkTVqu6IjfQ/6+uNuuc3sZek4CEYxTJom3IktzgdSxcZqdARuebbA/f4QmAxMQIxqq9ZLEUkSYqvuk1I6VKq4g==
 
-through@^2.3.8:
+through@2, through@^2.3.8, through@~2.3, through@~2.3.4:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
   integrity sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==