Skip to content

Commit 02c0e2d

Browse files
dev-javascriptdev-javascript
committed
update stringToReact.test.js
1 parent aa6b4ef commit 02c0e2d

File tree

3 files changed

+100
-42
lines changed

3 files changed

+100
-42
lines changed

‎src/__snapshots__/stringToReact.test.js.snap

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`snapshots : data props should be passed as props to generated component 1`] = `
4+
<div
5+
className="mock-class-name"
6+
id="mock-id"
7+
/>
8+
`;
9+
10+
exports[`snapshots : default render structure 1`] = `null`;

‎src/ctx.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,9 @@ class Ctx implements IStringToReactApi {
9797
return this._temp;
9898
}
9999
update(template: string, babelOptions: TransformOptions): void {
100+
this._update(template, babelOptions);
101+
}
102+
_update(template: string, babelOptions: TransformOptions): void {
100103
this._updateComponent(this._updateTemplate(template, babelOptions), babelOptions);
101104
}
102105
_onChangeComponent(): void {

‎src/stringToReact.test.js

Lines changed: 87 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import renderer from 'react-test-renderer';
23
import * as Babel from '@babel/standalone';
34
import {render, unmountComponentAtNode} from 'react-dom';
45
import {act} from 'react-dom/test-utils';
@@ -13,12 +14,13 @@ beforeAll(() => {
1314
document.body.appendChild(container);
1415
});
1516
beforeEach(() => {
16-
renderApp = (temp, deps, rerender, temp2) => {
17+
renderApp = (temp, babelOptions, deps, rerender, temp2, babelOptions2) => {
1718
let secondRender = false;
1819
const StrintToReactCom = StrintToReact.bind(undefined, deps);
1920
const App = function () {
2021
const template = secondRender ? temp2 || str : temp || str;
21-
return <StrintToReactCom>{template}</StrintToReactCom>;
22+
const babelOp = secondRender ? babelOptions2 : babelOptions;
23+
return <StrintToReactCom babelOptions={babelOp}>{template}</StrintToReactCom>;
2224
};
2325
act(() => {
2426
render(<App></App>, container);
@@ -40,58 +42,101 @@ afterAll(() => {
4042
document.body.removeChild(container);
4143
container = null;
4244
});
43-
describe('rendering : ', () => {
44-
test('generated component from string should be updated when props.children is changed', () => {
45+
describe('calling update method : ', () => {
46+
test('update method should be called with two parameters when props.children is changed', () => {
4547
let _ctx, _ctx2;
46-
const getCtx = function () {
47-
_ctx = new Ctx(React, Babel);
48+
const getCtx = function (react, Babel, rerender) {
49+
_ctx = new Ctx(react, Babel, rerender);
4850
_ctx.getComponent = jest.fn(() => _ctx._com);
49-
_ctx._transpile = jest.fn(
50-
() => `() => /*#__PURE__*/React.createElement("p", {
51-
id: "someText"
52-
}, "some text");`,
53-
);
51+
_ctx.update = jest.fn((template, babelOptions) => {});
5452
return _ctx;
5553
},
56-
getCtx2 = function () {
57-
_ctx2 = new Ctx(React, Babel);
54+
getCtx2 = function (react, Babel, rerender) {
55+
_ctx2 = new Ctx(react, Babel, rerender);
5856
_ctx2.getComponent = jest.fn(() => _ctx2._com);
59-
_ctx2._transpile = jest.fn(
60-
() => `() => /*#__PURE__*/React.createElement("p", {
61-
id: "someText2"
62-
}, "some text2");`,
63-
);
57+
_ctx2.update = jest.fn((template, babelOptions) => {});
6458
return _ctx2;
6559
};
66-
renderApp(str, {getCtx, react, Babel}, true);
67-
expect(_ctx.getComponent.mock.calls.length).toBe(2);
68-
expect(_ctx._transpile.mock.calls.length).toBe(1);
69-
renderApp(str, {getCtx: getCtx2, react, Babel}, true, str2);
70-
expect(_ctx2.getComponent.mock.calls.length).toBe(2);
71-
expect(_ctx2._transpile.mock.calls.length).toBe(2);
60+
const babelOp = {};
61+
renderApp(str, babelOp, {getCtx, react, Babel}, true, str);
62+
expect(_ctx.update.mock.calls.length).toBe(1);
63+
expect(_ctx.update.mock.calls[0][0]).toBe(str);
64+
expect(_ctx.update.mock.calls[0][1]).toEqual(babelOp);
65+
renderApp(str, babelOp, {getCtx: getCtx2, react, Babel}, true, str2);
66+
expect(_ctx2.update.mock.calls.length).toBe(2);
67+
expect(_ctx2.update.mock.calls[0][0]).toBe(str);
68+
expect(_ctx2.update.mock.calls[0][1]).toEqual(babelOp);
69+
expect(_ctx2.update.mock.calls[1][0]).toBe(str2);
70+
expect(_ctx2.update.mock.calls[1][1]).toEqual(babelOp);
71+
});
72+
test('update method should be called with two parameters when babelOptions is changed', () => {
73+
let _ctx, _ctx2;
74+
const getCtx = function (react, Babel, rerender) {
75+
_ctx = new Ctx(react, Babel, rerender);
76+
_ctx.getComponent = jest.fn(() => _ctx._com);
77+
_ctx.update = jest.fn((template, babelOptions) => {});
78+
return _ctx;
79+
},
80+
getCtx2 = function (react, Babel, rerender) {
81+
_ctx2 = new Ctx(react, Babel, rerender);
82+
_ctx2.getComponent = jest.fn(() => _ctx2._com);
83+
_ctx2.update = jest.fn((template, babelOptions) => {});
84+
return _ctx2;
85+
};
86+
const babelOp = {};
87+
const babelOp2 = {presets: ['react']};
88+
renderApp(str, babelOp, {getCtx, react, Babel}, true, str, babelOp);
89+
expect(_ctx.update.mock.calls.length).toBe(1);
90+
expect(_ctx.update.mock.calls[0][0]).toBe(str);
91+
expect(_ctx.update.mock.calls[0][1]).toEqual(babelOp);
92+
renderApp(str, babelOp, {getCtx: getCtx2, react, Babel}, true, str, babelOp2);
93+
expect(_ctx2.update.mock.calls.length).toBe(2);
94+
expect(_ctx2.update.mock.calls[0][0]).toBe(str);
95+
expect(_ctx2.update.mock.calls[0][1]).toEqual(babelOp);
96+
expect(_ctx2.update.mock.calls[1][0]).toBe(str);
97+
expect(_ctx2.update.mock.calls[1][1]).toEqual(babelOp2);
7298
});
73-
test('it should call updateTemplate method with props.children as a parameter', () => {
99+
});
100+
describe('calling getComponent method : ', () => {
101+
test('getComponent method should be called on every render', () => {
74102
let _ctx;
75-
const getCtx = function () {
76-
_ctx = new Ctx(React, Babel);
77-
const updateTemplate = _ctx.updateTemplate;
78-
_ctx.updateTemplate = jest.fn((temp) => updateTemplate.call(_ctx, temp));
79-
_ctx._transpile = jest.fn(
80-
() => `() => /*#__PURE__*/React.createElement("p", {
81-
id: "someText"
82-
}, "some text");`,
83-
);
103+
const getCtx = function (react, Babel, rerender) {
104+
_ctx = new Ctx(react, Babel, rerender);
105+
_ctx.getComponent = jest.fn(() => _ctx._com);
106+
_ctx.update = jest.fn((template, babelOptions) => {});
84107
return _ctx;
85108
};
86-
renderApp(str, {getCtx, react, Babel});
87-
expect(_ctx.updateTemplate.mock.calls[0][0]).toBe(str);
109+
const babelOp = {};
110+
renderApp(str, babelOp, {getCtx, react, Babel}, true, str, babelOp);
111+
expect(_ctx.getComponent.mock.calls.length).toBe(2);
88112
});
89113
});
90-
describe('React global variable', () => {
91-
test('The constructor should set the React global variable', () => {
92-
window.React = undefined;
93-
new Ctx(React, Babel);
94-
expect(window.React).toEqual(React);
95-
window.React = React;
114+
describe('snapshots : ', () => {
115+
test('data props should be passed as props to generated component', () => {
116+
let _ctx;
117+
const getCtx = function (react, Babel, rerender) {
118+
_ctx = new Ctx(react, Babel, rerender);
119+
_ctx.getComponent = () => (props) => <div {...props} />;
120+
_ctx.update = jest.fn((template, babelOptions) => {});
121+
return _ctx;
122+
};
123+
const StrintToReactCom = StrintToReact.bind(undefined, {getCtx, react, Babel});
124+
const tree = renderer
125+
.create(<StrintToReactCom data={{id: 'mock-id', className: 'mock-class-name'}}>{`string code`}</StrintToReactCom>)
126+
.toJSON();
127+
expect(tree).toMatchSnapshot();
128+
});
129+
test('default render structure', () => {
130+
let _ctx;
131+
const getCtx = function (react, Babel, rerender) {
132+
_ctx = new Ctx(react, Babel, rerender);
133+
_ctx.update = jest.fn((template, babelOptions) => {});
134+
return _ctx;
135+
};
136+
const StrintToReactCom = StrintToReact.bind(undefined, {getCtx, react, Babel});
137+
const tree = renderer
138+
.create(<StrintToReactCom data={{id: 'mock-id', className: 'mock-class-name'}}>{`string code`}</StrintToReactCom>)
139+
.toJSON();
140+
expect(tree).toMatchSnapshot();
96141
});
97142
});

0 commit comments

Comments
 (0)