@coorpacademy/app-review 0.1.9 → 0.1.11

package/src/helpers/test/fixtures/qcm-graphic.ts

@@ -0,0 +1,74 @@
+import noop from 'lodash/fp/noop';
+import {QcmGraphic} from '../../../types/slides';
+import {SlideFromAPI} from '../../../types/common';
+
+export const qcmGraphicSlide: SlideFromAPI = {
+  id: 'sli_41~RSVclH',
+  universalRef: 'sli_41~RSVclH',
+  question: {
+    type: 'qcmGraphic',
+    header: 'sli_41~RSVclH.header',
+    explanation: 'sli_41~RSVclH.explanation',
+    content: {
+      choices: [
+        {
+          media: {
+            type: 'img',
+            src: [
+              {
+                _id: '5fdce726359bf4003ee66997',
+                mimeType: 'image/png',
+                url: 'med_4JVRrE5gH.mediaUrl_VkBtUV9gB'
+              }
+            ],
+            posters: [],
+            subtitles: []
+          },
+          _id: '5fdce726359bf4003ee66996',
+          label: 'sli_41~RSVclH.choice_V1gN0r4qgS',
+          value: 'sli_41~RSVclH.choice_V1gN0r4qgS',
+          items: []
+        },
+        {
+          media: {
+            type: 'img',
+            src: [
+              {
+                _id: '5fdce726359bf4003ee66999',
+                mimeType: 'image/png',
+                url: 'med_Ek8gIEqxB.mediaUrl_EkcFUEclH'
+              }
+            ],
+            posters: [],
+            subtitles: []
+          },
+          _id: '5fdce726359bf4003ee66998',
+          label: 'sli_41~RSVclH.choice_4JlLeLE5lS',
+          value: 'sli_41~RSVclH.choice_4JlLeLE5lS',
+          items: []
+        }
+      ]
+    }
+  },
+  clue: 'sli_41~RSVclH.clue',
+  klf: 'sli_41~RSVclH.klf',
+  tips: 'sli_41~RSVclH.tips'
+};
+
+export const qcmGraphicUISlide: QcmGraphic = {
+  type: 'qcmGraphic',
+  answers: [
+    {
+      title: 'sli_41~RSVclH.choice_V1gN0r4qgS',
+      image: 'med_4JVRrE5gH.mediaUrl_VkBtUV9gB',
+      selected: false,
+      onClick: noop
+    },
+    {
+      title: 'sli_41~RSVclH.choice_4JlLeLE5lS',
+      image: 'med_Ek8gIEqxB.mediaUrl_EkcFUEclH',
+      selected: false,
+      onClick: noop
+    }
+  ]
+};

package/src/helpers/test/fixtures/qcm.ts

