Implement crunchyroll login test using spectron

Author: yamalight

src/api/crunchyroll/index.js

@@ -346,7 +346,7 @@ class Crunchyroll {
     const loggedIn = this.authCookies !== null;
 
     return (
-      <div key="crunchyroll" className="card">
+      <div id="crunchyroll" key="crunchyroll" className="card">
         <header className="card-header">
           <p className="card-header-title">
             Crunchyroll
@@ -357,10 +357,10 @@ class Crunchyroll {
         </div>
         <footer className="card-footer">
           {loggedIn
-            ? <a className="card-footer-item" href="#crlogout" onClick={() => this.logout()}>
+            ? <a id="crLogout" className="card-footer-item" href="#crlogout" onClick={() => this.logout()}>
                 Logout
               </a>
-            : <a className="card-footer-item" href="#crlogin" onClick={() => this.auth()}>
+            : <a id="crLogin" className="card-footer-item" href="#crlogin" onClick={() => this.auth()}>
                 Login
               </a>}
         </footer>

src/components/navbar/index.js

@@ -25,7 +25,7 @@ export default () => (
     </div>
     <div className="nav-right nav-menu">
       <div className="nav-item">
-        <Link to="/settings" className="button">
+        <Link id="settings" to="/settings" className="button">
           <span className="icon">
             <i className="fa fa-cog" />
           </span>

test/index.js

@@ -7,20 +7,67 @@ const {Application} = require('spectron');
 const baseDir = path.join(__dirname, '..');
 const electronBinary = path.join(baseDir, 'node_modules', '.bin', 'electron');
 
+// utility functions
+const sleep = time => new Promise(r => setTimeout(r, time));
+
 describe('Application launch', function() {
-  this.timeout(10000);
+  this.timeout(30000);
 
   const app = new Application({
     path: electronBinary,
     args: [baseDir],
   });
 
-  beforeEach(() => app.start());
+  before(() => app.start());
 
-  afterEach(() => app.stop());
+  after(() => app.stop());
 
   it('Shows an initial window', async () => {
+    await app.client.waitUntilWindowLoaded();
     const count = await app.client.getWindowCount();
     assert.equal(count, 1);
   });
+
+  it('Navigates to settings', async () => {
+    app.client.click('#settings');
+    await app.client.waitUntilWindowLoaded();
+    const crSettings = await app.client.getHTML('#crunchyroll');
+    assert.ok(crSettings);
+  });
+
+  it('Login using crunchyroll', async () => {
+    await app.client.click('#crLogin');
+    // check that login window has been created
+    const count = await app.client.getWindowCount();
+    assert.equal(count, 2);
+    // set login window as active
+    await app.client.windowByIndex(1);
+    await app.client.waitUntilWindowLoaded();
+    // check login form and sleep if we hit bot protection
+    try {
+      await app.client.getHTML('#login_form');
+    } catch (e) {
+      await sleep(6000);
+    }
+    // get login form again
+    const loginFormTwo = await app.client.getHTML('#login_form');
+    assert.ok(loginFormTwo);
+    // fill out login form
+    await app.client.setValue('#login_form_name', process.env.CR_LOGIN);
+    await app.client.setValue('#login_form_password', process.env.CR_PASS);
+    await app.client.click('button=Log In');
+    await app.client.waitUntilWindowLoaded();
+    await sleep(2000);
+    // check that login window has been closed
+    const finalCount = await app.client.getWindowCount();
+    assert.equal(finalCount, 1);
+    // switch back to main window
+    await app.client.windowByIndex(0);
+    // go back to settings page
+    app.client.click('#settings');
+    await app.client.waitUntilWindowLoaded();
+    // check that button is now logout
+    const crLogout = await app.client.getHTML('#crLogout');
+    assert.ok(crLogout);
+  });
 });