@coorpacademy/app-review 0.1.17 → 0.1.19

package/src/actions/ui/answers.ts

@@ -29,25 +29,27 @@ export type EditAnswerAction = {
   payload: string[];
 };
 
-const buildAnswer = (userAnswers: string[], questionType: string, newValue: string): 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]);
+      const firstValue = newValue[0];
+      return includes(firstValue, userAnswers)
+        ? pull(firstValue, userAnswers)
+        : flatten([...userAnswers, firstValue]);
     }
     case 'basic':
     case 'slider':
-      return [newValue];
+    case 'template':
+      return newValue;
     default:
       return [];
   }
 };
 
 export const editAnswer =
-  (answer: string) =>
+  (answer: string[]) =>
   (dispatch: Dispatch, getState: () => StoreState): EditAnswerAction => {
     const state = getState();
     const currentSlideRef = get(['ui', 'currentSlideRef'])(state);

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

@@ -9,6 +9,8 @@ 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 {templateSlide} from '../../../views/slides/test/fixtures/template';
+
 import {StoreState} from '../../../reducers';
 import {editAnswer, ANSWER_EDIT} from '../answers';
 
@@ -64,7 +66,7 @@ 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'));
+  await dispatch(editAnswer(['My Answer']));
 });
 
 test('should dispatch EDIT_QCM action when editAnswer is called', async t => {
@@ -72,7 +74,7 @@ test('should dispatch EDIT_QCM action when editAnswer is called', async t => {
   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'));
+  await dispatch(editAnswer(['My Second Answer']));
 });
 
 test('should dispatch EDIT_QCM_GRAPHIC action when editAnswer is called', async t => {
@@ -82,7 +84,7 @@ test('should dispatch EDIT_QCM_GRAPHIC action when editAnswer is called', async
     {type: ANSWER_EDIT.qcmGraphic, payload: ['My First Answer', 'My Third Answer']}
   ];
   const {dispatch} = createTestStore(t, state, services, expectedActions);
-  await dispatch(editAnswer('My Second Answer'));
+  await dispatch(editAnswer(['My Second Answer']));
 });
 
 test('should dispatch EDIT_QCM_DRAG action when editAnswer is called', async t => {
@@ -92,12 +94,22 @@ test('should dispatch EDIT_QCM_DRAG action when editAnswer is called', async t =
     {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'));
+  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'));
+  await dispatch(editAnswer(['5']));
+});
+
+test('should dispatch EDIT_TEMPLATE action when editAnswer is called', async t => {
+  let state = buildInitialState(initialState, templateSlide);
+  state = set(['ui', 'answers'], ['Catalogue', '', 'étoiles'], state);
+  const expectedActions = [
+    {type: ANSWER_EDIT.template, payload: ['Catalogue', 'My Answer', 'étoiles']}
+  ];
+  const {dispatch} = createTestStore(t, state, services, expectedActions);
+  await dispatch(editAnswer(['Catalogue', 'My Answer', 'étoiles']));
 });

package/src/reducers/data/progression.ts

@@ -1,3 +1,4 @@
+import {PostAnswerSuccessAction, POST_ANSWER_SUCCESS} from '../../actions/api/post-answer';
 import {POST_PROGRESSION_SUCCESS, ReceivedProgression} from '../../actions/api/post-progression';
 import {ProgressionFromAPI} from '../../types/common';
 
@@ -6,9 +7,10 @@ export type ProgressionState = ProgressionFromAPI | null;
 const reducer = (
   // eslint-disable-next-line default-param-last
   state: ProgressionState = null,
-  action: ReceivedProgression
+  action: ReceivedProgression | PostAnswerSuccessAction
 ): ProgressionState => {
   switch (action.type) {
+    case POST_ANSWER_SUCCESS:
     case POST_PROGRESSION_SUCCESS: {
       const progression = action.payload;
       return progression;

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

@@ -1,7 +1,8 @@
 import test from 'ava';
 import reducer from '../progression';
 import {POST_PROGRESSION_SUCCESS, ReceivedProgression} from '../../../actions/api/post-progression';
-import {ProgressionFromAPI} from '../../../types/common';
+import {POST_ANSWER_SUCCESS} from '../../../actions/api/post-answer';
+import {postAnswerResponse, postProgressionResponse} from '../../../test/util/services.mock';
 
 test('should have initial value', t => {
   const state = reducer(undefined, {} as ReceivedProgression);
@@ -9,34 +10,17 @@ test('should have initial value', t => {
 });
 
 test('should set the value of POST_PROGRESSION_SUCCESS action', t => {
-  const progression: ProgressionFromAPI = {
-    _id: '62b1d1087aa12f00253f40ee',
-    content: {
-      ref: '_skill-ref',
-      type: 'skill'
-    },
-    engine: {
-      ref: 'review'
-    },
-    state: {
-      allAnswers: [],
-      isCorrect: true,
-      nextContent: {
-        ref: 'sli_N1XACJobn',
-        type: 'slide'
-      },
-      pendingSlides: [],
-      slides: [],
-      step: {
-        current: 1
-      },
-      stars: 0
-    }
-  };
-
   const state = reducer(null, {
     type: POST_PROGRESSION_SUCCESS,
-    payload: progression
+    payload: postProgressionResponse
+  });
+  t.deepEqual(state, postProgressionResponse);
+});
+
+test('should set the value of POST_ANSWER_SUCCESS action', t => {
+  const state = reducer(null, {
+    type: POST_ANSWER_SUCCESS,
+    payload: postAnswerResponse
   });
-  t.deepEqual(state, progression);
+  t.deepEqual(state, postAnswerResponse);
 });

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

@@ -31,3 +31,8 @@ test('should set the value of EDIT_SLIDER action', t => {
   const state = reducer([], {type: ANSWER_EDIT.slider, payload: ['5']});
   t.deepEqual(state, ['5']);
 });
+
+test('should set the value of EDIT_TEMPLATE action', t => {
+  const state = reducer([], {type: ANSWER_EDIT.template, payload: ['value1', 'value2']});
+  t.deepEqual(state, ['value1', 'value2']);
+});

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

@@ -2,6 +2,7 @@ import {qcmSlide} from '../../views/slides/test/fixtures/qcm';
 import {qcmGraphicSlide} from '../../views/slides/test/fixtures/qcm-graphic';
 import {freeTextSlide} from '../../views/slides/test/fixtures/free-text';
 import {sliderSlide} from '../../views/slides/test/fixtures/slider';
+import {templateSlide} from '../../views/slides/test/fixtures/template';
 import {ProgressionFromAPI, Services, SlideFromAPI} from '../../types/common';
 
 const getSlideFixture = (ref: string): SlideFromAPI => {
@@ -12,6 +13,8 @@ const getSlideFixture = (ref: string): SlideFromAPI => {
       return qcmGraphicSlide;
     case freeTextSlide.universalRef:
       return freeTextSlide;
+    case templateSlide.universalRef:
+      return templateSlide;
     default:
       return sliderSlide;
   }
@@ -32,7 +35,7 @@ const fetchSkillsResponse = [
   }
 ];
 
-const postProgressionResponse: ProgressionFromAPI = {
+export const postProgressionResponse: ProgressionFromAPI = {
   _id: '62b1d1087aa12f00253f40ee',
   content: {
     ref: '_skill-ref',

package/src/views/slides/index.ts

@@ -138,7 +138,7 @@ export const initialState: SlidesStack = {
 const getProgressionSlidesRefs = (progression: ProgressionFromAPI): string[] => {
   if (progression.state.step.current < 5) {
     const slideRef = progression.state.nextContent.ref;
-    return concat([slideRef], progression.state.slides);
+    return concat(progression.state.slides, [slideRef]);
   }
   return slice(0, 5, progression.state.slides);
 };

package/src/views/slides/map-api-slide-to-ui.ts

@@ -1,5 +1,6 @@
 import {
   concat,
+  constant,
   divide,
   get,
   getOr,
@@ -7,12 +8,15 @@ import {
   includes,
   indexOf,
   isEmpty,
+  isNil,
   map,
   multiply,
   pipe,
   rangeStep,
   round,
+  set,
   size,
+  times,
   toInteger,
   toString as _toString,
   __
@@ -53,7 +57,7 @@ const qcmProps =
           title: label,
           selected: includes(label, answers),
           onClick: (): void => {
-            dispatch(editAnswer(label));
+            dispatch(editAnswer([label]));
           },
           ariaLabel: choice.label
         };
@@ -74,7 +78,7 @@ const qcmDragProps =
           selected: includes(label, answers),
           order: indexInAnswer,
           onClick: (): void => {
-            dispatch(editAnswer(label));
+            dispatch(editAnswer([label]));
           }
         };
       }, question.content.choices)
@@ -93,30 +97,49 @@ const qcmGraphicProps =
           image: get('media.src.0.url', choice),
           selected: includes(label, answers),
           onClick: (): void => {
-            dispatch(editAnswer(label));
+            dispatch(editAnswer([label]));
           }
         };
       }, question.content.choices)
     };
   };
 
-const templateTextProps = (choice: ChoiceFromAPI, index: number): TextTemplate => {
-  // TODO: EDIT_CHOICES -> getAnswerValues
-  const answers: string[] = [];
+const updateTemplateAnswer = (
+  text: string,
+  _answers: string[],
+  index: number,
+  max: number
+): string[] => {
+  const answers = isEmpty(_answers) ? times(constant(undefined), max) : _answers;
+  return map(a => (isNil(a) ? '' : a), set(index, text, answers)) as string[];
+};
+
+const templateTextProps = (
+  dispatch: Dispatch,
+  answers: string[],
+  choice: ChoiceFromAPI,
+  index: number,
+  maxLength: number
+): TextTemplate => {
   return {
     type: 'text',
-    name: getOr('', 'name', choice), // TODO prendre valeur depuis les données de l'api
+    name: getOr('', 'name', choice),
     placeholder: 'Type here',
     value: get(index, answers),
-    // TODO: EDIT_CHOICES
-    // eslint-disable-next-line no-console
-    onChange: () => console.log('TODO: on choice change')
+    onChange: (text: string): void => {
+      const newAnswers = updateTemplateAnswer(text, answers, index, maxLength);
+      dispatch(editAnswer(newAnswers));
+    }
   };
 };
 
-const templateSelectProps = (choice: ChoiceFromAPI, index: number): SelectionTemplate => {
-  // TODO: EDIT_CHOICES -> getAnswerValues
-  const answers: string[] = [];
+const templateSelectProps = (
+  dispatch: Dispatch,
+  answers: string[],
+  choice: ChoiceFromAPI,
+  index: number,
+  maxLength: number
+): SelectionTemplate => {
   const answer = get(index, answers);
   const temporaryOption = {
     name: 'Select an answer', // TODO translate
@@ -137,24 +160,29 @@ const templateSelectProps = (choice: ChoiceFromAPI, index: number): SelectionTem
   return {
     type: 'select',
     name: getOr('', 'name', choice),
-    // TODO: EDIT_CHOICES
-    // eslint-disable-next-line no-console
-    onChange: () => console.log('TODO: on choice change'),
+    onChange: (text: string): void => {
+      const newAnswers = updateTemplateAnswer(text, answers, index, maxLength);
+      dispatch(editAnswer(newAnswers));
+    },
     options: isEmpty(answer) ? concat([temporaryOption], selectOptions) : selectOptions
   };
 };
 
-const templateProps = (question: TemplateQuestion): Template => {
-  // TODO: EDIT_CHOICES -> getChoices
-  const choices = question.content.choices;
-  return {
-    type: 'template',
-    template: get('content.template', question),
-    answers: choices.map((choice, index) =>
-      choice.type === 'text' ? templateTextProps(choice, index) : templateSelectProps(choice, index)
-    )
+const templateProps =
+  (dispatch: Dispatch) =>
+  (answers: string[], question: TemplateQuestion): Template => {
+    const choices = question.content.choices;
+    const maxLength = size(choices);
+    return {
+      type: 'template',
+      template: get('content.template', question),
+      answers: choices.map((choice, index) =>
+        choice.type === 'text'
+          ? templateTextProps(dispatch, answers, choice, index, maxLength)
+          : templateSelectProps(dispatch, answers, choice, index, maxLength)
+      )
+    };
   };
-};
 
 const basicProps =
   (dispatch: Dispatch) =>
@@ -164,7 +192,7 @@ const basicProps =
       placeholder: question.content.placeholder || '',
       value: answers[0] || '',
       onChange: (text: string): void => {
-        dispatch(editAnswer(text));
+        dispatch(editAnswer([text]));
       }
     };
   };
@@ -196,8 +224,13 @@ const sliderProps =
       title: `${currentValue} ${question.content.unitLabel}`,
       value: sliderPosition,
       onChange: (position: number): void => {
-        const newValue = pipe(multiply(maxValue), round, get(__, values), _toString)(position);
-        dispatch(editAnswer(newValue));
+        const newValue: string = pipe(
+          multiply(maxValue),
+          round,
+          get(__, values),
+          _toString
+        )(position);
+        dispatch(editAnswer([newValue]));
       }
     };
   };
@@ -226,7 +259,7 @@ const getAnswerUIModel = (
       return basicProps(dispatch)(answers, question as BasicQuestion);
 
     case 'template':
-      return templateProps(question as TemplateQuestion);
+      return templateProps(dispatch)(answers, question as TemplateQuestion);
 
     case 'slider':
       return sliderProps(dispatch)(answers, question as SliderQuestion);

package/src/views/slides/test/fixtures/{select-template.ts → template.ts}

@@ -2,11 +2,11 @@ import noop from 'lodash/fp/noop';
 import {UISlide} from '../..';
 import {SlideFromAPI} from '../../../../types/common';
 
-export const selectTemplateSlide: SlideFromAPI = {
+export const templateSlide: SlideFromAPI = {
   question: {
     content: {
       template:
-        'La vue {{sel80495}} présente la liste des utilisateurs ayant le plus grand nombre d’étoiles cumulées.',
+        'La vue {{sel80495}} présente la liste des   {{inp58402}}   ayant le plus grand nombre d’{{sel80496}} cumulées.',
       choices: [
         {
           items: [
@@ -34,6 +34,45 @@ export const selectTemplateSlide: SlideFromAPI = {
           _id: '5b57464e3b594d002e8829f3',
           name: 'sel80495',
           type: 'select'
+        },
+        {
+          media: {
+            src: [],
+            posters: [],
+            subtitles: []
+          },
+          items: [],
+          _id: '62433c2c58920f02c4950de0',
+          type: 'text',
+          name: 'inp58402',
+          id: '62433c2c58920f02c4950de0'
+        },
+        {
+          items: [
+            {
+              _id: '5b57464e3b594d002e8829f7',
+              value: 'sli_N13-hG3kX.choice_NJgC3aznJm',
+              text: 'étoiles'
+            },
+            {
+              _id: '5b57464e3b594d002e8829f6',
+              value: 'sli_N13-hG3kX.choice_EJZ02aMny7',
+              text: 'idées'
+            },
+            {
+              _id: '5b57464e3b594d002e8829f5',
+              value: 'sli_N13-hG3kX.choice_4keCaf21Q',
+              text: 'envies'
+            },
+            {
+              _id: '5b57464e3b594d002e8829f4',
+              value: 'sli_N13-hG3kX.choice_NkbJAMn17',
+              text: 'images'
+            }
+          ],
+          _id: '5b57464e3b594d002e8829f3',
+          name: 'sel80496',
+          type: 'select'
         }
       ]
     },
@@ -52,14 +91,14 @@ export const selectTemplateSlide: SlideFromAPI = {
   }
 };
 
-export const selectTemplateUISlide: Partial<UISlide> = {
+export const templateUISlide: Partial<UISlide> = {
   questionText: 'Complétez la phrase ci-dessous.',
   answerUI: {
     help: 'Saisissez votre réponse ou sélectionnez la bonne réponse dans le(s) menu(s) déroulant(s).',
     model: {
       type: 'template',
       template:
-        'La vue {{sel80495}} présente la liste des utilisateurs ayant le plus grand nombre d’étoiles cumulées.',
+        'La vue {{sel80495}} présente la liste des   {{inp58402}}   ayant le plus grand nombre d’{{sel80496}} cumulées.',
       answers: [
         {
           type: 'select',
@@ -92,6 +131,45 @@ export const selectTemplateUISlide: Partial<UISlide> = {
               selected: false
             }
           ]
+        },
+        {
+          type: 'text',
+          name: 'inp58402',
+          placeholder: 'Type here',
+          value: undefined,
+          onChange: noop
+        },
+        {
+          type: 'select',
+          name: 'sel80496',
+          onChange: noop,
+          options: [
+            {name: 'Select an answer', value: '', validOption: false, selected: true},
+            {
+              name: 'étoiles',
+              value: 'étoiles',
+              validOption: true,
+              selected: false
+            },
+            {
+              name: 'idées',
+              value: 'idées',
+              validOption: true,
+              selected: false
+            },
+            {
+              name: 'envies',
+              value: 'envies',
+              validOption: true,
+              selected: false
+            },
+            {
+              name: 'images',
+              value: 'images',
+              validOption: true,
+              selected: false
+            }
+          ]
         }
       ]
     }