refactor: Prefix block & block feedback url with /block and remove co…

…llection prefix from experiment (fma experiment collection) urls

backend/experiment/actions/tests/test_action_utils.py

@@ -19,9 +19,9 @@ def setUp(self) -> None:
     def test_collection_url(self):
         self.assertEqual(get_current_collection_url(self.session), None)
         self.session.save_json_data({COLLECTION_KEY: 'superdupercollection'})
-        self.assertEqual(get_current_collection_url(self.session), '/collection/superdupercollection')
+        self.assertEqual(get_current_collection_url(self.session), '/superdupercollection')
         self.participant.participant_id_url = 'participant42'
-        self.assertEqual(get_current_collection_url(self.session), '/collection/superdupercollection?participant_id=participant42')
+        self.assertEqual(get_current_collection_url(self.session), '/superdupercollection?participant_id=participant42')
 
     def test_randomize_playhead(self):
         min_jitter = 5

backend/experiment/actions/utils.py

@@ -18,9 +18,9 @@ def get_current_collection_url(session: Session) -> str:
 
     if session.participant.participant_id_url:
         participant_id_url = session.participant.participant_id_url
-        return f'/collection/{collection_slug}?participant_id={participant_id_url}'
+        return f'/{collection_slug}?participant_id={participant_id_url}'
     else:
-        return f'/collection/{collection_slug}'
+        return f'/{collection_slug}'
 
 
 def final_action_with_optional_button(session, final_text='', title=_('End'), button_text=_('Continue')):

backend/experiment/admin.py

@@ -225,7 +225,7 @@ class ExperimentCollectionAdmin(
 
     def slug_link(self, obj):
         dev_mode = settings.DEBUG is True
-        url = f"http://localhost:3000/collection/{obj.slug}" if dev_mode else f"/collection/{obj.slug}"
+        url = f"http://localhost:3000/{obj.slug}" if dev_mode else f"/{obj.slug}"
 
         return format_html(
             f'<a href="{url}" target="_blank" rel="noopener noreferrer" title="Open {obj.slug} experiment group in new tab" >{obj.slug}&nbsp;<small>&#8599;</small></a>')

backend/experiment/rules/tests/test_beat_alignment.py

@@ -43,7 +43,7 @@ def load_json(self, response):
         return json.loads(response.content)
 
     def test_block(self):
-        response = self.client.get('/experiment/ba/')
+        response = self.client.get('/experiment/block/ba/')
         response_json = self.load_json(response)
         self.assertTrue({'id', 'slug', 'name', 'class_name', 'rounds',
                         'playlists', 'next_round', 'loading_text'} <= response_json.keys())

backend/experiment/tests/test_views.py

@@ -78,7 +78,7 @@ def test_get_experiment_collection(self):
         session['participant_id'] = self.participant.id
         session.save()
         # check that first_experiments is returned correctly
-        response = self.client.get('/experiment/collection/test_series/')
+        response = self.client.get('/experiment/test_series/')
         self.assertEqual(response.json().get(
             'nextBlock').get('slug'), 'block1')
         # create session
@@ -87,7 +87,7 @@ def test_get_experiment_collection(self):
             participant=self.participant,
             finished_at=timezone.now()
         )
-        response = self.client.get('/experiment/collection/test_series/')
+        response = self.client.get('/experiment/test_series/')
         self.assertIn(response.json().get('nextBlock').get(
             'slug'), ('block2', 'block3'))
         self.assertEqual(response.json().get('dashboard'), [])
@@ -101,7 +101,7 @@ def test_get_experiment_collection(self):
             participant=self.participant,
             finished_at=timezone.now()
         )
-        response = self.client.get('/experiment/collection/test_series/')
+        response = self.client.get('/experiment/test_series/')
         response_json = response.json()
         self.assertEqual(response_json.get(
             'nextBlock').get('slug'), 'block4')
@@ -117,15 +117,15 @@ def test_get_experiment_collection(self):
 
     def test_get_experiment_collection_not_found(self):
         # if ExperimentCollection does not exist, return 404
