Merge branch 'account-component-tests'

5 files changed, 180 insertions, 116 deletions

diff --git a/test/components/Account.spec.js b/test/components/Account.spec.js
new file mode 100644
index 0000000000..4372ac957e
--- /dev/null
+++ b/test/components/Account.spec.js
@@ -0,0 +1,76 @@
+// @flow
+
+import { expect } from 'chai';
+import React from 'react';
+import ReactTestUtils, { Simulate } from 'react-dom/test-utils';
+import Account from '../../app/components/Account';
+
+import type { AccountReduxState } from '../../app/redux/account/reducers';
+import type { AccountProps } from '../../app/components/Account';
+
+describe('components/Account', () => {
+  const state: AccountReduxState = {
+    accountNumber: '1234',
+    paidUntil: (new Date('2038-01-01')).toISOString(),
+    status: 'none',
+    error: null
+  };
+
+  const makeProps = (state: AccountReduxState, mergeProps: $Shape<AccountProps>): AccountProps => {
+    const defaultProps: AccountProps = {
+      account: state,
+      onClose: () => {},
+      onLogout: () => {},
+      onBuyMore: () => {}
+    };
+    return Object.assign({}, defaultProps, mergeProps);
+  };
+
+  const render = (props: AccountProps): Account => {
+    return ReactTestUtils.renderIntoDocument(
+      <Account { ...props } />
+    );
+  };
+
+  it('should call close callback', (done) => {
+    const props = makeProps(state, {
+      onClose: () => done()
+    });
+    const domNode = ReactTestUtils.findRenderedDOMComponentWithClass(render(props), 'account__close');
+    Simulate.click(domNode);
+  });
+
+  it('should call logout callback', (done) => {
+    const props = makeProps(state, {
+      onLogout: () => done()
+    });
+    const domNode = ReactTestUtils.findRenderedDOMComponentWithClass(render(props), 'account__logout');
+    Simulate.click(domNode);
+  });
+
+  it('should call "buy more" callback', (done) => {
+    const props = makeProps(state, {
+      onBuyMore: () => done()
+    });
+    const domNode = ReactTestUtils.findRenderedDOMComponentWithClass(render(props), 'account__buymore');
+    Simulate.click(domNode);
+  });
+
+  it('should display "out of time" message when account expired', () => {
+    const expiredState: AccountReduxState = {
+      accountNumber: '1234',
+      paidUntil: (new Date('2001-01-01')).toISOString(),
+      status: 'none',
+      error: null
+    };
+    const props = makeProps(expiredState, {});
+    ReactTestUtils.findRenderedDOMComponentWithClass(render(props), 'account__out-of-time');
+  });
+
+  it('should not display "out of time" message when account is active', () => {
+    const props = makeProps(state, {});
+    const domNodes = ReactTestUtils.scryRenderedDOMComponentsWithClass(render(props), 'account__out-of-time');
+    expect(domNodes.length).to.be.equal(0);
+  });
+
+});
\ No newline at end of file
diff --git a/test/components/AccountInput.spec.js b/test/components/AccountInput.spec.js
index 0a6e15b12e..ee73323950 100644
--- a/test/components/AccountInput.spec.js
+++ b/test/components/AccountInput.spec.js
@@ -1,35 +1,44 @@
+// @flow
 import { expect } from 'chai';
-import { KeyType, createKeyEvent } from '../mocks/dom';
-
+import { createKeyEvent } from '../helpers/dom-events';
 import React from 'react';
 import ReactTestUtils, { Simulate } from 'react-dom/test-utils';
 import AccountInput from '../../app/components/AccountInput';
 
