Skip to content

Commit 6d9b8e0

Browse files
giorgosartgiorgosart
committed
Upgraded libs, re-written tests using react testing library
1 parent b67ef83 commit 6d9b8e0

13 files changed

Lines changed: 520 additions & 682 deletions

‎package.json‎

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-easy-edit",
3-
"version": "1.15.0",
3+
"version": "1.16.0",
44
"description": "A react library for inline editing components",
55
"keywords": [
66
"content editable",
@@ -37,8 +37,8 @@
3737
"url": "https://github.com/giorgosart/react-easy-edit/issues"
3838
},
3939
"peerDependencies": {
40-
"react": "^17.0.2",
41-
"react-dom": "^17.0.2"
40+
"react": "^18.2.0",
41+
"react-dom": "^18.2.0"
4242
},
4343
"eslintConfig": {
4444
"extends": "react-app"
@@ -50,20 +50,26 @@
5050
"not op_mini all"
5151
],
5252
"devDependencies": {
53-
"@babel/cli": "^7.14.8",
54-
"@babel/core": "^7.14.8",
55-
"@babel/plugin-proposal-class-properties": "^7.14.5",
56-
"@babel/preset-env": "^7.14.9",
57-
"@babel/preset-react": "^7.14.5",
53+
"@babel/cli": "^7.21.5",
54+
"@babel/core": "^7.21.5",
55+
"@babel/plugin-proposal-class-properties": "^7.18.6",
56+
"@babel/preset-env": "^7.21.5",
57+
"@babel/preset-react": "^7.18.6",
5858
"@rollup/plugin-babel": "^5.3.0",
59-
"@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
59+
"@testing-library/jest-dom": "^5.16.5",
60+
"@testing-library/react": "^14.0.0",
6061
"enzyme": "3.11.0",
61-
"prop-types": "^15.7.2",
62-
"react": "^17.0.2",
63-
"react-dom": "^17.0.2",
64-
"react-scripts": "^3.4.4",
62+
"postcss-flexbugs-fixes": "^5.0.2",
63+
"postcss-preset-env": "^8.0.1",
64+
"prop-types": "^15.8.1",
65+
"react": "^18.2.0",
66+
"react-dom": "^18.2.0",
67+
"react-scripts": "^5.0.1",
6568
"rollup": "2.53.3",
66-
"rollup-plugin-postcss": "^3.1.8",
69+
"rollup-plugin-postcss": "^4.0.2",
6770
"rollup-plugin-terser": "^7.0.2"
71+
},
72+
"dependencies": {
73+
"@zarconontol/enzyme-adapter-react-18": "^0.7.3"
6874
}
6975
}

‎src/index.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import React from 'react';
2-
import ReactDOM from 'react-dom';
2+
import { createRoot } from 'react-dom/client';
33
import App from './demo/App';
44
import * as serviceWorker from './serviceWorker';
55

6-
ReactDOM.render(<App />, document.getElementById('root'));
6+
const container = document.getElementById('root');
7+
const root = createRoot(container);
8+
root.render(<App />);
79

810
// If you want your app to work offline and load faster, you can change
911
// unregister() to register() below. Note this comes with some pitfalls.

‎src/lib/EasyCheckbox.test.js‎

Lines changed: 42 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,59 @@
11
import React from 'react';
2-
import {configure, mount, shallow} from 'enzyme';
3-
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
2+
import { render, fireEvent } from '@testing-library/react';
3+
import '@testing-library/jest-dom';
44
import EasyCheckbox from "./EasyCheckbox";
5-
import EasyEdit from "./EasyEdit";
6-
import Globals from './globals';
7-
8-
configure({adapter: new Adapter()});
95

