@coorpacademy/app-review 0.2.8 → 0.2.9

package/src/actions/api/test/fetch-rank.test.ts

@@ -0,0 +1,130 @@
+import test from 'ava';
+import type {Services} from '../../../types/common';
+import type {StoreState} from '../../../reducers';
+import {
+  fetchStartRank,
+  fetchEndRank,
+  RANK_FETCH_START_REQUEST,
+  RANK_FETCH_START_SUCCESS,
+  RANK_FETCH_START_FAILURE,
+  RANK_FETCH_END_REQUEST,
+  RANK_FETCH_END_SUCCESS,
+  RANK_FETCH_END_FAILURE
+} from '../fetch-rank';
+import {services as mockedServices} from '../../../test/util/services.mock';
+import {createTestStore} from '../../test/create-test-store';
+
+const initialState: StoreState = {
+  data: {
+    progression: null,
+    slides: {},
+    skills: [],
+    token: '1234',
+    corrections: {},
+    rank: {}
+  },
+  ui: {
+    currentSlideRef: '',
+    navigation: [],
+    answers: [],
+    slide: {
+      validateButton: false
+    }
+  }
+};
+
+test('should dispatch FETCH_START_SUCCESS action when fetchStartRank returns the start rank', async t => {
+  t.plan(3);
+
+  const services: Services = {
+    ...mockedServices,
+    fetchRank: token => {
+      t.is(token, '1234');
+      return Promise.resolve({rank: 93});
+    }
+  };
+  const expectedActions = [
+    {type: RANK_FETCH_START_REQUEST},
+    {
+      type: RANK_FETCH_START_SUCCESS,
+      payload: {rank: 93}
+    }
+  ];
+
+  const {dispatch} = createTestStore(t, initialState, services, expectedActions);
+  await dispatch(fetchStartRank);
+});
+
+test('should dispatch FETCH_START_FAILURE action when fetchStartRank fails', async t => {
+  t.plan(3);
+
+  const services: Services = {
+    ...mockedServices,
+    fetchRank: token => {
+      t.is(token, '1234');
+      return Promise.reject(new Error('unexpected'));
+    }
+  };
+
+  const expectedActions = [
+    {type: RANK_FETCH_START_REQUEST},
+    {
+      type: RANK_FETCH_START_FAILURE,
+      payload: new Error('unexpected'),
+      error: true
+    }
+  ];
+
+  const {dispatch} = createTestStore(t, initialState, services, expectedActions);
+
+  await dispatch(fetchStartRank);
+});
+
+test('should dispatch FETCH_END_SUCCESS action when fetchEndRank returns the end rank', async t => {
+  t.plan(3);
+
+  const services: Services = {
+    ...mockedServices,
+    fetchRank: token => {
+      t.is(token, '1234');
+      return Promise.resolve({rank: 93});
+    }
+  };
+
+  const expectedActions = [
+    {type: RANK_FETCH_END_REQUEST},
+    {
+      type: RANK_FETCH_END_SUCCESS,
+      payload: {rank: 93}
+    }
+  ];
+
+  const {dispatch} = createTestStore(t, initialState, services, expectedActions);
+
+  await dispatch(fetchEndRank);
+});
+
+test('should dispatch FETCH_END_FAILURE action when fetchEndRank fails', async t => {
+  t.plan(3);
+
+  const services: Services = {
+    ...mockedServices,
+    fetchRank: token => {
+      t.is(token, '1234');
+      return Promise.reject(new Error('unexpected'));
+    }
+  };
+
+  const expectedActions = [
+    {type: RANK_FETCH_END_REQUEST},
+    {
+      type: RANK_FETCH_END_FAILURE,
+      payload: new Error('unexpected'),
+      error: true
+    }
+  ];
+
+  const {dispatch} = createTestStore(t, initialState, services, expectedActions);
+
+  await dispatch(fetchEndRank);
+});

package/src/actions/api/test/fetch-skills.test.ts

