tests: add tests for some files in ContentRenderer

kolibri/core/assets/src/views/ContentRenderer/__tests__/ContentRendererError.spec.js

@@ -0,0 +1,57 @@
+import { render, screen } from '@testing-library/vue';
+import VueRouter from 'vue-router';
+import userEvent from '@testing-library/user-event';
+import ContentRendererError from '../ContentRendererError.vue';
+
+// Helper function to render the component with given props and a router
+const renderComponent = props => {
+  return render(ContentRendererError, {
+    props,
+    routes: new VueRouter(),
+  });
+};
+
+const DEFAULT_REPORT_ERROR_MESSAGE = 'Help us by reporting this error';
+const RENDERED_NOT_AVAILABLE_MESSAGE = 'Kolibri is unable to render this resource';
+
+const sampleError = { message: 'Test error message' };
+
+describe('ContentRendererError', () => {
+  test('renders the error prompt properly if an error is provided', () => {
+    renderComponent({ error: sampleError });
+
+    expect(screen.getByText(RENDERED_NOT_AVAILABLE_MESSAGE)).toBeInTheDocument();
+    expect(screen.getByText(DEFAULT_REPORT_ERROR_MESSAGE)).toBeInTheDocument();
+  });
+
+  test('renders the error message properly after clicking the report error button', async () => {
+    renderComponent({ error: sampleError });
+
+    const reportErrorButton = screen.getByText(DEFAULT_REPORT_ERROR_MESSAGE);
+    await userEvent.click(reportErrorButton);
+
+    expect(screen.getByText(sampleError.message)).toBeInTheDocument();
+  });
+
+  test("hides the error message after clicking the 'Cancel' button in the Report Error Modal", async () => {
+    renderComponent({
+      error: sampleError,
+    });
+
+    const reportErrorButton = screen.getByText(DEFAULT_REPORT_ERROR_MESSAGE);
+    // Open the Report Error Modal
+    await userEvent.click(reportErrorButton);
+
+    // Close the Report Error Modal
+    const closeButton = screen.getByRole('button', { name: /close/i });
+    await userEvent.click(closeButton);
+    expect(screen.queryByText(sampleError.message)).not.toBeInTheDocument();
+  });
+
+  test('does not renders the report error button if the error is not provided', () => {
+    renderComponent({ error: null });
+
+    expect(screen.getByText(RENDERED_NOT_AVAILABLE_MESSAGE)).toBeInTheDocument();
+    expect(screen.queryByText(DEFAULT_REPORT_ERROR_MESSAGE)).not.toBeInTheDocument();
+  });
+});

kolibri/core/assets/src/views/ContentRenderer/__tests__/ContentRendererLoading.spec.js

@@ -0,0 +1,13 @@
+import { render, screen } from '@testing-library/vue';
+import VueRouter from 'vue-router';
+import ContentRendererLoading from '../ContentRendererLoading.vue';
+
+describe('ContentRendererLoading', () => {
+  test('the component should render correctly', () => {
+    render(ContentRendererLoading, {
+      routes: new VueRouter(),
+    });
+
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+  });
+});

kolibri/core/assets/src/views/ContentRenderer/__tests__/DownloadButton.spec.js

