Explore: Add e2e-testing with Spectron (#1773)

In this patch we're creating the most basic form of end-to-end testing
using the Spectron framework. This boots the app and verifies that it
opens.

The files aren't in the right spot and the structure of the tests need
to change but this gives us an idea of how to run these tests.

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"