Merge pull request #10580 from akolson/fix-remote-content-browsing-sk…

…ipped-tests

Fixes remote content browsing skipped tests

kolibri/plugins/learn/assets/src/composables/__mocks__/usePinnedDevices.js

@@ -0,0 +1,47 @@
+/**
+ * `usePinnedDevices` composable function mock.
+ *
+ * If default values are sufficient for tests,
+ * you only need call `jest.mock('<usePinnedDevices file path>')`
+ * at the top of a test file.
+ *
+ * If you need to override some default values from some tests,
+ * you can import a helper function `usePinnedDevicesMock` that accepts
+ * an object with values to be overriden and use it together
+ * with  `mockImplementation` as follows:
+ *
+ * ```
+ * // eslint-disable-next-line import/named
+ * import usePinnedDevices, { usePinnedDevicesMock } from '<usePinnedDevices file path>';
+ *
+ * jest.mock('<usePinnedDevices file path>')
+ *
+ * it('test', () => {
+ *   usePinnedDevices.mockImplementation(
+ *    () => usePinnedDevicesMock({ channels: [{ id: 'channel-1' }] })
+ *   );
+ * })
+ * ```
+ *
+ * You can reset your mock implementation back to default values
+ * for other tests by calling the following in `beforeEach`:
+ *
+ * ```
+ * usePinnedDevices.mockImplementation(() => usePinnedDevicesMock())
+ * ```
+ */
+
+const MOCK_DEFAULTS = {
+  createPinForUser: jest.fn(() => ''),
+  deletePinForUser: jest.fn(() => ''),
+  fetchPinsForUser: jest.fn(() => []),
+};
+
+export function usePinnedDevicesMock(overrides = {}) {
+  return {
+    ...MOCK_DEFAULTS,
+    ...overrides,
+  };
+}
+
+export default jest.fn(() => usePinnedDevicesMock());

kolibri/plugins/learn/assets/test/views/library-page.spec.js

@@ -35,19 +35,20 @@ const mockStore = new Vuex.Store({
   },
 });
 
+jest.mock('../../src/composables/useChannels');
 jest.mock('../../src/composables/useDevices');
 jest.mock('../../src/composables/useSearch');
 jest.mock('../../src/composables/useLearnerResources');
 jest.mock('../../src/composables/useLearningActivities');
-jest.mock('../../src/composables/usePinnedDevices');
 jest.mock('../../src/composables/useContentLink');
+jest.mock('../../src/composables/usePinnedDevices');
 jest.mock('kolibri-design-system/lib/useKResponsiveWindow');
+jest.mock('kolibri.resources');
 jest.mock('kolibri.urls');
 
-//ToDo: fix tests suit, overhaul could be require here
 describe('LibraryPage', () => {
   describe('filters button', () => {
-    it.skip('is visible when the page is not large', () => {
+    it('is visible when the page is not large', () => {
       useKResponsiveWindow.mockImplementation(() => ({
         windowIsLarge: false,
       }));
@@ -57,7 +58,7 @@ describe('LibraryPage', () => {
       });
       expect(wrapper.find('[data-test="filter-button"').element).toBeTruthy();
     });
-    it.skip('is hidden when the page is large', () => {
+    it('is hidden when the page is large', () => {
       useKResponsiveWindow.mockImplementation(() => ({
         windowIsLarge: true,
       }));
@@ -70,7 +71,7 @@ describe('LibraryPage', () => {
   });
 
   describe('when user clicks the filters button', () => {
-    it.skip('displays the filters side panel, which is not displayed by default', async () => {
+    it('displays the filters side panel, which is not displayed by default', async () => {
       useKResponsiveWindow.mockImplementation(() => ({
         windowIsLarge: false,
       }));
@@ -91,15 +92,15 @@ describe('LibraryPage', () => {
 
   describe('displaying channels and recent/popular content ', () => {
     /** useSearch#displayingSearchResults is falsy and there are rootNodes.length */
-    it.skip('displays a grid of channel cards', () => {
+    it('displays a grid of channel cards', () => {
       useSearch.mockImplementation(() => useSearchMock({ displayingSearchResults: false }));
       const wrapper = shallowMount(LibraryPage, {
         localVue,
         store: mockStore,
       });
       expect(wrapper.find("[data-test='channel-cards']").exists()).toBe(true);
     });
-    it.skip('displays a ResumableContentGrid', () => {
+    it('displays a ResumableContentGrid', () => {
       useSearch.mockImplementation(() => useSearchMock({ displayingSearchResults: false }));
       const wrapper = shallowMount(LibraryPage, {
         localVue,
@@ -110,7 +111,7 @@ describe('LibraryPage', () => {
   });
 
   describe('when page is loading', () => {
-    it.skip('shows a KCircularLoader', () => {
+    it('shows a KCircularLoader', () => {
       useSearch.mockImplementation(() => useSearchMock({ searchLoading: true }));
       const wrapper = shallowMount(LibraryPage, {
         localVue,