Playing around with end-to-end testing

.eslintrc.yml

@@ -38,3 +38,11 @@ rules:
   node/no-deprecated-api: warn
   no-sequences: off
   import/named: warn
+overrides:
+  - files:
+      - '**/*.ts'
+      - '**/*.tsx'
+    rules:
+      no-undef: off
+      no-unused-vars: off
+      no-use-before-define: off

e2e/jsconfig.json

@@ -0,0 +1,3 @@
+{
+  "include": ["tests"]
+}

e2e/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "bemuse-e2e",
+  "version": "0.0.1",
+  "dependencies": {
+    "prescript": "0.5040.1-beta.10",
+    "puppeteer": "^1.9.0"
+  }
+}

e2e/tests/Gameplay-test.js

@@ -0,0 +1,94 @@
+const { action, defer, to } = require('prescript')
+const puppeteer = require('puppeteer')
+const assert = require('assert')
+
+action('Open browser', async state => {
+  state.browser = await puppeteer.launch({ headless: false })
+  state.page = await state.browser.newPage()
+  await state.page.setViewport({ width: 1200, height: 480 })
+  await state.page.goto(
+    'http://localhost:8080/?server=https://raw.githubusercontent.com/bemusic/bemuse-test-server/master'
+  )
+})
+
+defer('Close browser', async state => {
+  await state.browser.close()
+})
+
+action('Turn on test mode', async state => {
+  await state.page.waitForFunction(
+    () => {
+      if (window.BemuseTestMode) {
+        window.BemuseTestMode.enableTestMode()
+        return true
+      } else {
+        return false
+      }
+    },
+    { timeout: 10000 }
+  )
+})
+
+action('Enter game', async state => {
+  await state.page.waitForSelector('[data-testid="enter-game"]')
+  await state.page.click('[data-testid="enter-game"]')
+  await state.page.waitForSelector('[data-testid="keyboard-mode"]')
+})
+
+action('Select keyboard mode', async state => {
+  await state.page.waitForSelector('[data-testid="keyboard-mode"]')
+  await state.page.click('[data-testid="keyboard-mode"]')
+  await state.page.waitForSelector('[data-testid="play-selected-chart"]')
+})
+
+action('Select the song and start the game', async state => {
+  await state.page.waitForSelector('[data-testid="play-selected-chart"]')
+  await state.page.click('[data-testid="play-selected-chart"]')
+  await state.page.waitForSelector('.game-display canvas', { visible: true })
+})
+
+to('Play through the game', () => {
+  action('Press Enter to start the song', async state => {
+    await state.page.waitFor(100)
+    await state.page.keyboard.down('Enter')
+    await state.page.waitFor(100)
+    await state.page.keyboard.up('Enter')
+  })
+  const keys = [
+    { key: 'j', beat: 4, expectedScore: 69444 },
+    { key: 'f', beat: 5, expectedScore: 138888 },
+    { key: 'f', beat: 6, expectedScore: 208333 },
+    { key: 'k', beat: 7, expectedScore: 277777 },
+    { key: 'j', beat: 8, expectedScore: 347221 },
+    { key: 'f', beat: 8.5, expectedScore: 416666 },
+    { key: 'f', beat: 9, expectedScore: 486110 },
+    { key: 'k', beat: 9.75, expectedScore: 524305 },
+  ]
+  for (const [i, event] of keys.entries()) {
+    const t = (event.beat * 60) / 140
+    action`Hit key ${event.key} at t=${t.toFixed(2)} (note #${i +
+      1}) (score should be ${event.expectedScore})`(async (state, context) => {
+      await state.page.evaluate(t => {
+        window.TEST_pausePromise = window.BemuseTestMode.pauseAt(t)
+      }, t)
+      await state.page.evaluate(() => window.TEST_pausePromise)
+      await state.page.keyboard.down(event.key)
+      await state.page.waitFor(100)
+      await state.page.keyboard.up(event.key)
+      const score = await state.page.evaluate(() =>
+        window.BemuseTestMode.getScore()
+      )
+      assert.equal(score, event.expectedScore)
+    })
+  }
+
+  action(
+    'Let the game finish and wait for result screen to show',
+    async state => {
+      await state.page.evaluate(() => {
+        window.BemuseTestMode.unpause()
+      })
+      await state.page.waitForSelector('.ResultScene')
+    }
+  )
+})

