@coorpacademy/app-review 0.0.21-alpha.8 → 0.1.2

package/src/fixtures/qcm-slide.ts

@@ -0,0 +1,31 @@
+import {Slide} from '../types/slides';
+
+export const slide: Slide = {
+  questionText: 'QCM',
+  answerUI: {
+    help: '__help',
+    model: {
+      type: 'qcm',
+      choices: [
+        {
+          selected: false,
+          title: 'choix1',
+          help: '(help choix1)',
+          ariaLabel: '__ariaLabel1'
+        },
+        {
+          selected: false,
+          title: 'choix2',
+          help: '(help choix2)',
+          ariaLabel: '__ariaLabel2'
+        },
+        {
+          selected: false,
+          title: 'choix3',
+          help: '(help choix3)',
+          ariaLabel: '__ariaLabel3'
+        }
+      ]
+    }
+  }
+};

package/src/{temp-fixture.ts → fixtures/temp-fixture.ts}

@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-import {SlidesViewProps} from './types/views';
+import {SlidesViewProps} from '../types/views';
 
 export const correctionPopinProps: SlidesViewProps['correctionPopinProps'] = {
   klf: {

package/src/helpers/css-modules-require-hook.d.ts

@@ -0,0 +1,4 @@
+declare module '@coorpacademy/css-modules-require-hook' {
+  export const cssRegister: () => void;
+  export default cssRegister;
+}

package/src/helpers/css-register.ts

@@ -0,0 +1,3 @@
+import cssRegister from '@coorpacademy/css-modules-require-hook';
+
+cssRegister();

package/src/index.test.tsx

@@ -0,0 +1,82 @@
+import browserEnv from 'browser-env';
+import test from 'ava';
+import type {ExecutionContext} from 'ava';
+import React from 'react';
+import {render, fireEvent, act} from '@testing-library/react';
+import {slide} from './fixtures/qcm-slide';
+import type {AppOptions} from './types/common';
+import AppReview from '.';
+
+browserEnv({pretendToBeVisual: true});
+
+const elementExists = (foundElements: NodeListOf<Element>): Element =>
+  foundElements && foundElements[0];
+
+const sleep = (msToSleep: number): Promise<void> =>
+  new Promise(resolve => {
+    setTimeout(resolve, msToSleep);
+  });
+
+const waitForChanges = async (msToWait = 3000): Promise<void> => {
+  await act(async () => {
+    await sleep(msToWait); // wait *just* a little longer than the timeout in the component
+  });
+};
+
+const LIMIT = 5;
+
+const clickAllSlides = async (
+  t: ExecutionContext<unknown>,
+  container: HTMLElement,
+  accumulator = 0
+): Promise<void> => {
+  if (accumulator === LIMIT) return;
+
+  // last one needs to wait for more calculations && components updates
+  if (accumulator === 4)
+    await act(async () => {
+      await sleep(1000);
+    });
+
+  const validateButton = container.querySelectorAll(
+    `[data-name="slide-validate-button-${accumulator}"]`
+  );
+  t.truthy(elementExists(validateButton));
+
+  await act(async () => {
+    await fireEvent.click(validateButton[0]);
+  });
+
+  const nextButton = container.querySelectorAll(
+    `[data-name="next-question-button-${accumulator}"]`
+  );
+  t.truthy(elementExists(nextButton));
+
+  await act(async () => {
+    await fireEvent.click(nextButton[0]);
+  });
+
+  await clickAllSlides(t, container, accumulator + 1);
+};
+
+const appOptions: AppOptions = {
+  token: process.env.API_TEST_TOKEN || '',
+  slide
+};
+
+test('should validate all the slides (all correct scenario)', async t => {
+  t.plan(13);
+  const {container} = render(<AppReview options={appOptions} key={0} />);
+  await waitForChanges(1000);
+
+  const wrapper = container.querySelector('[data-name="slides-revision-container"]');
+  t.truthy(wrapper);
+
+  const stackedSlidesContainer = wrapper.querySelector('[data-name="stacked-slides-container"]');
+
+  t.truthy(stackedSlidesContainer);
+
+  await clickAllSlides(t, container);
+
+  t.pass();
+});

package/src/index.tsx

@@ -6,15 +6,15 @@ import configureStore from './configure-store';
 import {navigateTo, navigateBack, startApp} from './actions/navigation';
 import {updateSlidesOnNext, updateSlidesOnValidation} from './actions/slides';
 import {getCurrentViewName} from './reducers/navigation';
-import {SlidesViewStaticProps} from './types/views';
-import {AppOptions} from './types/common';
-import {StoreState} from './types/store-state';
-import {congratsProps, correctionPopinProps} from './temp-fixture';
+import type {SlidesViewStaticProps} from './types/views';
+import type {AppOptions} from './types/common';
+import type {StoreState} from './types/store-state';
+import {congratsProps, correctionPopinProps} from './fixtures/temp-fixture';
 import {updateFinishedSlides} from './actions/finished-slides';
 import {updateReviewStatus} from './actions/review-status';
 import {updateStepItemsOnValidation, updateStepItemsOnNext} from './actions/step-items';
-import {Dispatchers} from './types/dispatchers';
-import {validateSlide} from './actions/api/validate-slide';
+import type {Dispatchers} from './types/dispatchers';
+import {validateSlide} from './actions/data/validate-slide';
 
 // -----------------------------------------------------------------------------
 
@@ -36,22 +36,34 @@ const mapDispatchToProps: Dispatchers = {
   updateStepItemsOnNext,
   updateFinishedSlides
 };
-// StaticProps
-const mapStateToProps = (state: StoreState): StaticProps => ({
-  viewName: getCurrentViewName(state),
-  slides: {
-    slides: state.slides,
-    validate: {
-      label: '__validate'
-    },
-    finishedSlides: state.finishedSlides,
-    stepItems: state.stepItems,
-    reviewStatus: state.reviewStatus,
-    correctionPopinProps,
-    congratsProps,
-    slideValidationResult: state.api.entities.slideValidationResult
-  }
-});
+
+const mapStateToProps = (state: StoreState): StaticProps => {
+  return {
+    viewName: getCurrentViewName(state),
+    slides: {
+      headerProps: {
+        mode: '__revision_mode',
+        skillName: '__agility',
+        onQuitClick: (): void => {
+          // eslint-disable-next-line no-console
+          console.log('onQuitClick');
+        },
+        'aria-label': 'aria-header-wrapper',
+        closeButtonAriaLabel: 'aria-close-button'
+      },
+      slides: state.ui.slides,
+      validate: {
+        label: '__validate'
+      },
+      finishedSlides: state.ui.finishedSlides,
+      stepItems: state.ui.stepItems,
+      reviewStatus: state.ui.reviewStatus,
+      correctionPopinProps,
+      congratsProps,
+      slideValidationResult: state.data.slideValidationResult
+    }
+  };
+};
 
 // Props = StaticProps && Dispatchers
 
@@ -61,18 +73,22 @@ const App = connect(mapStateToProps, mapDispatchToProps)(AppReviewTemplate);
 
 const AppReview = ({options}: {options: AppOptions}): JSX.Element => {
   const [store, setStore] = useState(null);
+  const [appStarted, setAppStarted] = useState(false);
 
   useEffect(() => {
-    const _configure = async (): Promise<void> => {
-      const _store = await configureStore();
-      _store.dispatch(startApp(options));
-      setStore(_store);
-    };
-
-    _configure();
-  }, [options]);
-
-  if (!store) return null;
+    if (store) {
+      store.dispatch(startApp(options));
+      setAppStarted(true);
+    } else {
+      const _configure = async (): Promise<void> => {
+        const _store = await configureStore();
+        setStore(_store);
+      };
+      _configure();
+    }
+  }, [options, store]);
+
+  if (!store || !appStarted) return null;
 
   return (
     <Provider store={store}>
@@ -90,8 +106,6 @@ declare global {
   }
 }
 
-// type Props = {options: AppOptions};
-
 // -----------------------------------------------------------------------------
 
 export default AppReview;

package/src/middlewares/on-start-app.ts

@@ -15,6 +15,8 @@ const onStartApp: Middleware<{}, StoreState, Dispatch<Action>> =
   next =>
   (action: Action) => {
     if (action.type === START_APP) {
+      // eslint-disable-next-line no-warning-comments
+      // TODO: fetchProgression + fetchSlide à partir de la progression passée dans les options de l'app
       const {slide} = action.payload;
       if (slide) {
         const {token} = action.payload;

package/src/reducers/{api.ts → data.ts}

@@ -1,28 +1,31 @@
 import getOr from 'lodash/fp/getOr';
 import noop from 'lodash/fp/noop';
 import set from 'lodash/fp/set';
-import {IsFetching, IS_FETCHING_TRUE} from '../actions/api/is-fetching';
-import {ValidateSlide, VALIDATE_SLIDE} from '../actions/api/validate-slide';
-import {ApiState} from '../types/api';
+import {StoreToken, STORE_TOKEN} from '../actions/token';
+import {IsFetching, IS_FETCHING_TRUE} from '../actions/data/is-fetching';
+import {ValidateSlide, VALIDATE_SLIDE} from '../actions/data/validate-slide';
+import {DataState} from '../types/data';
+import {setToken} from './token';
 
 const defaultState = {
-  entities: {isFetching: true, slideValidationResult: null}
+  isFetching: true,
+  slideValidationResult: null,
+  token: null
 };
 
-type ApiActions = IsFetching | ValidateSlide;
+type ApiActions = IsFetching | ValidateSlide | StoreToken;
 
 // eslint-disable-next-line default-param-last
-const api = (state = defaultState, action: ApiActions): ApiState => {
+const data = (state: DataState = defaultState, action: ApiActions): DataState => {
   switch (action.type) {
+    case STORE_TOKEN: {
+      return setToken(action.payload, state);
+    }
     case VALIDATE_SLIDE: {
-      const previousSlideNumber: number = getOr(
-        -1,
-        'entities.slideValidationResult.slideNumber',
-        state
-      );
+      const previousSlideNumber: number = getOr(-1, 'slideValidationResult.slideNumber', state);
       // hard coded for now
       return set(
-        ['entities', 'slideValidationResult'],
+        'slideValidationResult',
         {
           slideNumber: previousSlideNumber + 1,
           result: 'success',
@@ -70,7 +73,7 @@ const api = (state = defaultState, action: ApiActions): ApiState => {
       );
     }
     case IS_FETCHING_TRUE: {
-      return set('entities.isFetching', true, state);
+      return set('isFetching', true, state);
     }
 
     // case VALIDATE_SLIDE_FAILURE: {
@@ -82,4 +85,4 @@ const api = (state = defaultState, action: ApiActions): ApiState => {
   }
 };
 
-export default api;
+export default data;

package/src/reducers/finished-slides.ts

@@ -1,10 +1,22 @@
+import forEach from 'lodash/fp/forEach';
 import {UpdateFinishedSlides, UPDATE_FINISHED_SLIDES} from '../actions/finished-slides';
+import {slideNumbers} from '../common';
 import {FinishedSlides} from '../types/finished-slides';
 
+const _forEach: <T>(
+  iteratee: (value: T[keyof T], index: number) => void,
+  collection: T
+  // @ts-expect-error to remove lodash's forEach iteratee args number cap
+) => void = forEach.convert({
+  cap: false
+});
+
 // -----------------------------------------------------------------------------
 
 export type State = FinishedSlides;
-export const initialState: State = new Map<number, true>();
+export const initialState: State = {
+  slideNumbers
+};
 
 // -----------------------------------------------------------------------------
 
@@ -12,15 +24,18 @@ export const initialState: State = new Map<number, true>();
 const reducer = (state: State = initialState, action: UpdateFinishedSlides): State => {
   switch (action.type) {
     case UPDATE_FINISHED_SLIDES: {
+      const {slideNumbers: _slideNumbers, ...rest} = state;
       const {slideNumber, value} = action.payload;
-      const _state = new Map();
+      const _state: State = {
+        slideNumbers: _slideNumbers
+      };
 
-      // eslint-disable-next-line fp/no-loops
-      for (const [index, previousValue] of state) {
-        _state.set(index, previousValue);
-      }
+      _forEach<Omit<State, 'slideNumbers'>>((finishedSlide, index) => {
+        const previousValue = finishedSlide;
+        _state[index] = previousValue;
+      }, rest);
 
-      _state.set(slideNumber, value);
+      _state[slideNumber] = value;
       return _state;
     }
     default:

package/src/reducers/index.ts

@@ -1,21 +1,23 @@
 import {combineReducers} from 'redux';
 
-import api from './api';
+import data from './data';
 import courses from './courses';
 import finishedSlides from './finished-slides';
 import navigation from './navigation';
 import reviewStatus from './review-status';
 import slides from './slides';
 import stepItems from './step-items';
-import token from './token';
 
-export default combineReducers({
-  api,
+const ui = combineReducers({
   courses,
   finishedSlides,
   navigation,
   reviewStatus,
   slides,
-  stepItems,
-  token
+  stepItems
+});
+
+export default combineReducers({
+  ui,
+  data
 });

package/src/reducers/navigation.ts

@@ -29,7 +29,7 @@ const reducer = (state: State = initialState, action: NavigateTo | NavigateBack)
 // -----------------------------------------------------------------------------
 
 export const getCurrentViewName = (appState: StoreState): ViewPath =>
-  appState.navigation[appState.navigation.length - 1];
+  appState.ui.navigation[appState.ui.navigation.length - 1];
 
 // -----------------------------------------------------------------------------
 

package/src/reducers/slides.ts

@@ -1,10 +1,11 @@
+import map from 'lodash/fp/map';
 import {
   SlidesAction,
   STORE_FIRST_SLIDE,
   UPDATE_SLIDES_ON_NEXT,
   UPDATE_SLIDES_ON_VALIDATION
 } from '../actions/slides';
-import {HIGHEST_INDEX, TOTAL_SLIDES_STACK} from '../common';
+import {HIGHEST_INDEX, slideNumbers, TOTAL_SLIDES_STACK} from '../common';
 import {
   Slide,
   Slides,
@@ -17,10 +18,12 @@ import {
 export type State = Slides;
 
 const getInitialState = (): State => {
-  const state: State = new Map();
+  const state: State = {
+    slideNumbers
+  };
   // eslint-disable-next-line fp/no-loops
   for (let index = 0; index < TOTAL_SLIDES_STACK; index++) {
-    state.set(index, {hidden: false, position: index});
+    state[index] = {hidden: false, position: index};
   }
   return state;
 };
@@ -30,13 +33,17 @@ export const initialState: State = getInitialState();
 // -----------------------------------------------------------------------------
 
 const setFirstSlide = (state, slide: Slide): State => {
-  const _state: State = new Map();
-  // eslint-disable-next-line fp/no-loops
-  for (const [index, previousValue] of state) {
+  const _state: State = {
+    slideNumbers
+  };
+  // eslint-disable-next-line lodash-fp/no-unused-result
+  map(index => {
+    const previousValue = state[index];
     // Only update the 1st one
     const content = index === 0 ? {...previousValue, ...slide} : {...previousValue};
-    _state.set(index, {...content});
-  }
+    _state[index] = {...content};
+  }, state.slideNumbers);
+
   return _state;
 };
 
@@ -44,27 +51,30 @@ const setFirstSlide = (state, slide: Slide): State => {
 // & then updates de remaining slides if this given change should impact their content
 const stateUpdateOnValidation = (state: State, payload: UpdateSlidesOnValidationPayload): State => {
   const {slideNumber, newSlideContent, numberOfFinishedSlides, nextSlide} = payload;
-  const _state: State = new Map();
+  const _state: State = {
+    slideNumbers
+  };
 
-  // eslint-disable-next-line fp/no-loops
-  for (const [index, previousValue] of state) {
+  // eslint-disable-next-line lodash-fp/no-unused-result
+  map(index => {
+    const previousValue = state[index];
     // the current slide
     if (index === slideNumber) {
       // only one slide remaining, presets the next value
       if (numberOfFinishedSlides === HIGHEST_INDEX) {
-        _state.set(index, {
+        _state[index] = {
           ...previousValue,
           nextSlide,
           position: newSlideContent.position,
           validationResult: newSlideContent.validationResult
-        });
-      } else _state.set(slideNumber, newSlideContent);
+        };
+      } else _state[slideNumber] = {...previousValue, ...newSlideContent};
     } else {
       // updates the rest of the slides here
       const {hidden, position} = previousValue;
-      _state.set(index, {...nextSlide, endReview: newSlideContent.endReview, hidden, position});
+      _state[index] = {...nextSlide, endReview: newSlideContent.endReview, hidden, position};
     }
-  }
+  }, state.slideNumbers);
 
   return _state;
 };
@@ -73,28 +83,31 @@ const stateUpdateOnValidation = (state: State, payload: UpdateSlidesOnValidation
 // & then updates de remaining slides (updates position to trigger animations)
 const stateUpdateOnNext = (state: State, payload: UpdateSlidesOnNextPayload): State => {
   const {slideNumber, newSlideContent, numberOfFinishedSlides} = payload;
-  const _state: State = new Map();
+  const _state: State = {
+    slideNumbers
+  };
 
-  // eslint-disable-next-line fp/no-loops
-  for (const [index, previousValue] of state) {
+  // eslint-disable-next-line lodash-fp/no-unused-result
+  map(index => {
+    const previousValue = state[index];
     // the current slide
     if (index === slideNumber) {
       // when there is only one slide remaining, updates the slide value
-      if (numberOfFinishedSlides === HIGHEST_INDEX) {
-        _state.set(index, {...previousValue.nextSlide, position: previousValue.position});
-      } else _state.set(slideNumber, newSlideContent);
+      if (numberOfFinishedSlides === HIGHEST_INDEX && previousValue.nextSlide) {
+        _state[index] = {...previousValue.nextSlide, position: previousValue.position};
+      } else _state[slideNumber] = newSlideContent;
     } else {
       // updates the rest of the slides here
       const {hidden, position, answerUI, questionText} = previousValue;
-      _state.set(index, {
+      _state[index] = {
         hidden,
         position: position - 1, // position shift
         answerUI,
         questionText,
         endReview: newSlideContent.endReview
-      });
+      };
     }
-  }
+  }, state.slideNumbers);
 
   return _state;
 };

package/src/reducers/step-items.ts

@@ -1,11 +1,13 @@
 import isNil from 'lodash/fp/isNil';
 import get from 'lodash/fp/get';
+import has from 'lodash/fp/has';
+import map from 'lodash/fp/map';
 import {
   StepItemsAction,
   UPDATE_STEP_ITEMS_ON_NEXT,
   UPDATE_STEP_ITEMS_ON_VALIDATION
 } from '../actions/step-items';
-import {HIGHEST_INDEX, TOTAL_SLIDES_STACK} from '../common';
+import {HIGHEST_INDEX, slideNumbers, TOTAL_SLIDES_STACK} from '../common';
 import {SlideNumber} from '../types/slides';
 import {FinishedSlides} from '../types/finished-slides';
 import {StepItem, StepItems} from '../types/step-items';
@@ -15,11 +17,14 @@ import {StepItem, StepItems} from '../types/step-items';
 export type State = StepItems;
 
 const getInitialState = (): State => {
-  const state: StepItems = new Map();
+  const state: StepItems = {
+    slideNumbers
+  };
+
   // eslint-disable-next-line fp/no-loops
   for (let index = 0; index < TOTAL_SLIDES_STACK; index++) {
     const current = index === 0;
-    state.set(index, {current, value: `${index + 1}`, icon: null});
+    state[index] = {current, value: `${index + 1}`, icon: null};
   }
   return state;
 };
@@ -48,7 +53,7 @@ const calculateNextStepIndex = (
   const indexToVisit = getNextIndex(isNil(lastVisitedIndex) ? currentStepNumber : lastVisitedIndex);
 
   // if the index is already included in the correctly answered (finished) slides, then we proceed to check for the next one
-  return finishedSlides.has(indexToVisit)
+  return has(indexToVisit, finishedSlides)
     ? calculateNextStepIndex(currentStepNumber, finishedSlides, indexToVisit)
     : indexToVisit;
 };
@@ -63,18 +68,23 @@ const recalculateStepItemsState = (
   stepItemToUpdateProps: StepItemToUpdateProps
 ): State => {
   const nextIndex: number | null = get('nextIndex', stepItemToUpdateProps);
-  const _state: State = new Map();
-  // eslint-disable-next-line fp/no-loops
-  for (const [index, previousValue] of state) {
+  const _state: State = {
+    slideNumbers
+  };
+
+  // eslint-disable-next-line lodash-fp/no-unused-result
+  map(index => {
+    const previousValue = state[index];
     if (stepNumber === index)
-      _state.set(stepNumber, {
+      _state[stepNumber] = {
         ...previousValue,
         ...stepItemToUpdateProps
-      });
+      };
     /* only for UPDATE_STEP_ITEMS_ON_NEXT -> */ else if (nextIndex === index) {
-      _state.set(index, {...previousValue, current: true});
-    } else _state.set(index, previousValue);
-  }
+      _state[index] = {...previousValue, current: true};
+    } else _state[index] = previousValue;
+  }, state.slideNumbers);
+
   return _state;
 };
 

package/src/reducers/token.ts

@@ -1,29 +1,17 @@
-import {StoreToken, STORE_TOKEN} from '../actions/token';
+import set from 'lodash/fp/set';
 import {StoreState} from '../types/store-state';
-import {TokenState as State} from '../types/states';
+import {DataState} from '../types/data';
 
 // -----------------------------------------------------------------------------
 
-// export type State = string;
-export const initialState: State = null;
+export const initialState: DataState['token'] = null;
 
 // -----------------------------------------------------------------------------
 
-// eslint-disable-next-line default-param-last
-const reducer = (state: State = initialState, action: StoreToken): State => {
-  switch (action.type) {
-    case STORE_TOKEN: {
-      return action.payload;
-    }
-    default:
-      return state;
-  }
-};
+export const setToken = (token: string, state: DataState): DataState => set('token', token, state);
 
 // -----------------------------------------------------------------------------
 
-export const getToken = (appState: StoreState): StoreState['token'] => appState.token;
+export const getToken = (appState: StoreState): StoreState['data']['token'] => appState.data.token;
 
 // -----------------------------------------------------------------------------
-
-export default reducer;

package/src/types/data/index.ts

@@ -0,0 +1,16 @@
+import {AnswerUI} from '../slides';
+
+export type DataState = {
+  isFetching?: boolean;
+  slideValidationResult?: {
+    slideNumber: number;
+    result: 'success' | 'failure';
+    // pass down the successExitNode if all slides are finished, not before
+    exitNode?: 'successExitNode' | 'failExitNode';
+    nextSlide: {
+      questionText?: string;
+      answerUI?: AnswerUI;
+    };
+  };
+  token?: string;
+};

package/src/types/dispatchers.ts

@@ -1,4 +1,4 @@
-import {validateSlide} from '../actions/api/validate-slide';
+import {validateSlide} from '../actions/data/validate-slide';
 import {updateFinishedSlides} from '../actions/finished-slides';
 import {navigateBack, navigateTo} from '../actions/navigation';
 import {updateReviewStatus} from '../actions/review-status';