Merge branch '331539-devops-adoption-tooltip-shows-incorrect-data' into 'master'

DevOps Adoption tooltip shows incorrect data

See merge request gitlab-org/gitlab!62923

ee/app/assets/javascripts/analytics/devops_report/devops_adoption/components/devops_adoption_table_cell_flag.vue

@@ -17,10 +17,10 @@ export default {
       required: true,
     },
   },
-  data() {
-    return {
-      tooltipText: this.enabled ? trueText : falseText,
-    };
+  computed: {
+    tooltipText() {
+      return this.enabled ? trueText : falseText;
+    },
   },
 };
 </script>

ee/spec/frontend/analytics/devops_report/devops_adoption/components/__snapshots__/devops_adoption_table_cell_flag_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DevopsAdoptionTableCellFlag disabled matches the snapshot 1`] = `
+<span
+  class="circle"
+/>
+`;
+
+exports[`DevopsAdoptionTableCellFlag disabled when the enabled flag is changed to true matches the snapshot 1`] = `
+<span
+  class="circle circle-enabled"
+/>
+`;
+
+exports[`DevopsAdoptionTableCellFlag enabled matches the snapshot 1`] = `
+<span
+  class="circle circle-enabled"
+/>
+`;
+
+exports[`DevopsAdoptionTableCellFlag enabled when the enabled flag is changed to false matches the snapshot 1`] = `
+<span
+  class="circle"
+/>
+`;

ee/spec/frontend/analytics/devops_report/devops_adoption/components/devops_adoption_table_cell_flag_spec.js

@@ -25,9 +25,8 @@ describe('DevopsAdoptionTableCellFlag', () => {
   describe('enabled', () => {
     beforeEach(() => createComponent());
 
-    it('contains the circle-enabled class', () => {
-      expect(wrapper.classes()).toContain('circle');
-      expect(wrapper.classes()).toContain('circle-enabled');
+    it('matches the snapshot', () => {
+      expect(wrapper.element).toMatchSnapshot();
     });
 
     it('contains a tooltip', () => {
@@ -36,14 +35,32 @@ describe('DevopsAdoptionTableCellFlag', () => {
       expect(tooltip).toBeDefined();
       expect(tooltip.value).toBe('Adopted');
     });
+
+    describe('when the enabled flag is changed to false', () => {
+      beforeEach(async () => {
+        wrapper.setProps({ enabled: false });
+
+        await wrapper.vm.$nextTick();
+      });
+
+      it('matches the snapshot', () => {
+        expect(wrapper.element).toMatchSnapshot();
+      });
+
+      it('displays the correct tooltip', () => {
+        const tooltip = getBinding(wrapper.element, 'gl-tooltip');
+
+        expect(tooltip).toBeDefined();
+        expect(tooltip.value).toBe('Not adopted');
+      });
+    });
   });
 
   describe('disabled', () => {
     beforeEach(() => createComponent({ enabled: false }));
 
-    it('does not contain the circle-enabled class', () => {
-      expect(wrapper.classes()).toContain('circle');
-      expect(wrapper.classes()).not.toContain('circle-enabled');
+    it('matches the snapshot', () => {
+      expect(wrapper.element).toMatchSnapshot();
     });
 
     it('contains a tooltip', () => {
@@ -52,5 +69,24 @@ describe('DevopsAdoptionTableCellFlag', () => {
       expect(tooltip).toBeDefined();
       expect(tooltip.value).toBe('Not adopted');
     });
+
+    describe('when the enabled flag is changed to true', () => {
+      beforeEach(async () => {
+        wrapper.setProps({ enabled: true });
+
+        await wrapper.vm.$nextTick();
+      });
+
+      it('matches the snapshot', () => {
+        expect(wrapper.element).toMatchSnapshot();
+      });
+
+      it('displays the correct tooltip', () => {
+        const tooltip = getBinding(wrapper.element, 'gl-tooltip');
+
+        expect(tooltip).toBeDefined();
+        expect(tooltip.value).toBe('Adopted');
+      });
+    });
   });
 });