Merge pull request #5523 from taoerman/issue-5452-add-loader

Add loader if channel is being published and community library side p…

Author: AlexVelezLl

contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/__tests__/SubmitToCommunityLibrarySidePanel.spec.js

@@ -23,6 +23,10 @@ jest.mock('shared/data/resources', () => ({
   CommunityLibrarySubmission: {
     create: jest.fn(() => Promise.resolve()),
   },
+  Channel: {
+    fetchModel: jest.fn(),
+    getCatalogChannel: jest.fn(() => Promise.resolve()),
+  },
 }));
 
 const store = factory();
@@ -33,6 +37,8 @@ const { nonePrimaryInfo$, flaggedPrimaryInfo$, approvedPrimaryInfo$, submittedPr
 async function makeWrapper({ channel, publishedData, latestSubmission }) {
   const isLoading = ref(true);
   const isFinished = ref(false);
+  const fetchPublishedData = jest.fn(() => Promise.resolve());
+  const fetchLatestSubmission = jest.fn(() => Promise.resolve());
 
   store.state.currentChannel.currentChannelId = channel.id;
   store.commit('channel/ADD_CHANNEL', channel);
@@ -41,12 +47,14 @@ async function makeWrapper({ channel, publishedData, latestSubmission }) {
     isLoading,
     isFinished,
     data: computed(() => publishedData),
+    fetchData: fetchPublishedData,
   });
 
   useLatestCommunityLibrarySubmission.mockReturnValue({
     isLoading,
     isFinished,
     data: computed(() => latestSubmission),
+    fetchData: fetchLatestSubmission,
   });
 
   const wrapper = mount(SubmitToCommunityLibrarySidePanel, {
@@ -265,6 +273,67 @@ describe('SubmitToCommunityLibrarySidePanel', () => {
     });
   });
 
+  describe('publishing state', () => {
+    beforeEach(() => {
+      jest.useFakeTimers();
+    });
+    afterEach(() => {
+      jest.useRealTimers();
+    });
+
+    it('disables form and shows loader when channel is publishing', async () => {
+      const channel = { ...publishedNonPublicChannel, publishing: true };
+      const wrapper = await makeWrapper({ channel, publishedData, latestSubmission: null });
+
+      // Loader/message container should exist
+      expect(wrapper.find('.publishing-loader').exists()).toBe(true);
+
+      const descriptionTextbox = wrapper.findComponent('.description-textbox');
+      expect(descriptionTextbox.exists()).toBe(false);
+      const submitButton = wrapper.find('[data-test="submit-button"]');
+      expect(submitButton.exists()).toBe(false);
+    });
+
+    it('enables form after publishing flips to false (poll-driven)', async () => {
+      const { Channel } = require('shared/data/resources');
+      Channel.fetchModel.mockResolvedValue({
+        id: publishedNonPublicChannel.id,
+        publishing: false,
+        version: 3,
+      });
+
+      const channel = { ...publishedNonPublicChannel, publishing: true };
+      const publishedDataWithVersion3 = {
+        ...publishedData,
+        3: {
+          included_languages: ['en', null],
+          included_licenses: [1],
+          included_categories: [Categories.SCHOOL],
+        },
+      };
+      const wrapper = await makeWrapper({
+        channel,
+        publishedData: publishedDataWithVersion3,
+        latestSubmission: null,
+      });
+
+      const updatedChannel = { ...channel, publishing: false, version: 3 };
+      await wrapper.setProps({ channel: updatedChannel });
+      store.commit('channel/ADD_CHANNEL', updatedChannel);
+
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.$nextTick();
+
+      const descriptionTextbox = wrapper.findComponent('.description-textbox');
+      expect(descriptionTextbox.props('disabled')).toBe(false);
+
+      await descriptionTextbox.vm.$emit('input', 'Some description');
+      await wrapper.vm.$nextTick();
+      const submitButton = wrapper.find('[data-test="submit-button"]');
+      expect(submitButton.attributes('disabled')).toBeUndefined();
+    });
+  });
+
   describe('show less button', () => {
     it('is displayed when additional info is shown', async () => {
       const wrapper = await makeWrapper({