@@ -0,0 +1,108 @@
+import noop from 'lodash/fp/noop';
+import {Qcm} from '../../../types/slides';
+import {SlideFromAPI} from '../../../types/common';
+
+export const qcmSlide: SlideFromAPI = {
+  question: {
+    content: {
+      media: {
+        src: [],
+        posters: [],
+        subtitles: []
+      },
+      choices: [
+        {
+          media: {
+            src: [],
+            posters: [],
+            subtitles: []
+          },
+          items: [],
+          _id: '62c853412d0f9b088718e759',
+          label: 'Le créateur peut fixer un pourcentage pour chaque transaction future',
+          value: 'sli_N1XACJobn.choice_4JjaSesZh',
+          id: '62c853412d0f9b088718e759'
+        },
+        {
+          media: {
+            src: [],
+            posters: [],
+            subtitles: []
+          },
+          items: [],
+          _id: '62c853412d0f9b088718e75a',
+          label:
+            "Pour chaque transaction il existe un pourcentage fixe déterminé par le droit d'auteur du pays où se tient la vente",
+          value: 'sli_N1XACJobn.choice_Ny78UlsWh',
+          id: '62c853412d0f9b088718e75a'
+        },
+        {
+          media: {
+            src: [],
+            posters: [],
+            subtitles: []
+          },
+          items: [],
+          _id: '62c853412d0f9b088718e75b',
+          label:
+            "Seule la galerie ou la plateforme peut toucher une commission sur la vente d'un NFT",
+          value: 'sli_N1XACJobn.choice_Eypt8esW2',
+          id: '62c853412d0f9b088718e75b'
+        },
+        {
+          media: {
+            src: [],
+            posters: [],
+            subtitles: []
+          },
+          items: [],
+          _id: '62c853412d0f9b088718e75c',
+          label: "Les NFT payés en ETH ne peuvent pas être soumis au paiement d'une commission",
+          value: 'sli_N1XACJobn.choice_VyS3LxjZh',
+          id: '62c853412d0f9b088718e75c'
+        }
+      ]
+    },
+    type: 'qcm',
+    header: "Après la vente d'un NFT, son créateur peut-il toucher de l'argent ?",
+    explanation: 'Sélectionnez la bonne réponse.'
+  },
+  klf: 'Si vous êtes le créateur d’un NFT, vous pouvez choisir le pourcentage de commission pour chaque transaction de votre NFT.  Certains choisissent de ne rien toucher pour fluidifier le marché.',
+  tips: 'En 2021, le média en ligne Numerama a créé un NFT vendu aux enchères sur OpenSea. Sur cette plateforme, il est obligatoire de mettre un prix de réserve, autrement dit un prix minimum au-dessous duquel la vente ne sera pas automatiquement acceptée. Sur OpenSea il ne peut être inférieur à 1 ETH. Si le prix de réserve est atteint, pas de problème, les "gas fees" (les frais de gaz) sont couverts par OpenSea. Mais, si ce n’est pas le cas, c’est au vendeur de s’en acquitter. <br/>Le NFT en question est parti à 0,021 ETH, soit 40€ au cours de l\'époque, un prix inférieur au prix de réserve. Numerama a dû acquitter des frais de gaz, et payer 190 €. <br/>Avec les NFT, on ne gagne pas à tous les coups.',
+  universalRef: 'sli_N1XACJobn',
+  hasClue: true,
+  id: 'sli_N1XACJobn'
+};
+
+export const qcmUISlide: Qcm = {
+  type: 'qcm',
+  answers: [
+    {
+      title: 'Le créateur peut fixer un pourcentage pour chaque transaction future',
+      selected: false,
+      onClick: noop,
+      ariaLabel: 'Le créateur peut fixer un pourcentage pour chaque transaction future'
+    },
+    {
+      title:
+        "Pour chaque transaction il existe un pourcentage fixe déterminé par le droit d'auteur du pays où se tient la vente",
+      selected: false,
+      onClick: noop,
+      ariaLabel:
+        "Pour chaque transaction il existe un pourcentage fixe déterminé par le droit d'auteur du pays où se tient la vente"
+    },
+    {
+      title: "Seule la galerie ou la plateforme peut toucher une commission sur la vente d'un NFT",
+      selected: false,
+      onClick: noop,
+      ariaLabel:
+        "Seule la galerie ou la plateforme peut toucher une commission sur la vente d'un NFT"
+    },
+    {
+      title: "Les NFT payés en ETH ne peuvent pas être soumis au paiement d'une commission",
+      selected: false,
+      onClick: noop,
+      ariaLabel: "Les NFT payés en ETH ne peuvent pas être soumis au paiement d'une commission"
+    }
+  ]
+};

package/src/helpers/test/fixtures/select-template.ts

