Add test mode (#898)

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

.github/workflows/build.yml

@@ -40,4 +40,4 @@ jobs:
       - name: Test Project
         run: yarn test
       - name: Build project
-        run: yarn build
+        run: yarn build:production

.github/workflows/e2e.yml

@@ -42,7 +42,7 @@ jobs:
           node-version: 14
 
       - run: yarn install --frozen-lockfile --prefer-offline
-      - run: yarn build
+      - run: yarn build:test
       - uses: actions/upload-artifact@master
         with:
           name: build
@@ -64,7 +64,7 @@ jobs:
       - uses: cypress-io/github-action@v2
         with:
           browser: ${{ matrix.browser }}
-          start: 'yarn build:serve'
+          start: 'yarn serve:build'
       - uses: actions/upload-artifact@master
         if: always()
         with:

README.md

@@ -42,7 +42,8 @@ Unit testing is done via jest.
 
 We use [cypress](https://cypress.io) for e2e tests.
 
-1. Start the frontend with `yarn start`
+1. Start the frontend with `yarn start:test` in dev test mode or build a test build with `yarn build:test` which you can serve with `yarn serve:build`
+   Don't use the regular start/build command, or the tests will fail!
 2. Run `yarn cy:open` to open the cypress test loader
 3. Choose your browser and test
 4. Let the tests run

package.json

@@ -107,11 +107,13 @@
         "vega-lite": "4.17.0"
     },
     "scripts": {
-        "start": "PORT=3001 craco start",
+        "start": "cross-env PORT=3001 craco start",
-        "start:for-real-backend": "REACT_APP_BACKEND=http://localhost:3000 yarn start",
+        "start:test": "cross-env PORT=3001 REACT_APP_TEST_MODE=true craco start",
-        "build:serve": "http-server build/ -s -p 3001 -P \"http://127.0.0.1:3001?\"",
+        "start:for-real-backend": "cross-env REACT_APP_BACKEND=http://localhost:3000 yarn start",
-        "build": "craco build",
+        "serve:build": "http-server build/ -s -p 3001 -P \"http://127.0.0.1:3001?\"",
-        "analyze": "cross-env ANALYZE=true craco build",
+        "build:test": "cross-env REACT_APP_TEST_MODE=true craco build",
+        "build:production": "craco build",
+        "analyze": "cross-env ANALYZE=true craco build:production",
         "test": "craco test",
         "lint": "eslint --max-warnings=0 --ext .ts,.tsx src",
         "eject": "react-scripts eject",

src/index.tsx

@@ -23,6 +23,7 @@ import { store } from './redux'
 import * as serviceWorkerRegistration from './service-worker-registration'
 import './style/dark.scss'
 import './style/index.scss'
+import { isTestMode } from './utils/is-test-mode'
 
 const Editor = React.lazy(() => import(/* webpackPrefetch: true */ './components/editor/editor'))
 
@@ -80,6 +81,10 @@ ReactDOM.render(
   , document.getElementById('root')
 )
 
+if (isTestMode()) {
+  console.log("This build runs in test mode")
+}
+
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA

src/utils/is-test-mode.ts

@@ -0,0 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2020 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+export const isTestMode = (): boolean => {
+  return !!process.env.REACT_APP_TEST_MODE
+}