tests: add tests for some components

kolibri/core/assets/src/views/TimeDuration.vue

@@ -1,7 +1,7 @@
 <template>
 
   <KOptionalText
-    :text="seconds ? formattedTime : ''"
+    :text="seconds !== null ? formattedTime : ''"
   />
 
 </template>

kolibri/core/assets/src/views/__tests__/FocusTrap.spec.js

@@ -0,0 +1,58 @@
+import { render } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import FocusTrap from '../FocusTrap.vue';
+
+const renderComponent = (props = {}) => {
+  return render(FocusTrap, {
+    props: {
+      disabled: false,
+      ...props,
+    },
+  });
+};
+
+describe('FocusTrap', () => {
+  it('should emit the "shouldFocusFirstEl" element when the tab key is pressed once', async () => {
+    const { emitted } = renderComponent();
+
+    await userEvent.tab();
+    expect(emitted()).toHaveProperty('shouldFocusFirstEl');
+    expect(emitted().shouldFocusFirstEl.length).toBe(1);
+  });
+
+  it("should trap the focus and emit 'shouldFocusFirstEl' if the last focusable element is focused and we focus the next element", async () => {
+    const { emitted } = renderComponent();
+
+    await userEvent.tab();
+    await userEvent.tab();
+
+    expect(emitted()).toHaveProperty('shouldFocusFirstEl');
+    expect(emitted().shouldFocusFirstEl.length).toBe(2);
+  });
+
+  it('should trap the focus and emit "shouldFocusLastEl" when the first element is focused and we focus the previous element', async () => {
+    const { emitted } = renderComponent();
+
+    await userEvent.tab();
+    await userEvent.tab();
+
+    // Shift + Tab is used to focus on the initial element again
+    await userEvent.tab({ shift: true });
+
+    expect(emitted()).toHaveProperty('shouldFocusLastEl');
+    expect(emitted().shouldFocusLastEl.length).toBe(1);
+  });
+
+  it("should not trap focus when 'disabled' prop is set to true", async () => {
+    const { emitted } = renderComponent({ disabled: true });
+
+    await userEvent.tab();
+    expect(emitted()).not.toHaveProperty('shouldFocusFirstEl');
+
+    await userEvent.tab();
+    expect(emitted()).not.toHaveProperty('shouldFocusFirstEl');
+
+    await userEvent.tab({ shift: true });
+    expect(emitted()).not.toHaveProperty('shouldFocusLastEl');
+  });
+});

kolibri/core/assets/src/views/__tests__/TimeDuration.spec.js

@@ -0,0 +1,53 @@
+import { render, screen } from '@testing-library/vue';
+import TimeDuration from '../TimeDuration.vue';
+
+const renderComponent = (props = {}) => {
+  return render(TimeDuration, {
+    props,
+  });
+};
+
+const MINUTE = 60;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+
+const testCases = [
+  // Under 2 minutes, should show seconds
+  { seconds: 0, expected: '0 seconds' },
+  { seconds: 1, expected: '1 second' },
+  { seconds: 59, expected: '59 seconds' },
+  { seconds: MINUTE, expected: '60 seconds' },
+  { seconds: 2 * MINUTE - 1, expected: '119 seconds' },
+
+  // Under 1 hour, should show minutes (rounded down)
+  { seconds: 2 * MINUTE, expected: '2 minutes' },
+  { seconds: 30 * MINUTE, expected: '30 minutes' },
+  { seconds: 30 * MINUTE + 1, expected: '30 minutes' },
+  { seconds: 30 * MINUTE + 59, expected: '30 minutes' },
+  { seconds: 59 * MINUTE, expected: '59 minutes' },
+
+  // Under 1 day, should show hours (rounded down)
+  { seconds: HOUR, expected: '1 hour' },
+  { seconds: 2 * HOUR, expected: '2 hours' },
+  { seconds: 23 * HOUR, expected: '23 hours' },
+  { seconds: 23 * HOUR + 59 * MINUTE, expected: '23 hours' },
+  { seconds: 23 * HOUR + 59 * MINUTE + 59, expected: '23 hours' },
+
+  // Over 1 day, should show days (rounded down)
+  { seconds: DAY, expected: '1 day' },
+  { seconds: 2 * DAY, expected: '2 days' },
+  { seconds: 6 * DAY, expected: '6 days' },
+  { seconds: 6 * DAY + 23 * HOUR + 59 * MINUTE + 59, expected: '6 days' },
+];
+
+describe('TimeDuration', () => {
+  it.each(testCases)('should render $seconds seconds as $expected', ({ seconds, expected }) => {
+    renderComponent({ seconds });
+    expect(screen.getByText(expected)).toBeInTheDocument();
+  });
+
+  it('should render empty string if seconds are not provided as props', () => {
+    renderComponent();
+    expect(screen.getByText('—')).toBeInTheDocument();
+  });
+});

kolibri/core/assets/src/views/__tests__/UserTypeDisplay.spec.js

@@ -0,0 +1,43 @@
+import { render, screen } from '@testing-library/vue';
+import UserTypeDisplay from '../UserTypeDisplay.vue';
+
+const sampleUserType = 'testing-user-type';
+const expectedSampleUserType = 'Testing User Type';
+
+// Helper function to render the component with the provided props
+const renderComponent = props => {
+  const translatedUserKinds = {
+    computed: {
+      typeDisplayMap() {
+        return {
+          [sampleUserType]: expectedSampleUserType,
+        };
+      },
+    },
+  };
+
+  return render(UserTypeDisplay, {
+    props: {
+      userType: sampleUserType,
+      ...props,
+    },
+    mixins: [translatedUserKinds],
+  });
+};
+
+describe('UserTypeDisplay', () => {
+  test('smoke test (renders the translated user type correctly)', () => {
+    renderComponent({ userType: sampleUserType });
+    expect(screen.getByText(expectedSampleUserType)).toBeInTheDocument();
+  });
+
+  test('does not render the untranslated user type', () => {
+    renderComponent({ userType: sampleUserType });
+    expect(screen.queryByText(sampleUserType)).not.toBeInTheDocument();
+  });
+
+  test('does not render anything if the userType prop is not provided', () => {
+    const { container } = renderComponent({ userType: undefined });
+    expect(container).toBeEmptyDOMElement();
+  });
+});