Added admin page tests

contentcuration/contentcuration/frontend/administration/components/ClipboardChip.vue

@@ -6,7 +6,7 @@
         {{ value }}
       </div>
     </VChip>
-    <VBtn icon small right @click="copyToClipboard">
+    <VBtn icon small right data-test="copy" @click="copyToClipboard">
       <Icon small>
         content_copy
       </Icon>
@@ -21,7 +21,10 @@
   export default {
     name: 'ClipboardChip',
     props: {
-      value: String,
+      value: {
+        type: String,
+        required: true,
+      },
       successMessage: {
         default: 'Value copied to clipboard',
         type: String,

contentcuration/contentcuration/frontend/administration/components/ConfirmationDialog.vue

@@ -6,10 +6,10 @@
     :text="text"
   >
     <template #buttons="{close}">
-      <VBtn flat @click="close">
+      <VBtn flat data-test="close" @click="close">
         {{ cancelButtonText }}
       </VBtn>
-      <VBtn color="primary" dark @click="confirmHandler">
+      <VBtn color="primary" dark data-test="confirm" @click="$emit('confirm')">
         {{ confirmButtonText }}
       </VBtn>
     </template>
@@ -42,10 +42,6 @@
         type: String,
         required: true,
       },
-      confirmHandler: {
-        type: Function,
-        required: true,
-      },
       cancelButtonText: {
         type: String,
         default: 'Cancel',

contentcuration/contentcuration/frontend/administration/components/__tests__/clipboardChip.spec.js

@@ -0,0 +1,23 @@
+import { mount } from '@vue/test-utils';
+import ClipboardChip from '../ClipboardChip.vue';
+
+function makeWrapper() {
+  return mount(ClipboardChip, {
+    propsData: {
+      value: 'testtoken',
+    },
+  });
+}
+
+describe('clipboardChip', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = makeWrapper();
+  });
+  it('should fire a copy operation on button click', () => {
+    const copyToClipboard = jest.fn();
+    wrapper.setMethods({ copyToClipboard });
+    wrapper.find('[data-test="copy"]').trigger('click');
+    expect(copyToClipboard).toHaveBeenCalled();
+  });
+});

contentcuration/contentcuration/frontend/administration/components/__tests__/confirmationDialog.spec.js

@@ -0,0 +1,27 @@
+import { mount } from '@vue/test-utils';
+import ConfirmationDialog from '../ConfirmationDialog.vue';
+
+function makeWrapper() {
+  return mount(ConfirmationDialog, {
+    propsData: {
+      title: 'title',
+      text: 'text',
+      confirmButtonText: 'confirm',
+    },
+  });
+}
+
+describe('confirmationDialog', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = makeWrapper();
+  });
+  it('should emit input with false value on close', () => {
+    wrapper.find('[data-test="close"]').trigger('click');
+    expect(wrapper.emitted('input')[0][0]).toBe(false);
+  });
+  it('should emit confirm event when confirm button is clicked', () => {
+    wrapper.find('[data-test="confirm"]').trigger('click');
+    expect(wrapper.emitted('confirm')).toHaveLength(1);
+  });
+});

contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelActionsDropdown.vue

@@ -5,34 +5,38 @@
       v-model="restoreDialog"
       title="Restore channel"
       :text="`Are you sure you want to restore ${name} and make it active again?`"
+      data-test="confirm-restore"
       confirmButtonText="Restore"
-      :confirmHandler="restoreHandler"
+      @confirm="restoreHandler"
     />
 
     <ConfirmationDialog
       v-model="makePublicDialog"
       title="Make channel public"
       :text="`All users will be able to view and import content from ${name}.`"
+      data-test="confirm-public"
       confirmButtonText="Make public"
-      :confirmHandler="makePublicHandler"
+      @confirm="makePublicHandler"
     />
     <ConfirmationDialog
       v-model="makePrivateDialog"
       title="Make channel private"
       :text="`Only users with view-only or edit permissions will be able to access ${name}.`"
+      data-test="confirm-private"
       confirmButtonText="Make private"
-      :confirmHandler="makePrivateHandler"
+      @confirm="makePrivateHandler"
     />
     <ConfirmationDialog
       v-model="deleteDialog"
       title="Permanently delete channel"
       :text="`Are you sure you want to permanently delete ${name}?  This can not be undone.`"
+      data-test="confirm-delete"
       confirmButtonText="Delete permanently"
-      :confirmHandler="deleteHandler"
+      @confirm="deleteHandler"
     />
     <VMenu offset-y>
       <template #activator="{ on }">
-        <VBtn flat v-on="on">
+        <VBtn v-bind="$attrs" v-on="on">
           actions
           <Icon class="ml-1">
             arrow_drop_down
@@ -42,13 +46,13 @@
       <VList>
         <template v-if="channel.deleted">
           <VListTile
-            v-if="channel.deleted"
+            data-test="restore"
             @click="restoreDialog = true"
           >
             <VListTileTitle>Restore</VListTileTitle>
           </VListTile>
           <VListTile
-            v-if="channel.deleted"
+            data-test="delete"
             @click="deleteDialog = true"
           >
             <VListTileTitle>Delete permanently</VListTileTitle>
@@ -61,20 +65,28 @@
           >
             <VListTileTitle>View editors</VListTileTitle>
           </VListTile>
-          <VListTile @click="downloadPDF">
+          <VListTile
+            data-test="pdf"
+            @click="downloadPDF"
+          >
             <VListTileTitle>Download PDF</VListTileTitle>
           </VListTile>
-          <VListTile @click="downloadCSV">
+          <VListTile
+            data-test="csv"
+            @click="downloadCSV"
+          >
             <VListTileTitle>Download CSV</VListTileTitle>
           </VListTile>
           <VListTile
             v-if="channel.public"
