@coorpacademy/app-review 0.1.16 → 0.1.17

package/src/actions/data/test/token.test.ts

@@ -0,0 +1,29 @@
+import test from 'ava';
+import {createTestStore} from '../../test/create-test-store';
+import {services} from '../../../test/util/services.mock';
+import {StoreState} from '../../../reducers';
+import {storeToken, STORE_TOKEN} from '../token';
+
+const initialState: StoreState = {
+  data: {
+    progression: null,
+    slides: {},
+    skills: [],
+    token: '1234'
+  },
+  ui: {
+    currentSlideRef: '',
+    navigation: [],
+    answers: [],
+    slide: {
+      validateButton: false
+    }
+  }
+};
+
+test('should dispatch STORE_TOKEN action when storeToken is called', async t => {
+  const expectedActions = [{type: STORE_TOKEN, payload: 'JWT.token'}];
+
+  const {dispatch} = createTestStore(t, initialState, services, expectedActions);
+  await dispatch(storeToken('JWT.token'));
+});

package/src/actions/index.ts

@@ -1,22 +1,6 @@
-import {StoreToken} from './data/token';
-
-import {navigateBack, navigateTo, NavigateBack, NavigateTo, StartApp} from './ui/navigation';
-import {ReceivedSlide} from './api/fetch-slide';
-import {ReceiveProgression} from './api/post-progression';
-import {ReceivedSkills} from './api/fetch-skills';
-import {validateSlide} from './ui/slides';
-
-export type Action =
-  | NavigateBack
-  | NavigateTo
-  | ReceivedSkills
-  | StartApp
-  | ReceivedSlide
-  | StoreToken
-  | ReceiveProgression;
+import {navigateBack, navigateTo} from './ui/navigation';
 
 export type Dispatchers = {
   navigateTo: typeof navigateTo;
   navigateBack: typeof navigateBack;
-  validateSlide: typeof validateSlide;
 };

package/src/actions/{api/test → test}/create-test-store.ts

@@ -2,8 +2,8 @@ import type {ExecutionContext} from 'ava';
 import constant from 'lodash/fp/constant';
 import {AnyAction, applyMiddleware, compose, createStore, Dispatch, Middleware, Store} from 'redux';
 import thunk from 'redux-thunk';