-        response = self.client.get('/experiment/collection/not_found/')
+        response = self.client.get('/experiment/not_found/')
         self.assertEqual(response.status_code, 404)
 
     def test_get_experiment_collection_inactive(self):
         # if ExperimentCollection is inactive, return 404
         collection = ExperimentCollection.objects.get(slug='test_series')
         collection.active = False
         collection.save()
-        response = self.client.get('/experiment/collection/test_series/')
+        response = self.client.get('/experiment/test_series/')
         self.assertEqual(response.status_code, 404)
 
     def test_experiment_collection_with_dashboard(self):
@@ -144,7 +144,7 @@ def test_experiment_collection_with_dashboard(self):
         intermediate_phase.dashboard = True
         intermediate_phase.save()
         # check that first_experiments is returned correctly
-        response = self.client.get('/experiment/collection/test_series/')
+        response = self.client.get('/experiment/test_series/')
         self.assertEqual(type(response.json().get('dashboard')), list)
 
     def test_experiment_collection_total_score(self):
@@ -246,7 +246,7 @@ def test_get_block(self):
             Session(block=block, participant=participant, finished_at=timezone.now()) for index in range(3)
         ])
 
-        response = self.client.get('/experiment/test-block/')
+        response = self.client.get('/experiment/block/test-block/')
 
         self.assertEqual(
             response.json()['slug'], 'test-block'

backend/experiment/urls.py

@@ -9,9 +9,9 @@
     # Experiment
     path('render_markdown/', render_markdown, name='render_markdown'),
     path('validate_playlist/<str:rules_id>', validate_block_playlist, name='validate_block_playlist'),
-    path('<slug:slug>/', get_block, name='experiment'),
-    path('<slug:slug>/feedback/', post_feedback, name='feedback'),
-    path('collection/<slug:slug>/', get_experiment_collection,
+    path('block/<slug:slug>/', get_block, name='block'),
+    path('block/<slug:slug>/feedback/', post_feedback, name='feedback'),
+    path('<slug:slug>/', get_experiment_collection,
          name='experiment_collection'),
 
     # Robots.txt

e2e/tests/smoke/test_thkids.py

@@ -7,7 +7,7 @@
 
 class TestTHKids(BaseTest):
     def test_th_kids(self):
-        self.driver.get(f"{self.base_url}/collection/thkids")
+        self.driver.get(f"{self.base_url}/thkids")
 
         dashboard = WebDriverWait(self.driver, 5).until(expected_conditions.presence_of_element_located((By.CLASS_NAME, "dashboard")))
         print("\n✅ The frontend is working and the thkids collection page is working!")

frontend/src/API.ts

@@ -14,11 +14,11 @@ axios.defaults.withCredentials = true;
 // API endpoints
 export const URLS = {
     block: {
-        get: (slug: string) => "/experiment/" + slug + "/",
-        feedback: (slug: string) => "/experiment/" + slug + "/feedback/",
+        get: (slug: string) => "/experiment/block/" + slug + "/",
+        feedback: (slug: string) => "/experiment/block/" + slug + "/feedback/",
     },
     experiment_collection: {
-        get: (slug: string) => `/experiment/collection/${slug}/`
+        get: (slug: string) => `/experiment/${slug}/`
     },
     participant: {
         current: "/participant/",

frontend/src/components/App/App.tsx

@@ -80,12 +80,12 @@ const App = () => {
 
                         <Route path={URLS.internalRedirect} component={InternalRedirect} />
 
-                        {/* Experiment Collection */}
-                        <Route path={URLS.experimentCollection} component={ExperimentCollection} />
-
                         {/* Block */}
                         <Route path={URLS.block} component={Block} />
 
+                        {/* Experiment */}
+                        <Route path={URLS.experimentCollection} component={ExperimentCollection} />
+
                         <Route path={URLS.session} />
 
                         {/* Store profile */}

frontend/src/components/ExperimentCollection/ExperimentCollection.test.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { render, screen, waitFor } from '@testing-library/react';
+import { it, expect, describe } from 'vitest';
 import MockAdapter from "axios-mock-adapter";
 import axios from 'axios';
 

frontend/src/components/ExperimentCollection/ExperimentCollectionAbout/ExperimentCollectionAbout.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { BrowserRouter as Router } from 'react-router-dom';
+import { it, expect, describe } from 'vitest';
 
 import ExperimentCollectionAbout from './ExperimentCollectionAbout';
 
@@ -29,6 +30,6 @@ describe('ExperimentCollectionAbout', () => {
         )
 
         expect(screen.getByRole('link').innerHTML).toContain('Terug');
-        expect(screen.getByRole('link').getAttribute('href')).toBe('/collection/some_slug');
+        expect(screen.getByRole('link').getAttribute('href')).toBe('/some_slug');
     });
-})
+})