@@ -0,0 +1,92 @@
+import noop from 'lodash/fp/noop';
+import {Template} from '../../../types/slides';
+import {SlideFromAPI} from '../../../types/common';
+
+export const selectTemplateSlide: SlideFromAPI = {
+  id: 'sli_410xZQxrZ',
+  universalRef: 'sli_410xZQxrZ',
+  question: {
+    type: 'template',
+    header: 'sli_410xZQxrZ.header',
+    explanation: 'sli_410xZQxrZ.explanation',
+    content: {
+      template: 'sli_410xZQxrZ.template',
+      choices: [
+        {
+          media: {
+            src: [],
+            posters: [],
+            subtitles: []
+          },
+          _id: '5fdce726359bf4003ee66967',
+          type: 'select',
+          name: 'sel36665',
+          items: [
+            {
+              _id: '5fdce726359bf4003ee66968',
+              text: 'sli_410xZQxrZ.choice_4yeA4Z7lr~',
+              value: 'sli_410xZQxrZ.choice_4yeA4Z7lr~'
+            },
+            {
+              _id: '5fdce726359bf4003ee66969',
+              text: 'sli_410xZQxrZ.choice_VJWCN~mgB~',
+              value: 'sli_410xZQxrZ.choice_VJWCN~mgB~'
+            },
+            {
+              _id: '5fdce726359bf4003ee6696a',
+              text: 'sli_410xZQxrZ.choice_VkaH~XgBb',
+              value: 'sli_410xZQxrZ.choice_VkaH~XgBb'
+            },
+            {
+              _id: '5fdce726359bf4003ee6696b',
+              text: 'sli_410xZQxrZ.choice_E1uUWXeBb',
+              value: 'sli_410xZQxrZ.choice_E1uUWXeBb'
+            }
+          ]
+        }
+      ]
+    }
+  },
+  clue: 'sli_410xZQxrZ.clue',
+  klf: 'sli_410xZQxrZ.klf',
+  tips: 'sli_410xZQxrZ.tips'
+};
+
+export const selectTemplateUISlide: Template = {
+  type: 'template',
+  template: 'sli_410xZQxrZ.template',
+  answers: [
+    {
+      type: 'select',
+      name: 'sel36665',
+      onChange: noop,
+      options: [
+        {name: 'Select an answer', value: '', validOption: false, selected: true},
+        {
+          name: 'sli_410xZQxrZ.choice_4yeA4Z7lr~',
+          value: 'sli_410xZQxrZ.choice_4yeA4Z7lr~',
+          validOption: true,
+          selected: false
+        },
+        {
+          name: 'sli_410xZQxrZ.choice_VJWCN~mgB~',
+          value: 'sli_410xZQxrZ.choice_VJWCN~mgB~',
+          validOption: true,
+          selected: false
+        },
+        {
+          name: 'sli_410xZQxrZ.choice_VkaH~XgBb',
+          value: 'sli_410xZQxrZ.choice_VkaH~XgBb',
+          validOption: true,
+          selected: false
+        },
+        {
+          name: 'sli_410xZQxrZ.choice_E1uUWXeBb',
+          value: 'sli_410xZQxrZ.choice_E1uUWXeBb',
+          validOption: true,
+          selected: false
+        }
+      ]
+    }
+  ]
+};

package/src/helpers/test/fixtures/slider.ts

@@ -0,0 +1,31 @@
+import noop from 'lodash/fp/noop';
+import {QuestionRange} from '../../../types/slides';
+import {SlideFromAPI} from '../../../types/common';
+
+export const sliderSlide: SlideFromAPI = {
+  id: 'sli_41D5AovN~',
+  universalRef: 'sli_41D5AovN~',
+  question: {
+    type: 'slider',
+    header: 'sli_41D5AovN~.header',
+    explanation: 'sli_41D5AovN~.explanation',
+    content: {
+      min: 1,
+      max: 10,
+      unitLabel: 'sli_41D5AovN~.unitLabel'
+    }
+  },
+  clue: 'sli_41D5AovN~.clue',
+  klf: 'sli_41D5AovN~.klf',
+  tips: 'sli_41D5AovN~.tips'
+};
+
+export const sliderUISlide: QuestionRange = {
+  type: 'slider',
+  placeholder: 'sli_41D5AovN~.explanation',
+  minLabel: '1 undefined',
+  maxLabel: '10 undefined',
+  title: '0 sli_41D5AovN~.unitLabel',
+  value: -0.1111111111111111,
+  onChange: noop
+};

