Merge branch 'account-component-tests'

2 files changed, 153 insertions, 82 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');