frontend/src/components/ExperimentCollection/ExperimentCollectionAbout/ExperimentCollectionAbout.tsx

@@ -13,7 +13,7 @@ export const ExperimentCollectionAbout: React.FC<ExperimentCollectionAboutProps>
 
     return (
         <div className="container">
-            <Link className="btn btn-lg btn-outline-primary mt-3" to={`/collection/${slug}`}>
+            <Link className="btn btn-lg btn-outline-primary mt-3" to={`/${slug}`}>
                 <i className="fas fa-arrow-left mr-2"></i>
                 Terug
             </Link>
@@ -24,4 +24,4 @@ export const ExperimentCollectionAbout: React.FC<ExperimentCollectionAboutProps>
     );
 };
 
-export default ExperimentCollectionAbout;
+export default ExperimentCollectionAbout;

frontend/src/components/ExperimentCollection/ExperimentCollectionDashboard/ExperimentCollectionDashboard.test.tsx

@@ -89,7 +89,7 @@ describe('ExperimentCollectionDashboard', () => {
         );
         await waitFor(() => {
             expect(screen.getByRole('menu')).toBeTruthy();
-            expect(screen.getByRole('menu').querySelector('a').getAttribute('href')).toBe('/some_slug');
+            expect(screen.getByRole('menu').querySelector('a').getAttribute('href')).toBe('/block/some_slug');
         });
     });
 
@@ -101,7 +101,7 @@ describe('ExperimentCollectionDashboard', () => {
         );
         await waitFor(() => {
             expect(screen.getByRole('menu')).toBeTruthy();
-            expect(screen.getByRole('menu').querySelector('a').getAttribute('href')).toBe('/some_slug?participant_id=some_id');
+            expect(screen.getByRole('menu').querySelector('a').getAttribute('href')).toBe('/block/some_slug?participant_id=some_id');
         });
     });
 

frontend/src/components/ExperimentCollection/ExperimentCollectionDashboard/ExperimentCollectionDashboard.tsx

@@ -23,7 +23,7 @@ export const ExperimentCollectionDashboard: React.FC<ExperimentCollectionDashboa
     const showHeader = experimentCollection.theme?.header;
     const socialMediaConfig = experimentCollection.socialMediaConfig;
 
-    const getExperimentHref = (slug: string) => `/${slug}${participantIdUrl ? `?participant_id=${participantIdUrl}` : ""}`;
+    const getExperimentHref = (slug: string) => `/block/${slug}${participantIdUrl ? `?participant_id=${participantIdUrl}` : ""}`;
 
     return (
         <div className="aha__dashboard">

frontend/src/components/ExperimentCollection/Header/Header.tsx

@@ -45,8 +45,8 @@ export const Header: React.FC<HeaderProps> = ({
             <div className="intro">
                 <HTML body={description} innerClassName="" />
                 <nav className="actions">
-                    {nextBlockSlug && <a className="btn btn-lg btn-primary" href={`/${nextBlockSlug}`}>{nextBlockButtonText}</a>}
-                    {aboutButtonText && <Link className="btn btn-lg btn-outline-primary" to={`/collection/${collectionSlug}/about`}>{aboutButtonText}</Link>}
+                    {nextBlockSlug && <a className="btn btn-lg btn-primary" href={`/block/${nextBlockSlug}`}>{nextBlockButtonText}</a>}
+                    {aboutButtonText && <Link className="btn btn-lg btn-outline-primary" to={`/${collectionSlug}/about`}>{aboutButtonText}</Link>}
                 </nav>
             </div>
             {scoreDisplayConfig && totalScore !== 0 && (