Fix tests

Signed-off-by: soupette <cyril@strapi.io>
This commit is contained in:
soupette 2021-08-26 15:35:47 +02:00
parent 38b012f227
commit ae87bafccd
6 changed files with 18 additions and 113 deletions

View File

@ -11,9 +11,7 @@ import { ThemeProvider, lightTheme } from '@strapi/parts';
import Input from '../index'; import Input from '../index';
const messages = { const messages = {
en: { en: {},
'users-permissions.component.name': 'Input',
},
}; };
describe('<Input />', () => { describe('<Input />', () => {
@ -26,8 +24,10 @@ describe('<Input />', () => {
<Input <Input
intlLabel={{ id: 'enabled', defaultMessage: 'Enabled' }} intlLabel={{ id: 'enabled', defaultMessage: 'Enabled' }}
name="test" name="test"
onChange={jest.fn()}
providerToEditName="email" providerToEditName="email"
type="text" type="text"
value="test"
/> />
</ThemeProvider> </ThemeProvider>
</IntlProvider> </IntlProvider>
@ -172,9 +172,10 @@ describe('<Input />', () => {
aria-invalid="false" aria-invalid="false"
class="c6" class="c6"
id="textinput-1" id="textinput-1"
name="test"
placeholder="" placeholder=""
type="text" type="text"
value="" value="test"
/> />
</div> </div>
</div> </div>

View File

@ -24,6 +24,8 @@ describe('<FormModal />', () => {
isOpen={false} isOpen={false}
onToggle={jest.fn()} onToggle={jest.fn()}
headerBreadcrumbs={['Edit', 'Email']} headerBreadcrumbs={['Edit', 'Email']}
onSubmit={jest.fn()}
isSubmiting={false}
/> />
</IntlProvider> </IntlProvider>
); );

View File

@ -5,10 +5,7 @@ import reducer, { initialState } from './reducer';
const useUserForm = (endPoint, permissions) => { const useUserForm = (endPoint, permissions) => {
const { isLoading: isLoadingForPermissions, allowedActions } = useRBAC(permissions); const { isLoading: isLoadingForPermissions, allowedActions } = useRBAC(permissions);
const [{ formErrors, initialData, isLoading, modifiedData }, dispatch] = useReducer( const [{ isLoading, modifiedData }, dispatch] = useReducer(reducer, initialState);
reducer,
initialState
);
const toggleNotification = useNotification(); const toggleNotification = useNotification();
const isMounted = useRef(true); const isMounted = useRef(true);
@ -54,24 +51,6 @@ const useUserForm = (endPoint, permissions) => {
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [isLoadingForPermissions, endPoint]); }, [isLoadingForPermissions, endPoint]);
const handleChange = useCallback(({ target: { name, value } }) => {
dispatch({
type: 'ON_CHANGE',
keys: name,
value,
});
}, []);
const dispatchResetForm = useCallback(() => {
dispatch({
type: 'RESET_FORM',
});
}, []);
const dispatchSetFormErrors = useCallback(errors => {
dispatch({ type: 'SET_ERRORS', errors });
}, []);
const dispatchSubmitSucceeded = useCallback(data => { const dispatchSubmitSucceeded = useCallback(data => {
dispatch({ dispatch({
type: 'ON_SUBMIT_SUCCEEDED', type: 'ON_SUBMIT_SUCCEEDED',
@ -81,13 +60,7 @@ const useUserForm = (endPoint, permissions) => {
return { return {
allowedActions, allowedActions,
dispatch,
dispatchResetForm,
dispatchSetFormErrors,
dispatchSubmitSucceeded, dispatchSubmitSucceeded,
formErrors,
handleChange,
initialData,
isLoading, isLoading,
isLoadingForPermissions, isLoadingForPermissions,
modifiedData, modifiedData,

View File

@ -1,10 +1,7 @@
import produce from 'immer'; import produce from 'immer';
import { set } from 'lodash';
const initialState = { const initialState = {
formErrors: {},
isLoading: true, isLoading: true,
initialData: {},
modifiedData: {}, modifiedData: {},
}; };
@ -14,15 +11,12 @@ const reducer = (state, action) =>
switch (action.type) { switch (action.type) {
case 'GET_DATA': { case 'GET_DATA': {
draftState.isLoading = true; draftState.isLoading = true;
draftState.initialData = {};
draftState.modifiedData = {}; draftState.modifiedData = {};
break; break;
} }
case 'GET_DATA_SUCCEEDED': { case 'GET_DATA_SUCCEEDED': {
draftState.isLoading = false; draftState.isLoading = false;
draftState.initialData = action.data;
draftState.modifiedData = action.data; draftState.modifiedData = action.data;
break; break;
@ -31,23 +25,9 @@ const reducer = (state, action) =>
draftState.isLoading = true; draftState.isLoading = true;
break; break;
} }
case 'ON_CHANGE': {
set(draftState, ['modifiedData', ...action.keys.split('.')], action.value);
break;
}
case 'ON_SUBMIT_SUCCEEDED': { case 'ON_SUBMIT_SUCCEEDED': {
draftState.initialData = action.data;
draftState.modifiedData = action.data; draftState.modifiedData = action.data;
// draftState.formErrors = {};
break;
}
case 'RESET_FORM': {
draftState.modifiedData = state.initialData;
// draftState.formErrors = {};
break;
}
case 'SET_ERRORS': {
draftState.formErrors = action.errors;
break; break;
} }
default: { default: {

View File

@ -6,9 +6,7 @@ describe('USERS PERMISSIONS | HOOKS | useForm | reducer', () => {
beforeEach(() => { beforeEach(() => {
state = { state = {
formErrors: {},
isLoading: true, isLoading: true,
initialData: {},
modifiedData: {}, modifiedData: {},
}; };
}); });
@ -28,12 +26,10 @@ describe('USERS PERMISSIONS | HOOKS | useForm | reducer', () => {
}; };
state.isLoading = false; state.isLoading = false;
state.initialData = true;
state.modifiedData = true; state.modifiedData = true;
const expected = produce(state, draft => { const expected = produce(state, draft => {
draft.isLoading = true; draft.isLoading = true;
draft.initialData = {};
draft.modifiedData = {}; draft.modifiedData = {};
}); });
@ -61,7 +57,6 @@ describe('USERS PERMISSIONS | HOOKS | useForm | reducer', () => {
const expected = produce(state, draft => { const expected = produce(state, draft => {
draft.isLoading = false; draft.isLoading = false;
draft.initialData = data;
draft.modifiedData = data; draft.modifiedData = data;
}); });
@ -85,67 +80,14 @@ describe('USERS PERMISSIONS | HOOKS | useForm | reducer', () => {
}); });
}); });
describe('ON_CHANGE', () => {
it('should change the data correctly', () => {
state.modifiedData = { from: { name: 'test' }, test: 'test' };
const action = {
type: 'ON_CHANGE',
keys: 'from.name',
value: 'test@test.io',
};
const expected = produce(state, draft => {
draft.modifiedData = {
from: { name: 'test@test.io' },
test: 'test',
};
});
expect(reducer(state, action)).toEqual(expected);
});
});
describe('ON_SUBMIT_SUCCEEDED', () => { describe('ON_SUBMIT_SUCCEEDED', () => {
it('should set the initialData object with the modifiedData', () => { it('should set the initialData object with the modifiedData', () => {
state.initialData = { test: true };
state.modifiedData = { test: false }; state.modifiedData = { test: false };
state.formErrors = { ok: true };
const action = { type: 'ON_SUBMIT_SUCCEEDED' }; const action = { type: 'ON_SUBMIT_SUCCEEDED', data: { test: true, foo: 'bar' } };
const expected = produce(state, draft => { const expected = produce(state, draft => {
draft.initialData = { test: false }; draft.modifiedData = { test: true, foo: 'bar' };
draft.formErrors = {};
});
expect(reducer(state, action)).toEqual(expected);
});
});
describe('RESET_FORM', () => {
it('should set the modifiedData object with the initialData', () => {
state.initialData = { test: true };
state.modifiedData = { test: false };
state.formErrors = { ok: true };
const action = { type: 'RESET_FORM' };
const expected = produce(state, draft => {
draft.modifiedData = { test: true };
draft.formErrors = {};
});
expect(reducer(state, action)).toEqual(expected);
});
});
describe('SET_ERRORS', () => {
it('should set the formErrors correctly', () => {
const action = { type: 'SET_ERRORS', errors: { test: true } };
const expected = produce(state, draft => {
draft.formErrors = { test: true };
}); });
expect(reducer(state, action)).toEqual(expected); expect(reducer(state, action)).toEqual(expected);

View File

@ -9,6 +9,13 @@ jest.mock('../../../hooks', () => ({
useForm: jest.fn(), useForm: jest.fn(),
})); }));
jest.mock('@strapi/helper-plugin', () => ({
...jest.requireActual('@strapi/helper-plugin'),
useTracking: jest.fn(() => ({ trackUsage: jest.fn() })),
useNotification: jest.fn(),
useOverlayBlocker: jest.fn(() => ({ lockApp: jest.fn(), unlockApp: jest.fn() })),
}));
const App = ( const App = (
<ThemeProvider theme={lightTheme}> <ThemeProvider theme={lightTheme}>
<IntlProvider locale="en" messages={{ en: {} }} textComponent="span"> <IntlProvider locale="en" messages={{ en: {} }} textComponent="span">