Merge pull request #776 from Amsterdam-Music-Lab/fix/experiment-logic

Fix/experiment logic

backend/experiment/management/commands/templates/experiment.py

@@ -28,15 +28,20 @@ def __init__(self):
         ]
 
     def first_round(self, experiment):
+        ''' Provide the first rounds of the experiment, 
+        before session creation
+        The first_round must return at least one Info or Explainer action
+        Consent and Playlist are often desired, but optional
+        '''
         # 1. Informed consent (optional)
         rendered = render_to_string('consent/consent.html')
         consent = Consent(rendered, title=_(
             'Informed consent'), confirm=_('I agree'), deny=_('Stop'))
 
-        # 2. Choose playlist (only relevant if there are multiple playlists the participant can choose from)
+        # 2. Choose playlist (optional, only relevant if there are multiple playlists the participant can choose from)
         playlist = Playlist(experiment.playlists.all())
 
-        # 3. Explainer (optional)
+        # 3. Explainer
         explainer = Explainer(
             instruction='Welcome to this new experiment',
             steps=[

frontend/src/components/Experiment/Experiment.js

@@ -3,7 +3,7 @@ import { TransitionGroup, CSSTransition } from "react-transition-group";
 import { withRouter } from "react-router-dom";
 import classNames from "classnames";
 
-import useBoundStore from "../../util/stores";
+import { useBoundStore } from "../../util/stores";
 import { createSession, getNextRound, useExperiment } from "../../API";
 import Consent from "../Consent/Consent";
 import DefaultPage from "../Page/DefaultPage";
@@ -59,7 +59,7 @@ const Experiment = ({ match }) => {
         updateState(newState);
     }, [updateState]);
 
-    const checkSession = useCallback(async () => {
+    const checkSession = async () => {
         if (session) {
             return session;
         }
@@ -71,9 +71,9 @@ const Experiment = ({ match }) => {
         catch(err) {
             setError(`Could not create a session: ${err}`)
         };
-    }, [experiment, participant, playlist, setError, setSession])
+    };
 
-    const continueToNextRound = useCallback(async() => {
+    const continueToNextRound = async() => {
         const thisSession = await checkSession();
         // Try to get next_round data from server
         const round = await getNextRound({
@@ -87,7 +87,7 @@ const Experiment = ({ match }) => {
             );
             setState(undefined);
         }
-    }, [checkSession, updateActions, setError, setState])
+    };
 
     // trigger next action from next_round array, or call session/next_round
     const onNext = async (doBreak) => {
@@ -105,18 +105,16 @@ const Experiment = ({ match }) => {
             // Loading succeeded
             if (experiment) {
                 if (experiment.next_round.length) {
-                    const firstActions = [ ...experiment.next_round ];
-                    updateActions(firstActions);
+                    updateActions([ ...experiment.next_round ]);
                 } else {
-                    continueToNextRound();
+                    setError("The first_round array from the ruleset is empty")
                 }
             } else {
                 // Loading error
                 setError("Could not load experiment");
             }
         }
     }, [
-        continueToNextRound,
         experiment,
         loadingExperiment,
         participant,

frontend/src/components/Experiment/Experiment.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { MemoryRouter } from 'react-router-dom/cjs/react-router-dom';
-import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { fireEvent, render, screen } from '@testing-library/react';
 
 import Experiment from './Experiment';
 
@@ -10,45 +10,35 @@ jest.mock("../../util/stores");
 // creates a different object every time, causing useEffect to trigger unnecessarily
 const experimentObj = {
     id: 24, slug: 'test', name: 'Test', playlists: [{id: 42, name: 'TestPlaylist'}],
-    next_round: [{view: 'PLAYLIST'}]
+    next_round: [{view: 'INFO', button_label: 'Continue'}]
 };
 const sessionObj = {data: {session: {id: 1}}};
 const nextRoundObj = {next_round: [{view: 'EXPLAINER'}]};
 
 jest.mock("../../API", () => ({
-    useExperiment: () => [experimentObj, false],
+    useExperiment: () => {
+
+        return [experimentObj, false]
+    },
     createSession: () => Promise.resolve(sessionObj),
     getNextRound: () => Promise.resolve(nextRoundObj)
 }));
 
 describe('Experiment Component', () => {
 
     xit('renders with given props', async () => {
+        /**
+         * render is caught in an endless useEffect loop now
+         * skipping for the time being
+        */
         render(
             <MemoryRouter>
                 <Experiment match={ {params: {slug: 'test'}} }/>
             </MemoryRouter>
         );
         await screen.findByTestId('experiment-wrapper');
-        await screen.findByTestId('explainer');
-    })
-
-    xit('renders with empty next_round array from useExperiment', async () => {
-        const experimentObj = {id: 24, slug: 'test', name: 'Test', next_round: []};
-        jest.mock("../../API", () => ({
-            useExperiment: () => [experimentObj, false],
-            createSession: () => Promise.resolve({data: {session: {id: 1}}}),
-            getNextRound: () => Promise.resolve({next_round: [{view: 'EXPLAINER'}]})
-        }));
-        render(
-            <MemoryRouter>
-                <Experiment match={ {params: {slug: 'test'}} }/>
-            </MemoryRouter>
-        );
-        await screen.findByTestId('experiment-wrapper');
-        await screen.findByTestId('explainer');
-    })
-
+        expect(screen.getByText('Continue')).toBeInTheDocument();
 
+    });
 
 });

frontend/src/util/stores.js

@@ -1,17 +1,17 @@
 import { create } from "zustand";
 
 // Stores
-export const createErrorSlice = (set) => ({
+const createErrorSlice = (set) => ({
     error: null,
     setError: (error) => set(() => ({ error }))
 });
 
-export const createParticipantSlice = (set) => ({
+const createParticipantSlice = (set) => ({
     participant: null,
     setParticipant: (participant) => set(() => ({ participant }))
 });
 
-export const createSessionSlice = (set) => ({
+const createSessionSlice = (set) => ({
     session: null,
     setSession: (session) => set(() => ({ session }))
 });