1 files changed, 42 insertions, 0 deletions
diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_squash_before_merge_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_squash_before_merge_spec.js
index b70d580ed04..1542b0939aa 100644
--- a/spec/frontend/vue_mr_widget/components/states/mr_widget_squash_before_merge_spec.js
+++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_squash_before_merge_spec.js
@@ -19,6 +19,8 @@ describe('Squash before merge component', () => {
     wrapper.destroy();
   });
 
+  const findLabel = () => wrapper.find('[data-testid="squashLabel"]');
+
   describe('checkbox', () => {
     const findCheckbox = () => wrapper.find('.js-squash-checkbox');
 
@@ -63,6 +65,46 @@ describe('Squash before merge component', () => {
     });
   });
 
+  describe('label', () => {
+    describe.each`
+      isDisabled | expectation
+      ${true}    | ${'grays out text if it is true'}
+      ${false}   | ${'does not gray out text if it is false'}
+    `('isDisabled prop', ({ isDisabled, expectation }) => {
+      beforeEach(() => {
+        createComponent({
+          value: false,
+          isDisabled,
+        });
+      });
+
+      it(expectation, () => {
+        expect(findLabel().classes('gl-text-gray-600')).toBe(isDisabled);
+      });
+    });
+  });
+
+  describe('tooltip', () => {
+    const tooltipTitle = () => findLabel().element.dataset.title;
+
+    it('does not render when isDisabled is false', () => {
+      createComponent({
+        value: true,
+        isDisabled: false,
+      });
+      expect(tooltipTitle()).toBeUndefined();
+    });
+
+    it('display message when when isDisabled is true', () => {
+      createComponent({
+        value: true,
+        isDisabled: true,
+      });
+
+      expect(tooltipTitle()).toBe('Required in this project.');
+    });
+  });
+
   describe('about link', () => {
     it('is not rendered if no help path is passed', () => {
       createComponent({