Permalink
Browse files

Fix all tests that were disabled before React 15.4

See facebook/react#7386 for a discussion.
  • Loading branch information...
gabro committed Nov 17, 2016
1 parent 025b5be commit cd3ed277fc4d7d189a5b05c4f49bb348eb90e119
@@ -1,15 +1,9 @@
import React from 'react';
import renderer from 'react-test-renderer';
// Because of this bug: https://github.com/facebook/react/issues/7386
// Should be fixed in react 15.4
// import { shallow } from 'enzyme';
import { shallow } from 'enzyme';
import BackgroundDimmer from '../../src/background-dimmer';
// Because of this bug: https://github.com/facebook/react/issues/7386
// Should be fixed in react 15.4
jest.mock('react-dom');
const content = <div className='content'>content</div>;
describe('BackgroundDimmer', () => {
@@ -23,11 +17,9 @@ describe('BackgroundDimmer', () => {
expect(component).toMatchSnapshot();
});
// Ignored because of this bug: https://github.com/facebook/react/issues/7386
// Should be fixed in react 15.4
xit('invokes the callback when the background is clicked', () => {
it('invokes the callback when the background is clicked', () => {
const onClickOutside = jest.fn();
const dimmer = shallow( // eslint-disable-line no-undef
const dimmer = shallow(
<BackgroundDimmer onClickOutside={onClickOutside}>
{content}
</BackgroundDimmer>
@@ -36,11 +28,9 @@ describe('BackgroundDimmer', () => {
expect(onClickOutside).toBeCalled();
});
// Ignored because of this bug: https://github.com/facebook/react/issues/7386
// Should be fixed in react 15.4
xit('doesn\'t invoke the callback when the content is clicked', () => {
it('doesn\'t invoke the callback when the content is clicked', () => {
const onClickOutside = jest.fn();
const dimmer = shallow( // eslint-disable-line no-undef
const dimmer = shallow(
<BackgroundDimmer onClickOutside={onClickOutside}>
{content}
</BackgroundDimmer>
@@ -3,10 +3,6 @@ import renderer from 'react-test-renderer';
import Dropdown from '../../src/dropdown';
// Because of this bug: https://github.com/facebook/react/issues/7386
// Should be fixed in react 15.4
jest.mock('react-dom');
const exampleProps = {
...Dropdown.defaultProps,
id: '12345',
@@ -1,29 +1,43 @@
import React from 'react';
// import renderer from 'react-test-renderer';
import { shallow } from 'enzyme';
// Because of this bug: https://github.com/facebook/react/issues/7386
// Should be fixed in react 15.4
// jest.mock('react-dom');
import { shallow, mount } from 'enzyme';
import LoadingSpinner from '../../src/loading-spinner';
describe('LoadingSpinner', () => {
// disabled because react-dome is mocked out, see above
xit('renders correctly', () => {
const component = renderer.create( // eslint-disable-line no-undef
<LoadingSpinner />
it('renders correctly', () => {
const component = mount(
<div style={{ position: 'relative' }}>
<LoadingSpinner />
</div>
);
expect(component.html()).toMatchSnapshot();
});
it('renders correctly with a message', () => {
const component = mount(
<div style={{ position: 'relative' }}>
<LoadingSpinner message={{ content: 'loading awesome content' }} />
</div>
);
expect(component).toMatchSnapshot();
expect(component.html()).toMatchSnapshot();
});
// disabled because react-dome is mocked out, see above
xit('renders correctly with a message', () => {
const component = renderer.create( // eslint-disable-line no-undef
<LoadingSpinner message={{ content: 'loading awesome content' }} />
it('renders with a warning when parent is not relative or absolute', () => {
/* eslint-disable no-console */
const warn = jest.fn();
const originalWarn = console.warn;
console.warn = warn;
mount(
<div style={{ position: 'static' }}>
<LoadingSpinner />
</div>
);
expect(component).toMatchSnapshot();
expect(warn).toHaveBeenCalledTimes(1);
const warnArguments = warn.mock.calls[0];
expect(warnArguments[0]).toMatchSnapshot();
console.warn = originalWarn;
/* eslint-enable no-console */
});
it('computes message content and style', () => {
@@ -1,5 +1,4 @@
import React from 'react';
// import renderer from 'react-test-renderer';
import { mount } from 'enzyme';
import { Menu } from '../../src/DropdownMenu';
@@ -12,14 +11,11 @@ const exampleProps = {
describe('Menu', () => {
// ignored because react-test-renderer cannot co-exist with enzyme
// because of this bug: https://github.com/facebook/react/issues/7386
// Should be fixed in react 15.4
xit('renders correctly', () => {
const component = renderer.create( // eslint-disable-line no-undef
it('renders correctly', () => {
const component = mount(
<Menu {...exampleProps} />
);
expect(component).toMatchSnapshot();
expect(component.html()).toMatchSnapshot();
});
it('triggers onClick only on options that are not disabled', () => {
@@ -1,13 +1,9 @@
import React from 'react';
import renderer from 'react-test-renderer';
import { mount } from 'enzyme';
import StatefulButton from '../../src/button/StatefulButton';
import clone from 'lodash/clone';
// Because of this bug: https://github.com/facebook/react/issues/7386
// Should be fixed in react 15.4
jest.mock('react-dom');
function timeoutPromise(millis) {
return new Promise((resolve) => {
setTimeout(resolve, millis);
@@ -38,13 +34,11 @@ function mkComponent(overrides) {
describe('StatefulButton', () => {
// ignored because react-dom is mocked (see above)
// which is used by TextOverflow (used by Button, used by StatefulButton)
xit('renders correctly', () => {
const component = renderer.create(
it('renders correctly', () => {
const component = mount(
<StatefulButton {...exampleProps} />
);
expect(component).toMatchSnapshot();
expect(component.html()).toMatchSnapshot();
});
it('behaves correctly in base state', () => {
@@ -1,14 +1,10 @@
import React from 'react';
import renderer from 'react-test-renderer';
import { mount } from 'enzyme';
import TimePicker, {
parseInTimeFormat, H24, H12, toOption, filterTime, createTimeList, makeOptions, inputError
} from '../../src/time-picker/TimePicker';
// Because of this bug: https://github.com/facebook/react/issues/7386
// Should be fixed in react 15.4
jest.mock('react-dom');
const exampleProps = {
...TimePicker.defaultProps,
id: '12345',
@@ -26,13 +22,11 @@ const timePicker = new TimePicker(exampleProps);
describe('TimePicker', () => {
// ignored because react-dom is mocked (see above)
// it causes problem with AutosizeInput when using refs
xit('renders correctly', () => {
const component = renderer.create(
it('renders correctly', () => {
const component = mount(
<TimePicker {...exampleProps} />
);
expect(component).toMatchSnapshot();
expect(component.html()).toMatchSnapshot();
});
describe('getLocals', () => {
@@ -0,0 +1,5 @@
exports[`LoadingSpinner renders correctly 1`] = `"<div style=\"position: relative;\"><div class=\"loading-spinner\"><div class=\"loading-spinner-overlay\" style=\"background-color: rgba(255, 255, 255, 0.9);\"><div class=\"spinner\" style=\"font-size: 3em;\"></div></div></div></div>"`;
exports[`LoadingSpinner renders correctly with a message 1`] = `"<div style=\"position: relative;\"><div class=\"loading-spinner\"><div class=\"loading-spinner-overlay\" style=\"background-color: rgba(255, 255, 255, 0.9);\"><div class=\"spinner\" style=\"font-size: 3em;\"></div><div class=\"message\" style=\"margin-top: 3em; font-size: 16px;\">loading awesome content</div></div></div></div>"`;
exports[`LoadingSpinner renders with a warning when parent is not relative or absolute 1`] = `"LoadingSpinner\'s parent node style should have \"position: relative\" or \"position: absolute\""`;
@@ -0,0 +1 @@
exports[`Menu renders correctly 1`] = `"<div class=\"menu\" style=\"max-height: -20px;\"><div class=\"menu-row\"><div class=\"react-flex-view align-content-center menu-item\"><div class=\"react-flex-view menu-item-title\">Preferences</div><div class=\"react-flex-view justify-content-end menu-item-metadata\"></div></div></div><div class=\"menu-row\"><div class=\"react-flex-view align-content-center menu-item\"><div class=\"react-flex-view menu-item-title\">Preferences</div><div class=\"react-flex-view justify-content-end menu-item-metadata\"></div></div></div></div>"`;
@@ -0,0 +1 @@
exports[`StatefulButton renders correctly 1`] = `"<div class=\"button\" style=\"display: inline-block;\"><div class=\"react-flex-view align-content-center justify-content-center button-inner is-default is-medium is-ready\"><!-- react-text: 3 --><!-- /react-text --><div class=\"react-flex-view flex-column justify-content-center align-content-center button-label\"><div style=\"width: 100%;\"><div><span style=\"display: block; white-space: nowrap; width: 100%; overflow: hidden; text-overflow: ellipsis; position: relative;\">BeautifulButton<div class=\"resize-sensor\" style=\"position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; z-index: -1; visibility: hidden;\"><div class=\"resize-sensor-expand\" style=\"position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;\"><div style=\"position: absolute; left: 0; top: 0; transition: 0s;\"></div></div><div class=\"resize-sensor-shrink\" style=\"position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;\"><div style=\"position: absolute; left: 0; top: 0; transition: 0s; width: 200%; height: 200%\"></div></div></div></span><span style=\"position: fixed; visibility: hidden; pointer-events: none; top: 0px; left: 0px;\">BeautifulButton</span></div></div></div></div></div>"`;
@@ -0,0 +1 @@
exports[`TimePicker renders correctly 1`] = `"<div class=\"Select dropdown time-picker fancy-class-name is-medium Select--single is-searchable has-value\"><div class=\"Select-control\" style=\"margin: 10px; position: relative;\"><span class=\"Select-multi-value-wrapper\" id=\"react-select-2--value\"><div class=\"Select-value\"><span class=\"Select-value-label\" role=\"option\" aria-selected=\"true\" id=\"react-select-2--value-item\">06:30</span></div><div class=\"Select-input\" style=\"display: inline-block;\"><input role=\"combobox\" aria-expanded=\"false\" aria-owns=\"\" aria-haspopup=\"false\" aria-activedescendant=\"react-select-2--value\" value=\"\" style=\"box-sizing: content-box;\"><div style=\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal;\"></div></div></span><span class=\"Select-arrow-zone\"><span class=\"Select-arrow\"></span></span></div></div>"`;

0 comments on commit cd3ed27

Please sign in to comment.