Explore: Add e2e-testing with Spectron

Makefile

@@ -64,7 +64,7 @@ dev-server:
 
 .PHONY: test
 test:
-	@npx jest
+	@npx jest --config=./jest.config.js
 
 
 # Build web app

README.md

@@ -21,6 +21,15 @@ _Note: Simplenote API features such as sharing and publishing will not work with
 - **`make package-win32`**
 - **`make package-linux`**
 
+## Testing
+
+Unit tests are run with `npm test`.
+
+End-to-end tests are run with `npm run test-e2e`.
+Note that the `Spectron` version corresponds with the version of `Electron` we are using and so at the time of writing this is pinned at version 6.
+Use the corresponding API docs for `webdriver-io` which correspond to the `Specron` version.
+At the time of writing you will want to refer to the [webdriver-io v4.13 API docs](http://v4.webdriver.io/v4.13/api.html).
+
 ## Coding Guidelines
 
 Please adhere to the same guidelines as found in [wp-calypso](https://github.com/Automattic/wp-calypso/blob/master/docs/coding-guidelines.md).
@@ -32,6 +41,7 @@ Please adhere to the same guidelines as found in [wp-calypso](https://github.com
 - [Electron](https://electronjs.org/) for wrapping the JavaScript application.
 
 ## Simplenote for Other Platforms
+
 [simplenote-electron](https://github.com/Automattic/simplenote-electron) is the official Simplenote desktop app for Windows and Linux.
 
 For other platforms, see:

RELEASE-NOTES.txt

@@ -21,6 +21,7 @@
 - Migrate TransitionDelayEnter to React hooks [#1784](https://github.com/Automattic/simplenote-electron/pull/1784)
 - Added git hooks to run format, lints, and tests [#1790](https://github.com/Automattic/simplenote-electron/pull/1790)
 - Added React Hooks Eslinnt Plugin [#1789](https://github.com/Automattic/simplenote-electron/pull/1789)
+- Added end-to-end testing with Spectron [#1773](https://github.com/Automattic/simplenote-electron/pull/1773)
 
 ## [v1.13.0]
 

desktop/app.js

@@ -73,7 +73,10 @@ module.exports = function main() {
       mainWindow.loadUrl(url);
     }
 
-    if (isDev || process.argv.includes('--devtools')) {
+    if (
+      'test' !== process.env.NODE_ENV &&
+      (isDev || process.argv.includes('--devtools'))
+    ) {
       mainWindow.openDevTools({ mode: 'detach' });
     }
 

e2e/test.ts

@@ -0,0 +1,46 @@
+import 'regenerator-runtime/runtime';
+import path from 'path';
+import rimraf from 'rimraf';
+import { Application } from 'spectron';
+
+const wait = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
+
+const app: Application = new Application({
+  path: path.join(__dirname, '../node_modules/.bin/electron'),
+  args: [path.join(__dirname, '..')],
+});
+
+beforeAll(async () => {
+  await app.start();
+  const userData = await app.electron.remote.app.getPath('userData');
+  await app.stop();
+  await new Promise(resolve => rimraf(userData, () => resolve()));
+  await app.start();
+}, 10000);
+
+afterAll(async () => app && app.isRunning() && (await app.stop()));
+
+describe('E2E', () => {
+  test('starts', async () => {
+    await app.client.waitUntilWindowLoaded();
+    expect(app.isRunning()).toEqual(true);
+  });
+
+  test('logs in', async () => {
+    await app.client.waitUntilWindowLoaded();
+
+    app.client
+      .$('#login__field-username')
+      .setValue(process.env.TEST_USERNAME as string);
+    app.client
+      .$('#login__field-password')
+      .setValue(process.env.TEST_PASSWORD as string);
+
+    await wait(500);
+
+    app.client.$('#login__login-button').click();
+
+    await app.client.waitUntilWindowLoaded();
+    await app.client.waitForExist('.note-list', 10000);
+  }, 20000);
+});

jest.config.e2e.js

@@ -0,0 +1,9 @@
+module.exports = {
+  globals: {
+    config: {
+      appVersion: 'foo',
+    },
+  },
+  roots: ['e2e'],
+  testRegex: '(/.*\\.[jt]sx?)|(test\\.[jt]sx?)$',
+};

lib/auth/index.jsx

@@ -113,6 +113,7 @@ export class Auth extends Component {
           />
 
           <button
+            id="login__login-button"
             className={submitClasses}
             onClick={isCreatingAccount ? this.onSignUp : this.onLogin}
             type="submit"