package/src/helpers/test/fixtures/text-template.ts

@@ -0,0 +1,52 @@
+import noop from 'lodash/fp/noop';
+import {Template} from '../../../types/slides';
+import {SlideFromAPI} from '../../../types/common';
+
+export const textTemplateSlide: SlideFromAPI = {
+  question: {
+    content: {
+      media: {
+        src: [],
+        posters: [],
+        subtitles: []
+      },
+      template: 'Un   {{inp58402}}   model.',
+      choices: [
+        {
+          media: {
+            src: [],
+            posters: [],
+            subtitles: []
+          },
+          items: [],
+          _id: '62433c2c58920f02c4950de0',
+          type: 'text',
+          name: 'inp58402',
+          id: '62433c2c58920f02c4950de0'
+        }
+      ]
+    },
+    type: 'template',
+    header: 'Comment le protégé doit-il percevoir son mentor ?',
+    explanation: 'Saisissez votre réponse (en anglais).'
+  },
+  klf: "Le mentoré voit dans son mentor un <i>role model</i>, c'est-à-dire un exemple inspirant qui lui permet de se projeter dans un poste à responsabilité.",
+  tips: "L'origine de l'expression <i>role model</i> est attribué au sociologue Robert K. Merton.",
+  universalRef: 'sli_VJKQonm2g',
+  hasClue: true,
+  id: 'sli_VJKQonm2g'
+};
+
+export const textTemplateUISlide: Template = {
+  type: 'template',
+  template: 'Un   {{inp58402}}   model.',
+  answers: [
+    {
+      type: 'text',
+      name: 'inp58402',
+      placeholder: 'Type here',
+      value: undefined,
+      onChange: noop
+    }
+  ]
+};

package/src/helpers/test/map-api-slide-to-ui.test.ts

@@ -0,0 +1,55 @@
+import test from 'ava';
+import {SlideFromAPI} from '../../types/common';
+import {mapApiSlideToUi} from '../map-api-slide-to-ui';
+import {
+  QcmDrag,
+  Qcm,
+  QcmGraphic,
+  FreeText,
+  DropDown,
+  QuestionRange,
+  Template
+} from '../../types/slides';
+import {qcmUISlide, qcmSlide} from './fixtures/qcm';
+import {qcmDragUISlide, qcmDragSlide} from './fixtures/qcm-drag';
+import {freeTextSlide, freeTextUISlide} from './fixtures/free-text';
+import {qcmGraphicUISlide, qcmGraphicSlide} from './fixtures/qcm-graphic';
+import {textTemplateSlide, textTemplateUISlide} from './fixtures/text-template';
+import {selectTemplateSlide, selectTemplateUISlide} from './fixtures/select-template';
+import {sliderSlide, sliderUISlide} from './fixtures/slider';
+
+const _mapApiSlideToUi = mapApiSlideToUi({translate: (text: string) => text});
+
+const macro = test.macro({
+  title(providedTitle) {
+    return `should handle ${providedTitle} conversion`.trim();
+  },
+  exec(
+    t,
+    arg: {
+      slide: SlideFromAPI;
+      expectedUiSlide: QcmDrag | Qcm | QcmGraphic | FreeText | DropDown | QuestionRange | Template;
+    }
+  ) {
+    t.deepEqual(
+      JSON.parse(JSON.stringify(_mapApiSlideToUi(arg.slide))),
+      JSON.parse(JSON.stringify(arg.expectedUiSlide))
+    );
+  }
+});
+
+test('qcm', macro, {slide: qcmSlide, expectedUiSlide: qcmUISlide});
+test('qcm drag', macro, {slide: qcmDragSlide, expectedUiSlide: qcmDragUISlide});
+test('qcm graphic', macro, {slide: qcmGraphicSlide, expectedUiSlide: qcmGraphicUISlide});
+test('text template', macro, {slide: textTemplateSlide, expectedUiSlide: textTemplateUISlide});
+test('select template', macro, {
+  slide: selectTemplateSlide,
+  expectedUiSlide: selectTemplateUISlide
+});
+test('free text', macro, {slide: freeTextSlide, expectedUiSlide: freeTextUISlide});
+test('slider', macro, {slide: sliderSlide, expectedUiSlide: sliderUISlide});
+
+test('should throw an error if the question type can not be handled', t => {
+  const faultySlide = {...qcmSlide, question: {type: 'lol'}};
+  t.throws(() => _mapApiSlideToUi(faultySlide as SlideFromAPI));
+});

