Encode suite name

Some suite names have a `/` included, which
breaks the endpoint path. We can encode the
suite name when we add it to the path and it will
work.

app/assets/javascripts/pipelines/stores/test_reports/actions.js

@@ -45,7 +45,10 @@ export const fetchTestSuite = ({ state, commit, dispatch }, index) => {
   const { name = '', build_ids = [] } = state.testReports?.test_suites?.[index] || {};
   // Replacing `/:suite_name.json` with the name of the suite. Including the extra characters
   // to ensure that we replace exactly the template part of the URL string
-  const endpoint = state.suiteEndpoint?.replace('/:suite_name.json', `/${name}.json`);
+  const endpoint = state.suiteEndpoint?.replace(
+    '/:suite_name.json',
+    `/${encodeURIComponent(name)}.json`,
+  );
 
   return axios
     .get(endpoint, { params: { build_ids } })

spec/frontend/pipelines/test_reports/stores/actions_spec.js

@@ -159,6 +159,35 @@ describe('Actions TestReports Store', () => {
         testAction(actions.fetchTestSuite, index, { ...state, testReports }, [], [], done);
       });
     });
+
+    describe('when the suite name has a `/` in it', () => {
+      it('sets test suite, shows tests, and encodes the suite name', done => {
+        const index = 0;
+        const suite = testReports.test_suites[0];
+        const { name } = suite;
+        const slashName = `${name}/8`;
+        testReports.test_suites[0].name = slashName;
+        const buildIds = [1];
+        testReports.test_suites[0].hasFullSuite = false;
+        testReports.test_suites[0].build_ids = buildIds;
+        const endpoint = suiteEndpoint.replace(':suite_name', encodeURIComponent(slashName));
+        mock
+          .onGet(endpoint, { params: { build_ids: buildIds } })
+          .replyOnce(200, testReports.test_suites[0], {});
+
+        testAction(
+          actions.fetchTestSuite,
+          index,
+          { ...state, testReports },
+          [{ type: types.SET_SUITE, payload: { suite, index } }],
+          [{ type: 'toggleLoading' }, { type: 'toggleLoading' }],
+          () => {
+            expect(mock.history.get.map(x => x.url)).toEqual([endpoint]);
+            done();
+          },
+        );
+      });
+    });
   });
 
   describe('fetch full report', () => {