[Remove Vuetify from Studio] Channel collection options

Author: vtushar06

contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetItem.vue

@@ -22,61 +22,31 @@
       {{ $formatNumber(channelCount) }}
     </td>
     <td class="text-xs-right">
-      <BaseMenu>
-        <template #activator="{ on }">
-          <VBtn
-            flat
-            block
-            v-on="on"
-          >
-            {{ $tr('options') }}
-            <Icon icon="dropdown" />
-          </VBtn>
-        </template>
-        <VList>
-          <VListTile
-            data-test="edit"
-            :to="channelSetDetailsLink"
-          >
-            <VListTileAction>
-              <Icon icon="edit" />
-            </VListTileAction>
-            <VListTileTitle>{{ $tr('edit') }}</VListTileTitle>
-          </VListTile>
-          <VListTile @click.prevent="deleteDialog = true">
-            <VListTileAction>
-              <Icon icon="trash" />
-            </VListTileAction>
-            <VListTileTitle>{{ $tr('delete') }}</VListTileTitle>
-          </VListTile>
-        </VList>
-      </BaseMenu>
-      <MessageDialog
-        v-model="deleteDialog"
-        :header="$tr('deleteChannelSetTitle')"
-        :text="$tr('deleteChannelSetText')"
+      <KButton
+        :text="$tr('options')"
+        appearance="flat-button"
+        :hasDropdown="true"
       >
-        <template #buttons="{ close }">
-          <VSpacer />
-          <VBtn
-            flat
-            color="primary"
-            @click="close"
-          >
-            {{ $tr('cancel') }}
-          </VBtn>
-          <VBtn
-            color="primary"
-            data-test="delete"
-            @click="
-              deleteChannelSet(channelSet);
-              close();
-            "
-          >
-            {{ $tr('deleteChannelSetTitle') }}
-          </VBtn>
+        <template #menu>
+          <KDropdownMenu
+            :options="dropdownOptions"
+            :hasIcons="true"
+            :constrainToScrollParent="false"
+            @select="handleOptionSelect"
+          />
         </template>
-      </MessageDialog>
+      </KButton>
+      <KModal
+        v-if="deleteDialog"
+        :title="$tr('deleteChannelSetTitle')"
+        :submitText="$tr('deleteChannelSetTitle')"
+        :cancelText="$tr('cancel')"
+        :appendToOverlay="true"
+        @submit="handleDelete"
+        @cancel="deleteDialog = false"
+      >
+        {{ $tr('deleteChannelSetText') }}
+      </KModal>
     </td>
   </tr>
 
@@ -87,13 +57,11 @@
 
   import { mapActions, mapGetters } from 'vuex';
   import { RouteNames } from '../../constants';
