@coorpacademy/app-review 0.1.16 → 0.1.17

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

@@ -1,82 +1,100 @@
+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 {Services} from '../../types/common';
+import {sliderSlide} from '../../views/slides/test/fixtures/slider';
+import {ProgressionFromAPI, Services, SlideFromAPI} from '../../types/common';
 
-export const services: Services = {
-  fetchSkills: () => {
-    return Promise.resolve([
-      {
-        skillRef: '_skill-ref',
-        slidesToReview: 2,
-        name: 'skill-test',
-        custom: false
-      },
-      {
-        skillRef: '_skill-ref-2',
-        slidesToReview: 2,
-        name: 'skill-test-2',
-        custom: true
-      }
-    ]);
+const getSlideFixture = (ref: string): SlideFromAPI => {
+  switch (ref) {
+    case qcmSlide.universalRef:
+      return qcmSlide;
+    case qcmGraphicSlide.universalRef:
+      return qcmGraphicSlide;
+    case freeTextSlide.universalRef:
+      return freeTextSlide;
+    default:
+      return sliderSlide;
+  }
+};
+
+const fetchSkillsResponse = [
+  {
+    skillRef: '_skill-ref',
+    slidesToReview: 2,
+    name: 'skill-test',
+    custom: false
   },
-  fetchSlide: ref => {
-    return Promise.resolve({...freeTextSlide, universalRef: ref, id: ref});
+  {
+    skillRef: '_skill-ref-2',
+    slidesToReview: 2,
+    name: 'skill-test-2',
+    custom: true
+  }
+];
+
+const postProgressionResponse: ProgressionFromAPI = {
+  _id: '62b1d1087aa12f00253f40ee',
+  content: {
+    ref: '_skill-ref',
+    type: 'skill'
   },
-  postProgression: () => {
-    return Promise.resolve({
-      _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
-      }
-    });
+  engine: {
+    ref: 'review'
+  },
+  state: {
+    allAnswers: [],
+    isCorrect: true,
+    nextContent: {
+      ref: 'sli_VJYjJnJhg',
+      type: 'slide'
+    },
+    pendingSlides: [],
+    slides: [],
+    step: {
+      current: 1
+    },
+    stars: 0
+  }
+};
+
+export const postAnswerResponse: ProgressionFromAPI = {
+  _id: '62b1d1087aa12f00253f40ee',
+  content: {
+    ref: '_skill-ref',
+    type: 'skill'
   },
-  postAnswer: () => {
-    return Promise.resolve({
-      _id: '62b1d1087aa12f00253f40ee',
-      content: {
-        ref: '_skill-ref',
-        type: 'skill'
-      },
-      engine: {
-        ref: 'review'
-      },
-      state: {
-        allAnswers: [
-          {
-            slideRef: 'sli_N1XACJobn',
-            isCorrect: true,
-            answer: ['Le créateur peut fixer un pourcentage pour chaque transaction future']
-          }
-        ],
+  engine: {
+    ref: 'review'
+  },
+  state: {
+    allAnswers: [
+      {
+        slideRef: 'sli_VJYjJnJhg',
         isCorrect: true,
-        nextContent: {
-          ref: 'sli_VkSQroQnx',
-          type: 'slide'
-        },
-        pendingSlides: [],
-        slides: ['sli_N1XACJobn'],
-        step: {
-          current: 2
-        },
-        stars: 4
+        answer: ['Benchmark']
       }
-    });
+    ],
+    isCorrect: true,
+    nextContent: {
+      ref: 'sli_VkSQroQnx',
+      type: 'slide'
+    },
+    content: {
+      ref: 'sli_VJYjJnJhg',
+      type: 'slide'
+    },
+    pendingSlides: [],
+    slides: ['sli_VJYjJnJhg'],
+    step: {
+      current: 2
+    },
+    stars: 4
   }
 };
+
+export const services: Services = {
+  fetchSkills: () => Promise.resolve(fetchSkillsResponse),
+  fetchSlide: ref => Promise.resolve({...getSlideFixture(ref), universalRef: ref, id: ref}),
+  postProgression: () => Promise.resolve(postProgressionResponse),
+  postAnswer: () => Promise.resolve(postAnswerResponse)
+};

package/src/types/common.ts

@@ -1,6 +1,3 @@
-import {SlideIndexes} from '../common';
-import {AnswerUI} from './slides';
-
 // TODO use type from components
 type TemplateContextValues = {
   brandTheme?: unknown;
@@ -172,33 +169,6 @@ export type JWT = {
   host: string;
 };
 
-type SlideUIAnimations = 'unstack' | 'restack';
-
-export type NextUISlide = {
-  questionText?: string;
-  answerUI?: AnswerUI;
-  hidden?: boolean;
-  position?: number;
-  animationType?: SlideUIAnimations;
-  isCorrect?: boolean;
-  endReview?: boolean;
-};
-
-export type UISlide = {
-  questionText?: string;
-  answerUI?: AnswerUI;
-  hidden?: boolean;
-  position: number;
-  animationType?: SlideUIAnimations;
-  isCorrect?: boolean;
-  endReview?: boolean;
-  nextContent?: NextUISlide;
-};
-
-export type FinishedSlides = {
-  [key in SlideIndexes]?: true;
-};
-
 export type WithRequired<T, K extends keyof T> = T & {
   // the "-" is a Mapping Modifier, removes optionality from a prop
   [P in K]-?: T[P];

package/src/views/skills/index.ts

@@ -28,11 +28,7 @@ type SkillsProps = NoSkillsProps & {
 
 export {SkillsProps};
 
-export const mapStateToSkillsProps = (state: StoreState): SkillsProps | null => {
-  if (!state.data.skills) {
-    return null;
-  }
-
+export const mapStateToSkillsProps = (state: StoreState): SkillsProps => {
   return {
     title: '@todo title',
     titleNoSkills: '@todo titleNoSkills',

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

@@ -0,0 +1,101 @@
+import test from 'ava';
+import map from 'lodash/fp/map';
+import omit from 'lodash/fp/omit';
+import {StoreState} from '../../../reducers';
+import {mapStateToSkillsProps} from '..';
+
+test('should create initial props when there are no skills on the state', t => {
+  const state: StoreState = {
+    data: {
+      progression: null,
+      skills: [],
+      slides: {},
+      token: '1234'
+    },
+    ui: {
+      currentSlideRef: '',
+      navigation: ['loader', 'skills'],
+      answers: [],
+      slide: {
+        validateButton: false
+      }
+    }
+  };
+
+  const props = mapStateToSkillsProps(state);
+
+  t.deepEqual(props, {
+    title: '@todo title',
+    titleNoSkills: '@todo titleNoSkills',
+    textNoSkills: '@todo textNoSkills',
+    iconSkillAriaLabel: '@todo iconSkillAriaLabel',
+    isLoading: false,
+    isLoadingAriaLabel: '@todo loading',
+    listSkills: []
+  });
+});
+
+test('should create initial props when skills on the state', t => {
+  const state: StoreState = {
+    data: {
+      progression: null,
+      skills: [
+        {
+          skillRef: '_skill-ref',
+          slidesToReview: 2,
+          name: 'skill-test',
+          custom: false
+        },
+        {
+          skillRef: '_skill-ref-2',
+          slidesToReview: 5,
+          name: 'skill-test-2',
+          custom: true
+        }
+      ],
+      slides: {},
+      token: '1234'
+    },
+    ui: {
+      currentSlideRef: '',
+      navigation: ['loader', 'skills'],
+      answers: [],
+      slide: {
+        validateButton: false
+      }
+    }
+  };
+
+  const props = mapStateToSkillsProps(state);
+
+  t.deepEqual(omit('listSkills', props), {
+    title: '@todo title',
+    titleNoSkills: '@todo titleNoSkills',
+    textNoSkills: '@todo textNoSkills',
+    iconSkillAriaLabel: '@todo iconSkillAriaLabel',
+    isLoading: false,
+    isLoadingAriaLabel: '@todo loading'
+  });
+  t.deepEqual(map(omit('onClick'), props.listSkills), [
+    {
+      'aria-label': '',
+      isCustom: false,
+      skillTitle: 'skill-test',
+      skillAriaLabel: '@todo skill aria label',
+      buttonLabel: '@todo button',
+      buttonAriaLabel: '@todo button aria label',
+      reviseLabel: '@todo revise',
+      reviseAriaLabel: '@todo revise aria label'
+    },
+    {
+      'aria-label': '',
+      isCustom: true,
+      skillTitle: 'skill-test-2',
+      skillAriaLabel: '@todo skill aria label',
+      buttonLabel: '@todo button',
+      buttonAriaLabel: '@todo button aria label',
+      reviseLabel: '@todo revise',
+      reviseAriaLabel: '@todo revise aria label'
+    }
+  ]);
+});

package/src/views/slides/index.ts

@@ -9,9 +9,11 @@ import set from 'lodash/fp/set';
 import slice from 'lodash/fp/slice';
 import toInteger from 'lodash/fp/toInteger';
 import {Dispatch} from 'redux';
-import {ProgressionFromAPI, UISlide} from '../../types/common';
+import {ProgressionFromAPI} from '../../types/common';
 import {SlideIndexes} from '../../common';
 import {StoreState} from '../../reducers';
+import {AnswerUI} from '../../types/slides';
+import {postAnswer} from '../../actions/api/post-answer';
 import {mapApiSlideToUi} from './map-api-slide-to-ui';
 
 const ICON_VALUES = {
@@ -28,6 +30,19 @@ type StepItem = {
   value: string;
 };
 
+type SlideUIAnimations = 'unstack' | 'restack';
+
+export type UISlide = {
+  questionText?: string;
+  answerUI?: AnswerUI;
+  hidden?: boolean;
+  position: number;
+  animationType?: SlideUIAnimations;
+  isCorrect?: boolean;
+  endReview?: boolean;
+  loading: boolean;
+};
+
 type SlidesStack = {
   [key in SlideIndexes]: UISlide;
 };
@@ -95,27 +110,32 @@ export type SlidesViewProps = {
 export const initialState: SlidesStack = {
   '0': {
     hidden: false,
-    position: 0
+    position: 0,
+    loading: true
   },
   '1': {
     hidden: false,
-    position: 1
+    position: 1,
+    loading: true
   },
   '2': {
     hidden: false,
-    position: 2
+    position: 2,
+    loading: true
   },
   '3': {
     hidden: false,
-    position: 3
+    position: 3,
+    loading: true
   },
   '4': {
     hidden: false,
-    position: 4
+    position: 4,
+    loading: true
   }
 };
 
-const getProgressionSlidesRef = (progression: ProgressionFromAPI): string[] => {
+const getProgressionSlidesRefs = (progression: ProgressionFromAPI): string[] => {
   if (progression.state.step.current < 5) {
     const slideRef = progression.state.nextContent.ref;
     return concat([slideRef], progression.state.slides);
@@ -128,7 +148,7 @@ const buildStackSlides = (state: StoreState, dispatch: Dispatch): SlidesStack =>
   const progression = state.data.progression;
 
   if (!currentSlideRef || !progression) return initialState;
-  const slideRefs = getProgressionSlidesRef(progression);
+  const slideRefs = getProgressionSlidesRefs(progression);
 
   // @ts-expect-error typescript does not support capped versions of lodash functions
   const stack = reduce.convert({cap: false})(
@@ -137,15 +157,18 @@ const buildStackSlides = (state: StoreState, dispatch: Dispatch): SlidesStack =>
       if (!slideRef) return set(index, uiSlide, acc);
 
       const slideFromAPI = get(slideRef, state.data.slides);
+      if (!slideFromAPI) return set(index, uiSlide, acc);
+
       const answers = state.ui.answers;
       const {questionText, answerUI} = mapApiSlideToUi(dispatch)(slideFromAPI, answers);
       const parentContentTitle = getOr('', 'parentContentTitle.title', slideFromAPI);
       const parentContentType = getOr('', 'parentContentTitle.type', slideFromAPI);
 
       const updatedUiSlide = pipe(
-        set(['questionText'], questionText),
-        set(['answerUI'], answerUI),
-        set(['parentContentTitle'], `From "${parentContentTitle}" ${parentContentType}`) // TODO translate: -From- .... -Course/chapter-
+        set('loading', false),
+        set('questionText', questionText),
+        set('answerUI', answerUI),
+        set('parentContentTitle', `From "${parentContentTitle}" ${parentContentType}`) // TODO translate: -From- .... -Course/chapter-
         // TODO: Set position according to currentSlideRef et slideRefs (or maybe a value on the state ui.slidePositions !!)
       )(uiSlide);
 
@@ -213,14 +236,7 @@ const buildStepItems = (state: StoreState): StepItem[] => {
   return steps;
 };
 
-export const mapStateToSlidesProps = (
-  state: StoreState,
-  dispatch: Dispatch
-): SlidesViewProps | null => {
-  if (!state.data.slides) {
-    return null;
-  }
-
+export const mapStateToSlidesProps = (state: StoreState, dispatch: Dispatch): SlidesViewProps => {
   return {
     header: {
       mode: '__revision_mode',
@@ -237,10 +253,9 @@ export const mapStateToSlidesProps = (
       slides: buildStackSlides(state, dispatch),
       validateButton: {
         label: '__validate',
-        disabled: true,
+        disabled: !get('ui.slide.validateButton', state),
         onClick: (): void => {
-          // eslint-disable-next-line no-console
-          console.log('TODO: validate question');
+          dispatch(postAnswer);
         }
       },
       correctionPopinProps: undefined,