+            data-test="private"
             @click="makePrivateDialog = true"
           >
             <VListTileTitle>Make private</VListTileTitle>
           </VListTile>
           <VListTile
             v-else
+            data-test="public"
             @click="makePublicDialog = true"
           >
             <VListTileTitle>Make public</VListTileTitle>
@@ -154,7 +166,7 @@
       },
       deleteHandler() {
         this.deleteDialog = false;
-        this.deleteChannel(this.channelId).then(() => {
+        return this.deleteChannel(this.channelId).then(() => {
           this.$store.dispatch('showSnackbarSimple', 'Channel deleted permanently');
         });
       },

contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelDetails.vue

@@ -0,0 +1,149 @@
+<template>
+
+  <FullscreenModal v-model="dialog">
+    <template #header>
+      <span v-if="channel">{{ channel.name }}</span>
+    </template>
+    <template #tabs>
+      <VTab class="px-3" data-test="info-tab" @click="tab='info'">
+        Channel info
+      </VTab>
+      <VTab class="px-3" data-test="share-tab" @click="tab='share'">
+        Sharing
+      </VTab>
+    </template>
+    <LoadingText v-if="loading" absolute />
+    <VCardText v-else>
+      <VTabsItems v-model="tab">
+        <VTabItem value="info">
+          <VLayout class="mb-3">
+            <VSpacer />
+            <ChannelActionsDropdown :channelId="channelId" color="greyBackground" />
+          </VLayout>
+          <VCard flat class="px-5">
+            <Details
+              v-if="channel && details"
+              :details="channelWithDetails"
+              :loading="loading"
+            />
+          </VCard>
+        </VTabItem>
+        <VTabItem value="share">
+          <VCard flat class="pa-5">
+            <ChannelSharing :channelId="channelId" />
+          </VCard>
+        </VTabItem>
+      </VTabsItems>
+    </VCardText>
+  </FullscreenModal>
+
+</template>
+
+<script>
+
+  import { mapActions, mapGetters } from 'vuex';
+  import ChannelActionsDropdown from './ChannelActionsDropdown';
+  import ChannelSharing from 'shared/views/channel/ChannelSharing';
+  import Details from 'shared/views/details/Details';
+  import { routerMixin } from 'shared/mixins';
+  import LoadingText from 'shared/views/LoadingText';
+  import FullscreenModal from 'shared/views/FullscreenModal';
+
+  export default {
+    name: 'ChannelDetails',
+    components: {
+      Details,
+      LoadingText,
+      FullscreenModal,
+      ChannelSharing,
+      ChannelActionsDropdown,
+    },
+    mixins: [routerMixin],
+    props: {
+      channelId: {
+        type: String,
+      },
+    },
+    data() {
+      return {
+        tab: 'info',
+        loading: true,
+        loadError: false,
+        details: null,
+      };
+    },
+    computed: {
+      ...mapGetters('channel', ['getChannel']),
+      dialog: {
+        get() {
+          return this.channelId && this.routeParamID === this.channelId;
+        },
+        set(value) {
+          if (!value) {
+            this.$router.push(this.backLink);
+          }
+        },
+      },
+      channel() {
+        return this.getChannel(this.channelId);
+      },
+      channelWithDetails() {
+        if (!this.channel || !this.details) {
+          return {};
+        }
+        return { ...this.channel, ...this.details };
+      },
+      backLink() {
+        return {
+          name: this.$route.matched[0].name,
+          query: this.$route.query,
+          params: {
+            ...this.$route.params,
+            channelId: null,
+          },
+        };
+      },
+      routeParamID() {
+        return this.$route.params.channelId;
+      },
+    },
+    beforeRouteEnter(to, from, next) {
+      next(vm => {
+        if (vm.channel) {
+          // Modal has already been opened
+          vm.updateTabTitle(vm.channel.name);
+        }
+      });
+    },
+    mounted() {
+      this.load();
+    },
+    methods: {
+      ...mapActions('channel', ['loadChannel', 'loadChannelDetails']),
+      load() {
+        this.loading = true;
+        const channelPromise = this.loadChannel(this.channelId);
+        const detailsPromise = this.loadChannelDetails(this.channelId);
+
+        return Promise.all([channelPromise, detailsPromise])
+          .then(([channel, details]) => {
+            // Channel either doesn't exist or user doesn't have access to channel
+            if (!channel) {
+              this.$router.replace(this.backLink);
+              return;
+            }
+            // Need to add here in case user is refreshing page
+            this.updateTabTitle(channel.name);
+
+            this.details = details;
+            this.loading = false;
+          })
+          .catch(() => {
+            this.loading = false;
+            this.loadError = true;
+          });
+      },
+    },
+  };
+
+</script>

contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelItem.vue

@@ -168,7 +168,7 @@
       <span v-else>Deleted</span>
     </td>
     <td class="text-xs-center">
-      <ChannelActionsDropdown :channelId="channelId" />
+      <ChannelActionsDropdown :channelId="channelId" flat />
     </td>
   </tr>
 
@@ -245,15 +245,15 @@
     methods: {
       ...mapActions('channel', ['updateChannel']),
       saveDemoServerUrl() {
-        this.updateChannel({
+        return this.updateChannel({
           id: this.channelId,
           demo_server_url: this.channel.demo_server_url,
         }).then(() => {
           this.$store.dispatch('showSnackbarSimple', 'Demo URL saved');
         });
       },
       saveSourceUrl() {
-        this.updateChannel({
+        return this.updateChannel({
           id: this.channelId,
           source_url: this.channel.source_url,
         }).then(() => {