@inseefr/lunatic 0.2.60 → 0.3.0-experimental

package/src/stories/utils/orchestrator.js

@@ -0,0 +1,110 @@
+import React from 'react';
+import * as lunatic from 'components';
+import './custom-lunatic.scss';
+
+function getStoreInfoRequired() {
+	return {};
+}
+
+const OrchestratorForStories = ({
+	source,
+	suggesters,
+	data = {},
+	management = false,
+	pagination = false,
+	modalForControls = false,
+	features = ['VTL'],
+	bindings: initialBindings,
+	initialPage = '1',
+	getStoreInfo = getStoreInfoRequired,
+	missing = false,
+	shortcut = false,
+	activeGoNextForMissing = false,
+	suggesterFetcher,
+	autoSuggesterLoading,
+	...rest
+}) => {
+	const preferences = management
+		? ['COLLECTED', 'FORCED', 'EDITED']
+		: ['COLLECTED'];
+	const savingType = management ? 'EDITED' : 'COLLECTED';
+	const {
+		handleChange,
+		components,
+		bindings,
+		pagination: {
+			goNext,
+			goPrevious,
+			page,
+			setPage,
+			maxPage,
+			isFirstPage,
+			isLastPage,
+			flow,
+		},
+	} = lunatic.useLunatic(source, data, {
+		suggesters,
+		savingType,
+		preferences,
+		features,
+		management,
+		pagination,
+		modalForControls,
+		initialPage,
+		suggesterFetcher,
+		autoSuggesterLoading,
+	});
+	const Button = lunatic.Button;
+
+	const missingStrategy = (b) => goNext(null, b);
+
+	return (
+		<div className="container">
+			<div className="components">
+				{components.map((q) => {
+					const { id, componentType } = q;
+					const Component = lunatic[componentType];
+					const { storeName } = q;
+
+					return (
+						<div className="lunatic lunatic-component" key={`component-${id}`}>
+							<Component
+								{...rest}
+								{...q}
+								{...getStoreInfo(storeName)}
+								handleChange={handleChange}
+								preferences={preferences}
+								savingType={savingType}
+								management={management}
+								features={features}
+								bindings={{ ...bindings, ...initialBindings }}
+								currentPage={page}
+								setPage={setPage}
+								flow={flow}
+								pagination={pagination}
+								missing={missing}
+								shortcut={shortcut}
+								missingStrategy={activeGoNextForMissing && missingStrategy}
+							/>
+						</div>
+					);
+				})}
+			</div>
+			{pagination && (
+				<>
+					<div className="pagination">
+						<Button
+							onClick={goPrevious}
+							disabled={isFirstPage}
+							value="Previous"
+						/>
+						<Button onClick={goNext} disabled={isLastPage} value="Next" />
+					</div>
+					<div>{`Page : ${page}/${maxPage}`}</div>
+				</>
+			)}
+		</div>
+	);
+};
+
+export default OrchestratorForStories;

package/src/tests/components/breadcrumb.spec.js

@@ -1,13 +1,13 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import { Breadcrumb } from 'components';
-
-describe('breadcrumb', () => {
-	it('renders without crashing', () => {
-		shallow(<Breadcrumb elements={[]} />);
-	});
-	it('renders with elements', () => {
-		const wrapper = shallow(<Breadcrumb elements={['One', 'Two']} />);
-		expect(wrapper.find('.breadcrumb-lunatic').children()).toHaveLength(2);
-	});
-});
+import React from 'react';
+import { shallow } from 'enzyme';
+import { Breadcrumb } from 'components';
+
+describe('breadcrumb', () => {
+	it('renders without crashing', () => {
+		shallow(<Breadcrumb elements={[]} />);
+	});
+	it('renders with elements', () => {
+		const wrapper = shallow(<Breadcrumb elements={['One', 'Two']} />);
+		expect(wrapper.find('.breadcrumb-lunatic').children()).toHaveLength(2);
+	});
+});

