Add VTL tests for RearrangeChannelsPage skeleton and simple cases

Author: soaebhasan12

kolibri/plugins/device/frontend/views/__tests__/RearrangeChannelsPage.spec.js

@@ -1,4 +1,4 @@
-import { render, screen, waitFor } from '@testing-library/vue';
+import { render, screen, waitFor, fireEvent } from '@testing-library/vue';
 import VueRouter from 'vue-router';
 import useUser, { useUserMock } from 'kolibri/composables/useUser'; // eslint-disable-line import-x/named
 import useSnackbar, { useSnackbarMock } from 'kolibri/composables/useSnackbar'; // eslint-disable-line import-x/named
@@ -7,12 +7,28 @@ import RearrangeChannelsPage from '../RearrangeChannelsPage';
 import makeStore from '../../__tests__/utils/makeStore';
 import { PageNames } from '../../constants';
 
-const { instructions$, noChannels$ } = createTranslator(
+const { instructions$, noChannels$, successNotification$ } = createTranslator(
   RearrangeChannelsPage.name,
   RearrangeChannelsPage.$trs,
 );
 
 jest.mock('../../composables/useContentTasks');
+jest.mock('kolibri-common/composables/usePageLoading');
+jest.mock('kolibri-common/components/sortable/DragContainer', () => ({
+  default: {
+    name: 'DragContainer',
+    props: ['items'],
+    template: `
+      <div>
+        <button data-testid="trigger-sort" @click="$emit('sort', { newArray: [items[1], items[0]] })">
+          Trigger Sort
+        </button>
+        <slot />
+      </div>
+    `,
+  },
+ }
+));
 jest.mock('kolibri/composables/useUser');
 jest.mock('kolibri/composables/useSnackbar');
 
@@ -30,9 +46,6 @@ const MOCK_CHANNELS = [
   { id: '2', name: 'Channel 2' },
 ];
 
-RearrangeChannelsPage.methods.postNewOrder = () => Promise.resolve();
-RearrangeChannelsPage.methods.fetchChannels = () => Promise.resolve(MOCK_CHANNELS);
-
 describe('RearrangeChannelsPage', () => {
   let createSnackbar;
 
@@ -49,6 +62,8 @@ describe('RearrangeChannelsPage', () => {
 
   beforeEach(() => {
     jest.clearAllMocks();
+    RearrangeChannelsPage.methods.fetchChannels = () => Promise.resolve(MOCK_CHANNELS);
+    RearrangeChannelsPage.methods.postNewOrder = () => Promise.resolve();
   });
 
   it('loads the data on mount', async () => {
@@ -67,10 +82,25 @@ describe('RearrangeChannelsPage', () => {
   });
 
   it('shows a message when there are no channels', async () => {
-    RearrangeChannelsPage.methods.fetchChannels = () => Promise.resolve([]);
-    await renderComponent();
-    await waitFor(() => {
-      expect(screen.getByText(noChannels$())).toBeInTheDocument();
+      RearrangeChannelsPage.methods.fetchChannels = () => Promise.resolve([]);
+      await renderComponent();
+      await waitFor(() => {
+        expect(screen.getByText(noChannels$())).toBeInTheDocument();
+      });
+    });
+
+    it('handles a successful @sort event properly', async () => {
+      await renderComponent();
+      await waitFor(() => screen.getByText(MOCK_CHANNELS[0].name));
+
+      await fireEvent.click(screen.getByTestId('trigger-sort'));
+
+      await waitFor(() => {
+        expect(createSnackbar).toHaveBeenCalledWith(successNotification$());
+      });
+      const titles = screen
+        .getAllByText(new RegExp(`^(${MOCK_CHANNELS[0].name}|${MOCK_CHANNELS[1].name})$`))
+        .map(el => el.textContent);
+      expect(titles).toEqual([MOCK_CHANNELS[1].name, MOCK_CHANNELS[0].name]);
     });
   });
-});