Test: More realistic tests

Author: sapegin

src/rsg-components/Playground/Playground.spec.js

@@ -5,6 +5,8 @@ import '../../styles/setupjss';
 import slots, { EXAMPLE_TAB_CODE_EDITOR } from '../slots';
 import { PlaygroundRenderer } from './PlaygroundRenderer';
 
+const evalInContext = a =>
+	new Function('require', 'const React = require("react");' + a).bind(null, require); // eslint-disable-line no-new-func
 const code = '<button>OK</button>';
 const newCode = '<button>Not OK</button>';
 const options = {
@@ -22,7 +24,7 @@ const options = {
 
 it('should render component renderer', () => {
 	const actual = shallow(
-		<Playground code={code} evalInContext={a => () => a} name="name" index={0} />,
+		<Playground code={code} evalInContext={evalInContext} name="name" index={0} />,
 		options
 	);
 
@@ -31,7 +33,7 @@ it('should render component renderer', () => {
 
 it('should update code via props', () => {
 	const actual = shallow(
-		<Playground code={code} evalInContext={a => () => a} name="name" index={0} />,
+		<Playground code={code} evalInContext={evalInContext} name="name" index={0} />,
 		options
 	);
 
@@ -45,15 +47,18 @@ it('should update code via props', () => {
 });
 
 it('should update code with debounce', done => {
-	const actual = shallow(<Playground code={code} evalInContext={a => a} name="name" index={0} />, {
-		context: {
-			...options.context,
-			config: {
-				...options.context.config,
-				previewDelay: 1,
+	const actual = shallow(
+		<Playground code={code} evalInContext={evalInContext} name="name" index={0} />,
+		{
+			context: {
+				...options.context,
+				config: {
+					...options.context.config,
+					previewDelay: 1,
+				},
 			},
-		},
-	});
+		}
+	);
 
 	expect(actual.state('code')).toEqual(code);
 
@@ -68,7 +73,7 @@ it('should update code with debounce', done => {
 
 it('should open a code editor', () => {
 	const actual = mount(
-		<Playground code={code} evalInContext={a => () => a} name="name" index={0} />,
+		<Playground code={code} evalInContext={evalInContext} name="name" index={0} />,
 		options
 	);
 

src/rsg-components/Preview/Preview.js

@@ -63,10 +63,13 @@ export default class Preview extends Component {
 	}
 
 	componentWillUnmount() {
-		if (!this.mountNode) {
-			return;
+		this.unmountPreview();
+	}
+
+	unmountPreview() {
+		if (this.mountNode) {
+			ReactDOM.unmountComponentAtNode(this.mountNode);
 		}
-		ReactDOM.unmountComponentAtNode(this.mountNode);
 	}
 
 	executeCode() {
@@ -127,9 +130,7 @@ export default class Preview extends Component {
 	}
 
 	handleError(err) {
-		if (this.mountNode) {
-			ReactDOM.unmountComponentAtNode(this.mountNode);
-		}
+		this.unmountPreview();
 
 		this.setState({
 			error: err.toString(),

src/rsg-components/Preview/Preview.spec.js

@@ -1,7 +1,10 @@
 import React from 'react';
-import noop from 'lodash/noop';
 import Preview from '../Preview';
 
+/* eslint-disable no-console */
+
+const evalInContext = a =>
+	new Function('require', 'const React = require("react");' + a).bind(null, require); // eslint-disable-line no-new-func
 const code = '<button>OK</button>';
 const options = {
 	context: {
@@ -11,32 +14,31 @@ const options = {
 	},
 };
 
-it('should unmount Wrapper when Preview unmounts and mountNodeMock is not null', () => {
-	const actual = mount(<Preview code={code} evalInContext={() => noop} />, options);
-	actual.instance().mountNode = { hi: 1 };
-	const ReactDOM = require('react-dom');
-	const unmountComponentAtNodeMock = jest.fn();
-	ReactDOM.unmountComponentAtNode = unmountComponentAtNodeMock;
+it('should unmount Wrapper component', () => {
+	const actual = mount(<Preview code={code} evalInContext={evalInContext} />, options);
+	const node = actual.instance().mountNode;
 
+	expect(node.innerHTML).toMatch('<button');
 	actual.unmount();
-
-	expect(unmountComponentAtNodeMock).toBeCalled();
+	expect(node.innerHTML).toBe('');
 });
 
-it('should not unmount Wrapper when Preview unmounts and mountNodeMock is null', () => {
-	const actual = mount(<Preview code={code} evalInContext={() => noop} />, options);
-	actual.instance().mountNode = null;
-	const ReactDOM = require('react-dom');
-	const unmountComponentAtNodeMock = jest.fn();
-	ReactDOM.unmountComponentAtNode = unmountComponentAtNodeMock;
+it('should not not fail when Wrapper wasn’t mounted', () => {
+	const consoleError = console.error;
+	console.error = () => {};
+
+	const actual = mount(<Preview code="pizza" evalInContext={evalInContext} />, options);
+	const node = actual.instance().mountNode;
 
+	expect(node.innerHTML).toBe('');
 	actual.unmount();
+	expect(node.innerHTML).toBe('');
 
-	expect(unmountComponentAtNodeMock).not.toBeCalled();
+	console.error = consoleError;
 });
 
 it('should render component renderer', () => {
-	const actual = shallow(<Preview code={code} evalInContext={noop} />, options);
+	const actual = shallow(<Preview code={code} evalInContext={evalInContext} />, options);
 
 	expect(actual).toMatchSnapshot();
 });

test/jestsetup.js

@@ -42,7 +42,7 @@ document.createRange = function() {
 };
 
 // requestAnimationFrame “polyfill”
-window.requestAnimationFrame = a => a;
+window.requestAnimationFrame = a => a();
 
 jest.mock('react-scripts/config/webpack.config.dev', () => ({ cra: true }), { virtual: true });
 jest.mock('webpack-dev-server', function() {