package/src/tests/components/button.spec.js

@@ -1,11 +1,11 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import { Button } from 'components';
-
-describe('button', () => {
-	const onClick = jest.fn();
-
-	it('renders without crashing', () => {
-		shallow(<Button value="Button" onClick={onClick} />);
-	});
-});
+import React from 'react';
+import { shallow } from 'enzyme';
+import { Button } from 'components';
+
+describe('button', () => {
+	const onClick = jest.fn();
+
+	it('renders without crashing', () => {
+		shallow(<Button value="Button" onClick={onClick} />);
+	});
+});

package/src/tests/components/checkbox-boolean.spec.js

@@ -1,22 +1,45 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import { CheckboxBoolean } from 'components';
-
-describe('checkbox-boolean', () => {
-	const onChange = jest.fn();
-
-	it('renders without crashing', () => {
-		shallow(<CheckboxBoolean id="id" label={''} handleChange={onChange} />);
-	});
-
-	it('test VERTICAL positioning', () => {
-		shallow(
-			<CheckboxBoolean
-				id="id"
-				label={'label'}
-				handleChange={onChange}
-				positioning="VERTICAL"
-			/>
-		);
-	});
-});
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import { fakeSchedulers } from 'rxjs-marbles/jest';
+import { CheckboxBoolean } from 'components';
+
+describe('checkbox-boolean', () => {
+	const handleChange = jest.fn();
+	const defaultProps = { id: 'id', label: '', handleChange };
+
+	it('renders without crashing', () => {
+		shallow(<CheckboxBoolean {...defaultProps} />);
+	});
+
+	it('returns management component', () => {
+		shallow(<CheckboxBoolean {...defaultProps} label="label" management />);
+	});
+
+	it('returns disabled component', () => {
+		shallow(<CheckboxBoolean {...defaultProps} label="label" disabled />);
+	});
+
+	it('renders firing useEffect', () => {
+		const wrapper = mount(<CheckboxBoolean {...defaultProps} />);
+		wrapper.setProps({ focused: true });
+	});
+
+	it('test VERTICAL positioning', () => {
+		shallow(<CheckboxBoolean {...defaultProps} positioning="VERTICAL" />);
+	});
+
+	it('should trigger the change event', () => {
+		fakeSchedulers((advance) => {
+			const wrapper = shallow(<CheckboxBoolean {...defaultProps} />);
+			wrapper.find('input').simulate('change', {
+				target: {
+					checked: true,
+				},
+			});
+			advance(400);
+			wrapper.update();
+			expect(handleChange).toHaveBeenCalled();
+			expect(handleChange).toHaveBeenCalledWith({ '': true });
+		});
+	});
+});

package/src/tests/components/checkbox-group.spec.js

@@ -1,17 +1,53 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import { CheckboxGroup } from 'components';
-
-describe('checkbox-group', () => {
-	const onChange = jest.fn();
-	const responses = [
-		{ id: '1', value: false, label: 'France' },
-		{ id: '2', value: false, label: 'Italy' },
-	];
-
-	it('renders without crashing', () => {
-		mount(
-			<CheckboxGroup id={''} handleChange={onChange} responses={responses} />
-		);
-	});
-});
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import { fakeSchedulers } from 'rxjs-marbles/jest';
+import { CheckboxGroup } from 'components';
+
+describe('checkbox-group', () => {
+	const handleChange = jest.fn();
+	const responses = [
+		{
+			id: '1',
+			response: { name: 'a', values: { COLLECTED: true } },
+			label: 'France',
+		},
+		{
+			id: '2',
+			response: { name: 'b', values: { COLLECTED: false } },
+			label: 'Italy',
+		},
+	];
+	const defaultProps = { id: 'id', handleChange, responses };
+
+	it('returns management component', () => {
+		shallow(<CheckboxGroup {...defaultProps} management />);
+	});
+
+	it('returns disabled component', () => {
+		shallow(<CheckboxGroup {...defaultProps} label="label" disabled />);
+	});
+
+	it('renders firing useEffect', () => {
+		const wrapper = mount(<CheckboxGroup {...defaultProps} />);
+		wrapper.setProps({ focused: true });
+	});
+
+	it('should trigger the change event', () => {
+		fakeSchedulers((advance) => {
+			const wrapper = shallow(<CheckboxGroup {...defaultProps} />);
+			wrapper
+				.find('input')
+				.first()
+				.simulate('change', {
+					target: {
+						checked: false,
+					},
+				});
+			advance(400);
+			wrapper.update();
+			expect(handleChange).toHaveBeenCalled();
+			/*Cause specificHandler*/
+			expect(handleChange).toHaveBeenCalledWith({ a: null });
+		});
+	});
+});

