Migrate data export alert to KDS

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"
@@ -137,11 +137,16 @@
     <FullNameForm v-model="showFullNameForm" />
     <ChangePasswordForm v-model="showPasswordForm" />
     <DeleteAccountForm v-model="showDeleteConfirmation" />
-    <Alert
-      v-model="showExportDataNotice"
-      :header="$tr('exportStartedHeader')"
-      :text="$tr('exportAccountDataModalMessage')"
-    />
+
+    <KModal
+      v-if="showExportDataNotice"
+      :submitText="$tr('exportDataBtn')"
+      :title="$tr('exportStartedHeader')"
+      data-test="export-notice"
+      @submit="showExportDataNotice = false"
+    >
+      {{ $tr('exportAccountDataModalMessage') }}
+    </KModal>
   </div>
 
 </template>
@@ -154,15 +159,13 @@
   import ChangePasswordForm from './ChangePasswordForm';
   import DeleteAccountForm from './DeleteAccountForm';
   import CopyToken from 'shared/views/CopyToken';
-  import Alert from 'shared/views/Alert';
 
   export default {
     name: 'Account',
     components: {
       ChangePasswordForm,
       CopyToken,
       FullNameForm,
-      Alert,
       DeleteAccountForm,
     },
     data() {
@@ -235,6 +238,7 @@
       exportAccountDataModalMessage:
         "You'll receive an email with your data when the export is completed",
       exportFailed: 'Unable to export data. Please try again.',
+      exportDataBtn: 'OK',
     },
   };
 

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

@@ -21,6 +21,11 @@ function makeWrapper(currentUser = {}) {
       FullNameForm: true,
       ChangePasswordForm: true,
     },
+    mocks: {
+      $store: {
+        dispatch: jest.fn(),
+      },
+    },
   });
 }
 
@@ -52,22 +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 '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 password link should show password change form', () => {
-    wrapper.find('[data-test="password-form"]').trigger('click');
-    expect(wrapper.vm.showPasswordForm).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('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('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.',
+      });
+    });
   });
 });