e2e/tests/state.d.ts

@@ -0,0 +1,12 @@
+import { Browser, Page } from 'puppeteer'
+
+declare global {
+  namespace Prescript {
+    interface GlobalState {
+      browser: Browser
+      page: Page
+    }
+  }
+}
+
+export {}

package.json

@@ -6,6 +6,7 @@
   "private": true,
   "workspaces": [
     "website",
+    "e2e",
     "packages/*"
   ],
   "browserslist": [
@@ -22,7 +23,6 @@
     "lint": "eslint --ext .js,.jsx,.ts,.tsx .",
     "lint:fix": "eslint --fix --ext .js,.jsx,.ts,.tsx .",
     "postbootstrap": "lerna run prepare",
-    "pre-commit": "gulp pre-commit",
     "prepare": "lerna run prepare",
     "prod-build": "cross-env NODE_ENV=production gulp build",
     "prod-start": "cross-env NODE_ENV=production HOT=true gulp server",
@@ -89,6 +89,7 @@
     "gulp-gh-pages": "git://github.com/dtinth/gulp-gh-pages",
     "gulp-mocha": "^6.0.0",
     "gulp-util": "^3.0.8",
+    "husky": "^1.2.0",
     "import-sort-style-renke": "^2.4.0",
     "istanbul-instrumenter-loader": "^3.0.1",
     "jade": "^1.9.2",
@@ -103,6 +104,7 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^3.0.5",
     "lerna": "^2.11.0",
+    "lint-staged": "^8.1.0",
     "markdown-toc": "^1.2.0",
     "merge-stream": "^1.0.1",
     "minimatch": "^3.0.4",
@@ -192,5 +194,16 @@
     "updeep": "^0.16.0",
     "variance": "0.0.1",
     "whatwg-fetch": "^1.1.1"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{js,json,css,md}": [
+      "prettier --write",
+      "git add"
+    ]
   }
 }

packages/bemuse-notechart/test/.eslintrc.yml

@@ -0,0 +1,2 @@
+env:
+  mocha: true

src/app/index.js

@@ -14,6 +14,7 @@ import { withContext } from 'recompose'
 import * as Analytics from './analytics'
 import * as OptionsIO from './io/OptionsIO'
 import * as ReduxState from './redux/ReduxState'
+import * as BemuseTestMode from '../devtools/BemuseTestMode'
 import AboutScene from './ui/AboutScene'
 import BrowserSupportWarningScene from './ui/BrowserSupportWarningScene'
 import ModeSelectScene from './ui/ModeSelectScene'