package/src/tests/components/checkbox-one.spec.js

@@ -1,17 +1,32 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import { CheckboxOne } from 'components';
-
-const handleChange = jest.fn();
-const options = [
-	{ value: 'france', label: 'France' },
-	{ value: 'italy', label: 'Italy' },
-];
-
-const defaultProps = { id: 'id', label: 'label', handleChange, options };
-
-describe('checkbox-one', () => {
-	it('renders without crashing', () => {
-		mount(<CheckboxOne {...defaultProps} />);
-	});
-});
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import { CheckboxOne } from 'components';
+
+const handleChange = jest.fn();
+const options = [
+	{ value: 'france', label: 'France' },
+	{ value: 'italy', label: 'Italy' },
+];
+const response = { values: { COLLECTED: 'italy' } };
+
+const defaultProps = {
+	id: 'id',
+	label: 'label',
+	handleChange,
+	options,
+	response,
+};
+
+describe('checkbox-one', () => {
+	it('renders without crashing', () => {
+		mount(<CheckboxOne {...defaultProps} />);
+	});
+
+	it('returns management component', () => {
+		shallow(<CheckboxOne {...defaultProps} management />);
+	});
+
+	it('returns disabled component', () => {
+		shallow(<CheckboxOne {...defaultProps} label="label" disabled />);
+	});
+});

package/src/tests/components/datepicker.spec.js

@@ -1,42 +1,22 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import { Datepicker } from 'components';
-
-const handleChange = jest.fn();
-const defaultProps = {
-	id: 'id',
-	label: 'label',
-	handleChange,
-};
-
-describe('datepicker', () => {
-	it('renders without crashing', () => {
-		shallow(<Datepicker {...defaultProps} />);
-	});
-
-	it('returns readOnly component', () => {
-		const wrapper = shallow(<Datepicker {...defaultProps} readOnly />);
-		expect(wrapper.find('input').prop('readOnly')).toBeTruthy();
-	});
-
-	it('returns enabled component', () => {
-		const wrapper = shallow(<Datepicker {...defaultProps} />);
-		expect(wrapper.find('input').prop('readOnly')).toBeFalsy();
-	});
-
-	it('returns required component', () => {
-		const wrapper = shallow(<Datepicker {...defaultProps} required />);
-		expect(wrapper.find('input').prop('required')).toBeTruthy();
-	});
-
-	it('should trigger the change event', () => {
-		const wrapper = shallow(<Datepicker {...defaultProps} />);
-		wrapper.find('input').simulate('change', {
-			target: {
-				value: 'new value',
-			},
-		});
-		expect(handleChange).toHaveBeenCalled();
-		expect(handleChange).toHaveBeenCalledWith({ '': 'new value' });
-	});
-});
+import React from 'react';
+import { shallow } from 'enzyme';
+import { Datepicker } from 'components';
+
+const handleChange = jest.fn();
+const defaultProps = {
+	id: 'id',
+	label: 'label',
+	handleChange,
+};
+
+describe('datepicker', () => {
+	it('renders without crashing', () => {
+		shallow(<Datepicker {...defaultProps} />);
+	});
+	it('returns management component', () => {
+		shallow(<Datepicker {...defaultProps} label="label" management />);
+	});
+	it('returns disabled & readOnly component', () => {
+		shallow(<Datepicker {...defaultProps} label="label" disabled readOnly />);
+	});
+});