+import type { AccountInputProps } from '../../app/components/AccountInput';
+
 describe('components/AccountInput', () => {
+  const getInputRef = (component: AccountInput): HTMLInputElement => {
+    return ReactTestUtils.findRenderedDOMComponentWithTag(component, 'input');
+  };
 
-  it('should call onEnter', (done) => {
-    const onEnter = () => {
-      done();
+  const render = (mergeProps: $Shape<AccountInputProps>) => {
+    const defaultProps: AccountInputProps = {
+      value: '',
+      onEnter: null,
+      onChange: null
     };
-
-    const component = ReactTestUtils.renderIntoDocument(
-      <AccountInput onEnter={ onEnter } />
+    const props = Object.assign({}, defaultProps, mergeProps);
+    return ReactTestUtils.renderIntoDocument(
+      <AccountInput { ...props } />
     );
+  };
 
-    Simulate.keyUp(component._ref, createKeyEvent(KeyType.Enter));
+  it('should call onEnter', (done) => {
+    const component = render({
+      onEnter: () => done()
+    });
+    Simulate.keyUp(getInputRef(component), createKeyEvent('Enter'));
   });
 
   it('should call onChange', (done) => {
-    const onChange = (val) => {
-      expect(val).to.be.equal('1');
-      done();
-    };
-
-    const component = ReactTestUtils.renderIntoDocument(
-      <AccountInput onChange={ onChange } />
-    );
-
-    Simulate.keyDown(component._ref, createKeyEvent(KeyType._1));
+    const component = render({
+      onChange: (val) => {
+        expect(val).to.be.equal('1');
+        done();
+      }
+    });
+    Simulate.keyDown(getInputRef(component), createKeyEvent('1'));
   });
 
   it('should format input properly', () => {
@@ -50,79 +59,69 @@ describe('components/AccountInput', () => {
       ''
     ];
 
-    for(const val of cases) {
-      const component = ReactTestUtils.renderIntoDocument(
-        <AccountInput value={ val } />
-      );
-      expect(component._ref.value).to.be.equal(val);
+    for(const value of cases) {
+      const component = render({ value });
+      expect(getInputRef(component).value).to.be.equal(value);
     }
   });
 
   it('should remove last character', (done) => {
-    const onChange = (val) => {
-      expect(val).to.be.equal('123');
-      done();
-    };
-
-    const component = ReactTestUtils.renderIntoDocument(
-      <AccountInput value="1234" onChange={ onChange } />
-    );
-
-    Simulate.keyDown(component._ref, createKeyEvent(KeyType.Backspace));
+    const component = render({
+      value: '1234',
+      onChange: (val) => {
+        expect(val).to.be.equal('123');
+        done();
+      }
+    });
+    Simulate.keyDown(getInputRef(component), createKeyEvent('Backspace'));
   });
 
   it('should remove first character', (done) => {
-    const onChange = (val) => {
-      expect(val).to.be.equal('234');
-      done();
-    };
-
-    const component = ReactTestUtils.renderIntoDocument(
-      <AccountInput value="1234" onChange={ onChange } />
-    );
-
+    const component = render({
+      value: '1234',
+      onChange: (val) => {
+        expect(val).to.be.equal('234');
+        done();
+      }
+    });
     component.setState({ selectionRange: [1, 1] }, () => {
-      Simulate.keyDown(component._ref, createKeyEvent(KeyType.Backspace));
+      Simulate.keyDown(getInputRef(component), createKeyEvent('Backspace'));
     });
   });
 
   it('should remove all characters', (done) => {
-    const onChange = (val) => {
-      expect(val).to.be.empty;
-      done();
-    };
-
-    const component = ReactTestUtils.renderIntoDocument(
-      <AccountInput value="12345678" onChange={ onChange } />
-    );
-
+    const component = render({
+      value: '12345678',
+      onChange: (val) => {
+        expect(val).to.be.empty;
+        done();
+      }
+    });
     component.setState({ selectionRange: [0, 8] }, () => {
-      Simulate.keyDown(component._ref, createKeyEvent(KeyType.Backspace));
+      Simulate.keyDown(getInputRef(component), createKeyEvent('Backspace'));
     });
   });
 
   it('should remove selection', (done) => {
-    const onChange = (val) => {
-      expect(val).to.be.equal('12349999');
-      done();
-    };
-
-    const component = ReactTestUtils.renderIntoDocument(
-      <AccountInput value="1234 5678 9999" onChange={ onChange } />
-    );
-
+    const component = render({
+      value: '1234 5678 9999',
+      onChange: (val) => {
+        expect(val).to.be.equal('12349999');
+        done();
+      }
+    });
     component.setState({ selectionRange: [4, 8] }, () => {
-      Simulate.keyDown(component._ref, createKeyEvent(KeyType.Backspace));
+      Simulate.keyDown(getInputRef(component), createKeyEvent('Backspace'));
     });
   });
 
   it('should replace selection', (done) => {
-    const component = ReactTestUtils.renderIntoDocument(
-      <AccountInput value="0000" />
-    );
+    const component = render({
+      value: '0000'
+    });
 
     component.setState({ selectionRange: [1, 3] }, () => {
-      Simulate.keyDown(component._ref, createKeyEvent(KeyType._1));
+      Simulate.keyDown(getInputRef(component), createKeyEvent('1'));
 
       component.setState({}, () => {
         expect(component.state.value).to.be.equal('010');
@@ -133,12 +132,10 @@ describe('components/AccountInput', () => {
   });
 
   it('should keep selection in the back', (done) => {
-    const component = ReactTestUtils.renderIntoDocument(
-      <AccountInput />
-    );
+    const component = render({ value: '' });
 
     for(let i = 0; i < 12; i++) {
-      Simulate.keyDown(component._ref, createKeyEvent(KeyType._1));
+      Simulate.keyDown(getInputRef(component), createKeyEvent('1'));
     }
 
     component.setState({}, () => {
@@ -149,12 +146,11 @@ describe('components/AccountInput', () => {
   });
 
   it('should advance selection on insertion', (done) => {
-    const component = ReactTestUtils.renderIntoDocument(
-      <AccountInput value="0000" />
-    );
-
+    const component = render({
+      value: '0000'
+    });
     component.setState({ selectionRange: [1, 1]}, () => {
-      Simulate.keyDown(component._ref, createKeyEvent(KeyType._1));
+      Simulate.keyDown(getInputRef(component), createKeyEvent('1'));
 
       component.setState({}, () => {
         expect(component.state.value).to.be.equal('01000');
@@ -165,12 +161,11 @@ describe('components/AccountInput', () => {
   });
 
   it('should not do anything when nothing to remove', (done) => {
-    const component = ReactTestUtils.renderIntoDocument(
-      <AccountInput value="0000" />
-    );
-
+    const component = render({
+      value: '0000'
+    });
     component.setState({ selectionRange: [0, 0] }, () => {
-      Simulate.keyDown(component._ref, createKeyEvent(KeyType.Backspace));
+      Simulate.keyDown(getInputRef(component), createKeyEvent('Backspace'));
 
       component.setState({}, () => {
         expect(component.state.value).to.be.equal('0000');
diff --git a/test/global.js b/test/global.js
index 6653a4f8cb..4cf366b166 100644
--- a/test/global.js
+++ b/test/global.js
@@ -1,6 +1,11 @@
 import log from 'electron-log';
+import jsdom from 'jsdom';
 
 before(() => {
+  global.document = jsdom.jsdom('<!doctype html><html><body></body></html>');
+  global.window = document.defaultView;
+  global.navigator = window.navigator;
+
   log.transports.console.level = false;
   log.transports.file.level = false;
 });
diff --git a/test/helpers/dom-events.js b/test/helpers/dom-events.js
new file mode 100644
index 0000000000..9a02ad167c
--- /dev/null
+++ b/test/helpers/dom-events.js
@@ -0,0 +1,22 @@
+// @flow
+const keycodes = {
+  '1': { which: 49, keyCode: 49 },
+  '2': { which: 50, keyCode: 50 },
+  '3': { which: 51, keyCode: 51 },
+  '4': { which: 52, keyCode: 52 },
+  '5': { which: 53, keyCode: 53 },
+  '6': { which: 54, keyCode: 54 },
+  '7': { which: 55, keyCode: 55 },
+  '8': { which: 56, keyCode: 56 },
+  '9': { which: 57, keyCode: 57 },
+  '0': { which: 48, keyCode: 48 },
+  Tab: { which: 9, keyCode: 9 },
+  Enter: { which: 13, keyCode: 13 },
+  Backspace: { which: 8, keyCode: 8 }
+};
+
+export type Keycode = $Keys<typeof keycodes>;
+
+export function createKeyEvent(key: Keycode): Object {
+  return Object.assign({}, { key }, keycodes[key]);
+}
diff --git a/test/mocks/dom.js b/test/mocks/dom.js
deleted file mode 100644
index 9b72f25be2..0000000000
--- a/test/mocks/dom.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import jsdom from 'jsdom';
-
-global.document = jsdom.jsdom('<!doctype html><html><body></body></html>');
-global.window = document.defaultView;
-global.navigator = window.navigator;
-
-const keyMap = {
-  _1: { key: '1', which: 49, keyCode: 49 },
-  _2: { key: '2', which: 50, keyCode: 50 },
-  _3: { key: '3', which: 51, keyCode: 51 },
-  _4: { key: '4', which: 52, keyCode: 52 },
-  _5: { key: '5', which: 53, keyCode: 53 },
-  _6: { key: '6', which: 54, keyCode: 54 },
-  _7: { key: '7', which: 55, keyCode: 55 },
-  _8: { key: '8', which: 56, keyCode: 56 },
-  _9: { key: '9', which: 57, keyCode: 57 },
-  _0: { key: '0', which: 48, keyCode: 48 },
-  Tab: { which: 9, keyCode: 9 },
-  Enter: { which: 13, keyCode: 13 },
-  Backspace: { which: 8, keyCode: 8 }
-};
-
-export const KeyType = (() => {
-  let dict = {};
-  for(const i of Object.keys(keyMap)) {
-    dict[i] = i;
-  }
-
-  return dict;
-})();
-
-export function createKeyEvent(key) {
-  return Object.assign({ key }, keyMap[key]);
-}
\ No newline at end of file