summaryrefslogtreecommitdiffhomepage
path: root/test
diff options
context:
space:
mode:
Diffstat (limited to 'test')
-rw-r--r--test/components/AccountInput.spec.js60
-rw-r--r--test/components/Login.spec.js34
-rw-r--r--test/helpers/dom-events.js2
3 files changed, 58 insertions, 38 deletions
diff --git a/test/components/AccountInput.spec.js b/test/components/AccountInput.spec.js
index 701a1c243e..a10326bc17 100644
--- a/test/components/AccountInput.spec.js
+++ b/test/components/AccountInput.spec.js
@@ -2,17 +2,15 @@
import { expect } from 'chai';
import { createKeyEvent } from '../helpers/dom-events';
import * as React from 'react';
-import ReactTestUtils, { Simulate } from 'react-dom/test-utils';
+import { shallow } from 'enzyme';
+require('../setup/enzyme');
import AccountInput from '../../app/components/AccountInput';
import type { AccountInputProps } from '../../app/components/AccountInput';
describe('components/AccountInput', () => {
const getInputRef = (component) => {
- const node = ReactTestUtils.findRenderedDOMComponentWithTag(component, 'input');
- if(!(node instanceof HTMLInputElement)) {
- throw new Error('Node is expected to be an instance of HTMLInputElement');
- }
+ const node = getComponent(component, 'AccountInput');
return node;
};
@@ -23,8 +21,8 @@ describe('components/AccountInput', () => {
onChange: null
};
const props = Object.assign({}, defaultProps, mergeProps);
- return ReactTestUtils.renderIntoDocument(
- <AccountInput { ...props } />
+ return shallow(
+ <AccountInput {...props} />
);
};
@@ -32,7 +30,7 @@ describe('components/AccountInput', () => {
const component = render({
onEnter: () => done()
});
- Simulate.keyUp(getInputRef(component), createKeyEvent('Enter'));
+ keyPress(getInputRef(component), createKeyEvent('Enter'));
});
it('should call onChange', (done) => {
@@ -42,7 +40,7 @@ describe('components/AccountInput', () => {
done();
}
});
- Simulate.keyDown(getInputRef(component), createKeyEvent('1'));
+ keyPress(getInputRef(component), createKeyEvent('1'));
});
it('should format input properly', () => {
@@ -65,7 +63,7 @@ describe('components/AccountInput', () => {
for(const value of cases) {
const component = render({ value });
- expect(getInputRef(component).value).to.be.equal(value);
+ expect(getInputRef(component).prop('value')).to.be.equal(value);
}
});
@@ -77,7 +75,7 @@ describe('components/AccountInput', () => {
done();
}
});
- Simulate.keyDown(getInputRef(component), createKeyEvent('Backspace'));
+ keyPress(getInputRef(component), createKeyEvent('Backspace'));
});
it('should remove first character', (done) => {
@@ -89,7 +87,7 @@ describe('components/AccountInput', () => {
}
});
component.setState({ selectionRange: [1, 1] }, () => {
- Simulate.keyDown(getInputRef(component), createKeyEvent('Backspace'));
+ keyPress(getInputRef(component), createKeyEvent('Backspace'));
});
});
@@ -102,7 +100,7 @@ describe('components/AccountInput', () => {
}
});
component.setState({ selectionRange: [0, 8] }, () => {
- Simulate.keyDown(getInputRef(component), createKeyEvent('Backspace'));
+ keyPress(getInputRef(component), createKeyEvent('Backspace'));
});
});
@@ -115,7 +113,7 @@ describe('components/AccountInput', () => {
}
});
component.setState({ selectionRange: [4, 8] }, () => {
- Simulate.keyDown(getInputRef(component), createKeyEvent('Backspace'));
+ keyPress(getInputRef(component), createKeyEvent('Backspace'));
});
});
@@ -125,11 +123,11 @@ describe('components/AccountInput', () => {
});
component.setState({ selectionRange: [1, 3] }, () => {
- Simulate.keyDown(getInputRef(component), createKeyEvent('1'));
+ keyPress(getInputRef(component), createKeyEvent('1'));
component.setState({}, () => {
- expect(component.state.value).to.be.equal('010');
- expect(component.state.selectionRange).to.deep.equal([2, 2]);
+ expect(component.state().value).to.be.equal('010');
+ expect(component.state().selectionRange).to.deep.equal([2, 2]);
done();
});
});
@@ -139,12 +137,12 @@ describe('components/AccountInput', () => {
const component = render({ value: '' });
for(let i = 0; i < 12; i++) {
- Simulate.keyDown(getInputRef(component), createKeyEvent('1'));
+ keyPress(getInputRef(component), createKeyEvent('1'));
}
component.setState({}, () => {
- expect(component.state.value).to.be.equal('111111111111');
- expect(component.state.selectionRange).to.deep.equal([12, 12]);
+ expect(component.state().value).to.be.equal('111111111111');
+ expect(component.state().selectionRange).to.deep.equal([12, 12]);
done();
});
});
@@ -154,11 +152,11 @@ describe('components/AccountInput', () => {
value: '0000'
});
component.setState({ selectionRange: [1, 1]}, () => {
- Simulate.keyDown(getInputRef(component), createKeyEvent('1'));
+ keyPress(getInputRef(component), createKeyEvent('1'));
component.setState({}, () => {
- expect(component.state.value).to.be.equal('01000');
- expect(component.state.selectionRange).to.deep.equal([2, 2]);
+ expect(component.state().value).to.be.equal('01000');
+ expect(component.state().selectionRange).to.deep.equal([2, 2]);
done();
});
});
@@ -169,14 +167,22 @@ describe('components/AccountInput', () => {
value: '0000'
});
component.setState({ selectionRange: [0, 0] }, () => {
- Simulate.keyDown(getInputRef(component), createKeyEvent('Backspace'));
+ keyPress(getInputRef(component), createKeyEvent('Backspace'));
component.setState({}, () => {
- expect(component.state.value).to.be.equal('0000');
- expect(component.state.selectionRange).to.deep.equal([0, 0]);
+ expect(component.state().value).to.be.equal('0000');
+ expect(component.state().selectionRange).to.deep.equal([0, 0]);
done();
});
});
});
-}); \ No newline at end of file
+});
+
+function getComponent(container, testName) {
+ return container.findWhere( n => n.prop('testName') === testName);
+}
+
+function keyPress(component, key) {
+ component.prop('onKeyPress')(key);
+} \ No newline at end of file
diff --git a/test/components/Login.spec.js b/test/components/Login.spec.js
index f34d9ea405..f8f4af54de 100644
--- a/test/components/Login.spec.js
+++ b/test/components/Login.spec.js
@@ -1,7 +1,7 @@
// @flow
import { expect } from 'chai';
-import React from 'react';
+import * as React from 'react';
import { shallow } from 'enzyme';
import sinon from 'sinon';
@@ -33,22 +33,28 @@ describe('components/Login', () => {
it('does not show the footer when logging in', () => {
const component = renderLoggingIn();
- const footer = component.find('.login-footer');
- expect(footer.hasClass('login-footer--invisible')).to.be.true;
+ 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 footer = component.find('.login-footer');
- expect(footer.hasClass('login-footer--invisible')).to.be.false;
- expect(component.find(AccountInput).exists()).to.be.true;
+ 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 footer = component.find('.login-footer');
- expect(footer.hasClass('login-footer--invisible')).to.be.true;
- expect(component.find('.login-form__fields')).to.have.length(0);
+ 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) => {
@@ -67,7 +73,7 @@ describe('components/Login', () => {
},
});
- component.find('.login-form__account-input-button').simulate('click');
+ click(getComponent(component, 'account-input-button'));
});
});
@@ -118,3 +124,11 @@ 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')();
+}
diff --git a/test/helpers/dom-events.js b/test/helpers/dom-events.js
index 9a02ad167c..6d5b069e08 100644
--- a/test/helpers/dom-events.js
+++ b/test/helpers/dom-events.js
@@ -18,5 +18,5 @@ const keycodes = {
export type Keycode = $Keys<typeof keycodes>;
export function createKeyEvent(key: Keycode): Object {
- return Object.assign({}, { key }, keycodes[key]);
+ return Object.assign({}, { key }, keycodes[key], {preventDefault: () => {}}); //preventDefault is needed to mock key events for onKeyPress in AccountInput
}
Copyright © 2025 - 2026 Wayne Cole. WTFPL. Attribution appreciated. No warranty. Not liable for bodily damages.