summaryrefslogtreecommitdiffhomepage
path: root/test/components/Login.spec.js
blob: 90bb70f4b3b84498c3c49d660e7e3cc811f97356 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
// @flow

import * as React from 'react';
import { shallow } from 'enzyme';

import Login from '../../app/components/Login';
import AccountInput from '../../app/components/AccountInput';

describe('components/Login', () => {
  it('notifies on the first change after failure', () => {
    let onFirstChange = spy();
    const props = {
      account: Object.assign({}, defaultAccount, {
        status: 'failed',
      }),
      onFirstChangeAfterFailure: onFirstChange,
    };

    const component = renderWithProps(props);
    const accountInput = component.find(AccountInput);

    accountInput.simulate('change', 'foo');
    expect(onFirstChange).to.have.been.called.once;

    accountInput.simulate('change', 'bar');
    expect(onFirstChange).to.have.been.called.once;
  });

  it('does not show the footer when logging in', () => {
    const component = renderLoggingIn();
    const visibleFooters = getComponent(component, 'footerVisibility true');
    const invisibleFooters = getComponent(component, 'footerVisibility false');
    expect(visibleFooters.length).to.equal(0);
    expect(invisibleFooters.length).to.equal(1);
  });

  it('shows the footer and account input when not logged in', () => {
    const component = renderNotLoggedIn();
    const visibleFooters = getComponent(component, 'footerVisibility true');
    const invisibleFooters = getComponent(component, 'footerVisibility false');
    expect(visibleFooters.length).to.equal(1);
    expect(invisibleFooters.length).to.equal(0);
    expect(getComponent(component, 'AccountInput').length).to.be.above(0);
  });

  it('does not show the footer nor account input when logged in', () => {
    const component = renderLoggedIn();
    const visibleFooters = getComponent(component, 'footerVisibility true');
    const invisibleFooters = getComponent(component, 'footerVisibility false');
    expect(visibleFooters.length).to.equal(0);
    expect(invisibleFooters.length).to.equal(1);
    expect(getComponent(component, 'AccountInput').length).to.equal(0);
  });

  it('logs in with the entered account number when clicking the login icon', (done) => {
    const component = renderNotLoggedIn();
    component.setProps({
      account: Object.assign({}, defaultAccount, {
        accountToken: '12345',
      }),
      onLogin: (an) => {
        try {
          expect(an).to.equal('12345');
          done();
        } catch (e) {
          done(e);
        }
      },
    });

    click(getComponent(component, 'account-input-button'));
  });
});

const defaultAccount = {
  accountToken: null,
  accountHistory: [],
  expiry: null,
  status: 'none',
  error: null,
};

const defaultProps = {
  account: defaultAccount,
  onLogin: () => {},
  onSettings: () => {},
  onChange: () => {},
  onFirstChangeAfterFailure: () => {},
  onExternalLink: () => {},
  onAccountTokenChange: (_accountToken) => {},
  onRemoveAccountTokenFromHistory: (_accountToken) => {},
};

function renderLoggedIn() {
  return renderWithProps({
    account: Object.assign(defaultAccount, {
      status: 'ok',
    }),
  });
}

function renderLoggingIn() {
  return renderWithProps({
    account: Object.assign(defaultAccount, {
      status: 'logging in',
    }),
  });
}

function renderNotLoggedIn() {
  return renderWithProps({
    account: Object.assign(defaultAccount, {
      status: 'none',
    }),
  });
}

function renderWithProps(customProps) {
  const props = Object.assign({}, defaultProps, customProps);
  return shallow(<Login {...props} />);
}

function getComponent(container, testName) {
  return container.findWhere((n) => n.prop('testName') === testName);
}

function click(component) {
  component.prop('onPress')();
}