From 584ccdaf68710dec2c717a010cbab2610c0155ed Mon Sep 17 00:00:00 2001
From: GitLab Bot <gitlab-bot@gitlab.com>
Date: Thu, 3 Feb 2022 12:18:57 +0000
Subject: Add latest changes from gitlab-org/gitlab@master

---
 spec/frontend/image_diff/helpers/badge_helper_spec.js |  9 ++++++---
 spec/frontend/image_diff/helpers/dom_helper_spec.js   | 12 ++++++++----
 spec/frontend/image_diff/image_diff_spec.js           |  8 ++++----
 3 files changed, 18 insertions(+), 11 deletions(-)

(limited to 'spec/frontend/image_diff')

diff --git a/spec/frontend/image_diff/helpers/badge_helper_spec.js b/spec/frontend/image_diff/helpers/badge_helper_spec.js
index c970ccc535d..9ac6ebf6fdb 100644
--- a/spec/frontend/image_diff/helpers/badge_helper_spec.js
+++ b/spec/frontend/image_diff/helpers/badge_helper_spec.js
@@ -62,7 +62,10 @@ describe('badge helper', () => {
     });
 
     it('should add badge classes', () => {
-      expect(buttonEl.className).toContain('badge badge-pill');
+      const classes = buttonEl.className.split(' ');
+      expect(classes).toEqual(
+        expect.arrayContaining(['design-note-pin', 'on-image', 'gl-absolute']),
+      );
     });
 
     it('should set the badge text', () => {
@@ -105,7 +108,7 @@ describe('badge helper', () => {
     beforeEach(() => {
       containerEl.innerHTML = `
         <div id="${noteId}">
-          <div class="badge hidden">
+          <div class="design-note-pin hidden">
           </div>
         </div>
       `;
@@ -116,7 +119,7 @@ describe('badge helper', () => {
           badgeNumber,
         },
       });
-      avatarBadgeEl = containerEl.querySelector(`#${noteId} .badge`);
+      avatarBadgeEl = containerEl.querySelector(`#${noteId} .design-note-pin`);
     });
 
     it('should update badge number', () => {
diff --git a/spec/frontend/image_diff/helpers/dom_helper_spec.js b/spec/frontend/image_diff/helpers/dom_helper_spec.js
index 9357d626bbe..1c5f1cbe3da 100644
--- a/spec/frontend/image_diff/helpers/dom_helper_spec.js
+++ b/spec/frontend/image_diff/helpers/dom_helper_spec.js
@@ -37,14 +37,16 @@ describe('domHelper', () => {
       discussionEl = document.createElement('div');
       discussionEl.innerHTML = `
         <a href="#" class="image-diff-avatar-link">
-          <div class="badge"></div>
+          <div class="design-note-pin"></div>
         </a>
       `;
       domHelper.updateDiscussionAvatarBadgeNumber(discussionEl, badgeNumber);
     });
 
     it('should update avatar badge number', () => {
-      expect(discussionEl.querySelector('.badge').textContent).toEqual(badgeNumber.toString());
+      expect(discussionEl.querySelector('.design-note-pin').textContent).toEqual(
+        badgeNumber.toString(),
+      );
     });
   });
 
@@ -54,13 +56,15 @@ describe('domHelper', () => {
     beforeEach(() => {
       discussionEl = document.createElement('div');
       discussionEl.innerHTML = `
-        <div class="badge"></div>
+        <div class="design-note-pin"></div>
       `;
       domHelper.updateDiscussionBadgeNumber(discussionEl, badgeNumber);
     });
 
     it('should update discussion badge number', () => {
-      expect(discussionEl.querySelector('.badge').textContent).toEqual(badgeNumber.toString());
+      expect(discussionEl.querySelector('.design-note-pin').textContent).toEqual(
+        badgeNumber.toString(),
+      );
     });
   });
 
diff --git a/spec/frontend/image_diff/image_diff_spec.js b/spec/frontend/image_diff/image_diff_spec.js
index 16d19f45496..710aa7108a8 100644
--- a/spec/frontend/image_diff/image_diff_spec.js
+++ b/spec/frontend/image_diff/image_diff_spec.js
@@ -15,9 +15,9 @@ describe('ImageDiff', () => {
           <div class="js-image-frame">
             <img src="${TEST_HOST}/image.png">
             <div class="comment-indicator"></div>
-            <div id="badge-1" class="badge">1</div>
-            <div id="badge-2" class="badge">2</div>
-            <div id="badge-3" class="badge">3</div>
+            <div id="badge-1" class="design-note-pin">1</div>
+            <div id="badge-2" class="design-note-pin">2</div>
+            <div id="badge-3" class="design-note-pin">3</div>
           </div>
           <div class="note-container">
             <div class="discussion-notes">
@@ -335,7 +335,7 @@ describe('ImageDiff', () => {
 
     describe('cascade badge count', () => {
       it('should update next imageBadgeEl value', () => {
-        const imageBadgeEls = imageDiff.imageFrameEl.querySelectorAll('.badge');
+        const imageBadgeEls = imageDiff.imageFrameEl.querySelectorAll('.design-note-pin');
 
         expect(imageBadgeEls[0].textContent).toEqual('1');
         expect(imageBadgeEls[1].textContent).toEqual('2');
-- 
cgit v1.2.1