-  import MessageDialog from 'shared/views/MessageDialog';
   import CopyToken from 'shared/views/CopyToken';
 
   export default {
     name: 'ChannelSetItem',
     components: {
-      MessageDialog,
       CopyToken,
     },
     props: {
@@ -123,9 +91,34 @@
           ? this.channelSet.channels.filter(c => c).length
           : 0;
       },
+      dropdownOptions() {
+        return [
+          {
+            label: this.$tr('edit'),
+            value: 'edit',
+            icon: 'edit',
+          },
+          {
+            label: this.$tr('delete'),
+            value: 'delete',
+            icon: 'trash',
+          },
+        ];
+      },
     },
     methods: {
       ...mapActions('channelSet', ['deleteChannelSet']),
+      handleOptionSelect(option) {
+        if (option.value === 'edit') {
+          this.$router.push(this.channelSetDetailsLink);
+        } else if (option.value === 'delete') {
+          this.deleteDialog = true;
+        }
+      },
+      handleDelete() {
+        this.deleteChannelSet(this.channelSet);
+        this.deleteDialog = false;
+      },
     },
     $trs: {
       deleteChannelSetTitle: 'Delete collection',

contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue

@@ -90,14 +90,12 @@
                   flat
                 >
                   <ChannelItem :channelId="channelId">
-                    <VBtn
-                      flat
-                      class="ma-0"
-                      color="primary"
+                    <KButton
+                      :text="$tr('removeText')"
+                      appearance="flat-button"
+                      :primary="true"
                       @click="removeChannel(channelId)"
-                    >
-                      {{ $tr('removeText') }}
-                    </VBtn>
+                    />
                   </ChannelItem>
                 </VCard>
               </div>
@@ -204,8 +202,8 @@
   import { generateFormMixin, constantsTranslationMixin, routerMixin } from 'shared/mixins';
   import CopyToken from 'shared/views/CopyToken';
   import FullscreenModal from 'shared/views/FullscreenModal';
-  import Tabs from 'shared/views/Tabs';
   import StudioLargeLoader from 'shared/views/StudioLargeLoader';
+  import Tabs from 'shared/views/Tabs';
 
   const formMixin = generateFormMixin({
     name: {

contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSetItem.spec.js

@@ -1,46 +1,102 @@
-import { mount } from '@vue/test-utils';
-import { factory } from '../../../store';
-import router from '../../../router';
-import { RouteNames } from '../../../constants';
+import { render, screen } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import { createLocalVue } from '@vue/test-utils';
+import Vuex, { Store } from 'vuex';
+import VueRouter from 'vue-router';
 import ChannelSetItem from '../ChannelSetItem.vue';
+import { RouteNames } from '../../../constants';
 
-const store = factory();
+const localVue = createLocalVue();
+localVue.use(Vuex);
+localVue.use(VueRouter);
 
 const channelSet = {
   id: 'testing',
+  name: 'Test Collection',
   channels: [],
   secret_token: '1234567890',
 };
 
-store.commit('channelSet/ADD_CHANNELSET', channelSet);
+const mockActions = {
+  deleteChannelSet: jest.fn(() => Promise.resolve()),
+};
 
-function makeWrapper() {
-  const wrapper = mount(ChannelSetItem, {
-    router,
+const createMockStore = () => {
+  return new Store({
+    modules: {
+      channelSet: {
+        namespaced: true,
+        state: {
+          channelSetsMap: {
+            [channelSet.id]: channelSet,
+          },
+        },
+        getters: {
+          getChannelSet: state => id => state.channelSetsMap[id],
+        },
+        actions: mockActions,
+      },
+    },
+  });
+};
+
+const renderComponent = () => {
+  const store = createMockStore();
+  const router = new VueRouter({
+    routes: [
+      {
+        name: RouteNames.CHANNEL_SET_DETAILS,
+        path: '/channels/collections/:channelSetId',
+      },
+    ],
+  });
+
+  const result = render(ChannelSetItem, {
+    localVue,
     store,
-    sync: false,
-    propsData: { channelSetId: channelSet.id },
+    router,
+    props: {
+      channelSetId: channelSet.id,
+    },
   });
-  const deleteChannelSet = jest.spyOn(wrapper.vm, 'deleteChannelSet');
-  deleteChannelSet.mockImplementation(() => Promise.resolve());
-  return [wrapper, { deleteChannelSet }];
-}
 
-describe('channelSetItem', () => {
-  let wrapper, mocks;
+  return { ...result, router };
+};
 
+describe('channelSetItem', () => {
   beforeEach(() => {
-    [wrapper, mocks] = makeWrapper();
+    jest.clearAllMocks();
   });
 
-  it('clicking the edit option should open the channel set edit modal', () => {
-    wrapper.find('[data-test="edit"]').trigger('click');
-    expect(wrapper.vm.$route.name).toEqual(RouteNames.CHANNEL_SET_DETAILS);
+  it('clicking the edit option should navigate to channel set details', async () => {
+    const user = userEvent.setup();
+    const { router } = renderComponent();
+
+    const optionsButton = screen.getByRole('button', { name: /options/i });
+    await user.click(optionsButton);
+
+    const editOption = screen.getByText(/edit collection/i);
+    await user.click(editOption);
+
+    expect(router.currentRoute.path).toBe(`/channels/collections/${channelSet.id}`);
   });
 
-  it('clicking delete button in dialog should delete the channel set', () => {
-    wrapper.vm.deleteDialog = true;
-    wrapper.find('[data-test="delete"]').trigger('click');
-    expect(mocks.deleteChannelSet).toHaveBeenCalled();
+  it('clicking delete button in dialog should delete the channel set', async () => {
+    const user = userEvent.setup();
+    renderComponent();
+
+    const optionsButton = screen.getByRole('button', { name: /options/i });
+    await user.click(optionsButton);
+
+    const deleteOption = screen.getByText(/delete collection/i);
+    await user.click(deleteOption);
+
+    const modalText = /are you sure you want to delete this collection/i;
+    expect(screen.getByText(modalText)).toBeInTheDocument();
+
+    const confirmButton = screen.getByRole('button', { name: /delete collection/i });
+    await user.click(confirmButton);
+
+    expect(mockActions.deleteChannelSet).toHaveBeenCalledWith(expect.any(Object), channelSet);
   });
 });