package/src/tests/components/declarations-wrappers/input-declarations-wrapper.spec.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import { InputDeclarationsWrapper } from 'components/declarations/wrappers';
+
+const handleChange = jest.fn();
+
+const response = { values: { COLLECTED: 'xxx' } };
+
+const defaultProps = {
+	id: 'id',
+	label: 'label',
+	handleChange,
+	type: 'text',
+	roleType: 'input',
+	response,
+};
+
+describe('input-declarations-wrapper', () => {
+	it('renders without crashing', () => {
+		shallow(<InputDeclarationsWrapper {...defaultProps} />);
+		shallow(
+			<InputDeclarationsWrapper
+				{...defaultProps}
+				type={null}
+				roleType="textarea"
+			/>
+		);
+	});
+	it('returns readOnly and autoComplete component', () => {
+		const wrapper = shallow(
+			<InputDeclarationsWrapper {...defaultProps} readOnly autoComplete />
+		);
+		expect(wrapper.find('input').prop('readOnly')).toBeTruthy();
+	});
+
+	it('returns enabled component', () => {
+		const wrapper = shallow(<InputDeclarationsWrapper {...defaultProps} />);
+		expect(wrapper.find('input').prop('readOnly')).toBeFalsy();
+	});
+
+	it('returns mandatory component', () => {
+		const wrapper = shallow(
+			<InputDeclarationsWrapper {...defaultProps} mandatory />
+		);
+		expect(wrapper.find('input').prop('required')).toBeTruthy();
+	});
+
+	it('returns management component', () => {
+		shallow(<InputDeclarationsWrapper {...defaultProps} management />);
+	});
+
+	it('renders firing useEffect', () => {
+		const wrapper = mount(<InputDeclarationsWrapper {...defaultProps} />);
+		wrapper.setProps({ focused: true });
+	});
+
+	// it('should trigger the change event', () => {
+	// 	const wrapper = shallow(<InputDeclarationsWrapper {...defaultProps} />);
+	// 	wrapper.find('input').simulate('change', {
+	// 		target: {
+	// 			value: 'new value',
+	// 		},
+	// 	});
+	// 	expect(handleChange).toHaveBeenCalled();
+	// 	expect(handleChange).toHaveBeenCalledWith({ '': 'new value' });
+	// });
+});

package/src/tests/components/declarations-wrappers/list-declarations-wrapper.spec.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import { fakeSchedulers } from 'rxjs-marbles/jest';
+import { ListDeclarationsWrapper } from 'components/declarations/wrappers';
+
+const handleChange = jest.fn();
+const options = [
+	{ value: 'france', label: 'France' },
+	{ value: 'italy', label: 'Italy' },
+];
+const response = { values: { COLLECTED: 'italy' } };
+
+const defaultProps = {
+	id: 'id',
+	label: 'label',
+	handleChange,
+	options,
+	response,
+};
+
+describe('list-declarations-wrapper', () => {
+	it('renders without crashing', () => {
+		mount(<ListDeclarationsWrapper {...defaultProps} type="radio" />);
+		mount(<ListDeclarationsWrapper {...defaultProps} type="checkbox" />);
+	});
+
+	it('returns management component', () => {
+		shallow(
+			<ListDeclarationsWrapper {...defaultProps} management type="radio" />
+		);
+	});
+
+	it('renders firing useEffect', () => {
+		const wrapper = mount(
+			<ListDeclarationsWrapper {...defaultProps} type="radio" />
+		);
+		wrapper.setProps({ focused: true });
+	});
+
+	it('should trigger the change event', () => {
+		fakeSchedulers((advance) => {
+			const wrapper = shallow(
+				<ListDeclarationsWrapper {...defaultProps} type="radio" />
+			);
+			wrapper.find('input').first().simulate('change');
+			advance(400);
+			wrapper.update();
+			expect(handleChange).toHaveBeenCalled();
+			expect(handleChange).toHaveBeenCalledWith({ '': 'france' });
+		});
+	});
+});

