Abstract parseDesignRouteHash into util

And add tests, and use this new util

app/assets/javascripts/design_management/pages/design/index.vue

@@ -20,6 +20,7 @@ import {
   extractDesign,
   updateImageDiffNoteOptimisticResponse,
   toDiffNoteGid,
+  parseDesignRouteHash,
 } from '../../utils/design_management_utils';
 import {
   updateStoreAfterAddImageDiffNote,
@@ -147,7 +148,7 @@ export default {
     Mousetrap.bind('esc', this.closeDesign);
     this.trackEvent();
     // We need to reset the active discussion when opening a new design
-    const [, noteId] = this.$route.hash.match(/#note_([0-9]+)/) || [];
+    const noteId = parseDesignRouteHash(this.$route.hash);
     const diffNoteGid = noteId ? toDiffNoteGid(noteId) : undefined;
     return this.updateActiveDiscussion(diffNoteGid);
   },

app/assets/javascripts/design_management/utils/design_management_utils.js

@@ -36,6 +36,15 @@ export const extractDesign = data => (extractDesigns(data) || [])[0];
 
 export const toDiffNoteGid = noteId => `gid://gitlab/DiffNote/${noteId}`;
 
+/**
+ * Return the note ID from a URL hash parameter
+ * @param {String} hash URL hash
+ */
+export const parseDesignRouteHash = hash => {
+  const [, noteId] = hash.match('#note_([0-9]+$)') || [];
+  return noteId;
+};
+
 /**
  * Generates optimistic response for a design upload mutation
  * @param {Array<File>} files

spec/frontend/design_management/utils/design_management_utils_spec.js

@@ -6,6 +6,7 @@ import {
   updateImageDiffNoteOptimisticResponse,
   isValidDesignFile,
   extractDesign,
+  parseDesignRouteHash,
 } from '~/design_management/utils/design_management_utils';
 import mockResponseNoDesigns from '../mock_data/no_designs';
 import mockResponseWithDesigns from '../mock_data/designs';
@@ -171,3 +172,19 @@ describe('extractDesign', () => {
     });
   });
 });
+
+describe('parseDesignRouteHash', () => {
+  it.each`
+    hash            | expectedNoteId
+    ${'#note_0'}    | ${'0'}
+    ${'#note_1'}    | ${'1'}
+    ${'#note_23'}   | ${'23'}
+    ${'#note_456'}  | ${'456'}
+    ${'note_1'}     | ${undefined}
+    ${'#note_'}     | ${undefined}
+    ${'#note_asd'}  | ${undefined}
+    ${'#note_1asd'} | ${undefined}
+  `('returns $expectedNoteId when hash is $hash', ({ hash, expectedNoteId }) => {
+    expect(parseDesignRouteHash(hash)).toBe(expectedNoteId);
+  });
+});