Use replace mount with shallowMount in edit form specs

https://gitlab.com/gitlab-org/gitlab/-/merge_requests/31506

app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue

@@ -40,7 +40,12 @@ export default {
     <button type="button" class="btn btn-default append-right-10" @click="closeForm">
       {{ __('Cancel') }}
     </button>
-    <button type="button" class="btn btn-close" @click.prevent="submitForm">
+    <button
+      type="button"
+      class="btn btn-close"
+      data-testid="confidential-toggle"
+      @click.prevent="submitForm"
+    >
       {{ toggleButtonText }}
     </button>
   </div>

spec/frontend/sidebar/confidential/edit_form_buttons_spec.js

+import { shallowMount } from '@vue/test-utils';
+import EditFormButtons from '~/sidebar/components/confidential/edit_form_buttons.vue';
+
+describe('Edit Form Buttons', () => {
+  let wrapper;
+  const findConfidentialToggle = () => wrapper.find('[data-testid="confidential-toggle"]');
+
+  const createComponent = props => {
+    wrapper = shallowMount(EditFormButtons, {
+      propsData: {
+        updateConfidentialAttribute: () => {},
+        ...props,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('when not confidential', () => {
+    it('renders Turn On in the ', () => {
+      createComponent({
+        isConfidential: false,
+      });
+
+      expect(findConfidentialToggle().text()).toBe('Turn On');
+    });
+  });
+
+  describe('when confidential', () => {
+    it('renders on or off text based on confidentiality', () => {
+      createComponent({
+        isConfidential: true,
+      });
+
+      expect(findConfidentialToggle().text()).toBe('Turn Off');
+    });
+  });
+});

spec/frontend/sidebar/confidential/edit_form_spec.js

+import { shallowMount } from '@vue/test-utils';
+import EditForm from '~/sidebar/components/confidential/edit_form.vue';
+
+describe('Edit Form Dropdown', () => {
+  let wrapper;
+  const toggleForm = () => {};
+  const updateConfidentialAttribute = () => {};
+
+  const createComponent = props => {
+    wrapper = shallowMount(EditForm, {
+      propsData: {
+        ...props,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('when not confidential', () => {
+    it('renders "You are going to turn off the confidentiality." in the ', () => {
+      createComponent({
+        isConfidential: false,
+        toggleForm,
+        updateConfidentialAttribute,
+      });
+
+      expect(wrapper.find('p').text()).toContain('You are going to turn on the confidentiality.');
+    });
+  });
+
+  describe('when confidential', () => {
+    it('renders on or off text based on confidentiality', () => {
+      createComponent({
+        isConfidential: true,
+        toggleForm,
+        updateConfidentialAttribute,
+      });
+
+      expect(wrapper.find('p').text()).toContain('You are going to turn off the confidentiality.');
+    });
+  });
+});

spec/frontend/sidebar/confidential_edit_buttons_spec.js

-import Vue from 'vue';
-import editFormButtons from '~/sidebar/components/confidential/edit_form_buttons.vue';
-
-describe('Edit Form Buttons', () => {
-  let vm1;
-  let vm2;
-
-  beforeEach(() => {
-    const Component = Vue.extend(editFormButtons);
-    const toggleForm = () => {};
-    const updateConfidentialAttribute = () => {};
-
-    vm1 = new Component({
-      propsData: {
-        isConfidential: true,
-        toggleForm,
-        updateConfidentialAttribute,
-      },
-    }).$mount();
-
-    vm2 = new Component({
-      propsData: {
-        isConfidential: false,
-        toggleForm,
-        updateConfidentialAttribute,
-      },
-    }).$mount();
-  });
-
-  it('renders on or off text based on confidentiality', () => {
-    expect(vm1.$el.innerHTML.includes('Turn Off')).toBe(true);
-
-    expect(vm2.$el.innerHTML.includes('Turn On')).toBe(true);
-  });
-});

spec/frontend/sidebar/confidential_edit_form_buttons_spec.js

-import Vue from 'vue';
-import editForm from '~/sidebar/components/confidential/edit_form.vue';
-
-describe('Edit Form Dropdown', () => {
-  let vm1;
-  let vm2;
-
-  beforeEach(() => {
-    const Component = Vue.extend(editForm);
-    const toggleForm = () => {};
-    const updateConfidentialAttribute = () => {};
-
-    vm1 = new Component({
-      propsData: {
-        isConfidential: true,
-        toggleForm,
-        updateConfidentialAttribute,
-      },
-    }).$mount();
-
-    vm2 = new Component({
-      propsData: {
-        isConfidential: false,
-        toggleForm,
-        updateConfidentialAttribute,
-      },
-    }).$mount();
-  });
-
-  it('renders on the appropriate warning text', () => {
-    expect(vm1.$el.innerHTML.includes('You are going to turn off the confidentiality.')).toBe(true);
-
-    expect(vm2.$el.innerHTML.includes('You are going to turn on the confidentiality.')).toBe(true);
-  });
-});