@coorpacademy/app-review 0.4.5 → 0.5.1-alpha.26

package/src/actions/ui/test/quit-popin.test.ts

@@ -0,0 +1,38 @@
+import test from 'ava';
+import {createTestStore} from '../../test/create-test-store';
+import type {StoreState} from '../../../reducers';
+import {closeQuitPopin, CLOSE_POPIN, openQuitPopin, OPEN_POPIN} from '../quit-popin';
+import {services} from '../../../test/util/services.mock';
+
+const initialState: StoreState = {
+  data: {
+    progression: null,
+    slides: {},
+    skills: [],
+    token: '1234',
+    corrections: {},
+    rank: {}
+  },
+  ui: {
+    currentSlideRef: '',
+    navigation: [],
+    answers: {},
+    slide: {},
+    positions: [],
+    showQuitPopin: false
+  }
+};
+
+test('should dispatch OPEN_POPIN when openQuitPopin action is called', async t => {
+  const expectedAction = [{type: OPEN_POPIN}];
+
+  const {dispatch} = createTestStore(t, initialState, services, expectedAction);
+  await dispatch(openQuitPopin);
+});
+
+test('should dispatch CLOSE_POPIN when closeQuitPopin action is called', async t => {
+  const expectedAction = [{type: CLOSE_POPIN}];
+
+  const {dispatch} = createTestStore(t, initialState, services, expectedAction);
+  await dispatch(closeQuitPopin);
+});

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

@@ -17,8 +17,10 @@ const initialState: StoreState = {
   ui: {
     currentSlideRef: '',
     navigation: [],
+    positions: [0, 1, 2, 3, 4],
     answers: {},
-    slide: {}
+    slide: {},
+    showQuitPopin: false
   }
 };
 

package/src/common/index.ts