@@ -132,3 +133,7 @@ function trackFullscreenEvents() {
 window.addEventListener('beforeunload', () => {
   Analytics.send('app', 'quit')
 })
+
+Object.assign(window, {
+  BemuseTestMode,
+})

src/app/ui/ModeSelectScene.jsx

@@ -39,7 +39,11 @@ class ModeSelectScene extends React.Component {
             onTouchStart={() => this.setPlayDevice('touch')}
             onMouseDown={() => this.setPlayDevice('keyboard')}
           >
-            <div className='ModeSelectSceneのitem' onClick={this.handleKB}>
+            <div
+              className='ModeSelectSceneのitem'
+              onClick={this.handleKB}
+              data-testid='keyboard-mode'
+            >
               {this.renderKBGraphics()}
               <h2>Keyboard Mode</h2>
               <p>
@@ -48,7 +52,11 @@ class ModeSelectScene extends React.Component {
               </p>
               <p>This mode is similar to O2Jam.</p>
             </div>
-            <div className='ModeSelectSceneのitem' onClick={this.handleBM}>
+            <div
+              className='ModeSelectSceneのitem'
+              onClick={this.handleBM}
+              data-testid='bms-mode'
+            >
               {this.renderBMGraphics()}
               <h2>BMS Mode</h2>
               <p>

src/app/ui/MusicChartSelectorItem.jsx

@@ -23,7 +23,11 @@ class MusicChartSelectorItem extends React.Component {
       'is-5keys': this.props.chart.keys === '5K',
     })
     return (
-      <li className={classes} onClick={this.handleClick}>
+      <li
+        className={classes}
+        onClick={this.handleClick}
+        data-testid={this.props.isSelected ? 'play-selected-chart' : undefined}
+      >
         {this.props.isTutorial ? (
           this.props.chart.keys === '5K' ? (
             'Start Tutorial (5 keys)'

src/app/ui/TitleScene.jsx

@@ -101,7 +101,11 @@ class TitleScene extends React.Component {
               <img src={require('./images/logo-with-shadow.svg')} />
             </div>
             <div className='TitleSceneのenter'>
-              <a href='javascript://' onClick={this.enterGame}>
+              <a
+                href='javascript://'
+                onClick={this.enterGame}
+                data-testid='enter-game'
+              >
                 Enter Game
               </a>
             </div>

src/devtools/BemuseTestMode.js

@@ -0,0 +1,97 @@
+let _enabled = false
+
+let _lifecycleHandler = {
+  /** @returns {Promise<void>} */
+  pauseAt(t) {
+    throw new Error('Cannot pause: No lifecycle handler registered!')
+  },
+  /** @returns {void} */
+  unpause() {
+    throw new Error('Cannot unpause: No lifecycle handler registered!')
+  },
+  /** @returns {number} */
+  getScore() {
+    throw new Error('Cannot get score: No lifecycle handler registered!')
+  },
+}
+
+/**
+ * Activates the test mode. In this mode,
+ *
+ * - An overlay will be displayed indicating the test mode.
+ * - The following APIs will be available to facilitate automated testing:
+ *     - `BemuseTestMode.pauseAt(t)` will make the game pause at time `t`.
+ *     - `BemuseTestMode.unpause()` will unpause the game.
+ * - Score submission is disabled.
+ *
+ * Note: Once test mode is activated, it cannot be deactivated for the rest of the game session.
+ */
+export function enableTestMode() {
+  if (!_enabled) {
+    _enabled = true
+    console.log('[Bemuse test mode enabled]')
+    const overlay = document.createElement('div')
+    overlay.setAttribute(
+      'style',
+      `
+        position: fixed;
+        top: 20px;
+        left: 20px;
+        font: 20px Comic Sans MS, sans-serif;
+        z-index: 99999;
+        background: rgba(0,0,0,0.5);
+        color: #0f0;
+        border: 2px solid #0f0;
+        padding: 4px;
+        pointer-events: none;
+      `
+    )
+    overlay.innerHTML = `
+      <strong>Test mode:</strong>
+      Bemuse is being controlled by automated test software.
+    `
+    document.body.appendChild(overlay)
+  }
+}
+
+/**
+ * Registers a pause handler.
+ * This allows the `pauseAt` and `unpause` APIs to be used.
+ *
+ * @param {typeof _lifecycleHandler} handler
+ */
+export function setGameLifecycleHandler(handler) {
+  console.log('[Bemuse test mode] A pause handler has been registered.')
+  _lifecycleHandler = handler
+}
+
+/**
+ * Returns `true` if test mode is enabled, `false` otherwise.
+ */
+export function isTestModeEnabled() {
+  return !!_enabled
+}
+
+/**
+ * Will schedule the game to pause at time `t`.
+ *
+ * @param {number} t The song time to pause in seconds
+ * @returns {Promise<void>} A promise that will be resolved when the time is reached and game is paused.
+ */
+export function pauseAt(t) {
+  return _lifecycleHandler.pauseAt(t)
+}
+
+/**
+ * Unpauses the game.
+ */
+export function unpause() {
+  return _lifecycleHandler.unpause()
+}
+
+/**
+ * Returns the current score.
+ */
+export function getScore() {
+  return _lifecycleHandler.getScore()
+}