@@ -16,7 +16,8 @@ const initialState: StoreState = {
     slides: {},
     skills: [],
     token: '1234',
-    corrections: {}
+    corrections: {},
+    rank: {}
   },
   ui: {
     currentSlideRef: '',

package/src/actions/api/test/fetch-slide.test.ts

@@ -18,7 +18,8 @@ const initialState: StoreState = {
     slides: {},
     skills: [],
     token: '1234',
-    corrections: {}
+    corrections: {},
+    rank: {}
   },
   ui: {
     currentSlideRef: '',

package/src/actions/api/test/post-answer.test.ts

@@ -50,7 +50,8 @@ const initialState: StoreState = {
     },
     skills: [{skillRef, custom: false, name: skillRef, slidesToReview: 5}],
     token: '1234',
-    corrections: {}
+    corrections: {},
+    rank: {}
   },
   ui: {
     currentSlideRef: freeTextSlide._id,

package/src/actions/api/test/post-progression.test.ts

@@ -19,7 +19,8 @@ const initialState: StoreState = {
     slides: {},
     skills: [],
     token: '1234',
-    corrections: {}
+    corrections: {},
+    rank: {}
   },
   ui: {
     currentSlideRef: '',

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

@@ -10,7 +10,8 @@ const initialState: StoreState = {
     slides: {},
     skills: [],
     token: '1234',
-    corrections: {}
+    corrections: {},
+    rank: {}
   },
   ui: {
     currentSlideRef: '',

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

@@ -44,7 +44,8 @@ const initialState: StoreState = {
     slides: {},
     skills: [],
     token: '1234',
-    corrections: {}
+    corrections: {},
+    rank: {}
   },
   ui: {
     currentSlideRef: '',

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

@@ -11,7 +11,8 @@ const initialState: StoreState = {
     slides: {},
     skills: [],
     token: '1234',
-    corrections: {}
+    corrections: {},
+    rank: {}
   },
   ui: {
     currentSlideRef: '',

package/src/reducers/data/corrections.ts

@@ -1,5 +1,5 @@
 import set from 'lodash/fp/set';
-import {CorrectionFromAPI} from '../../types/common';
+import type {CorrectionFromAPI} from '../../types/common';
 import {
   ReceivedCorrection,
   CORRECTION_FETCH_SUCCESS,

package/src/reducers/data/index.ts

@@ -5,6 +5,7 @@ import progression, {ProgressionState} from './progression';
 import skills, {SkillsState} from './skills';
 import slides, {SlidesState} from './slides';
 import token, {TokenState} from './token';
+import rank, {RankState} from './rank';
 
 export type DataState = {
   corrections: CorrectionsState;
@@ -12,6 +13,7 @@ export type DataState = {
   skills: SkillsState;
   slides: SlidesState;
   token: TokenState;
+  rank: RankState;
 };
 
-export default combineReducers({corrections, progression, skills, slides, token});
+export default combineReducers({corrections, progression, skills, slides, token, rank});

package/src/reducers/data/rank.ts

@@ -0,0 +1,60 @@
+import {get, isNull, isUndefined, pipe, set, unset, update} from 'lodash/fp';
+import {
+  RankAction,
+  RANK_FETCH_START_REQUEST,
+  RANK_FETCH_START_SUCCESS,
+  RANK_FETCH_START_FAILURE,
+  RANK_FETCH_END_REQUEST,
+  RANK_FETCH_END_SUCCESS,
+  RANK_FETCH_END_FAILURE
+} from '../../actions/api/fetch-rank';
+
+export type RankState = {
+  start?: number | null;
+  end?: number | null;
+};
+
+const initialState: RankState = {};
+
+const reducer = (
+  // eslint-disable-next-line default-param-last
+  state: RankState = initialState,
+  action: RankAction
+): RankState => {
+  switch (action.type) {
+    case RANK_FETCH_START_REQUEST: {
+      return update(
+        'start',
+        (startRank: RankState['start']) => (isUndefined(startRank) ? null : startRank),
+        state
+      );
+    }
+    case RANK_FETCH_START_SUCCESS: {
+      const {payload} = action;
+      return set('start', payload.rank, state);
+    }
+    case RANK_FETCH_START_FAILURE: {
+      if (pipe(get('start'), isNull)(state)) return unset('start', state);
+      return state;
+    }
+    case RANK_FETCH_END_REQUEST: {
+      return update(
+        'end',
+        (endRank: RankState['end']) => (isUndefined(endRank) ? null : endRank),
+        state
+      );
+    }
+    case RANK_FETCH_END_SUCCESS: {
+      const {payload} = action;
+      return set('end', payload.rank, state);
+    }
+    case RANK_FETCH_END_FAILURE: {
+      if (pipe(get('end'), isNull)(state)) return unset('end', state);
+      return state;
+    }
+    default:
+      return state;
+  }
+};
+
+export default reducer;

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

@@ -0,0 +1,78 @@
+import test from 'ava';
+import reducer from '../rank';
+import {
+  RankAction,
+  RANK_FETCH_START_REQUEST,
+  RANK_FETCH_START_SUCCESS,
+  RANK_FETCH_START_FAILURE,
+  RANK_FETCH_END_REQUEST,
+  RANK_FETCH_END_SUCCESS,
+  RANK_FETCH_END_FAILURE
+} from '../../../actions/api/fetch-rank';
+
+test('should have initial value', t => {
+  const state = reducer(undefined, {} as RankAction);
+  t.deepEqual(state, {});
+});
+
+test("should set the start value to null if the value doesn't exist of FETCH_START_REQUEST action", t => {
+  const state = reducer({}, {type: RANK_FETCH_START_REQUEST});
+  t.deepEqual(state, {
+    start: null
+  });
+});
+
+test('should do nothing if a start value already exists of FETCH_START_REQUEST action', t => {
+  const state = reducer({start: 93}, {type: RANK_FETCH_START_REQUEST});
+  t.deepEqual(state, {
+    start: 93
+  });
+});
+
+test('should set the start value of FETCH_START_SUCCESS action', t => {
+  const state = reducer({}, {type: RANK_FETCH_START_SUCCESS, payload: {rank: 93}});
+  t.deepEqual(state, {
+    start: 93
+  });
+});
+
+test('should unset the start value if the value is null of FETCH_START_FAILURE action', t => {
+  const state = reducer({start: null}, {type: RANK_FETCH_START_FAILURE});
+  t.deepEqual(state, {});
+});
+
+test('should do nothing if the start value already exists of FETCH_START_FAILURE action', t => {
+  const state = reducer({start: 93}, {type: RANK_FETCH_START_FAILURE});
+  t.deepEqual(state, {start: 93});
+});
+
+test("should set the end value to null if the value doesn't exist of FETCH_END_REQUEST action", t => {
+  const state = reducer({}, {type: RANK_FETCH_END_REQUEST});
+  t.deepEqual(state, {
+    end: null
+  });
+});
+
+test('should do nothing if an end value already exists of FETCH_END_REQUEST action', t => {
+  const state = reducer({end: 94}, {type: RANK_FETCH_END_REQUEST});
+  t.deepEqual(state, {
+    end: 94
+  });
+});
+
+test('should set the end value of FETCH_END_SUCCESS action', t => {
+  const state = reducer({}, {type: RANK_FETCH_END_SUCCESS, payload: {rank: 94}});
+  t.deepEqual(state, {
+    end: 94
+  });
+});
+
+test('should unset the end value if the value is null of FETCH_END_FAILURE action', t => {
+  const state = reducer({end: null}, {type: RANK_FETCH_END_FAILURE});
+  t.deepEqual(state, {});
+});
+
+test('should do nothing if the end value already exists of FETCH_END_FAILURE action', t => {
+  const state = reducer({end: 94}, {type: RANK_FETCH_END_FAILURE});
+  t.deepEqual(state, {end: 94});
+});

package/src/reducers/index.ts

@@ -1,7 +1,7 @@
 import {combineReducers} from 'redux';
 
-import data, {DataState} from './data';
-import ui, {UIState} from './ui';
+import data, {type DataState} from './data';
+import ui, {type UIState} from './ui';
 
 export type StoreState = {
   ui: UIState;

package/src/reducers/ui/slide.ts

@@ -17,6 +17,7 @@ import {CORRECTION_FETCH_SUCCESS, ReceivedCorrection} from '../../actions/api/fe
 export type UISlideState = {
   validateButton: boolean;
   animateCorrectionPopin?: boolean;
+  showCorrectionPopin?: boolean;
 };
 
 export const initialState: UISlideState = {validateButton: false};
@@ -39,7 +40,7 @@ const reducer = (
       return initialState;
     }
     case CORRECTION_FETCH_SUCCESS: {
-      return set(['animateCorrectionPopin'], true, state);
+      return pipe(set(['animateCorrectionPopin'], true), set(['showCorrectionPopin'], true))(state);
     }
     default:
       return state;

package/src/test/util/services.mock.ts

@@ -288,6 +288,23 @@ export const postAnswerResponses: Record<string, ProgressionFromAPI> = {
   }
 };
 
+export const incorrectFreeTextPostAnswerResponse: ProgressionFromAPI = {
+  ...postAnswerResponses[freeTextSlide.universalRef],
+  state: {
+    ...postAnswerResponses[freeTextSlide.universalRef].state,
+    isCorrect: false,
+    allAnswers: [
+      {
+        slideRef: freeTextSlide.universalRef,
+        isCorrect: false,
+        answer: ['NOPE']
+      }
+    ],
+    pendingSlides: [freeTextSlide.universalRef],
+    stars: 0
+  }
+};
+
 export const progressionSlideWithPendingSlide: ProgressionFromAPI = {
   _id: '62b1d1087aa12f00253f40ee',
   content,

package/src/views/skills/test/skills.test.ts

@@ -11,7 +11,8 @@ test('should create initial props when there are no skills on the state', t => {
       skills: [],
       slides: {},
       token: '1234',
-      corrections: {}
+      corrections: {},
+      rank: {}
     },
     ui: {
       currentSlideRef: '',
@@ -56,7 +57,8 @@ test('should create initial props when skills on the state', t => {
       ],
       slides: {},
       token: '1234',
-      corrections: {}
+      corrections: {},
+      rank: {}
     },
     ui: {
       currentSlideRef: '',

package/src/views/slides/index.ts

@@ -8,11 +8,12 @@ import reduce from 'lodash/fp/reduce';
 import set from 'lodash/fp/set';
 import slice from 'lodash/fp/slice';
 import toInteger from 'lodash/fp/toInteger';
-import {Dispatch} from 'redux';
-import {ProgressionAnswerItem, ProgressionFromAPI} from '../../types/common';
-import {SlideIndexes} from '../../common';
-import {StoreState} from '../../reducers';
-import {AnswerUI} from '../../types/slides';
+import type {Dispatch} from 'redux';
+import join from 'lodash/fp/join';
+import type {ProgressionAnswerItem, ProgressionFromAPI} from '../../types/common';
+import type {SlideIndexes} from '../../common';
+import type {StoreState} from '../../reducers';
+import type {AnswerUI} from '../../types/slides';
 import {postAnswer} from '../../actions/api/post-answer';
 import {mapApiSlideToUi} from './map-api-slide-to-ui';
 
@@ -47,22 +48,27 @@ type SlidesStack = {
   [key in SlideIndexes]: UISlide;
 };
 
+type CorrectionPopinInformation = {
+  label: string;
+  message: string;
+};
+
+type CorrectionPopinKlf = {
+  label: string;
+  tooltip: string;
+};
+
+type CorrectionPopinNext = {
+  label: string;
+  ariaLabel: string;
+};
+
 export type CorrectionPopinProps = {
-  klf: {
-    label: string;
-    onClick: Function;
-    tooltip: string;
-  };
-  information: {
-    label: string;
-    message: string;
-  };
-  next: {
-    label: string;
-    ariaLabel: string;
-  };
-  successLabel: string;
-  failureLabel: string;
+  klf?: CorrectionPopinKlf;
+  information: CorrectionPopinInformation;
+  next: CorrectionPopinNext;
+  resultLabel: string;
+  type: 'right' | 'wrong';
 };
 
 export type SlidesViewProps = {
@@ -164,7 +170,15 @@ const buildStackSlides = (state: StoreState, dispatch: Dispatch): SlidesStack =>
       const parentContentTitle = getOr('', 'parentContentTitle.title', slideFromAPI);
       const parentContentType = getOr('', 'parentContentTitle.type', slideFromAPI);
 
+      const isCurrentSlideRef = currentSlideRef === slideRef;
+      const animateCorrectionPopin =
+        isCurrentSlideRef && getOr(false, ['ui', 'slide', 'animateCorrectionPopin'], state);
+      const showCorrectionPopin =
+        isCurrentSlideRef && getOr(false, ['ui', 'slide', 'showCorrectionPopin'], state);
+
       const updatedUiSlide = pipe(
+        set('showCorrectionPopin', showCorrectionPopin),
+        set('animateCorrectionPopin', animateCorrectionPopin),
         set('loading', false),
         set('questionText', questionText),
         set('answerUI', answerUI),
@@ -261,7 +275,35 @@ export const buildStepItems = (state: StoreState): StepItem[] => {
   return steps;
 };
 
+const getCorrectionPopinProps = (
+  isCorrect: boolean,
+  correctAnswer: string[],
+  klf: string
+): CorrectionPopinProps => ({
+  klf: isCorrect
+    ? undefined
+    : {
+        label: '_klf',
+        tooltip: klf
+      },
+  resultLabel: isCorrect ? '_right' : '_wrong',
+  information: {
+    label: isCorrect ? '_klf' : '_correctAnswer',
+    message: isCorrect ? klf : join(',', correctAnswer)
+  },
+  next: {
+    ariaLabel: '_correctionNextAriaLabel',
+    label: '_correctionNextLabel'
+  },
+  type: isCorrect ? 'right' : 'wrong'
+});
+
 export const mapStateToSlidesProps = (state: StoreState, dispatch: Dispatch): SlidesViewProps => {
+  const currentSlideRef = get(['ui', 'currentSlideRef'], state);
+  const correction = get(['data', 'corrections', currentSlideRef], state);
+  const isCorrect = get(['data', 'progression', 'state', 'isCorrect'], state);
+  const klf = getOr('', ['data', 'slides', currentSlideRef, 'klf'], state);
+
   return {
     header: {
       mode: '__revision_mode',
@@ -279,11 +321,12 @@ export const mapStateToSlidesProps = (state: StoreState, dispatch: Dispatch): Sl
       validateButton: {
         label: '__validate',
         disabled: !get('ui.slide.validateButton', state),
-        onClick: (): void => {
+        onClick: /* istanbul ignore next */ (): void => {
           dispatch(postAnswer);
         }
       },
-      correctionPopinProps: undefined,
+      correctionPopinProps:
+        correction && getCorrectionPopinProps(isCorrect, correction.correctAnswer, klf),
       endReview: false
     },
     congratsProps: undefined