-import rootReducer, {StoreState} from '../../../reducers';
-import {Services} from '../../../types/common';
+import rootReducer, {StoreState} from '../../reducers';
+import {Services} from '../../types/common';
 
 const assertActionsMiddleware = (t: ExecutionContext, ACTIONS: AnyAction[]): Middleware =>
   constant((next: Dispatch) => (action: AnyAction): unknown => {

package/src/actions/ui/answers.ts

@@ -1,16 +1,63 @@
 import {Dispatch} from 'redux';
+import {flatten, get, includes, pull} from 'lodash/fp';
+import type {StoreState} from '../../reducers';
 
+export const EDIT_QCM = '@@answer/EDIT_QCM' as const;
+export const EDIT_QCM_GRAPHIC = '@@answer/EDIT_QCM_GRAPHIC' as const;
+export const EDIT_QCM_DRAG = '@@answer/EDIT_QCM_DRAG' as const;
+export const EDIT_TEMPLATE = '@@answer/EDIT_TEMPLATE' as const;
 export const EDIT_BASIC = '@@answer/EDIT_BASIC' as const;
-export type EditBasicAction = {
-  type: typeof EDIT_BASIC;
+export const EDIT_SLIDER = '@@answer/EDIT_SLIDER' as const;
+
+export const ANSWER_EDIT = {
+  qcm: EDIT_QCM,
+  qcmGraphic: EDIT_QCM_GRAPHIC,
+  qcmDrag: EDIT_QCM_DRAG,
+  template: EDIT_TEMPLATE,
+  basic: EDIT_BASIC,
+  slider: EDIT_SLIDER
+} as const;
+
+export type EditAnswerAction = {
+  type:
+    | typeof EDIT_QCM
+    | typeof EDIT_QCM_GRAPHIC
+    | typeof EDIT_QCM_DRAG
+    | typeof EDIT_TEMPLATE
+    | typeof EDIT_BASIC
+    | typeof EDIT_SLIDER;
   payload: string[];
 };
 
+const buildAnswer = (userAnswers: string[], questionType: string, newValue: string): string[] => {
+  switch (questionType) {
+    case 'qcm':
+    case 'qcmGraphic':
+    case 'qcmDrag': {
+      return includes(newValue, userAnswers)
+        ? pull(newValue, userAnswers)
+        : flatten([...userAnswers, newValue]);
+    }
+    case 'basic':
+    case 'slider':
+      return [newValue];
+    default:
+      return [];
+  }
+};
+
 export const editAnswer =
   (answer: string) =>
-  (dispatch: Dispatch): EditBasicAction => {
+  (dispatch: Dispatch, getState: () => StoreState): EditAnswerAction => {
+    const state = getState();
+    const currentSlideRef = get(['ui', 'currentSlideRef'])(state);
+    const userAnswers = get(['ui', 'answers'])(state);
+    const slide = get(['data', 'slides', currentSlideRef])(state);
+    const questionType = get(['question', 'type'])(slide);
+    const type = get(questionType, ANSWER_EDIT);
+
     return dispatch({
-      type: EDIT_BASIC,
-      payload: [answer]
+      type,
+      payload: buildAnswer(userAnswers, questionType, answer)
     });
   };

package/src/actions/ui/slides.ts

@@ -15,6 +15,7 @@ export type Slide = {
 };
 
 export const SET_CURRENT_SLIDE = '@@slide/SET_CURRENT_SLIDE' as const;
+
 export type SetCurrentSlide = {
   type: typeof SET_CURRENT_SLIDE;
   payload: SlideFromAPI;
@@ -24,12 +25,4 @@ export const setCurrentSlide = (payload: SlideFromAPI): SetCurrentSlide => ({
   payload
 });
 
-export const VALIDATE_SLIDE = '@@slide/VALIDATE';
-export type ValidateSlide = {
-  type: typeof VALIDATE_SLIDE;
-};
-export const validateSlide = (): ValidateSlide => ({
-  type: VALIDATE_SLIDE
-});
-
 export type UISlidesAction = SetCurrentSlide;

package/src/actions/ui/test/answers.test.ts

@@ -0,0 +1,103 @@
+import test from 'ava';
+import pipe from 'lodash/fp/pipe';
+import set from 'lodash/fp/set';
+import {SlideFromAPI} from '../../../types/common';
+import {createTestStore} from '../../test/create-test-store';
+import {services} from '../../../test/util/services.mock';
+import {freeTextSlide} from '../../../views/slides/test/fixtures/free-text';
+import {qcmDragSlide} from '../../../views/slides/test/fixtures/qcm-drag';
+import {qcmSlide} from '../../../views/slides/test/fixtures/qcm';
+import {qcmGraphicSlide} from '../../../views/slides/test/fixtures/qcm-graphic';
+import {sliderSlide} from '../../../views/slides/test/fixtures/slider';
+import {StoreState} from '../../../reducers';
+import {editAnswer, ANSWER_EDIT} from '../answers';
+
+const initialState: StoreState = {
+  data: {
+    progression: {
+      _id: '62b1d1087aa12f00253f40ee',
+      content: {
+        ref: '_skill-ref',
+        type: 'skill'
+      },
+      engine: {
+        ref: 'review'
+      },
+      state: {
+        allAnswers: [],
+        isCorrect: true,
+        nextContent: {
+          ref: '',
+          type: 'slide'
+        },
+        pendingSlides: [],
+        slides: [],
+        step: {
+          current: 1
+        },
+        stars: 0
+      }
+    },
+    slides: {},
+    skills: [],
+    token: '1234'
+  },
+  ui: {
+    currentSlideRef: '',
+    navigation: [],
+    answers: [],
+    slide: {
+      validateButton: false
+    }
+  }
+};
+
+const buildInitialState = (state: StoreState, question: SlideFromAPI): StoreState => {
+  return pipe(
+    set(['data', 'progression', 'state', 'nextContent', 'ref'], question.id),
+    set(['data', 'slides', question.id], question),
+    set(['ui', 'currentSlideRef'], question.id)
+  )(state);
+};
+
+test('should dispatch EDIT_BASIC action when editAnswer is called', async t => {
+  const state = buildInitialState(initialState, freeTextSlide);
+  const expectedActions = [{type: ANSWER_EDIT.basic, payload: ['My Answer']}];
+  const {dispatch} = createTestStore(t, state, services, expectedActions);
+  await dispatch(editAnswer('My Answer'));
+});
+
+test('should dispatch EDIT_QCM action when editAnswer is called', async t => {
+  let state = buildInitialState(initialState, qcmSlide);
+  state = set(['ui', 'answers'], ['My First Answer', 'My Second Answer'], state);
+  const expectedActions = [{type: ANSWER_EDIT.qcm, payload: ['My First Answer']}];
+  const {dispatch} = createTestStore(t, state, services, expectedActions);
+  await dispatch(editAnswer('My Second Answer'));
+});
+
+test('should dispatch EDIT_QCM_GRAPHIC action when editAnswer is called', async t => {
+  let state = buildInitialState(initialState, qcmGraphicSlide);
+  state = set(['ui', 'answers'], ['My First Answer', 'My Second Answer', 'My Third Answer'], state);
+  const expectedActions = [
+    {type: ANSWER_EDIT.qcmGraphic, payload: ['My First Answer', 'My Third Answer']}
+  ];
+  const {dispatch} = createTestStore(t, state, services, expectedActions);
+  await dispatch(editAnswer('My Second Answer'));
+});
+
+test('should dispatch EDIT_QCM_DRAG action when editAnswer is called', async t => {
+  let state = buildInitialState(initialState, qcmDragSlide);
+  state = set(['ui', 'answers'], ['My First Answer', 'My Second Answer'], state);
+  const expectedActions = [
+    {type: ANSWER_EDIT.qcmDrag, payload: ['My First Answer', 'My Second Answer', 'My Third Answer']}
+  ];
+  const {dispatch} = createTestStore(t, state, services, expectedActions);
+  await dispatch(editAnswer('My Third Answer'));
+});
+
+test('should dispatch EDIT_SLIDER action when editAnswer is called', async t => {
+  const state = buildInitialState(initialState, sliderSlide);
+  const expectedActions = [{type: ANSWER_EDIT.slider, payload: ['5']}];
+  const {dispatch} = createTestStore(t, state, services, expectedActions);
+  await dispatch(editAnswer('5'));
+});

package/src/actions/ui/test/slides.test.ts

@@ -0,0 +1,30 @@
+import test from 'ava';
+import {createTestStore} from '../../test/create-test-store';
+import {services} from '../../../test/util/services.mock';
+import {freeTextSlide} from '../../../views/slides/test/fixtures/free-text';
+import {StoreState} from '../../../reducers';
+import {setCurrentSlide, SET_CURRENT_SLIDE} from '../slides';
+
+const initialState: StoreState = {
+  data: {
+    progression: null,
+    slides: {},
+    skills: [],
+    token: '1234'
+  },
+  ui: {
+    currentSlideRef: '',
+    navigation: [],
+    answers: [],
+    slide: {
+      validateButton: false
+    }
+  }
+};
+
+test('should dispatch SET_CURRENT_SLIDE action when setCurrentSlide is called', async t => {
+  const expectedActions = [{type: SET_CURRENT_SLIDE, payload: freeTextSlide}];
+
+  const {dispatch} = createTestStore(t, initialState, services, expectedActions);
+  await dispatch(setCurrentSlide(freeTextSlide));
+});

package/src/common/index.ts

@@ -1,8 +1,3 @@
-import _toString from 'lodash/fp/toString';
-
-export const TOTAL_SLIDES_STACK = 5;
-export const HIGHEST_INDEX = TOTAL_SLIDES_STACK - 1;
-
 export const VIEWS: {
   readonly skills: 'skills';
   readonly onboarding: 'onboarding';
@@ -16,5 +11,3 @@ export const VIEWS: {
 export const slideIndexes = ['0', '1', '2', '3', '4'] as const;
 
 export type SlideIndexes = typeof slideIndexes[number];
-
-export const indexToString = (index: number): SlideIndexes => _toString(index) as SlideIndexes;

package/src/index.tsx

@@ -68,9 +68,7 @@ const AppReview = ({options}: {options: AppOptions}): JSX.Element | null => {
 
     /* ThunkAction is not assignable to parameter of type 'AnyAction'
       ts problem is described here = https://github.com/reduxjs/redux-thunk/issues/333 */
-    skillRef
-      ? store.dispatch(postProgression(skillRef, token))
-      : store.dispatch(fetchSkills(token));
+    skillRef ? store.dispatch(postProgression(skillRef)) : store.dispatch(fetchSkills);
   }, [options, store]);
 
   useEffect(() => {

package/src/reducers/data/progression.ts

@@ -1,5 +1,4 @@
-import {ValidateSlide, VALIDATE_SLIDE} from '../../actions/ui/slides';
-import {POST_PROGRESSION_SUCCESS, ReceiveProgression} from '../../actions/api/post-progression';
+import {POST_PROGRESSION_SUCCESS, ReceivedProgression} from '../../actions/api/post-progression';
 import {ProgressionFromAPI} from '../../types/common';
 
 export type ProgressionState = ProgressionFromAPI | null;
@@ -7,13 +6,9 @@ export type ProgressionState = ProgressionFromAPI | null;
 const reducer = (
   // eslint-disable-next-line default-param-last
   state: ProgressionState = null,
-  action: ValidateSlide | ReceiveProgression
+  action: ReceivedProgression
 ): ProgressionState => {
   switch (action.type) {
-    case VALIDATE_SLIDE: {
-      // TODO: fix on VALIDATE ticket -> launch a POST PROGRESSION
-      return state;
-    }
     case POST_PROGRESSION_SUCCESS: {
       const progression = action.payload;
       return progression;

package/src/reducers/data/slides.ts

@@ -1,5 +1,4 @@
 import set from 'lodash/fp/set';
-import {ValidateSlide} from '../../actions/ui/slides';
 import {
   ReceivedSlide,
   FetchSlide,
@@ -8,9 +7,9 @@ import {
 } from '../../actions/api/fetch-slide';
 import {SlideFromAPI} from '../../types/common';
 
-export type SlidesAction = FetchSlide | ReceivedSlide | ValidateSlide;
+export type SlidesAction = FetchSlide | ReceivedSlide;
 
-export type SlidesState = Record<string, SlideFromAPI>;
+export type SlidesState = Record<string, SlideFromAPI | null>;
 export const initialState: SlidesState = {};
 
 // eslint-disable-next-line default-param-last

package/src/reducers/data/test/progression.test.ts

@@ -1,10 +1,10 @@
 import test from 'ava';
 import reducer from '../progression';
-import {POST_PROGRESSION_SUCCESS, ReceiveProgression} from '../../../actions/api/post-progression';
+import {POST_PROGRESSION_SUCCESS, ReceivedProgression} from '../../../actions/api/post-progression';
 import {ProgressionFromAPI} from '../../../types/common';
 
-test('should have inital value', t => {
-  const state = reducer(undefined, {} as ReceiveProgression);
+test('should have initial value', t => {
+  const state = reducer(undefined, {} as ReceivedProgression);
   t.is(state, null);
 });
 

package/src/reducers/ui/answers.ts

@@ -1,19 +1,15 @@
-import {EditBasicAction, EDIT_BASIC} from '../../actions/ui/answers';
+import {includes, values} from 'lodash/fp';
+import {EditAnswerAction, ANSWER_EDIT} from '../../actions/ui/answers';
 
 export type AnswerState = string[];
+const ANSWER_EDIT_ACTIONS = values(ANSWER_EDIT);
 
 const reducer = (
   // eslint-disable-next-line default-param-last
   state: AnswerState = [],
-  action: EditBasicAction
+  action: EditAnswerAction
 ): AnswerState => {
-  switch (action.type) {
-    case EDIT_BASIC: {
-      return action.payload;
-    }
-    default:
-      return state;
-  }
+  return includes(action.type, ANSWER_EDIT_ACTIONS) ? action.payload : state;
 };
 
 export default reducer;

package/src/reducers/ui/index.ts

@@ -3,15 +3,18 @@ import {combineReducers} from 'redux';
 import currentSlideRef, {CurrentSlideRefState} from './current-slide-ref';
 import navigation, {NavigationState} from './navigation';
 import answers, {AnswerState} from './answers';
+import slide, {UISlideState} from './slide';
 
 export type UIState = {
   currentSlideRef: CurrentSlideRefState;
   navigation: NavigationState;
   answers: AnswerState;
+  slide: UISlideState;
 };
 
 export default combineReducers({
   currentSlideRef,
   navigation,
-  answers
+  answers,
+  slide
 });

package/src/reducers/ui/slide.ts

@@ -0,0 +1,43 @@
+import compact from 'lodash/fp/compact';
+import isEmpty from 'lodash/fp/isEmpty';
+import pipe from 'lodash/fp/pipe';
+import {
+  EditAnswerAction,
+  EDIT_BASIC,
+  EDIT_QCM,
+  EDIT_QCM_DRAG,
+  EDIT_QCM_GRAPHIC,
+  EDIT_SLIDER,
+  EDIT_TEMPLATE
+} from '../../actions/ui/answers';
+import {PostAnswerRequestAction, POST_ANSWER_REQUEST} from '../../actions/api/post-answer';
+
+export type UISlideState = {
+  validateButton: boolean;
+};
+
+export const initialState: UISlideState = {validateButton: false};
+
+const reducer = (
+  // eslint-disable-next-line default-param-last
+  state: UISlideState = initialState,
+  action: PostAnswerRequestAction | EditAnswerAction
+): UISlideState => {
+  switch (action.type) {
+    case EDIT_QCM:
+    case EDIT_QCM_GRAPHIC:
+    case EDIT_QCM_DRAG:
+    case EDIT_TEMPLATE:
+    case EDIT_BASIC:
+    case EDIT_SLIDER: {
+      return pipe(compact, isEmpty)(action.payload) ? initialState : {validateButton: true};
+    }
+    case POST_ANSWER_REQUEST: {
+      return initialState;
+    }
+    default:
+      return state;
+  }
+};
+
+export default reducer;

package/src/reducers/ui/test/answers.test.ts

@@ -1,13 +1,33 @@
 import test from 'ava';
 import reducer from '../answers';
-import {EditBasicAction, EDIT_BASIC} from '../../../actions/ui/answers';
+import {EditAnswerAction, ANSWER_EDIT} from '../../../actions/ui/answers';
 
-test('should have inital value', t => {
-  const state = reducer(undefined, {} as EditBasicAction);
+test('should have initial value', t => {
+  const state = reducer(undefined, {} as EditAnswerAction);
   t.deepEqual(state, []);
 });
 
 test('should set the value of EDIT_BASIC action', t => {
-  const state = reducer([], {type: EDIT_BASIC, payload: ['value']});
+  const state = reducer([], {type: ANSWER_EDIT.basic, payload: ['value']});
   t.deepEqual(state, ['value']);
 });
+
+test('should set the value of EDIT_QCM action', t => {
+  const state = reducer([], {type: ANSWER_EDIT.qcm, payload: ['value1', 'value2']});
+  t.deepEqual(state, ['value1', 'value2']);
+});
+
+test('should set the value of EDIT_QCM_GRAPHIC action', t => {
+  const state = reducer([], {type: ANSWER_EDIT.qcmGraphic, payload: ['True', 'False']});
+  t.deepEqual(state, ['True', 'False']);
+});
+
+test('should set the value of EDIT_QCM_DRAG action', t => {
+  const state = reducer([], {type: ANSWER_EDIT.qcmDrag, payload: ['value1', 'value2']});
+  t.deepEqual(state, ['value1', 'value2']);
+});
+
+test('should set the value of EDIT_SLIDER action', t => {
+  const state = reducer([], {type: ANSWER_EDIT.slider, payload: ['5']});
+  t.deepEqual(state, ['5']);
+});

package/src/reducers/ui/test/current-slide-ref.test.ts

@@ -3,7 +3,7 @@ import reducer from '../current-slide-ref';
 import {SetCurrentSlide, SET_CURRENT_SLIDE} from '../../../actions/ui/slides';
 import {freeTextSlide} from '../../../views/slides/test/fixtures/free-text';
 
-test('should have inital value', t => {
+test('should have initial value', t => {
   const state = reducer(undefined, {} as SetCurrentSlide);
   t.is(state, '');
 });

package/src/reducers/ui/test/navigation.test.ts

@@ -1,19 +1,19 @@
 import test from 'ava';
 import reducer from '../navigation';
-import {NavigateTo, NAVIGATE_TO, NAVIGATE_BACK} from '../../../actions/ui/navigation';
+import {NavigateTo, navigateBack, navigateTo} from '../../../actions/ui/navigation';
 
-test('should have inital value', t => {
+test('should have initial value', t => {
   const state = reducer(undefined, {} as NavigateTo);
   t.deepEqual(state, []);
 });
 
 test('should set the value of NAVIGATE_TO and NAVIGATE_BACK action', t => {
-  const state = reducer([], {type: NAVIGATE_TO, payload: 'loader'});
+  const state = reducer([], navigateTo('loader'));
   t.deepEqual(state, ['loader']);
 
-  const updatedState = reducer(state, {type: NAVIGATE_TO, payload: 'skills'});
+  const updatedState = reducer(state, navigateTo('skills'));
   t.deepEqual(updatedState, ['loader', 'skills']);
 
-  const _updatedState = reducer(updatedState, {type: NAVIGATE_BACK});
+  const _updatedState = reducer(updatedState, navigateBack());
   t.deepEqual(_updatedState, ['loader']);
 });

package/src/reducers/ui/test/slide.test.ts

@@ -0,0 +1,15 @@
+import test from 'ava';
+import reducer, {initialState} from '../slide';
+import {EDIT_BASIC} from '../../../actions/ui/answers';
+import {PostAnswerRequestAction} from '../../../actions/api/post-answer';
+
+test('should use initial state if no answers are found when an EditAnswerAction is received', t => {
+  const state = reducer(undefined, {type: EDIT_BASIC, payload: ['']});
+  t.truthy(state);
+  t.false(state.validateButton);
+});
+
+test('should return state directly when there is no corresponding action handler + have an initial state', t => {
+  const state = reducer(undefined, {type: 'NOPE'} as unknown as PostAnswerRequestAction);
+  t.deepEqual(state, initialState);
+});