Cleanup few tests

Improve clarity and remove dependencies
of tests on wrapper internal implementation

Author: MisRob

contentcuration/contentcuration/frontend/settings/pages/Account/index.vue

@@ -36,7 +36,7 @@
           {{ fullName }}
           <KButton
             class="px-2"
-            data-test="name-form"
+            data-test="edit-name-btn"
             appearance="basic-link"
             :text="$tr('editFullNameAction')"
             @click="showFullNameForm = true"
@@ -54,7 +54,7 @@
         class="row"
       >
         <KButton
-          data-test="password-form"
+          data-test="change-password-btn"
           appearance="basic-link"
           :text="$tr('changePasswordAction')"
           @click="showPasswordForm = true"
@@ -142,6 +142,7 @@
       v-if="showExportDataNotice"
       :submitText="$tr('exportDataBtn')"
       :title="$tr('exportStartedHeader')"
+      data-test="export-notice"
       @submit="showExportDataNotice = false"
     >
       {{ $tr('exportAccountDataModalMessage') }}

contentcuration/contentcuration/frontend/settings/pages/__tests__/account.spec.js

@@ -25,7 +25,6 @@ function makeWrapper(currentUser = {}) {
       $store: {
         dispatch: jest.fn(),
       },
-      $tr: text => text,
     },
   });
 }
@@ -58,33 +57,63 @@ describe('account tab', () => {
     });
   });
 
-  it('clicking name link should show name change form', () => {
-    wrapper.find('[data-test="name-form"]').trigger('click');
-    expect(wrapper.vm.showFullNameForm).toBe(true);
+  it(`clicking 'Edit full name' link should show name change form`, () => {
+    wrapper.find('[data-test="edit-name-btn"]').trigger('click');
+    const nameForm = wrapper.findComponent({ name: 'FullNameForm' });
+    expect(nameForm.exists()).toBe(true);
+    expect(nameForm.isVisible()).toBe(true);
   });
 
-  it('clicking password link should show password change form', () => {
-    wrapper.find('[data-test="password-form"]').trigger('click');
-    expect(wrapper.vm.showPasswordForm).toBe(true);
+  it(`clicking 'Change password' button should show password change form`, () => {
+    wrapper.find('[data-test="change-password-btn"]').trigger('click');
+    const passwordForm = wrapper.findComponent({ name: 'ChangePasswordForm' });
+    expect(passwordForm.exists()).toBe(true);
+    expect(passwordForm.isVisible()).toBe(true);
   });
 
-  it('clicking export data button should call exportData', async () => {
-    const exportData = jest.spyOn(wrapper.vm, 'exportData');
-    exportData.mockImplementation(() => Promise.resolve());
-    await wrapper.find('[data-test="export-link"]').trigger('click');
-    expect(exportData).toHaveBeenCalled();
-    await wrapper.vm.$nextTick();
-    expect(wrapper.vm.showExportDataNotice).toBe(true);
+  describe('clicking export data button', () => {
+    let exportData;
+
+    beforeEach(async () => {
+      exportData = jest.spyOn(wrapper.vm, 'exportData');
+      exportData.mockImplementation(() => Promise.resolve());
+      wrapper.find('[data-test="export-link"]').trigger('click');
+      await wrapper.vm.$nextTick();
+    });
+
+    it(`should call 'exportData'`, async () => {
+      expect(exportData).toHaveBeenCalled();
+    });
+
+    it('should display export data notice', async () => {
+      const notice = wrapper.find('[data-test="export-notice"]');
+      expect(notice.exists()).toBe(true);
+      expect(notice.isVisible()).toBe(true);
+      expect(notice.text()).toContain(
+        "You'll receive an email with your data when the export is completed",
+      );
+    });
   });
 
-  it('export data failure', async () => {
-    const exportData = jest.spyOn(wrapper.vm, 'exportData');
-    exportData.mockImplementation(() => Promise.reject('error'));
-    await wrapper.find('[data-test="export-link"]').trigger('click');
-    expect(exportData).toHaveBeenCalled();
-    expect(wrapper.vm.showExportDataNotice).toBe(false);
-    expect(wrapper.vm.$store.dispatch).toHaveBeenCalledWith('showSnackbar', {
-      text: wrapper.vm.$tr('exportFailed'),
+  describe('on export data failure', () => {
+    let exportData;
+
+    beforeEach(async () => {
+      exportData = jest.spyOn(wrapper.vm, 'exportData');
+      exportData.mockImplementation(() => Promise.reject('error'));
+      wrapper.find('[data-test="export-link"]').trigger('click');
+      await wrapper.vm.$nextTick();
+    });
+
+    it(`shouldn't display export data notice`, async () => {
+      const notice = wrapper.find('[data-test="export-notice"]');
+      expect(notice.exists()).toBe(false);
+    });
+
+    it(`should call 'showSnackbar' with a correct message`, () => {
+      expect(wrapper.vm.$store.dispatch).toHaveBeenCalledWith('showSnackbar', {
+        text: 'Unable to export data. Please try again.',
+      });
     });
   });
 });