package/src/tests/components/declarations-wrappers/simple-declarations-wrapper.spec.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { SimpleDeclarationsWrapper } from 'components/declarations/wrappers';
+
+describe('simple-declarations-wrapper', () => {
+	it('renders without crashing', () => {
+		shallow(
+			<SimpleDeclarationsWrapper id="module-id" label="Sequence">
+				<span>{`test`}</span>
+			</SimpleDeclarationsWrapper>
+		);
+	});
+	it('renders with elements', () => {
+		const wrapper = shallow(
+			<SimpleDeclarationsWrapper id="module-id" label="Sequence">
+				<span>{`test`}</span>
+			</SimpleDeclarationsWrapper>
+		);
+		expect(wrapper.children()).toHaveLength(4);
+	});
+});

package/src/tests/components/declarations.spec.js

@@ -1,46 +1,46 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import { Declarations } from 'components';
-import * as C from 'utils/constants';
-
-const defaultProps = { id: 'id', label: 'label' };
-const declarations = [
-	{
-		position: C.AFTER_QUESTION_TEXT,
-		id: 'id1',
-		label: 'label',
-		declarationType: C.INSTRUCTION,
-	},
-	{
-		position: C.BEFORE_QUESTION_TEXT,
-		id: 'id2',
-		label: 'label',
-		declarationType: C.INSTRUCTION,
-	},
-];
-
-describe('declarations', () => {
-	it('minimalist renders without crashing', () => {
-		shallow(<Declarations {...defaultProps} />);
-	});
-	it('returns no declaration', () => {
-		const wrapper = shallow(
-			<Declarations
-				{...defaultProps}
-				type={C.DETACHABLE}
-				declarations={declarations}
-			/>
-		);
-		expect(wrapper.find('.declarations-lunatic').children()).toHaveLength(0);
-	});
-	it('returns one declaration', () => {
-		const wrapper = shallow(
-			<Declarations
-				{...defaultProps}
-				type={C.AFTER_QUESTION_TEXT}
-				declarations={declarations}
-			/>
-		);
-		expect(wrapper.find('.declarations-lunatic').children()).toHaveLength(1);
-	});
-});
+import React from 'react';
+import { shallow } from 'enzyme';
+import { Declarations } from 'components';
+import * as C from '../../constants';
+
+const defaultProps = { id: 'id', label: 'label' };
+const declarations = [
+	{
+		position: C.AFTER_QUESTION_TEXT,
+		id: 'id1',
+		label: 'label',
+		declarationType: C.INSTRUCTION,
+	},
+	{
+		position: C.BEFORE_QUESTION_TEXT,
+		id: 'id2',
+		label: 'label',
+		declarationType: C.INSTRUCTION,
+	},
+];
+
+describe('declarations', () => {
+	it('minimalist renders without crashing', () => {
+		shallow(<Declarations {...defaultProps} />);
+	});
+	it('returns no declaration', () => {
+		const wrapper = shallow(
+			<Declarations
+				{...defaultProps}
+				type={C.DETACHABLE}
+				declarations={declarations}
+			/>
+		);
+		expect(wrapper.find('.declarations-lunatic').children()).toHaveLength(0);
+	});
+	it('returns one declaration', () => {
+		const wrapper = shallow(
+			<Declarations
+				{...defaultProps}
+				type={C.AFTER_QUESTION_TEXT}
+				declarations={declarations}
+			/>
+		);
+		expect(wrapper.find('.declarations-lunatic').children()).toHaveLength(1);
+	});
+});