[Remove Vuetify from Studio] Convert supplementary item unit tests to Vue Testing Library (#5937)

* refactor: migrate supplementaryItem tests to Vue Testing Library

* Removed: uploadingHandler test

* address pr review feedback

---------

Co-authored-by: Samson Akol <akolson2010@gmail.com>

Author: sharma-anushka

contentcuration/contentcuration/frontend/channelEdit/views/files/__tests__/supplementaryItem.spec.js

@@ -1,16 +1,23 @@
-import { mount } from '@vue/test-utils';
+import { render, screen, configure } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import VueRouter from 'vue-router';
 import SupplementaryItem from '../supplementaryLists/SupplementaryItem';
 import { factory } from '../../../store';
-import Uploader from 'shared/views/files/Uploader';
 
-function makeWrapper(props = {}) {
+configure({ testIdAttribute: 'data-test' });
+
+const router = new VueRouter();
+
+function renderComponent(props = {}) {
   const store = factory();
-  return mount(SupplementaryItem, {
+  return render(SupplementaryItem, {
+    router,
     store,
     attachTo: document.body,
-    propsData: {
+    props: {
       fileId: 'test',
       presetID: 'video_subtitle',
+      ...props,
     },
     computed: {
       file() {
@@ -28,48 +35,30 @@ function makeWrapper(props = {}) {
 }
 
 describe('supplementaryItem', () => {
-  let wrapper;
-
-  beforeEach(() => {
-    wrapper = makeWrapper();
-  });
-
-  it('setting readonly should disable uploading', async () => {
-    await wrapper.setProps({ readonly: true });
-    expect(wrapper.findComponent('[data-test="upload-file"]').exists()).toBe(false);
-  });
-
-  it('setting readonly should disable removing', async () => {
-    await wrapper.setProps({ readonly: true });
-    expect(wrapper.findComponent('[data-test="remove"]').exists()).toBe(false);
-  });
-
-  it('should call uploadingHandler when Uploader starts uploading file', async () => {
-    wrapper.findComponent(Uploader).vm.uploadingHandler({ id: 'file1' });
-    expect(wrapper.vm.fileUploadId).toBe('file1');
+  it('setting readonly should disable uploading', () => {
+    renderComponent({ readonly: true });
+    expect(screen.queryByTestId('upload-file')).not.toBeInTheDocument();
   });
 
-  it('should call uploadCompleteHandler when Uploader finishes uploading file', async () => {
-    const uploadCompleteHandler = jest.fn();
-    await wrapper.setProps({ uploadCompleteHandler });
-    wrapper.findComponent(Uploader).vm.uploadCompleteHandler({ id: 'file1' });
-    expect(uploadCompleteHandler).toHaveBeenCalledWith({ id: 'file1' });
+  it('setting readonly should disable removing', () => {
+    renderComponent({ readonly: true });
+    expect(screen.queryByTestId('remove')).not.toBeInTheDocument();
   });
 
-  it('uploading should be true if progress < 1', async () => {
-    expect(wrapper.findComponent('[data-test="uploading"]').exists()).toBe(false);
-    const testwrapper = makeWrapper({ progress: 0.5 });
-    expect(testwrapper.findComponent('[data-test="uploading"]').exists()).toBe(true);
+  it('shows an upload status indicator while a file is uploading', () => {
+    renderComponent({ progress: 0.5 });
+    expect(screen.queryByTestId('uploading')).toBeInTheDocument();
   });
 
-  it('should disable ability to upload other files during a file upload', async () => {
-    const testwrapper = makeWrapper({ progress: 0.5 });
-    expect(testwrapper.findComponent('[data-test="upload-file"]').exists()).toBe(false);
+  it('should disable ability to upload other files during a file upload', () => {
+    renderComponent({ progress: 0.5 });
+    expect(screen.queryByTestId('upload-file')).not.toBeInTheDocument();
   });
 
   it('clicking remove button should emit remove event with file id', async () => {
-    const wrapper = makeWrapper({ id: 'test-remove' });
-    await wrapper.findComponent('[data-test="remove"]').trigger('click');
-    expect(wrapper.emitted('remove')[0][0]).toBe('test-remove');
+    const user = userEvent.setup();
+    const { emitted } = renderComponent({ id: 'test-remove' });
+    await user.click(screen.getByTestId('remove'));
+    expect(emitted().remove[0][0]).toBe('test-remove');
   });
 });