Fleshing out Form tests

This commit is contained in:
Jeff Avallone 2018-02-15 17:35:45 -05:00
parent 7a8a9836aa
commit 8b2ce32b75
2 changed files with 187 additions and 5 deletions

View File

@ -44,3 +44,129 @@ exports[`Form rendering 1`] = `
</form>
</div>
`;
exports[`Form rendering with download URLs 1`] = `
<div
className="form"
>
<form
onSubmit={[Function]}
>
<textarea
autoFocus={true}
onKeyPress={[Function]}
placeholder="translate(Enter regular expression to display)"
/>
<button
type="submit"
>
<Trans>
Display
</Trans>
</button>
<div
className="select"
>
<select>
<option
key="js"
value="js"
>
Javascript
</option>
<option
key="pcre"
value="pcre"
>
PCRE
</option>
</select>
<SvgMock />
</div>
<ul
className="actions"
>
<li
key="0"
>
<a
download="image.svg"
href="#svg"
type="image/svg+xml"
>
<SvgMock />
Download SVG
</a>
</li>
<li
key="1"
>
<a
download="image.png"
href="#png"
type="image/png"
>
<SvgMock />
Download PNG
</a>
</li>
</ul>
</form>
</div>
`;
exports[`Form rendering with permalink URL 1`] = `
<div
className="form"
>
<form
onSubmit={[Function]}
>
<textarea
autoFocus={true}
onKeyPress={[Function]}
placeholder="translate(Enter regular expression to display)"
/>
<button
type="submit"
>
<Trans>
Display
</Trans>
</button>
<div
className="select"
>
<select>
<option
key="js"
value="js"
>
Javascript
</option>
<option
key="pcre"
value="pcre"
>
PCRE
</option>
</select>
<SvgMock />
</div>
<ul
className="actions"
>
<li>
<a
href="#permalink"
>
<SvgMock />
<Trans>
Permalink
</Trans>
</a>
</li>
</ul>
</form>
</div>
`;

View File

@ -1,5 +1,5 @@
import React from 'react';
import { shallow } from 'enzyme';
import { shallow, mount } from 'enzyme';
import { Form } from 'components/Form';
import { translate, I18nWrapper } from '__mocks__/i18n';
@ -17,11 +17,67 @@ describe('Form', () => {
expect(component).toMatchSnapshot();
});
test('rendering with download URLs');
test('rendering with download URLs', () => {
const downloadUrls = [
{ url: '#svg', filename: 'image.svg', type: 'image/svg+xml', label: 'Download SVG' },
{ url: '#png', filename: 'image.png', type: 'image/png', label: 'Download PNG' }
];
const component = shallow(
<Form t={ translate } syntaxes={ syntaxes } downloadUrls={ downloadUrls }/>
);
expect(component).toMatchSnapshot();
});
test('rendering with permalink URL');
test('rendering with permalink URL', () => {
const permalinkUrl = '#permalink';
const component = shallow(
<Form t={ translate } syntaxes={ syntaxes } permalinkUrl={ permalinkUrl }/>
);
expect(component).toMatchSnapshot();
});
test('submitting form');
describe('submitting expression', () => {
const build = (props = {}) => {
const component = mount(
<I18nWrapper>
<Form syntaxes={ syntaxes } { ...props }/>
</I18nWrapper>
);
return component;
};
test('submitting form with Shift+Enter');
test('submitting form', () => {
const onSubmit = jest.fn();
const component = build({ onSubmit });
const eventObj = { preventDefault: jest.fn() };
component.find(Form).instance().textarea.value = 'Test textarea value';
component.find('form').simulate('submit', eventObj);
expect(eventObj.preventDefault).toHaveBeenCalled();
expect(onSubmit).toHaveBeenCalledWith({
expr: 'Test textarea value',
syntax: 'js'
});
});
test('submitting form with Shift+Enter', () => {
const component = build({ onSubmit: Function.prototype });
const form = component.find(Form).instance();
const eventObj = { charCode: 13, shiftKey: true };
jest.spyOn(form, 'handleSubmit');
component.find('textarea').simulate('keypress', eventObj);
expect(form.handleSubmit).toHaveBeenCalled();
});
test('not submitting with just Enter', () => {
const component = build({ onSubmit: Function.prototype });
const form = component.find(Form).instance();
const eventObj = { charCode: 13, shiftKey: false };
jest.spyOn(form, 'handleSubmit');
component.find('textarea').simulate('keypress', eventObj);
expect(form.handleSubmit).not.toHaveBeenCalled();
});
});
});