package/src/index.tsx

@@ -5,6 +5,8 @@ import {connect, Provider} from 'react-redux';
 import AppReviewTemplate from '@coorpacademy/components/es/template/app-review';
 import {TemplateContext} from '@coorpacademy/components/es/template/app-review/template-context';
 
+import isEmpty from 'lodash/fp/isEmpty';
+import get from 'lodash/fp/get';
 import configureStore from './configure-store';
 import {congratsProps, correctionPopinProps} from './fixtures/temp-fixture';
 
@@ -25,7 +27,7 @@ import {postProgression} from './actions/api/post-progression';
 import {VIEWS} from './common';
 
 type StaticProps = {
-  viewName: 'skills' | 'onboarding' | 'slides';
+  viewName: 'skills' | 'onboarding' | 'slides' | 'loader';
   slides: SlidesViewStaticProps | null;
   skills: SkillsProps | null;
 };
@@ -113,6 +115,7 @@ const App = connect(mapStateToProps, mapDispatchToProps)(AppReviewTemplate);
 
 const AppReview = ({options}: {options: AppOptions}): JSX.Element | null => {
   const [store, setStore] = useState<Store<StoreState, AnyAction> | null>(null);
+  const [isSlideFetched, setIsSlideFetched] = useState(false);
 
   useEffect(() => {
     if (store) return;
@@ -122,24 +125,27 @@ const AppReview = ({options}: {options: AppOptions}): JSX.Element | null => {
   }, [options, store]);
 
   useEffect(() => {
-    if (store === null) return;
+    if (!store || isSlideFetched) return;
 
-    const {skillRef} = options;
-    const initialView: ViewPath = skillRef ? VIEWS.slides : VIEWS.skills;
-    store.dispatch(navigateTo(initialView));
-  }, [options, store]);
+    return store.subscribe(() => {
+      const isSlidePresent = !isEmpty(store.getState().data.slides[0].questionText);
+      return isSlidePresent && setIsSlideFetched(isSlidePresent);
+    }); // using the first slide questionText for now, should only check for a slide's presence
+    // when the refactor is done (slides will be feed one by one on api's side)
+  }, [isSlideFetched, options, store]);
 
   useEffect(() => {
-    if (store === null) return;
-
-    const {token} = options;
+    const token = get('token', options);
+    if (store === null || isEmpty(token)) return;
     store.dispatch(storeToken(token));
   }, [options, store]);
 
   useEffect(() => {
-    if (store === null) return;
+    const token = get('token', options);
+    if (store === null || isEmpty(token)) return;
+
+    const skillRef = get('skillRef', options);
 
-    const {skillRef, token} = options;
     // ThunkAction is not assignable to parameter of type 'AnyAction'
     // ts problem describre here = https://github.com/reduxjs/redux-thunk/issues/333
     skillRef
@@ -147,6 +153,24 @@ const AppReview = ({options}: {options: AppOptions}): JSX.Element | null => {
       : store.dispatch(fetchSkills(token));
   }, [options, store]);
 
+  useEffect(() => {
+    if (store === null) return;
+
+    const {skillRef} = options;
+
+    if (skillRef && !isSlideFetched) {
+      store.dispatch(navigateTo('loader')); // use loader while posting progression
+      return;
+    }
+
+    // TODO: when slides state is refactored (data + mapping),
+    // use loader in case a skillRef is found && no slides from the API
+    // are found
+
+    const initialView: ViewPath = skillRef ? VIEWS.slides : VIEWS.skills;
+    store.dispatch(navigateTo(initialView));
+  }, [isSlideFetched, options, store]);
+
   if (!store) return null;
 
   const {templateContext: values} = options;

package/src/reducers/ui/navigation.ts

@@ -5,7 +5,7 @@ import {
   NAVIGATE_TO
 } from '../../actions/ui/navigation';
 
-export type NavigationState = Array<'skills' | 'onboarding' | 'slides'>;
+export type NavigationState = Array<'skills' | 'onboarding' | 'slides' | 'loader'>;
 
 const reducer = (
   // eslint-disable-next-line default-param-last

package/src/test/index.test.tsx

@@ -65,24 +65,35 @@ const appOptions: AppOptions = {
   services
 };
 
-test('should validate all the slides (all correct scenario)', async t => {
-  // t.plan(13);
+test('should show the loader while the app is fetching the data', async t => {
   t.plan(2);
-  const {container} = render(<AppReview options={appOptions} key={0} />);
+  const {container} = render(<AppReview options={appOptions} />);
+
   await waitForChanges(1000);
 
-  const wrapper = container.querySelector('[data-name="loader"]');
-  t.truthy(wrapper);
-  /*
-  const wrapper = container.querySelector('[data-name="slides-revision-container"]');
-  t.truthy(wrapper);
+  const loader = container.querySelector('[data-name="loader"]');
+  t.truthy(loader);
+
+  // await waitFor(async () => {
+  //   // await sleep(500);
+  //   const result = await t.try(tt => {
+  //     // rerender(<AppReview options={appOptions} />);
+
+  //     const slidesContainer = container.querySelector('[data-name="slides-revision-container"]');
+
+  //     tt.truthy(slidesContainer);
+  //   });
+
+  //   if (result.passed) return result.commit();
+  //   result.discard();
+  //   throw result.errors;
+  // });
 
-  const stackedSlidesContainer = wrapper?.querySelector('[data-name="stacked-slides-container"]');
+  // const stackedSlidesContainer = container.querySelector('[data-name="stacked-slides-container"]');
 
-  t.truthy(stackedSlidesContainer);
+  // t.truthy(stackedSlidesContainer);
 
-  await clickAllSlides(t, container);
-  */
+  // await clickAllSlides(t, container);
 
   t.pass();
 });

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

@@ -1,3 +1,4 @@
+import {qcmSlide} from '../../helpers/test/fixtures/qcm';
 import {Services} from '../../types/common';
 
 export const services: Services = {
@@ -18,38 +19,7 @@ export const services: Services = {
     ]);
   },
   fetchSlide: ref => {
-    // return Promise.resolve(qcm); // why qcm does not look like a slide returned from mooc ?
-    return Promise.resolve({
-      question: {
-        content: {
-          choices: [
-            {
-              selected: false,
-              title: 'choix1',
-              help: '(help choix1)',
-              ariaLabel: '__ariaLabel1',
-              onClick: (): void => undefined
-            },
-            {
-              selected: false,
-              title: 'choix2',
-              help: '(help choix2)',
-              ariaLabel: '__ariaLabel2',
-              onClick: (): void => undefined
-            },
-            {
-              selected: false,
-              title: 'choix3',
-              help: '(help choix3)',
-              ariaLabel: '__ariaLabel3',
-              onClick: (): void => undefined
-            }
-          ]
-        }
-      },
-      klf: '___klf',
-      universalRef: ref
-    });
+    return Promise.resolve({...qcmSlide, universalRef: ref, id: ref});
   },
   postProgression: () => {
     return Promise.resolve({