@@ -0,0 +1,96 @@
+import Vue from 'vue';
+import { render, screen } from '@testing-library/vue';
+import VueRouter from 'vue-router';
+import useUser, { useUserMock } from 'kolibri.coreVue.composables.useUser';
+import DownloadButton from '../DownloadButton.vue';
+import { RENDERER_SUFFIX } from '../constants';
+
+jest.mock('kolibri.coreVue.composables.useUser');
+
+const getDownloadableFile = (isExercise = false) => {
+  const PRESET = isExercise ? 'exercise' : 'thumbnail';
+
+  // Register a component with the preset name so that the file is considered renderable
+  Vue.component(PRESET + RENDERER_SUFFIX, { template: '<div></div>' });
+
+  return {
+    preset: PRESET,
+    available: true,
+    file_size: 100,
+    storage_url: 'http://example.com/sample.png',
+    extension: 'png',
+    checksum: '1234567890',
+  };
+};
+
+// A helper function to render the component with the given props and some default mocks
+const renderComponent = props => {
+  const { useUserMock: useUserMockProps, ...componentProps } = props;
+
+  useUser.mockImplementation(() =>
+    useUserMock({
+      isAppContext: false,
+      ...useUserMockProps,
+    })
+  );
+
+  return render(DownloadButton, {
+    routes: new VueRouter(),
+    props: {
+      files: [],
+      nodeTitle: '',
+      ...componentProps,
+    },
+  });
+};
+
+const SAVE_BUTTON_TEXT = 'Save to device';
+
+describe('DownloadButton', () => {
+  beforeEach(() => {
+    Vue.options.components = {};
+  });
+
+  test('does not render if isAppContext is true', () => {
+    renderComponent({
+      useUserMock: {
+        isAppContext: true,
+      },
+    });
+
+    expect(screen.queryByText(SAVE_BUTTON_TEXT)).not.toBeInTheDocument();
+  });
+
+  test('should not render if there are no downloadable files even if isAppContext is false', () => {
+    renderComponent({
+      files: [],
+      useUserMock: {
+        isAppContext: false,
+      },
+    });
+
+    expect(screen.queryByText(SAVE_BUTTON_TEXT)).not.toBeInTheDocument();
+  });
+
+  test('should not render if isAppContext is false and there are only renderable exercise files', () => {
+    renderComponent({
+      files: [getDownloadableFile(true)],
+      useUserMock: {
+        isAppContext: false,
+      },
+    });
+
+    expect(screen.queryByText(SAVE_BUTTON_TEXT)).not.toBeInTheDocument();
+  });
+
+  test('should render if isAppContext is false and there are renderable document files', async () => {
+    renderComponent({
+      files: [getDownloadableFile()],
+      useUserMock: {
+        isAppContext: false,
+      },
+    });
+
+    expect(screen.getByText(SAVE_BUTTON_TEXT)).toBeInTheDocument();
+  });
+});

kolibri/core/assets/src/views/ContentRenderer/__tests__/utils.spec.js

@@ -0,0 +1,80 @@
+import Vue from 'vue';
+import { canRenderContent, getRenderableFiles, getDefaultFile, getFilePreset } from '../utils';
+import { RENDERER_SUFFIX } from '../constants';
+
+// Add a component to the Vue instance that can be used to test the utility functions
+const addRegisterableComponents = (...presets) => {
+  presets.forEach(preset => {
+    Vue.component(preset + RENDERER_SUFFIX, { template: '<div></div>' });
+  });
+};
+
+describe('Utility Functions', () => {
+  beforeEach(() => {
+    Vue.options.components = {};
+  });
+
+  describe('canRenderContent', () => {
+    test('returns true if preset renderer component is registered', () => {
+      addRegisterableComponents('preset1');
+      expect(canRenderContent('preset1')).toBe(true);
+    });
+
+    test('returns false if preset renderer component is not registered', () => {
+      expect(canRenderContent('preset2')).toBe(false);
+    });
+  });
+
+  describe('getRenderableFiles', () => {
+    test('returns renderable files (files which are available, can be rendered and do not have a thumbnail)', () => {
+      const files = [
+        { preset: 'preset1', available: true },
+        { preset: 'preset2', available: true },
+        { preset: 'preset3', available: false },
+        { preset: 'preset4', available: true, thumbnail: true },
+      ];
+      addRegisterableComponents('preset1', 'preset3', 'preset4');
+
+      const renderableFiles = getRenderableFiles(files);
+      expect(renderableFiles).toHaveLength(1);
+      expect(renderableFiles[0]).toEqual(files[0]);
+    });
+
+    test('returns empty array if no renderable file is available', () => {
+      const files = [
+        { preset: 'preset1', available: false },
+        { preset: 'preset2', available: false, thumbnail: true },
+        { preset: 'preset3', available: false, supplementary: true },
+      ];
+
+      expect(getRenderableFiles(files)).toEqual([]);
+    });
+  });
+
+  describe('getDefaultFile', () => {
+    test('returns first file if files array is not empty', () => {
+      const files = [{ name: 'file1' }, { name: 'file2' }];
+      expect(getDefaultFile(files)).toEqual({ name: 'file1' });
+    });
+
+    test('returns undefined if files array is empty', () => {
+      expect(getDefaultFile([])).toBeUndefined();
+    });
+  });
+
+  describe('getFilePreset', () => {
+    test('returns file preset if file exists', () => {
+      const file = { preset: 'preset1' };
+      expect(getFilePreset(file, 'defaultPreset')).toBe('preset1');
+    });
+
+    test('returns default preset if file does not exist but can render content', () => {
+      addRegisterableComponents('defaultPreset');
+      expect(getFilePreset(null, 'defaultPreset')).toBe('defaultPreset');
+    });
+
+    test('returns null if file does not exist and cannot render content', () => {
+      expect(getFilePreset(null, 'defaultPreset')).toBeNull();
+    });
+  });
+});