106
describe('EasyCheckbox', () => {
11-
let wrapper;
12-
const onChange = jest.fn();
13-
const options = [{label: 'Test One', value: '1'},
14-
{label: 'Test Two', value: '2'}];
7+
const options = [
8+
{ label: 'Option 1', value: 'option1' },
9+
{ label: 'Option 2', value: 'option2' },
10+
{ label: 'Option 3', value: 'option3' },
11+
];
1512

16-
beforeEach(() => {
17-
wrapper = shallow(
18-
<EasyCheckbox
19-
options={options}
20-
onChange={onChange}
21-
value={options}
22-
/>
23-
);
24-
});
13+
it('renders checkboxes with labels', () => {
14+
const { getByLabelText } = render(<EasyCheckbox options={options} />);
2515

26-
it('should render two checkboxes', () => {
27-
expect(wrapper.find('input')).toHaveLength(2);
16+
options.forEach(option => {
17+
const checkbox = getByLabelText(option.label);
18+
expect(checkbox).toBeInTheDocument();
19+
expect(checkbox).toHaveAttribute('type', 'checkbox');
20+
expect(checkbox).toHaveAttribute('value', option.value);
21+
});
2822
});
2923

30-
it("should render a placeholder", () => {
31-
let wrapper = shallow(
32-
<EasyEdit
33-
type="checkbox"
34-
options={options}
35-
onSave={jest.fn()}
36-
/>
37-
);
38-
expect(wrapper.find('div.easy-edit-wrapper').text()).toEqual(Globals.DEFAULT_PLACEHOLDER);
39-
});
24+
it('renders checked checkboxes', () => {
25+
const value = ['option1', 'option3'];
26+
const { getByLabelText } = render(<EasyCheckbox options={options} value={value} />);
4027

41-
it("should render the selected label for a given value", () => {
42-
let wrapper = shallow(
43-
<EasyEdit
44-
type="checkbox"
45-
options={options}
46-
onSave={jest.fn()}
47-
value="1"
48-
/>
49-
);
50-
expect(wrapper.find('div.easy-edit-wrapper').text()).toEqual("Test One");
28+
options.forEach(option => {
29+
const checkbox = getByLabelText(option.label);
30+
if (value.includes(option.value)) {
31+
expect(checkbox).toBeChecked();
32+
} else {
33+
expect(checkbox).not.toBeChecked();
34+
}
35+
});
5136
});
5237

53-
it("should render the value of the checkbox even if it's not part ", () => {
54-
const val = "I am not part of the options list";
55-
let wrapper = shallow(
56-
<EasyEdit
57-
type="checkbox"
58-
options={options}
59-
onSave={jest.fn()}
60-
value={val}
61-
/>
62-
);
63-
expect(wrapper.find('div.easy-edit-wrapper').text()).toEqual(val);
64-
});
38+
it('calls onChange handler when a checkbox is clicked', () => {
39+
const onChange = jest.fn();
40+
const { getByLabelText } = render(<EasyCheckbox options={options} onChange={onChange} />);
6541

66-
it("should render all selected values as a comma separated list", () => {
67-
let wrapper = shallow(
68-
<EasyEdit
69-
type="checkbox"
70-
options={options}
71-
onSave={jest.fn()}
72-
value="1,2"
73-
/>
74-
);
75-
expect(wrapper.find('div.easy-edit-wrapper').text()).toEqual("Test One, Test Two");
42+
const checkbox = getByLabelText('Option 1');
43+
fireEvent.click(checkbox);
44+
expect(onChange).toHaveBeenCalledWith(expect.objectContaining({target: expect.objectContaining({value: 'option1'})}));
7645
});
7746

78-
it("uncheck all options", () => {
79-
wrapper = mount(
80-
<EasyEdit
81-
type="checkbox"
82-
options={options}
83-
onSave={jest.fn()}
84-
value={["1","2"]}
85-
/>);
86-
wrapper.simulate('click');
87-
wrapper.find('input[type="checkbox"]').at(0).simulate('change', {currentTarget: {checked: false}});
88-
wrapper.find('input[type="checkbox"]').at(1).simulate('change', {currentTarget: {checked: false}});
89-
expect(wrapper.state('tempValue')).toEqual([]);
90-
});
47+
it('calls onFocus and onBlur handlers when a checkbox is focused and blurred', () => {
48+
const onFocus = jest.fn();
49+
const onBlur = jest.fn();
50+
const { getByLabelText } = render(<EasyCheckbox options={options} onFocus={onFocus} onBlur={onBlur} />);
51+
52+
const checkbox = getByLabelText('Option 1');
53+
fireEvent.focus(checkbox);
54+
expect(onFocus).toHaveBeenCalled();
9155

92-
it("should remove (on onSave) any values that are not part of the option list", () => {
93-
wrapper = mount(
94-
<EasyEdit
95-
type="checkbox"
96-
options={options}
97-
onSave={jest.fn()}
98-
value={["1", "3", "4"]}
99-
/>);
100-
wrapper.simulate('click');
101-
wrapper.find('input[type="checkbox"]').at(0).simulate('change', {currentTarget: {checked: false}});
102-
wrapper.find('button[name="save"]').simulate('click');
103-
expect(wrapper.state('value')).toEqual([]);
56+
fireEvent.blur(checkbox);
57+
expect(onBlur).toHaveBeenCalled();
10458
});
10559
});

‎src/lib/EasyColor.test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import {configure, shallow} from 'enzyme';
3-
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
3+
import Adapter from '@zarconontol/enzyme-adapter-react-18';
44
import EasyColor from "./EasyColor";
55

66
configure({adapter: new Adapter()});

‎src/lib/EasyCustom.test.js‎

Lines changed: 58 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,74 @@
11
import React from 'react';
2-
import {configure, shallow, mount} from 'enzyme';
3-
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
4-
import EasyCustom from "./EasyCustom";
5-
import EasyEdit from "./EasyEdit";
6-
7-
configure({adapter: new Adapter()});
2+
import { render, fireEvent } from '@testing-library/react';
3+
import '@testing-library/jest-dom';
4+
import EasyCustom from './EasyCustom';
85

96
describe('EasyCustom', () => {
10-
let wrapper;
11-
const childInput = <input />;
12-
const setValueFunction = jest.fn();
13-
const blurFn = jest.fn();
14-
const saveFn = jest.fn();
15-
const focusFn = jest.fn();
16-
17-
it('should initially set the value passed in as the state value', () => {
18-
wrapper = shallow(
19-
<EasyCustom
20-
value="test value"
21-
>
22-
{childInput}
23-
</EasyCustom>
7+
test('renders the child component', () => {
8+
const { getByTestId } = render(
9+
<EasyCustom cssClassPrefix="test">
10+
<input data-testid="child-component" />
11+
</EasyCustom>
2412
);
25-
expect(wrapper.state('value')).toEqual('test value');
13+
14+
expect(getByTestId('child-component')).toBeInTheDocument();
2615
});
2716

28-
it('should execute setValue method correctly', () => {
29-
wrapper = shallow(
30-
<EasyCustom
31-
setValue={setValueFunction}
32-
>
33-
{childInput}
34-
</EasyCustom>
17+
test('calls onBlur on input blur', () => {
18+
const onBlur = jest.fn();
19+
const { getByTestId } = render(
20+
<EasyCustom cssClassPrefix="test" onBlur={onBlur} value="">
21+
<input data-testid="child-component" />
22+
</EasyCustom>
3523
);
36-
wrapper.instance().setValue('test new value');
37-
expect(wrapper.state('value')).toEqual('test new value');
38-
expect(setValueFunction).toHaveBeenCalled();
39-
});
24+
const input = getByTestId('child-component');
25+
fireEvent.blur(input);
4026

41-
it('should trigger the onBlur fn when custom component looses focus', () => {
42-
wrapper = mount(
43-
<EasyEdit
44-
type="text"
45-
onSave={saveFn}
46-
onBlur={blurFn}
47-
editComponent={<CustomComponent />}
48-
/>);
49-
wrapper.simulate('click');
50-
wrapper.find('input').simulate('blur');
51-
expect(blurFn).toBeCalled();
27+
expect(onBlur).toHaveBeenCalled();
5228
});
5329

54-
it('should trigger the onSave fn when custom component looses focus, if component implements onBlur and saveOnBlur is activated', () => {
55-
wrapper = mount(
56-
<EasyEdit
57-
type="text"
58-
onSave={saveFn}
59-
onBlur={blurFn}
60-
saveOnBlur
61-
editComponent={<CustomComponent />}
62-
/>);
63-
wrapper.simulate('click');
64-
wrapper.find('input').simulate('blur');
65-
expect(blurFn).toBeCalled();
30+
test('calls onFocus on input focus', () => {
31+
const onFocus = jest.fn();
32+
const { getByTestId } = render(
33+
<EasyCustom cssClassPrefix="test" onFocus={onFocus} value="">
34+
<input data-testid="child-component" />
35+
</EasyCustom>
36+
);
37+
const input = getByTestId('child-component');
38+
fireEvent.focus(input);
39+
40+
expect(onFocus).toHaveBeenCalled();
6641
});
6742

68-
it('should trigger the onFocus fn when custom component gains focus', () => {
69-
wrapper = mount(
70-
<EasyEdit
71-
type="text"
72-
onFocus={focusFn}
73-
editComponent={<CustomComponent />}
74-
/>);
75-
wrapper.simulate('click');
76-
wrapper.find('input').simulate('focus');
77-
expect(focusFn).toBeCalled();
43+
test('passes props to child component', () => {
44+
const { getByTestId } = render(
45+
<EasyCustom cssClassPrefix="test" value="">
46+
<input data-testid="child-component" data-testprop="test" />
47+
</EasyCustom>
48+
);
49+
const input = getByTestId('child-component');
50+
51+
expect(input).toHaveAttribute('data-testprop', 'test');
7852
});
7953

80-
});
54+
test('renders with cssClassPrefix as wrapper div class name', () => {
55+
const { container } = render(
56+
<EasyCustom cssClassPrefix="test" value="">
57+
<input data-testid="child-component" />
58+
</EasyCustom>
59+
);
8160

82-
class CustomComponent extends React.Component{
83-
constructor(props){
84-
super(props);
85-
}
61+
expect(container.firstChild).toHaveClass('testeasy-edit-component-wrapper');
62+
});
8663

87-
render(){
88-
return <input onBlur={this.props.onBlur} />;
89-
}
90-
}
64+
test('renders with the initial value', () => {
65+
const { getByTestId } = render(
66+
<EasyCustom cssClassPrefix="test" value="initial">
67+
<input data-testid="child-component" />
68+
</EasyCustom>
69+
);
70+
const input = getByTestId('child-component');
71+
72+
expect(input).toHaveValue('initial');
73+
});
74+
});

0 commit comments

Comments
 (0)