@@ -1,3 +1,7 @@
+import concat from 'lodash/fp/concat';
+import slice from 'lodash/fp/slice';
+import type {ProgressionFromAPI} from '../types/common';
+
 export const VIEWS: {
   readonly skills: 'skills';
   readonly onboarding: 'onboarding';
@@ -11,3 +15,11 @@ export const VIEWS: {
 export const slideIndexes = ['0', '1', '2', '3', '4'] as const;
 
 export type SlideIndexes = typeof slideIndexes[number];
+
+export const getProgressionSlidesRefs = (progression: ProgressionFromAPI): string[] => {
+  if (progression.state.step.current <= 5) {
+    const slideRef = progression.state.nextContent.ref;
+    return concat(progression.state.slides, [slideRef]);
+  }
+  return slice(0, 5, progression.state.slides);
+};

package/src/common/test/get-progression-slide-ref.test.ts

@@ -0,0 +1,35 @@
+import test from 'ava';
+import {
+  postAnswerResponses,
+  postProgressionResponse,
+  progressionSlideWithPendingSlide
+} from '../../test/util/services.mock';
+import {templateSlide} from '../../views/slides/test/fixtures/template';
+import {getProgressionSlidesRefs} from '..';
+
+test('should return first slide for a created slide', t => {
+  const slides = getProgressionSlidesRefs(postProgressionResponse);
+  t.deepEqual(slides, ['sli_VJYjJnJhg']);
+});
+
+test('should return all 5 slides when user is going to answer the 5th slide', t => {
+  const slides = getProgressionSlidesRefs(postAnswerResponses[templateSlide._id]);
+  t.deepEqual(slides, [
+    'sli_VJYjJnJhg',
+    'sli_VkSQroQnx',
+    'sli_N1XACJobn',
+    'sli_VkAzsCLKb',
+    'sli_N13-hG3kX'
+  ]);
+});
+
+test('should return all 5 slides when progression has a nextContent ref that is a pending slide', t => {
+  const slides = getProgressionSlidesRefs(progressionSlideWithPendingSlide);
+  t.deepEqual(slides, [
+    'sli_VJYjJnJhg',
+    'sli_VkSQroQnx',
+    'sli_N1XACJobn',
+    'sli_VkAzsCLKb',
+    'sli_N13-hG3kX'
+  ]);
+});

package/src/reducers/ui/answers.ts

@@ -8,7 +8,7 @@ import {
   EDIT_SLIDER,
   EDIT_TEMPLATE
 } from '../../actions/ui/answers';
-import {NextSlide, NEXT_SLIDE} from '../../actions/ui/next-slide';
+import {NextSlideAction, NEXT_SLIDE} from '../../actions/ui/next-slide';
 
 export type UISlideAnswer = string[];
 
@@ -19,7 +19,7 @@ export const initialState: UIAnswerState = {};
 const reducer = (
   // eslint-disable-next-line default-param-last
   state: UIAnswerState = initialState,
-  action: EditAnswerAction | NextSlide
+  action: EditAnswerAction | NextSlideAction
 ): UIAnswerState => {
   switch (action.type) {
     case EDIT_QCM:

package/src/reducers/ui/current-slide-ref.ts

@@ -1,13 +1,16 @@
-import {SET_CURRENT_SLIDE, UISlidesAction} from '../../actions/ui/slides';
+import {NEXT_SLIDE, NextSlideAction} from '../../actions/ui/next-slide';
+import {SET_CURRENT_SLIDE, SetCurrentSlideAction} from '../../actions/ui/slides';
 
 export type CurrentSlideRefState = string;
 
 const reducer = (
   // eslint-disable-next-line default-param-last
   state: CurrentSlideRefState = '',
-  action: UISlidesAction
+  action: SetCurrentSlideAction | NextSlideAction
 ): CurrentSlideRefState => {
   switch (action.type) {
+    case NEXT_SLIDE:
+      return action.payload.nextSlideRef;
     case SET_CURRENT_SLIDE: {
       return action.payload._id;
     }

package/src/reducers/ui/index.ts

@@ -3,18 +3,24 @@ import {combineReducers} from 'redux';
 import currentSlideRef, {CurrentSlideRefState} from './current-slide-ref';
 import navigation, {NavigationState} from './navigation';
 import answers, {UIAnswerState} from './answers';
+import positions, {UIPositionState} from './positions';
 import slide, {UISlideState} from './slide';
+import showQuitPopin, {type ShowQuitPopinState} from './quit-popin';
 
 export type UIState = {
   currentSlideRef: CurrentSlideRefState;
   navigation: NavigationState;
   answers: UIAnswerState;
   slide: UISlideState;
+  positions: UIPositionState;
+  showQuitPopin: ShowQuitPopinState;
 };
 
 export default combineReducers({
   currentSlideRef,
   navigation,
   answers,
-  slide
+  slide,
+  positions,
+  showQuitPopin
 });

package/src/reducers/ui/positions.ts

@@ -0,0 +1,32 @@
+import findIndex from 'lodash/fp/findIndex';
+import map from 'lodash/fp/map';
+import set from 'lodash/fp/set';
+import {ReceivedProgression, POST_PROGRESSION_SUCCESS} from '../../actions/api/post-progression';
+import {NextSlideAction, NEXT_SLIDE} from '../../actions/ui/next-slide';
+
+export type UIPositionState = number[];
+const initialState: UIPositionState = [0, 1, 2, 3, 4];
+
+const reducer = (
+  // eslint-disable-next-line default-param-last
+  state: UIPositionState = initialState,
+  action: NextSlideAction | ReceivedProgression
+): UIPositionState => {
+  switch (action.type) {
+    case POST_PROGRESSION_SUCCESS: {
+      return initialState;
+    }
+    case NEXT_SLIDE: {
+      const {totalCorrectAnswers, answeredSlides, currentSlideRef, animationType} = action.payload;
+
+      const nextCurrentSlidePosition = animationType === 'unstack' ? -1 : 4 - totalCorrectAnswers;
+      const currentSlideIndex = findIndex(ref => ref === currentSlideRef, answeredSlides);
+      const newState = map(position => (position === -1 ? position : position - 1), state);
+      return set([`${currentSlideIndex}`], nextCurrentSlidePosition)(newState);
+    }
+    default:
+      return state;
+  }
+};
+
+export default reducer;

package/src/reducers/ui/quit-popin.ts

@@ -0,0 +1,22 @@
+import {closeQuitPopin, CLOSE_POPIN, openQuitPopin, OPEN_POPIN} from '../../actions/ui/quit-popin';
+
+export type ShowQuitPopinState = boolean;
+
+const reducer = (
+  // eslint-disable-next-line default-param-last
+  state: ShowQuitPopinState = false,
+  action: typeof openQuitPopin | typeof closeQuitPopin
+): ShowQuitPopinState => {
+  switch (action.type) {
+    case OPEN_POPIN: {
+      return true;
+    }
+    case CLOSE_POPIN: {
+      return false;
+    }
+    default:
+      return state;
+  }
+};
+
+export default reducer;

package/src/reducers/ui/slide.ts

@@ -15,7 +15,7 @@ import {
 import {PostAnswerRequestAction, POST_ANSWER_REQUEST} from '../../actions/api/post-answer';
 import {ReceivedCorrection, CORRECTION_FETCH_SUCCESS} from '../../actions/api/fetch-correction';
 import {FetchSlide, SLIDE_FETCH_REQUEST} from '../../actions/api/fetch-slide';
-import {NextSlide, NEXT_SLIDE} from '../../actions/ui/next-slide';
+import {NextSlideAction, NEXT_SLIDE} from '../../actions/ui/next-slide';
 import {SlideUIAnimations} from '../../types/slides';
 
 export type UISlide = {
@@ -32,7 +32,12 @@ export const initialState: UISlideState = {};
 const reducer = (
   // eslint-disable-next-line default-param-last
   state: UISlideState = initialState,
-  action: FetchSlide | PostAnswerRequestAction | EditAnswerAction | ReceivedCorrection | NextSlide
+  action:
+    | FetchSlide
+    | PostAnswerRequestAction
+    | EditAnswerAction
+    | ReceivedCorrection
+    | NextSlideAction
 ): UISlideState => {
   switch (action.type) {
     case SLIDE_FETCH_REQUEST: {

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

@@ -94,7 +94,9 @@ test('should set the next slide ref with an empty array if NEXT_SLIDE action is
       payload: {
         currentSlideRef: '1234',
         nextSlideRef: '5678',
-        animationType: 'unstack'
+        animationType: 'unstack',
+        totalCorrectAnswers: 1,
+        answeredSlides: ['1234']
       }
     }
   );

package/src/reducers/ui/test/current-slide-ref.test.ts

@@ -1,10 +1,10 @@
 import test from 'ava';
 import reducer from '../current-slide-ref';
-import {SetCurrentSlide, SET_CURRENT_SLIDE} from '../../../actions/ui/slides';
+import {SetCurrentSlideAction, SET_CURRENT_SLIDE} from '../../../actions/ui/slides';
 import {freeTextSlide} from '../../../views/slides/test/fixtures/free-text';
 
 test('should have initial value', t => {
-  const state = reducer(undefined, {} as SetCurrentSlide);
+  const state = reducer(undefined, {} as SetCurrentSlideAction);
   t.is(state, '');
 });
 

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

@@ -0,0 +1,68 @@
+import test from 'ava';
+import reducer from '../positions';
+import {POST_PROGRESSION_SUCCESS, ReceivedProgression} from '../../../actions/api/post-progression';
+import {NEXT_SLIDE} from '../../../actions/ui/next-slide';
+
+test('should have initial value', t => {
+  const state = reducer(undefined, {} as ReceivedProgression);
+  t.deepEqual(state, [0, 1, 2, 3, 4]);
+});
+
+test('should reset state to initial value when POST_PROGRESSION_SUCCESS action', t => {
+  const state = reducer([-1, -1, -1, -1, -1], {
+    type: POST_PROGRESSION_SUCCESS
+  } as ReceivedProgression);
+  t.deepEqual(state, [0, 1, 2, 3, 4]);
+});
+
+test('should set position for currentSlide according to the animationType and the position for the next slides', t => {
+  const state = reducer([-1, -1, 0, 1, 2], {
+    type: NEXT_SLIDE,
+    payload: {
+      totalCorrectAnswers: 2,
+      answeredSlides: ['sli_1', 'sli_2', 'sli_3'],
+      currentSlideRef: 'sli_3',
+      nextSlideRef: 'sli_4',
+      animationType: 'restack'
+    }
+  });
+  t.deepEqual(state, [-1, -1, 2, 0, 1]);
+
+  const _state = reducer([-1, -1, 0, 1, 2], {
+    type: NEXT_SLIDE,
+    payload: {
+      totalCorrectAnswers: 2,
+      answeredSlides: ['sli_1', 'sli_2', 'sli_3'],
+      currentSlideRef: 'sli_3',
+      nextSlideRef: 'sli_4',
+      animationType: 'unstack'
+    }
+  });
+  t.deepEqual(_state, [-1, -1, -1, 0, 1]);
+});
+
+test('should set position for currentSlide according to the animationType and the position for the next slides when answering already bad slide', t => {
+  const state = reducer([-1, 2, -1, 0, 1], {
+    type: NEXT_SLIDE,
+    payload: {
+      totalCorrectAnswers: 2,
+      answeredSlides: ['sli_1', 'sli_2', 'sli_3', 'sli_4', 'sli_5'],
+      currentSlideRef: 'sli_4',
+      nextSlideRef: 'sli_5',
+      animationType: 'restack'
+    }
+  });
+  t.deepEqual(state, [-1, 1, -1, 2, 0]);
+
+  const _state = reducer([-1, 1, -1, 2, 0], {
+    type: NEXT_SLIDE,
+    payload: {
+      totalCorrectAnswers: 2,
+      answeredSlides: ['sli_1', 'sli_2', 'sli_3', 'sli_4', 'sli_5'],
+      currentSlideRef: 'sli_5',
+      nextSlideRef: 'sli_1',
+      animationType: 'unstack'
+    }
+  });
+  t.deepEqual(_state, [-1, 0, -1, 1, -1]);
+});

package/src/reducers/ui/test/quit-popin.test.ts

@@ -0,0 +1,24 @@
+import test from 'ava';
+import {CLOSE_POPIN, OPEN_POPIN} from '../../../actions/ui/quit-popin';
+import reducer from '../quit-popin';
+
+test('should have showQuitPopin intial value to false', t => {
+  const state = reducer(undefined, {
+    type: '@@ui/CLOSE_POPIN'
+  });
+  t.is(state, false);
+});
+
+test('should set showQuitPopin to true if OPEN_POPIN is received', t => {
+  const state = reducer(false, {
+    type: OPEN_POPIN
+  });
+  t.is(state, true);
+});
+
+test('should set showQuitPopin to false if CLOSE_POPIN is received', t => {
+  const state = reducer(true, {
+    type: CLOSE_POPIN
+  });
+  t.is(state, false);
+});

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

@@ -66,7 +66,9 @@ test('should set animateCorrectionPopin to false and animationType to unstack or
       payload: {
         currentSlideRef: '1234',
         nextSlideRef: '5678',
-        animationType: 'unstack'
+        animationType: 'unstack',
+        totalCorrectAnswers: 1,
+        answeredSlides: ['1234']
       }
     }
   );

package/src/types/common.ts

@@ -1,4 +1,3 @@
-// TODO: EDIT_CHOICES -> specify typing
 export type ChoiceFromAPI = {
   _id: string;
   id?: string;

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

@@ -16,9 +16,11 @@ test('should create initial props when there are no skills on the state', t => {
     },
     ui: {
       currentSlideRef: '',
+      positions: [0, 1, 2, 3, 4],
       navigation: ['loader', 'skills'],
       answers: {},
-      slide: {}
+      slide: {},
+      showQuitPopin: false
     }
   };
 
@@ -60,9 +62,11 @@ test('should create initial props when skills on the state', t => {
     },
     ui: {
       currentSlideRef: '',
+      positions: [0, 1, 2, 3, 4],
       navigation: ['loader', 'skills'],
       answers: {},
-      slide: {}
+      slide: {},
+      showQuitPopin: false
     }
   };
 

package/src/views/slides/index.ts

@@ -1,16 +1,15 @@
-import concat from 'lodash/fp/concat';
 import findLast from 'lodash/fp/findLast';
 import get from 'lodash/fp/get';
 import getOr from 'lodash/fp/getOr';
 import last from 'lodash/fp/last';
 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 type {Dispatch} from 'redux';
 import join from 'lodash/fp/join';
-import type {ProgressionAnswerItem, ProgressionFromAPI} from '../../types/common';
-import type {SlideIndexes} from '../../common';
+import {closeQuitPopin, openQuitPopin} from '../../actions/ui/quit-popin';
+import type {ProgressionAnswerItem} from '../../types/common';
+import {getProgressionSlidesRefs, type SlideIndexes} from '../../common';
 import type {StoreState} from '../../reducers';
 import type {AnswerUI} from '../../types/slides';
 import {postAnswer} from '../../actions/api/post-answer';
@@ -34,7 +33,6 @@ type StepItem = {
 type SlideUIAnimations = 'unstack' | 'restack';
 
 export type ReviewSlide = {
-  hidden: boolean;
   position: number;
   loading: boolean;
   showCorrectionPopin?: boolean;
@@ -65,6 +63,16 @@ type CorrectionPopinNext = {
   onClick: Function;
 };
 
+type QuitPopinButton = {
+  label: string;
+  type: string;
+  customStyle?: {
+    color: string;
+  };
+  handleOnclick: Function;
+  ariaLabel: string;
+};
+
 export type CorrectionPopinProps = {
   klf?: CorrectionPopinKlf;
   information: CorrectionPopinInformation;
@@ -73,6 +81,15 @@ export type CorrectionPopinProps = {
   type: 'right' | 'wrong';
 };
 
+export type QuitPopinProps = {
+  content: string;
+  icon: string;
+  mode: string;
+  descriptionText: string;
+  firstButton: QuitPopinButton;
+  secondButton: QuitPopinButton;
+};
+
 export type SlidesViewProps = {
   header: {
     mode: string;
@@ -113,44 +130,33 @@ export type SlidesViewProps = {
       type: string;
     };
   };
+  quitPopin?: QuitPopinProps;
 };
 
+// TODO replace this, position no more needed
 export const initialState: SlidesStack = {
   '0': {
-    hidden: false,
     position: 0,
     loading: true
   },
   '1': {
-    hidden: false,
     position: 1,
     loading: true
   },
   '2': {
-    hidden: false,
     position: 2,
     loading: true
   },
   '3': {
-    hidden: false,
     position: 3,
     loading: true
   },
   '4': {
-    hidden: false,
     position: 4,
     loading: true
   }
 };
 
-const getProgressionSlidesRefs = (progression: ProgressionFromAPI): string[] => {
-  if (progression.state.step.current < 5) {
-    const slideRef = progression.state.nextContent.ref;
-    return concat(progression.state.slides, [slideRef]);
-  }
-  return slice(0, 5, progression.state.slides);
-};
-
 const buildStackSlides = (state: StoreState, dispatch: Dispatch): SlidesStack => {
   const currentSlideRef = state.ui.currentSlideRef;
   const progression = state.data.progression;
@@ -160,26 +166,30 @@ const buildStackSlides = (state: StoreState, dispatch: Dispatch): SlidesStack =>
 
   // @ts-expect-error typescript does not support capped versions of lodash functions
   const stack = reduce.convert({cap: false})(
-    (acc: SlidesStack, uiSlide: ReviewSlide, index: string): SlidesStack => {
-      const slideRef = slideRefs[toInteger(index)];
-      if (!slideRef) return set(index, uiSlide, acc);
+    (acc: SlidesStack, uiSlide: ReviewSlide, _index: string): SlidesStack => {
+      const index = toInteger(_index);
+
+      const positions = state.ui.positions;
+      const position = positions[index];
+
+      const slideRef = slideRefs[index];
+      if (!slideRef) return set(index, {...uiSlide, position}, acc);
       const slideFromAPI = get(slideRef, state.data.slides);
-      if (!slideFromAPI) return set(index, uiSlide, acc);
+      if (!slideFromAPI) return set(index, {...uiSlide, position}, acc);
 
       const answers = getOr([], ['ui', 'answers', slideRef], state);
       const {questionText, answerUI} = mapApiSlideToUi(dispatch)(slideFromAPI, answers);
-      const parentContentTitle = getOr('', 'parentContentTitle.title', slideFromAPI);
-      const parentContentType = getOr('', 'parentContentTitle.type', slideFromAPI);
+      const {title: parentContentTitle, type: parentContentType} = slideFromAPI.parentContentTitle;
 
       const isCurrentSlideRef = currentSlideRef === slideRef;
-      const animateCorrectionPopin =
-        isCurrentSlideRef && get(['ui', 'slide', slideRef, 'animateCorrectionPopin'], state);
-      const showCorrectionPopin =
-        isCurrentSlideRef && get(['ui', 'slide', slideRef, 'showCorrectionPopin'], state);
-      const animationType = get(['ui', 'slide', slideRef, 'animationType'], state);
+      const slideUI = get(['ui', 'slide', slideRef], state);
+      const animateCorrectionPopin = isCurrentSlideRef && slideUI.animateCorrectionPopin;
+      const showCorrectionPopin = isCurrentSlideRef && slideUI.showCorrectionPopin;
+      const animationType = slideUI.animationType;
 
       const updatedUiSlide = {
         ...uiSlide,
+        position,
         showCorrectionPopin,
         animateCorrectionPopin,
         loading: false,
@@ -304,6 +314,33 @@ const getCorrectionPopinProps =
     };
   };
 
+const buildQuitPopinProps =
+  (dispatch: Dispatch) =>
+  (onQuitClick: Function): QuitPopinProps => {
+    return {
+      content: `Tu t'en vas déjà ?`,
+      icon: `MoonRocket`,
+      mode: 'alert',
+      descriptionText: `Tu vas t'en sortir ! Si tu arrêtes maintenant, tu vas perdre ta progression.`,
+      firstButton: {
+        label: 'Arrêter ma session',
+        type: 'tertiary',
+        customStyle: {
+          color: '#ED3436'
+        },
+        handleOnclick: onQuitClick,
+        ariaLabel: 'Stop session'
+      },
+      secondButton: {
+        label: `Continuer d'apprendre`,
+        type: 'primary',
+        handleOnclick: (): void => {
+          dispatch(closeQuitPopin);
+        },
+        ariaLabel: 'Continue review'
+      }
+    };
+  };
 export const mapStateToSlidesProps = (
   state: StoreState,
   dispatch: Dispatch,
@@ -313,12 +350,12 @@ export const mapStateToSlidesProps = (
   const correction = get(['data', 'corrections', currentSlideRef], state);
   const isCorrect = get(['data', 'progression', 'state', 'isCorrect'], state);
   const klf = getOr('', ['data', 'slides', currentSlideRef, 'klf'], state);
-
+  const showQuitPopin = get(['ui', 'showQuitPopin'], state);
   return {
     header: {
       mode: '__revision_mode',
       skillName: '__agility',
-      onQuitClick,
+      onQuitClick: () => dispatch(openQuitPopin),
       'aria-label': 'aria-header-wrapper',
       closeButtonAriaLabel: 'aria-close-button',
       steps: buildStepItems(state)
@@ -336,6 +373,7 @@ export const mapStateToSlidesProps = (
         correction && getCorrectionPopinProps(dispatch)(isCorrect, correction.correctAnswer, klf),
       endReview: false
     },
-    congrats: undefined
+    congrats: undefined,
+    quitPopin: showQuitPopin === true ? buildQuitPopinProps(dispatch)(onQuitClick) : undefined
   };
 };

package/src/views/slides/test/header.on-click.test.ts

@@ -0,0 +1,42 @@
+import test from 'ava';
+import identity from 'lodash/fp/identity';
+import {createTestStore} from '../../../actions/test/create-test-store';
+import {incorrectFreeTextPostAnswerResponse, services} from '../../../test/util/services.mock';
+import {StoreState} from '../../../reducers';
+import {OPEN_POPIN} from '../../../actions/ui/quit-popin';
+import {mapStateToSlidesProps} from '..';
+
+const state: StoreState = {
+  data: {
+    progression: incorrectFreeTextPostAnswerResponse,
+    skills: [],
+    slides: {
+      sli_N1XACJobn: null
+    },
+    token: '1234',
+    corrections: {},
+    rank: {}
+  },
+  ui: {
+    currentSlideRef: '',
+    navigation: ['loader', 'slides'],
+    answers: {},
+    positions: [0, 1, 2, 3, 4],
+    slide: {
+      sli_N1XACJobn: {
+        validateButton: false,
+        animateCorrectionPopin: false,
+        showCorrectionPopin: false
+      }
+    },
+    showQuitPopin: false
+  }
+};
+
+test('should dispatch OPEN_POPIN action after a click on close button in header', async t => {
+  const expectedAction = [{type: OPEN_POPIN}];
+  const {dispatch, getState} = createTestStore(t, state, services, expectedAction);
+  const props = mapStateToSlidesProps(getState(), dispatch, identity);
+  await props.header.onQuitClick();
+  t.pass();
+});