Fix divergence graph loading error

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/64143

2 files changed, 13 insertions, 3 deletions

diff --git a/app/assets/javascripts/branches/divergence_graph.js b/app/assets/javascripts/branches/divergence_graph.js
index 96bc6a5f8e8..7dbaf984acf 100644
--- a/app/assets/javascripts/branches/divergence_graph.js
+++ b/app/assets/javascripts/branches/divergence_graph.js
@@ -36,7 +36,9 @@ export default endpoint => {
       }, 100);
 
       Object.entries(data).forEach(([branchName, val]) => {
-        const el = document.querySelector(`.js-branch-${branchName} .js-branch-divergence-graph`);
+        const el = document.querySelector(
+          `[data-name="${branchName}"] .js-branch-divergence-graph`,
+        );
 
         if (!el) return;
 
diff --git a/spec/frontend/branches/divergence_graph_spec.js b/spec/frontend/branches/divergence_graph_spec.js
index 4ed77c3a036..8283bc966e4 100644
--- a/spec/frontend/branches/divergence_graph_spec.js
+++ b/spec/frontend/branches/divergence_graph_spec.js
@@ -10,12 +10,14 @@ describe('Divergence graph', () => {
 
     mock.onGet('/-/diverging_counts').reply(200, {
       master: { ahead: 1, behind: 1 },
+      'test/hello-world': { ahead: 1, behind: 1 },
     });
 
     jest.spyOn(axios, 'get');
 
     document.body.innerHTML = `
-      <div class="js-branch-item" data-name="master"></div>
+      <div class="js-branch-item" data-name="master"><div class="js-branch-divergence-graph"></div></div>
+      <div class="js-branch-item" data-name="test/hello-world"><div class="js-branch-divergence-graph"></div></div>
     `;
   });
 
@@ -26,7 +28,13 @@ describe('Divergence graph', () => {
   it('calls axos get with list of branch names', () =>
     init('/-/diverging_counts').then(() => {
       expect(axios.get).toHaveBeenCalledWith('/-/diverging_counts', {
-        params: { names: ['master'] },
+        params: { names: ['master', 'test/hello-world'] },
       });
     }));
+
+  it('creates Vue components', () =>
+    init('/-/diverging_counts').then(() => {
+      expect(document.querySelector('[data-name="master"]').innerHTML).not.toEqual('');
+      expect(document.querySelector('[data-name="test/hello-world"]').innerHTML).not.toEqual('');
+    }));
 });