@@ -55,10 +58,6 @@ vi.mock('@/components/add-skill-dialog', () => ({
) : null,
-}));
-
-// Mock SkillDetailModal
-vi.mock('@/components/skill-detail-modal', () => ({
SkillDetailModal: ({ skill, onClose, onRatingChange, onDeleteSkill, onConfirm }: any) => (
SkillDetailModal
@@ -76,10 +75,6 @@ vi.mock('@/components/skill-detail-modal', () => ({
),
-}));
-
-// Mock SkillBox
-vi.mock('@/components/skill-box', () => ({
SkillBox: ({ skill, onSkillClick, showRating }: any) => (
Loading...
,
-}));
-
-// Mock DefaultEmptyBox
-vi.mock('@/components/default-empty-box', () => ({
DefaultEmptyBox: ({ message, className }: any) => (
Loading skeletons
@@ -115,8 +98,12 @@ vi.mock('@/components/skeleton-multiplier', () => ({
),
}));
+vi.mock('sonner', () => ({
+ toast: { success: vi.fn(), error: vi.fn() },
+}));
+
import SkillsPage from '../page';
-import { useProfileSkills } from '@/hooks/profile/use-profile-skills';
+import { useProfileSkills } from '@iblai/iblai-js/web-containers';
describe('SkillsPage', () => {
beforeEach(() => {
@@ -138,6 +125,11 @@ describe('SkillsPage', () => {
updatingSkill: false,
deletingSkill: false,
handleSkillsUpdate: mockHandleSkillsUpdate,
+ handleSkillsCreate: mockHandleSkillsCreate,
+ handleFetchAllSkills: mockHandleFetchAllSkills,
+ fetchedSkills: null,
+ isFetchingSkills: false,
+ isFetchingSkillsError: false,
} as any);
});
diff --git a/app/profile/skills/page.tsx b/app/profile/skills/page.tsx
index b629433..676b653 100644
--- a/app/profile/skills/page.tsx
+++ b/app/profile/skills/page.tsx
@@ -2,15 +2,19 @@
import { useState, useRef } from 'react';
import { Search, Plus, ChevronLeft, ChevronRight } from 'lucide-react';
-import { AddSkillDialog } from '@/components/add-skill-dialog';
-import { SkillDetailModal } from '@/components/skill-detail-modal';
-import { useProfileSkills } from '@/hooks/profile/use-profile-skills';
-import { SkillBox } from '@/components/skill-box';
-import { SkeletonSkillBox } from '@/components/skeleton-skill-box';
-import { DefaultEmptyBox } from '@/components/default-empty-box';
+import {
+ AddSkillDialog,
+ DefaultEmptyBox,
+ SkeletonMultiplier,
+ SkeletonSkillBox,
+ SkillBox,
+ SkillDetailModal,
+ useProfileSkills,
+ type UserSkill,
+} from '@iblai/iblai-js/web-containers';
+import { toast } from 'sonner';
import _ from 'lodash';
-import { SkeletonMultiplier } from '@/components/skeleton-multiplier';
-import { UserSkill } from '@/types/skills';
+import type { Skill } from '@iblai/iblai-api';
export default function SkillsPage() {
const {
@@ -30,6 +34,11 @@ export default function SkillsPage() {
updatingSkill,
deletingSkill,
handleSkillsUpdate,
+ handleSkillsCreate,
+ handleFetchAllSkills,
+ fetchedSkills,
+ isFetchingSkills,
+ isFetchingSkillsError,
} = useProfileSkills();
const [searchQuery, setSearchQuery] = useState('');
const [addSkillDialogOpen, setAddSkillDialogOpen] = useState(false);
@@ -355,9 +364,30 @@ export default function SkillsPage() {
open={addSkillDialogOpen}
onOpenChange={setAddSkillDialogOpen}
type={skillTypeToAdd}
- existingSkills={{
- selfReported: selfReportedSkills,
- desired: desiredSkills,
+ fetchedSkills={fetchedSkills as any}
+ isFetchingSkills={isFetchingSkills}
+ isFetchingSkillsError={isFetchingSkillsError}
+ updatingSkill={updatingSkill}
+ onSearch={(query) => handleFetchAllSkills(query)}
+ onAddSkill={async (skill: Skill) => {
+ const targetBucket = skillTypeToAdd === 'desired' ? desiredSkills : selfReportedSkills;
+ const existing = (targetBucket?.skills || []) as any[];
+ const existingLevels = (targetBucket?.data?.level || []) as number[];
+ const newPayload: any = {
+ skills: [...existing, { name: skill.name }],
+ data: {
+ ...(targetBucket?.data || {}),
+ level: [...existingLevels, 0],
+ },
+ type: skillTypeToAdd,
+ };
+ const ok = await handleSkillsCreate(newPayload);
+ if (ok) {
+ toast.success('Skill added successfully');
+ setAddSkillDialogOpen(false);
+ } else {
+ toast.error('Failed to add skill');
+ }
}}
/>
{/* Skill Detail Modal */}
diff --git a/components/__tests__/course-outline-drawer.test.tsx b/components/__tests__/course-outline-drawer.test.tsx
deleted file mode 100644
index 018e673..0000000
--- a/components/__tests__/course-outline-drawer.test.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import React from 'react';
-
-vi.mock('@/components/ui/sheet', () => ({
- Sheet: ({ children, open }: any) => (open ?
{children}
: null),
- SheetContent: ({ children }: any) =>
{children}
,
- SheetHeader: ({ children }: any) =>
{children}
,
- SheetTitle: ({ children }: any) =>
{children}
,
-}));
-
-vi.mock('../course-outline', () => ({
- CourseOutline: () =>
Course Outline Content
,
-}));
-
-import { CourseOutlineContext } from '@/contexts/course-outline-context';
-import { CourseOutlineDrawer } from '../course-outline-drawer';
-
-describe('CourseOutlineDrawer', () => {
- const mockSetCourseOutlineDrawerOpen = vi.fn();
-
- const createWrapper = (overrides = {}) => {
- const contextValue = {
- courseOutline: {} as any,
- courseOutlineLoading: false,
- expandedModule: '',
- expandedLessons: [],
- selectLesson: vi.fn(),
- toggleModule: vi.fn(),
- toggleLesson: vi.fn(),
- currentChapter: '',
- currentLesson: '',
- course: { display_name: 'Test Course' } as any,
- courseOutlineDrawerOpen: true,
- setCourseOutlineDrawerOpen: mockSetCourseOutlineDrawerOpen,
- currentUnitID: null,
- refetchCourseOutline: vi.fn(),
- ...overrides,
- };
-
- function CourseOutlineDrawerTestWrapper({ children }: { children: React.ReactNode }) {
- return (
-
- {children}
-
- );
- }
-
- return CourseOutlineDrawerTestWrapper;
- };
-
- it('renders without crashing when open', () => {
- const Wrapper = createWrapper();
- const { container } = render(
, { wrapper: Wrapper });
- expect(container).toBeTruthy();
- });
-
- it('does not render when closed', () => {
- const Wrapper = createWrapper({ courseOutlineDrawerOpen: false });
- const { queryByTestId } = render(
, { wrapper: Wrapper });
- expect(queryByTestId('sheet')).not.toBeInTheDocument();
- });
-
- it('renders the course display name', () => {
- const Wrapper = createWrapper();
- render(
, { wrapper: Wrapper });
- expect(screen.getByText('Test Course')).toBeInTheDocument();
- });
-
- it('renders the CourseOutline component', () => {
- const Wrapper = createWrapper();
- render(
, { wrapper: Wrapper });
- expect(screen.getByTestId('course-outline')).toBeInTheDocument();
- });
-
- it('handles null course gracefully', () => {
- const Wrapper = createWrapper({ course: null });
- const { container } = render(
, { wrapper: Wrapper });
- expect(container).toBeTruthy();
- });
-
- it('renders sheet header', () => {
- const Wrapper = createWrapper();
- render(
, { wrapper: Wrapper });
- expect(screen.getByTestId('sheet-header')).toBeInTheDocument();
- });
-
- it('renders sheet content', () => {
- const Wrapper = createWrapper();
- render(
, { wrapper: Wrapper });
- expect(screen.getByTestId('sheet-content')).toBeInTheDocument();
- });
-});
diff --git a/components/__tests__/course-outline.test.tsx b/components/__tests__/course-outline.test.tsx
deleted file mode 100644
index 2ba2a94..0000000
--- a/components/__tests__/course-outline.test.tsx
+++ /dev/null
@@ -1,358 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { CourseOutline } from '../course-outline';
-import { CourseOutlineContext, CourseOutlineContextType } from '@/contexts/course-outline-context';
-import { CourseOutlineChildNode } from '@/types/courses';
-import '@testing-library/jest-dom';
-
-vi.mock('../skeleton-multiplier', () => ({
- SkeletonMultiplier: () =>
,
-}));
-
-vi.mock('../skeleton-course-outline', () => ({
- SkeletonCourseOutline: () =>
,
-}));
-
-const makeNode = (overrides: Partial
= {}): CourseOutlineChildNode => ({
- id: 'node-1',
- block_id: 'block-1',
- type: 'html',
- display_name: 'Node 1',
- ...overrides,
-});
-
-const defaultContext: CourseOutlineContextType = {
- courseOutline: {} as CourseOutlineChildNode,
- courseOutlineLoading: false,
- expandedModule: '',
- expandedLessons: [],
- selectLesson: vi.fn(),
- toggleModule: vi.fn(),
- toggleLesson: vi.fn(),
- currentChapter: '',
- currentLesson: '',
- course: null,
- courseOutlineDrawerOpen: false,
- setCourseOutlineDrawerOpen: vi.fn(),
- currentUnitID: null,
- refetchCourseOutline: vi.fn(),
-};
-
-const renderWithContext = (ctx: Partial = {}) =>
- render(
-
-
- ,
- );
-
-describe('CourseOutline', () => {
- it('renders skeleton when loading', () => {
- renderWithContext({ courseOutlineLoading: true });
- expect(screen.getByTestId('skeleton')).toBeInTheDocument();
- });
-
- it('renders module names', () => {
- const modules = [
- makeNode({ id: 'mod-1', display_name: 'Module 1', children: [] }),
- makeNode({ id: 'mod-2', display_name: 'Module 2', children: [] }),
- ];
- renderWithContext({
- courseOutline: makeNode({ id: 'root', display_name: 'Root', children: modules }),
- });
- expect(screen.getByText('Module 1')).toBeInTheDocument();
- expect(screen.getByText('Module 2')).toBeInTheDocument();
- });
-
- it('shows lessons when module is expanded', () => {
- const modules = [
- makeNode({
- id: 'mod-1',
- display_name: 'Module 1',
- children: [
- makeNode({ id: 'lesson-1', display_name: 'Lesson 1' }),
- makeNode({ id: 'lesson-2', display_name: 'Lesson 2' }),
- ],
- }),
- ];
- renderWithContext({
- courseOutline: makeNode({ id: 'root', display_name: 'Root', children: modules }),
- expandedModule: 'mod-1',
- });
- expect(screen.getByText('Lesson 1')).toBeInTheDocument();
- expect(screen.getByText('Lesson 2')).toBeInTheDocument();
- });
-
- it('calls toggleModule on module click', () => {
- const toggleModule = vi.fn();
- const modules = [makeNode({ id: 'mod-1', display_name: 'Module 1' })];
- renderWithContext({
- courseOutline: makeNode({ id: 'root', display_name: 'Root', children: modules }),
- toggleModule,
- });
- fireEvent.click(screen.getByText('Module 1'));
- expect(toggleModule).toHaveBeenCalledWith('mod-1');
- });
-});
-
-describe('CompletionIcon rendering', () => {
- it('renders empty circle for incomplete leaf node', () => {
- const modules = [
- makeNode({
- id: 'mod-1',
- display_name: 'Module 1',
- children: [makeNode({ id: 'lesson-1', display_name: 'Lesson 1', complete: false })],
- }),
- ];
- const { container } = renderWithContext({
- courseOutline: makeNode({ id: 'root', display_name: 'Root', children: modules }),
- expandedModule: 'mod-1',
- });
- const svgs = container.querySelectorAll('svg');
- // The lesson's completion icon SVG
- // svgs[0] is the module's ChevronRight, svgs[1] is the CompletionIcon
- const lessonSvg = svgs[1];
- expect(lessonSvg).toBeTruthy();
- // Empty circle has gray stroke (#d1d5db)
- const circle = lessonSvg.querySelector('circle');
- expect(circle?.getAttribute('stroke')).toBe('#d1d5db');
- });
-
- it('renders filled amber check for fully complete leaf node', () => {
- const modules = [
- makeNode({
- id: 'mod-1',
- display_name: 'Module 1',
- children: [makeNode({ id: 'lesson-1', display_name: 'Lesson 1', complete: true })],
- }),
- ];
- const { container } = renderWithContext({
- courseOutline: makeNode({ id: 'root', display_name: 'Root', children: modules }),
- expandedModule: 'mod-1',
- });
- const svgs = container.querySelectorAll('svg');
- // svgs[0] is the module's ChevronRight, svgs[1] is the CompletionIcon
- const lessonSvg = svgs[1];
- // Filled circle has amber fill (#f59e0b)
- const circle = lessonSvg.querySelector('circle');
- expect(circle?.getAttribute('fill')).toBe('#f59e0b');
- // Has a checkmark path
- const path = lessonSvg.querySelector('path');
- expect(path).toBeTruthy();
- });
-
- it('renders partial progress for parent with mixed children completion', () => {
- const modules = [
- makeNode({
- id: 'mod-1',
- display_name: 'Module 1',
- children: [
- makeNode({
- id: 'lesson-1',
- display_name: 'Lesson 1',
- children: [
- makeNode({ id: 'sub-1', display_name: 'Sub 1', complete: true }),
- makeNode({ id: 'sub-2', display_name: 'Sub 2', complete: true }),
- makeNode({ id: 'sub-3', display_name: 'Sub 3', complete: false }),
- makeNode({ id: 'sub-4', display_name: 'Sub 4', complete: false }),
- ],
- }),
- ],
- }),
- ];
- const { container } = renderWithContext({
- courseOutline: makeNode({ id: 'root', display_name: 'Root', children: modules }),
- expandedModule: 'mod-1',
- });
- const svgs = container.querySelectorAll('svg');
- // svgs[0] is the module's ChevronRight, svgs[1] is the CompletionIcon
- const lessonSvg = svgs[1];
- // Partial progress has two circles (background + progress arc)
- const circles = lessonSvg.querySelectorAll('circle');
- expect(circles.length).toBe(2);
- // The progress arc has amber stroke
- const progressCircle = circles[1];
- expect(progressCircle.getAttribute('stroke')).toBe('#f59e0b');
- });
-
- it('renders full completion when all children are complete', () => {
- const modules = [
- makeNode({
- id: 'mod-1',
- display_name: 'Module 1',
- children: [
- makeNode({
- id: 'lesson-1',
- display_name: 'Lesson 1',
- children: [
- makeNode({ id: 'sub-1', display_name: 'Sub 1', complete: true }),
- makeNode({ id: 'sub-2', display_name: 'Sub 2', complete: true }),
- ],
- }),
- ],
- }),
- ];
- const { container } = renderWithContext({
- courseOutline: makeNode({ id: 'root', display_name: 'Root', children: modules }),
- expandedModule: 'mod-1',
- });
- const svgs = container.querySelectorAll('svg');
- // svgs[0] is the module's ChevronRight, svgs[1] is the CompletionIcon
- const lessonSvg = svgs[1];
- // Full completion: amber filled circle with checkmark
- const circle = lessonSvg.querySelector('circle');
- expect(circle?.getAttribute('fill')).toBe('#f59e0b');
- const path = lessonSvg.querySelector('path');
- expect(path).toBeTruthy();
- });
-
- it('renders empty circle when no children are complete', () => {
- const modules = [
- makeNode({
- id: 'mod-1',
- display_name: 'Module 1',
- children: [
- makeNode({
- id: 'lesson-1',
- display_name: 'Lesson 1',
- children: [
- makeNode({ id: 'sub-1', display_name: 'Sub 1', complete: false }),
- makeNode({ id: 'sub-2', display_name: 'Sub 2', complete: false }),
- ],
- }),
- ],
- }),
- ];
- const { container } = renderWithContext({
- courseOutline: makeNode({ id: 'root', display_name: 'Root', children: modules }),
- expandedModule: 'mod-1',
- });
- const svgs = container.querySelectorAll('svg');
- // svgs[0] is the module's ChevronRight, svgs[1] is the CompletionIcon
- const lessonSvg = svgs[1];
- // Empty: single circle with gray stroke
- const circles = lessonSvg.querySelectorAll('circle');
- expect(circles.length).toBe(1);
- expect(circles[0].getAttribute('stroke')).toBe('#d1d5db');
- });
-
- it('renders sublessons when a lesson is expanded', () => {
- const modules = [
- makeNode({
- id: 'mod-1',
- display_name: 'Module 1',
- children: [
- makeNode({
- id: 'lesson-1',
- display_name: 'Lesson 1',
- children: [
- makeNode({ id: 'sub-1', display_name: 'Sub 1', complete: false }),
- makeNode({ id: 'sub-2', display_name: 'Sub 2', complete: true }),
- ],
- }),
- ],
- }),
- ];
- renderWithContext({
- courseOutline: makeNode({ id: 'root', display_name: 'Root', children: modules }),
- expandedModule: 'mod-1',
- expandedLessons: ['lesson-1'],
- });
- expect(screen.getByText('Sub 1')).toBeInTheDocument();
- expect(screen.getByText('Sub 2')).toBeInTheDocument();
- });
-
- it('calls selectLesson when a sublesson is clicked', () => {
- const selectLesson = vi.fn();
- const modules = [
- makeNode({
- id: 'mod-1',
- display_name: 'Module 1',
- children: [
- makeNode({
- id: 'lesson-1',
- display_name: 'Lesson 1',
- children: [makeNode({ id: 'sub-1', display_name: 'Sub 1', complete: false })],
- }),
- ],
- }),
- ];
- renderWithContext({
- courseOutline: makeNode({ id: 'root', display_name: 'Root', children: modules }),
- expandedModule: 'mod-1',
- expandedLessons: ['lesson-1'],
- selectLesson,
- });
- fireEvent.click(screen.getByText('Sub 1'));
- expect(selectLesson).toHaveBeenCalledWith('sub-1');
- });
-
- it('highlights the current sublesson', () => {
- const modules = [
- makeNode({
- id: 'mod-1',
- display_name: 'Module 1',
- children: [
- makeNode({
- id: 'lesson-1',
- display_name: 'Lesson 1',
- children: [
- makeNode({ id: 'sub-1', display_name: 'Sub 1', complete: false }),
- makeNode({ id: 'sub-2', display_name: 'Sub 2', complete: false }),
- ],
- }),
- ],
- }),
- ];
- renderWithContext({
- courseOutline: makeNode({ id: 'root', display_name: 'Root', children: modules }),
- expandedModule: 'mod-1',
- expandedLessons: ['lesson-1'],
- currentLesson: 'sub-1',
- });
- const sub1Button = screen.getByText('Sub 1').closest('button');
- expect(sub1Button?.className).toContain('bg-amber-50');
- });
-
- it('calculates recursive completion correctly for deeply nested nodes', () => {
- // Parent with 2 children: one fully complete, one half complete
- // Expected ratio: (1 + 0.5) / 2 = 0.75 => level = round(0.75 * 7) = 5
- const modules = [
- makeNode({
- id: 'mod-1',
- display_name: 'Module 1',
- children: [
- makeNode({
- id: 'lesson-1',
- display_name: 'Lesson 1',
- children: [
- makeNode({
- id: 'sub-1',
- display_name: 'Sub 1',
- complete: true,
- }),
- makeNode({
- id: 'sub-2',
- display_name: 'Sub 2',
- children: [
- makeNode({ id: 'unit-1', display_name: 'Unit 1', complete: true }),
- makeNode({ id: 'unit-2', display_name: 'Unit 2', complete: false }),
- ],
- }),
- ],
- }),
- ],
- }),
- ];
- const { container } = renderWithContext({
- courseOutline: makeNode({ id: 'root', display_name: 'Root', children: modules }),
- expandedModule: 'mod-1',
- });
- const svgs = container.querySelectorAll('svg');
- // svgs[0] is the module's ChevronRight, svgs[1] is the CompletionIcon
- const lessonSvg = svgs[1];
- // Partial progress (level 5 of 7) -> two circles
- const circles = lessonSvg.querySelectorAll('circle');
- expect(circles.length).toBe(2);
- expect(circles[1].getAttribute('stroke')).toBe('#f59e0b');
- });
-});
diff --git a/components/__tests__/skeleton-course-outline.test.tsx b/components/__tests__/skeleton-course-outline.test.tsx
deleted file mode 100644
index 25955b2..0000000
--- a/components/__tests__/skeleton-course-outline.test.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { SkeletonCourseOutline } from '../skeleton-course-outline';
-
-vi.mock('@/components/ui/skeleton', () => ({
- Skeleton: ({ className }: { className?: string }) => (
-
- ),
-}));
-
-describe('SkeletonCourseOutline', () => {
- it('renders without crashing', () => {
- const { container } = render();
- expect(container.firstChild).toBeInTheDocument();
- });
-});
diff --git a/components/course-outline-drawer.tsx b/components/course-outline-drawer.tsx
deleted file mode 100644
index eb204be..0000000
--- a/components/course-outline-drawer.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-'use client';
-
-import { CourseOutlineContext } from '@/contexts/course-outline-context';
-import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
-import { useContext } from 'react';
-import { CourseOutline } from './course-outline';
-
-export function CourseOutlineDrawer() {
- const { course, courseOutlineDrawerOpen, setCourseOutlineDrawerOpen } =
- useContext(CourseOutlineContext);
-
- return (
-
-
-
-
- {course?.display_name}
-
-
-
-
-
- );
-}
diff --git a/components/course-outline.tsx b/components/course-outline.tsx
deleted file mode 100644
index fcfbcea..0000000
--- a/components/course-outline.tsx
+++ /dev/null
@@ -1,187 +0,0 @@
-import { CourseOutlineContext } from '@/contexts/course-outline-context';
-import { SkeletonMultiplier } from './skeleton-multiplier';
-import { ChevronRight } from 'lucide-react';
-import { useContext } from 'react';
-import { SkeletonCourseOutline } from './skeleton-course-outline';
-import { CourseOutlineChildNode } from '@/types/courses';
-
-const MAX_CHECKMARK_POINT = 7;
-
-const getCompletionRatio = (node: CourseOutlineChildNode): number => {
- if (!Array.isArray(node.children) || node.children.length === 0) {
- return node.complete ? 1 : 0;
- }
- const totalChildren = node.children.length;
- const completedScore = node.children.reduce((acc, child) => acc + getCompletionRatio(child), 0);
- return completedScore / totalChildren;
-};
-
-const getCompletionLevel = (node: CourseOutlineChildNode): number => {
- return Math.round(getCompletionRatio(node) * MAX_CHECKMARK_POINT);
-};
-
-const CompletionIcon = ({ node }: { node: CourseOutlineChildNode }) => {
- const level = getCompletionLevel(node);
- const size = 16;
- const strokeWidth = 2;
- const radius = (size - strokeWidth) / 2;
- const circumference = 2 * Math.PI * radius;
- const progress = level / MAX_CHECKMARK_POINT;
- const dashOffset = circumference * (1 - progress);
-
- if (level === MAX_CHECKMARK_POINT) {
- // Fully complete - filled check circle
- return (
-
- );
- }
-
- if (level === 0) {
- // No progress - empty circle
- return (
-
- );
- }
-
- // Partial progress - arc circle
- return (
-
- );
-};
-
-export const CourseOutline = () => {
- const {
- courseOutline,
- courseOutlineLoading,
- expandedModule,
- expandedLessons,
- selectLesson,
- toggleModule,
- toggleLesson,
- currentChapter,
- currentLesson,
- } = useContext(CourseOutlineContext);
- return (
-
- {courseOutlineLoading ? (
-
- ) : (
- Array.isArray(courseOutline?.children) &&
- courseOutline.children.map((module) => (
-
-
-
- {expandedModule === module.id && module.children && (
-
- {module.children.map((lesson) => (
-
-
-
- {lesson.children &&
- lesson.children.length > 0 &&
- expandedLessons.includes(lesson.id) && (
-
- {lesson.children.map((sublesson) => (
-
- ))}
-
- )}
-
- ))}
-
- )}
-
- ))
- )}
-
Timed Exam
,
-}));
-
-describe('EdxIframe - JWT PostMessage', () => {
- const mockSetIframeUrl = vi.fn();
- const mockSetActiveTab = vi.fn();
- const mockSetCurrentlyInExamSubsection = vi.fn();
- const mockSetExamInfo = vi.fn();
- const mockSelectLesson = vi.fn();
- const mockRefetchCourseOutline = vi.fn();
-
- const defaultContextValue = {
- iframeUrl: 'https://apps.learn.example.com/discussions/course-v1:test+course/posts',
- setIframeUrl: mockSetIframeUrl,
- courseOutline: {
- id: 'root',
- block_id: 'root-block',
- type: 'course',
- display_name: 'Test Course',
- children: [
- {
- id: 'test',
- block_id: 'test-block',
- type: 'chapter',
- display_name: 'Test Chapter',
- children: [],
- },
- ],
- }, // Non-empty to trigger course load
- setActiveTab: mockSetActiveTab,
- activeTab: 'forum',
- courseID: 'course-v1:test+course',
- currentlyInExamSubsection: false,
- setCurrentlyInExamSubsection: mockSetCurrentlyInExamSubsection,
- examInfo: null,
- setExamInfo: mockSetExamInfo,
- refresher: null,
- setRefresher: vi.fn(),
- };
-
- const defaultCourseOutlineValue = {
- courseOutline: {} as any,
- courseOutlineLoading: false,
- expandedModule: '',
- expandedLessons: [],
- selectLesson: mockSelectLesson,
- toggleModule: vi.fn(),
- toggleLesson: vi.fn(),
- currentChapter: '',
- currentLesson: '',
- course: null,
- courseOutlineDrawerOpen: false,
- setCourseOutlineDrawerOpen: vi.fn(),
- currentUnitID: null,
- refetchCourseOutline: mockRefetchCourseOutline,
- };
-
- beforeEach(() => {
- vi.clearAllMocks();
- localStorage.clear();
- });
-
- afterEach(() => {
- vi.restoreAllMocks();
- });
-
- const renderEdxIframe = (
- contextValue = defaultContextValue,
- courseOutlineValue = defaultCourseOutlineValue,
- ) => {
- return render(
-
-
-
-
- ,
- );
- };
-
- it('renders loading state initially', () => {
- const { container } = renderEdxIframe();
-
- // Component should render something (either loading or iframe)
- expect(container.firstChild).toBeTruthy();
- });
-
- it('renders iframe after loading completes', async () => {
- const { container } = renderEdxIframe();
-
- await waitFor(
- () => {
- const iframe = container.querySelector('iframe');
- expect(iframe).toBeInTheDocument();
- },
- { timeout: 1000 },
- );
- });
-
- it('sets iframe src from context', async () => {
- const { container } = renderEdxIframe();
-
- await waitFor(
- () => {
- const iframe = container.querySelector('iframe');
- expect(iframe).toBeInTheDocument();
- expect(iframe?.getAttribute('src')).toBe(defaultContextValue.iframeUrl);
- },
- { timeout: 1000 },
- );
- });
-
- it('responds to JWT ready message from iframe', async () => {
- const testToken = 'test-jwt-token-12345';
- localStorage.setItem(LOCALSTORAGE_KEYS.EDX_TOKEN_KEY, testToken);
-
- const { container } = renderEdxIframe();
-
- await waitFor(
- () => {
- const iframe = container.querySelector('iframe');
- expect(iframe).toBeInTheDocument();
- },
- { timeout: 1000 },
- );
-
- const iframe = container.querySelector('iframe');
- const mockPostMessage = vi.fn();
-
- // Mock contentWindow
- Object.defineProperty(iframe, 'contentWindow', {
- value: { postMessage: mockPostMessage },
- writable: true,
- configurable: true,
- });
-
- // Simulate the MFE sending a ready message
- await act(async () => {
- window.dispatchEvent(
- new MessageEvent('message', {
- data: { type: 'auth.jwt.ready' },
- origin: 'https://apps.learn.example.com',
- }),
- );
- });
-
- await waitFor(() => {
- expect(mockPostMessage).toHaveBeenCalledWith(
- {
- type: 'auth.jwt.token',
- edx_jwt_token: testToken,
- },
- 'https://apps.learn.example.com',
- );
- });
- });
-
- it('does not send JWT token if not in localStorage', async () => {
- // Don't set any token in localStorage
- const { container } = renderEdxIframe();
-
- await waitFor(
- () => {
- const iframe = container.querySelector('iframe');
- expect(iframe).toBeInTheDocument();
- },
- { timeout: 1000 },
- );
-
- const iframe = container.querySelector('iframe');
- const mockPostMessage = vi.fn();
-
- Object.defineProperty(iframe, 'contentWindow', {
- value: { postMessage: mockPostMessage },
- writable: true,
- configurable: true,
- });
-
- await act(async () => {
- window.dispatchEvent(
- new MessageEvent('message', {
- data: { type: 'auth.jwt.ready' },
- origin: 'https://apps.learn.example.com',
- }),
- );
- });
-
- // Should not have been called since no token
- expect(mockPostMessage).not.toHaveBeenCalled();
- });
-
- it('calls refetchCourseOutline when iframe loads', async () => {
- const { container } = renderEdxIframe();
-
- await waitFor(
- () => {
- const iframe = container.querySelector('iframe');
- expect(iframe).toBeInTheDocument();
- },
- { timeout: 1000 },
- );
-
- const iframe = container.querySelector('iframe');
- expect(iframe).toBeTruthy();
-
- await act(async () => {
- fireEvent.load(iframe!);
- });
-
- expect(mockRefetchCourseOutline).toHaveBeenCalledWith(false);
- });
-
- it('rejects messages from wrong origin', async () => {
- const testToken = 'test-jwt-token-12345';
- localStorage.setItem(LOCALSTORAGE_KEYS.EDX_TOKEN_KEY, testToken);
- const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
-
- const { container } = renderEdxIframe();
-
- await waitFor(
- () => {
- const iframe = container.querySelector('iframe');
- expect(iframe).toBeInTheDocument();
- },
- { timeout: 1000 },
- );
-
- const iframe = container.querySelector('iframe');
- const mockPostMessage = vi.fn();
-
- Object.defineProperty(iframe, 'contentWindow', {
- value: { postMessage: mockPostMessage },
- writable: true,
- configurable: true,
- });
-
- // Simulate message from wrong origin
- await act(async () => {
- window.dispatchEvent(
- new MessageEvent('message', {
- data: { type: 'auth.jwt.ready' },
- origin: 'https://malicious-site.com',
- }),
- );
- });
-
- // Should not have been called due to origin mismatch
- expect(mockPostMessage).not.toHaveBeenCalled();
- expect(consoleErrorSpy).toHaveBeenCalledWith(
- expect.stringContaining('Origin mismatch'),
- expect.any(Object),
- );
-
- consoleErrorSpy.mockRestore();
- });
-});
diff --git a/components/edx-iframe/__tests__/timed-exam.test.tsx b/components/edx-iframe/__tests__/timed-exam.test.tsx
deleted file mode 100644
index 886787c..0000000
--- a/components/edx-iframe/__tests__/timed-exam.test.tsx
+++ /dev/null
@@ -1,588 +0,0 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { render, screen, fireEvent, act } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import React from 'react';
-import _ from 'lodash';
-import { EdxIframeContext } from '@/hooks/courses/edx-iframe-context';
-
-const mockUpdateExamAttempt = vi.fn();
-const mockStartExam = vi.fn();
-const mockGetExamInfo = vi.fn();
-
-vi.mock('@iblai/iblai-js/data-layer', () => ({
- useUpdateExamAttemptMutation: vi.fn(() => [mockUpdateExamAttempt, { isLoading: false }]),
- useStartExamMutation: vi.fn(() => [mockStartExam, { isLoading: false }]),
- useLazyGetExamInfoQuery: vi.fn(() => [mockGetExamInfo]),
-}));
-
-vi.mock('lodash', () => ({
- default: {
- isEmpty: vi.fn((val: any) => {
- if (val === null || val === undefined) return true;
- if (typeof val === 'object' && !Array.isArray(val)) return Object.keys(val).length === 0;
- if (Array.isArray(val)) return val.length === 0;
- return false;
- }),
- },
-}));
-
-import { TimedExam } from '../timed-exam';
-
-const buildContextValue = (overrides = {}) => ({
- iframeUrl: '',
- setIframeUrl: vi.fn(),
- courseOutline: {} as any,
- setActiveTab: vi.fn(),
- activeTab: '',
- courseID: 'course-v1:test+101',
- currentlyInExamSubsection: false,
- setCurrentlyInExamSubsection: vi.fn(),
- examInfo: null,
- setExamInfo: vi.fn(),
- refresher: null,
- setRefresher: vi.fn(),
- ...overrides,
-});
-
-const noAttemptExamInfo = {
- exam: {
- id: 42,
- exam_name: 'Midterm Exam',
- time_limit_mins: 90,
- course_id: 'course-v1:test+101',
- content_id: 'block-v1:test+101+type@sequential+block@abc',
- attempt: {},
- },
- active_attempt: {},
-};
-
-const startedExamInfo = {
- exam: {
- id: 42,
- exam_name: 'Midterm Exam',
- time_limit_mins: 90,
- course_id: 'course-v1:test+101',
- content_id: 'block-v1:test+101+type@sequential+block@abc',
- attempt: {
- attempt_id: 'attempt-1',
- attempt_status: 'started',
- time_remaining_seconds: 5400,
- low_threshold_sec: 3600,
- critically_low_threshold_sec: 1800,
- },
- },
- active_attempt: { attempt_id: 'attempt-1' },
-};
-
-const submittedExamInfo = {
- exam: {
- id: 42,
- exam_name: 'Midterm Exam',
- time_limit_mins: 90,
- course_id: 'course-v1:test+101',
- content_id: 'block-v1:test+101+type@sequential+block@abc',
- attempt: {
- attempt_id: 'attempt-1',
- attempt_status: 'submitted',
- },
- },
- active_attempt: null,
-};
-
-const renderTimedExam = (contextOverrides = {}) => {
- const contextValue = buildContextValue(contextOverrides);
- return render(
-
-
- ,
- );
-};
-
-describe('TimedExam', () => {
- beforeEach(() => {
- vi.clearAllMocks();
- vi.useFakeTimers();
- // Re-apply lodash mock implementation
- vi.mocked(_.isEmpty).mockImplementation((val: any) => {
- if (val === null || val === undefined) return true;
- if (typeof val === 'object' && !Array.isArray(val)) return Object.keys(val).length === 0;
- if (Array.isArray(val)) return val.length === 0;
- return false;
- });
- mockUpdateExamAttempt.mockReturnValue({
- unwrap: vi.fn().mockResolvedValue({}),
- });
- mockStartExam.mockReturnValue({
- unwrap: vi.fn().mockResolvedValue({}),
- });
- mockGetExamInfo.mockResolvedValue({ data: startedExamInfo });
- });
-
- afterEach(() => {
- vi.useRealTimers();
- });
-
- it('returns null when examInfo is null', () => {
- const { container } = renderTimedExam({ examInfo: null });
- expect(container.firstChild).toBeNull();
- });
-
- it('returns null when exam is submitted', () => {
- const { container } = renderTimedExam({ examInfo: submittedExamInfo });
- expect(container.firstChild).toBeNull();
- });
-
- it('renders ready-to-start UI when no attempt exists', () => {
- renderTimedExam({ examInfo: noAttemptExamInfo });
- expect(screen.getByText(/Midterm Exam is a Timed Exam/)).toBeInTheDocument();
- });
-
- it('renders time limit in hours and minutes format (mixed)', () => {
- const examWith90Mins = {
- ...noAttemptExamInfo,
- exam: { ...noAttemptExamInfo.exam, time_limit_mins: 90 },
- };
- renderTimedExam({ examInfo: examWith90Mins });
- // Use getAllByText since the time appears in multiple elements
- const elements = screen.getAllByText(/1 hour 30 minutes/);
- expect(elements.length).toBeGreaterThan(0);
- });
-
- it('renders time limit in hours only (plural)', () => {
- const examWith120Mins = {
- ...noAttemptExamInfo,
- exam: { ...noAttemptExamInfo.exam, time_limit_mins: 120 },
- };
- renderTimedExam({ examInfo: examWith120Mins });
- const elements = screen.getAllByText(/2 hours/);
- expect(elements.length).toBeGreaterThan(0);
- });
-
- it('renders time limit in hours only (singular)', () => {
- const examWith60Mins = {
- ...noAttemptExamInfo,
- exam: { ...noAttemptExamInfo.exam, time_limit_mins: 60 },
- };
- renderTimedExam({ examInfo: examWith60Mins });
- const elements = screen.getAllByText(/1 hour/);
- expect(elements.length).toBeGreaterThan(0);
- });
-
- it('renders time limit in minutes only (plural)', () => {
- const examWith30Mins = {
- ...noAttemptExamInfo,
- exam: { ...noAttemptExamInfo.exam, time_limit_mins: 30 },
- };
- renderTimedExam({ examInfo: examWith30Mins });
- const elements = screen.getAllByText(/30 minutes/);
- expect(elements.length).toBeGreaterThan(0);
- });
-
- it('renders time limit in minutes only (singular)', () => {
- const examWith1Min = {
- ...noAttemptExamInfo,
- exam: { ...noAttemptExamInfo.exam, time_limit_mins: 1 },
- };
- renderTimedExam({ examInfo: examWith1Min });
- const elements = screen.getAllByText(/1 minute/);
- expect(elements.length).toBeGreaterThan(0);
- });
-
- it('renders start exam button', () => {
- renderTimedExam({ examInfo: noAttemptExamInfo });
- // The text appears in button and in sr-only div, use getAllByText
- const elements = screen.getAllByText(/I am ready to start this timed exam/);
- expect(elements.length).toBeGreaterThan(0);
- });
-
- it('renders additional time allowance section', () => {
- renderTimedExam({ examInfo: noAttemptExamInfo });
- expect(screen.getByText(/Can I request additional time/)).toBeInTheDocument();
- });
-
- it('calls handleStartExam when start button clicked', async () => {
- mockStartExam.mockReturnValue({ unwrap: vi.fn().mockResolvedValue({}) });
- mockGetExamInfo.mockResolvedValue({ data: startedExamInfo });
- renderTimedExam({ examInfo: noAttemptExamInfo });
-
- // Get the actual button (not sr-only text)
- const startBtn = screen.getByRole('button', { name: /I am ready to start this timed exam/ });
- await act(async () => {
- fireEvent.click(startBtn);
- });
- expect(mockStartExam).toHaveBeenCalled();
- });
-
- it('handles start exam error gracefully', async () => {
- const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
- mockStartExam.mockReturnValue({
- unwrap: vi.fn().mockRejectedValue(new Error('Start failed')),
- });
- renderTimedExam({ examInfo: noAttemptExamInfo });
-
- const startBtn = screen.getByRole('button', { name: /I am ready to start this timed exam/ });
- await act(async () => {
- fireEvent.click(startBtn);
- });
- expect(consoleSpy).toHaveBeenCalledWith('Failed to start exam:', expect.any(Error));
- consoleSpy.mockRestore();
- });
-
- it('renders timer UI when exam is started', () => {
- renderTimedExam({ examInfo: startedExamInfo });
- expect(screen.getByText(/You are taking "Midterm Exam" as a timed exam/)).toBeInTheDocument();
- });
-
- it('shows time remaining in hours:mm:ss format', () => {
- renderTimedExam({ examInfo: startedExamInfo });
- // 5400 seconds = 1:30:00
- expect(screen.getByText('1:30:00')).toBeInTheDocument();
- });
-
- it('shows time remaining in mm:ss format for sub-hour', () => {
- const examWithShortTime = {
- ...startedExamInfo,
- exam: {
- ...startedExamInfo.exam,
- attempt: {
- ...startedExamInfo.exam.attempt,
- time_remaining_seconds: 305,
- },
- },
- };
- renderTimedExam({ examInfo: examWithShortTime });
- // 305 seconds = 5:05
- expect(screen.getByText('5:05')).toBeInTheDocument();
- });
-
- it('shows End My Exam button when exam is started', () => {
- renderTimedExam({ examInfo: startedExamInfo });
- expect(screen.getByText('End My Exam')).toBeInTheDocument();
- });
-
- it('shows Show more link', () => {
- renderTimedExam({ examInfo: startedExamInfo });
- expect(screen.getByText('Show more')).toBeInTheDocument();
- });
-
- it('toggles to full instructions when Show more is clicked', () => {
- renderTimedExam({ examInfo: startedExamInfo });
- fireEvent.click(screen.getByText('Show more'));
- expect(screen.getByText('Show less')).toBeInTheDocument();
- expect(screen.getByText(/To receive credit for problems/)).toBeInTheDocument();
- });
-
- it('toggles back to short instructions when Show less is clicked', () => {
- renderTimedExam({ examInfo: startedExamInfo });
- fireEvent.click(screen.getByText('Show more'));
- fireEvent.click(screen.getByText('Show less'));
- expect(screen.getByText('Show more')).toBeInTheDocument();
- });
-
- it('opens end exam confirmation modal when End My Exam is clicked', () => {
- renderTimedExam({ examInfo: startedExamInfo });
- fireEvent.click(screen.getByText('End My Exam'));
- expect(
- screen.getByText(/Are you sure that you want to submit your timed exam/),
- ).toBeInTheDocument();
- });
-
- it('closes end exam modal when Cancel is clicked', () => {
- renderTimedExam({ examInfo: startedExamInfo });
- fireEvent.click(screen.getByText('End My Exam'));
- expect(screen.getByText(/Are you sure/)).toBeInTheDocument();
- fireEvent.click(screen.getByText(/No, I want to continue working/));
- expect(screen.queryByText(/Are you sure/)).not.toBeInTheDocument();
- });
-
- it('submits exam when confirm end exam is clicked', async () => {
- mockUpdateExamAttempt.mockReturnValue({ unwrap: vi.fn().mockResolvedValue({}) });
- mockGetExamInfo.mockResolvedValue({ data: submittedExamInfo });
-
- renderTimedExam({ examInfo: startedExamInfo });
- fireEvent.click(screen.getByText('End My Exam'));
-
- await act(async () => {
- fireEvent.click(screen.getByText(/Yes, submit my timed exam/));
- });
- expect(mockUpdateExamAttempt).toHaveBeenCalledWith(
- expect.objectContaining({ action: 'submit' }),
- );
- });
-
- it('handles submit exam error gracefully', async () => {
- const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
- mockUpdateExamAttempt.mockReturnValue({
- unwrap: vi.fn().mockRejectedValue(new Error('Submit failed')),
- });
-
- renderTimedExam({ examInfo: startedExamInfo });
- fireEvent.click(screen.getByText('End My Exam'));
-
- await act(async () => {
- fireEvent.click(screen.getByText(/Yes, submit my timed exam/));
- });
- expect(consoleSpy).toHaveBeenCalledWith('Failed to submit exam:', expect.any(Error));
- consoleSpy.mockRestore();
- });
-
- it('shows normal time style (blue) when time is high', () => {
- const examWithHighTime = {
- ...startedExamInfo,
- exam: {
- ...startedExamInfo.exam,
- attempt: {
- ...startedExamInfo.exam.attempt,
- time_remaining_seconds: 10000,
- low_threshold_sec: 3600,
- critically_low_threshold_sec: 1800,
- },
- },
- };
- const { container } = renderTimedExam({ examInfo: examWithHighTime });
- expect(container.querySelector('.bg-blue-50')).toBeInTheDocument();
- });
-
- it('shows yellow style when time is low', () => {
- const examWithLowTime = {
- ...startedExamInfo,
- exam: {
- ...startedExamInfo.exam,
- attempt: {
- ...startedExamInfo.exam.attempt,
- time_remaining_seconds: 2000,
- low_threshold_sec: 3600,
- critically_low_threshold_sec: 1800,
- },
- },
- };
- const { container } = renderTimedExam({ examInfo: examWithLowTime });
- expect(container.querySelector('.bg-yellow-50')).toBeInTheDocument();
- });
-
- it('shows red style when time is critically low', () => {
- const examWithCriticalTime = {
- ...startedExamInfo,
- exam: {
- ...startedExamInfo.exam,
- attempt: {
- ...startedExamInfo.exam.attempt,
- time_remaining_seconds: 500,
- low_threshold_sec: 3600,
- critically_low_threshold_sec: 1800,
- },
- },
- };
- const { container } = renderTimedExam({ examInfo: examWithCriticalTime });
- expect(container.querySelector('.bg-red-50')).toBeInTheDocument();
- });
-
- it('countdown timer decrements time', async () => {
- renderTimedExam({ examInfo: startedExamInfo });
- expect(screen.getByText('1:30:00')).toBeInTheDocument();
-
- await act(async () => {
- vi.advanceTimersByTime(1000);
- });
-
- expect(screen.getByText('1:29:59')).toBeInTheDocument();
- });
-
- it('initializes timer from examInfo when started', () => {
- const examWithSpecificTime = {
- ...startedExamInfo,
- exam: {
- ...startedExamInfo.exam,
- attempt: {
- ...startedExamInfo.exam.attempt,
- time_remaining_seconds: 3723,
- },
- },
- };
- renderTimedExam({ examInfo: examWithSpecificTime });
- // 3723 seconds = 1:02:03
- expect(screen.getByText('1:02:03')).toBeInTheDocument();
- });
-
- it('auto-submits when timer reaches zero', async () => {
- const examWithShortTime = {
- ...startedExamInfo,
- exam: {
- ...startedExamInfo.exam,
- attempt: {
- ...startedExamInfo.exam.attempt,
- time_remaining_seconds: 1,
- },
- },
- };
- const mockUnwrap = vi.fn().mockResolvedValue({});
- mockUpdateExamAttempt.mockReturnValue({ unwrap: mockUnwrap });
-
- renderTimedExam({ examInfo: examWithShortTime });
-
- await act(async () => {
- vi.advanceTimersByTime(1000);
- });
- // Flush all pending promises
- await act(async () => {
- await Promise.resolve();
- });
-
- expect(mockUpdateExamAttempt).toHaveBeenCalledWith(
- expect.objectContaining({ action: 'submit' }),
- );
- });
-
- it('handles auto-submit error gracefully', async () => {
- const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
- const examWithShortTime = {
- ...startedExamInfo,
- exam: {
- ...startedExamInfo.exam,
- attempt: {
- ...startedExamInfo.exam.attempt,
- time_remaining_seconds: 1,
- },
- },
- };
- const mockUnwrap = vi.fn().mockRejectedValue(new Error('Auto-submit failed'));
- mockUpdateExamAttempt.mockReturnValue({ unwrap: mockUnwrap });
-
- renderTimedExam({ examInfo: examWithShortTime });
-
- await act(async () => {
- vi.advanceTimersByTime(1000);
- });
- await act(async () => {
- await Promise.resolve();
- });
-
- expect(consoleSpy).toHaveBeenCalledWith('Failed to auto-submit exam:', expect.any(Error));
- consoleSpy.mockRestore();
- });
-
- it('does not run countdown when exam is not started', async () => {
- renderTimedExam({ examInfo: noAttemptExamInfo });
-
- await act(async () => {
- vi.advanceTimersByTime(5000);
- });
-
- // Timer should not have been running - no timer display shown
- expect(screen.queryByText(/End My Exam/)).not.toBeInTheDocument();
- });
-
- it('handles updateExamInfo call in updateExamInfo method', async () => {
- mockGetExamInfo.mockResolvedValue({ data: submittedExamInfo });
- mockUpdateExamAttempt.mockReturnValue({ unwrap: vi.fn().mockResolvedValue({}) });
-
- renderTimedExam({ examInfo: startedExamInfo });
- fireEvent.click(screen.getByText('End My Exam'));
-
- await act(async () => {
- fireEvent.click(screen.getByText(/Yes, submit my timed exam/));
- await Promise.resolve();
- });
-
- expect(mockGetExamInfo).toHaveBeenCalled();
- });
-
- it('handles updateExamInfo with null data', async () => {
- mockGetExamInfo.mockResolvedValue({ data: null });
- mockUpdateExamAttempt.mockReturnValue({ unwrap: vi.fn().mockResolvedValue({}) });
- const mockSetExamInfo = vi.fn();
-
- renderTimedExam({ examInfo: startedExamInfo, setExamInfo: mockSetExamInfo });
- fireEvent.click(screen.getByText('End My Exam'));
-
- await act(async () => {
- fireEvent.click(screen.getByText(/Yes, submit my timed exam/));
- await Promise.resolve();
- await Promise.resolve();
- });
-
- expect(mockSetExamInfo).toHaveBeenCalledWith(null);
- });
-
- it('disables start button when starting exam', async () => {
- mockStartExam.mockReturnValue({
- unwrap: vi.fn().mockImplementation(() => new Promise(() => {})),
- });
-
- renderTimedExam({ examInfo: noAttemptExamInfo });
- const startBtn = screen.getByRole('button', { name: /I am ready to start this timed exam/ });
-
- act(() => {
- fireEvent.click(startBtn);
- });
-
- // After click, button should be disabled due to isReadyToStart state
- expect(startBtn).toBeDisabled();
- });
-
- it('renders with default threshold values when not provided', () => {
- const examWithNoThresholds = {
- ...startedExamInfo,
- exam: {
- ...startedExamInfo.exam,
- attempt: {
- ...startedExamInfo.exam.attempt,
- time_remaining_seconds: 100,
- low_threshold_sec: undefined,
- critically_low_threshold_sec: undefined,
- },
- },
- };
- const { container } = renderTimedExam({ examInfo: examWithNoThresholds });
- // With default thresholds, 100 seconds should be critically low (< 3600)
- expect(container.querySelector('.bg-red-50')).toBeInTheDocument();
- });
-
- it('shows hour:min:sec format correctly for zero seconds', () => {
- const examWithZeroTime = {
- ...startedExamInfo,
- exam: {
- ...startedExamInfo.exam,
- attempt: {
- ...startedExamInfo.exam.attempt,
- time_remaining_seconds: 3600,
- },
- },
- };
- renderTimedExam({ examInfo: examWithZeroTime });
- // 3600 seconds = 1:00:00
- expect(screen.getByText('1:00:00')).toBeInTheDocument();
- });
-
- it('handles exam with no active_attempt', () => {
- // When both attempt and active_attempt are empty, should show ready-to-start UI
- vi.mocked(_.isEmpty).mockReturnValue(true);
- const examWithNoActive = {
- ...noAttemptExamInfo,
- active_attempt: null,
- };
- renderTimedExam({ examInfo: examWithNoActive });
- expect(screen.getByText(/Midterm Exam is a Timed Exam/)).toBeInTheDocument();
- });
-
- it('shows "Starting exam..." text when isStartingExam is true', async () => {
- // @ts-ignore
- const { useStartExamMutation } = await import('@iblai/iblai-js/data-layer');
- vi.mocked(useStartExamMutation as any).mockReturnValue([mockStartExam, { isLoading: true }]);
- renderTimedExam({ examInfo: noAttemptExamInfo });
- const elements = screen.getAllByText(/Starting exam.../);
- expect(elements.length).toBeGreaterThan(0);
- });
-
- it('shows "Submitting..." text when isSubmittingExam is true', async () => {
- // @ts-ignore
- const { useUpdateExamAttemptMutation } = await import('@iblai/iblai-js/data-layer');
- vi.mocked(useUpdateExamAttemptMutation as any).mockReturnValue([
- mockUpdateExamAttempt,
- { isLoading: true },
- ]);
- renderTimedExam({ examInfo: startedExamInfo });
- fireEvent.click(screen.getByText('End My Exam'));
- expect(screen.getByText('Submitting...')).toBeInTheDocument();
- });
-});
diff --git a/components/edx-iframe/edx-iframe.tsx b/components/edx-iframe/edx-iframe.tsx
deleted file mode 100644
index d5ecd82..0000000
--- a/components/edx-iframe/edx-iframe.tsx
+++ /dev/null
@@ -1,251 +0,0 @@
-import { EdxIframeContext } from '@/hooks/courses/edx-iframe-context';
-import { useContext, useEffect, useState, useRef } from 'react';
-import { useSearchParams } from 'next/navigation';
-import _ from 'lodash';
-import { useEdxIframe } from '@/hooks/courses/use-edx-iframe';
-import { ChevronRight, Loader2 } from 'lucide-react';
-import { useDebouncedCallback } from 'use-debounce';
-import useCourseNavigator from '@/hooks/courses/useCourseNavigator';
-import { CourseOutlineContext } from '@/contexts/course-outline-context';
-// @ts-ignore
-import { useLazyGetExamInfoQuery } from '@iblai/iblai-js/data-layer';
-import { TimedExam } from './timed-exam';
-import { LOCALSTORAGE_KEYS } from '@/constants/storage';
-import { cn } from '@/lib/utils';
-
-export const EdxIframe = () => {
- const {
- courseOutline,
- activeTab,
- courseID,
- setCurrentlyInExamSubsection,
- setExamInfo,
- examInfo,
- iframeUrl,
- setIframeUrl,
- refresher,
- } = useContext(EdxIframeContext);
- const { selectLesson, currentUnitID, refetchCourseOutline } = useContext(CourseOutlineContext);
-
- const searchParams = useSearchParams();
- const [fetchingIframeData, setFetchingIframeData] = useState(true);
- const { getIframeURL, findSequentialParent } = useEdxIframe();
- const [iframeLoaded, setIframeLoaded] = useState(false);
- const iframeRef = useRef(null);
- const { navigator } = useCourseNavigator(courseOutline, currentUnitID || courseID);
-
- const [getExamInfo] = useLazyGetExamInfoQuery();
-
- const handleLoadCourse = useDebouncedCallback(() => {
- if (!_.isEmpty(courseOutline)) {
- setExamInfo(null);
- setCurrentlyInExamSubsection(false);
- setFetchingIframeData(true);
- if (activeTab === 'course') {
- getIframeURL(courseID, courseOutline, async (url) => {
- try {
- const courseOutlineData = Array.isArray(courseOutline?.children)
- ? courseOutline.children[
- navigator?.thirdLevelChildren[navigator?.currentIndex]?.chapterIndex
- ]
- : courseOutline;
- const sequentialParentID = findSequentialParent(
- courseOutlineData,
- currentUnitID || courseID,
- );
- const sequentialParent = courseOutlineData?.children?.find(
- (block) => block.id === sequentialParentID,
- );
- setCurrentlyInExamSubsection(sequentialParent?.special_exam_info || false);
- if (sequentialParent?.special_exam_info) {
- const _examInfo = await getExamInfo(
- {
- course_id: courseID,
- content_id: sequentialParent.id,
- is_learning_mfe: true,
- },
- false,
- );
- setExamInfo(_examInfo?.data || null);
- }
- } catch (error) {
- console.error(JSON.stringify(error));
- setCurrentlyInExamSubsection(false);
- }
- //setIsExamSubsection(url.includes('exam'));
- setIframeUrl(url);
- setFetchingIframeData(false);
- });
- } else {
- getIframeURL(courseID, activeTab, (url) => {
- setIframeUrl(url);
- setFetchingIframeData(false);
- });
- }
- }
- }, 300);
-
- const navigateEdxURL = (unitID: string) => {
- selectLesson(unitID);
- };
-
- const handlePreviousBtnClick = () => {
- const target = navigator.moveToPrevious();
- if (!target) {
- return;
- }
- setTimeout(() => {
- navigateEdxURL(target.id);
- }, 100);
- };
-
- const handleNextBtnClick = () => {
- const target = navigator.moveToNext();
- if (!target) {
- return;
- }
- setTimeout(() => {
- navigateEdxURL(target.id);
- }, 100);
- };
-
- // Store iframeUrl in a ref so we can access it in the message handler
- const iframeUrlRef = useRef(iframeUrl);
- useEffect(() => {
- iframeUrlRef.current = iframeUrl;
- }, [iframeUrl]);
-
- // Store activeTab in a ref so we can access it in the message handler
- const activeTabRef = useRef(activeTab);
- useEffect(() => {
- activeTabRef.current = activeTab;
- }, [activeTab]);
-
- // Listen for ready message from MFE - set up once and always active
- // Accept messages from any origin, then validate inside the handler
- // This listener is stable and doesn't depend on changing values
- useEffect(() => {
- const handleMessage = (event: MessageEvent) => {
- // Type guard for message data
- if (!event.data || typeof event.data !== 'object') {
- return;
- }
-
- // Check if this is a ready message from the MFE
- if (event.data?.type === 'auth.jwt.ready') {
- const currentIframeUrl = iframeUrlRef.current;
- const currentActiveTab = activeTabRef.current;
-
- if (currentIframeUrl) {
- try {
- const iframeOrigin = new URL(currentIframeUrl).origin;
- if (event.origin !== iframeOrigin) {
- console.error('[JWT PostMessage] Origin mismatch - rejecting message', {
- expected: iframeOrigin,
- received: event.origin,
- });
- return;
- }
- } catch (error) {
- console.error('[JWT PostMessage] Failed to validate origin:', {
- error: error instanceof Error ? error.message : String(error),
- iframeUrl: currentIframeUrl,
- });
- return;
- }
- }
-
- // Send JWT token now that MFE is ready - inline to avoid dependency
- const isMFETab =
- currentActiveTab === 'progress' ||
- currentActiveTab === 'dates' ||
- currentActiveTab === 'forum';
- if (!isMFETab || !iframeRef.current || !currentIframeUrl) return;
-
- try {
- const jwtToken = localStorage.getItem(LOCALSTORAGE_KEYS.EDX_TOKEN_KEY);
- if (!jwtToken) return;
-
- const iframeOrigin = new URL(currentIframeUrl).origin;
- const message = { type: 'auth.jwt.token', edx_jwt_token: jwtToken };
- iframeRef.current.contentWindow?.postMessage(message, iframeOrigin);
- } catch (error) {
- console.error('[JWT PostMessage] Failed to send token in response to ready message:', {
- error: error instanceof Error ? error.message : String(error),
- iframeUrl: currentIframeUrl,
- });
- }
- }
- };
-
- window.addEventListener('message', handleMessage);
-
- return () => {
- window.removeEventListener('message', handleMessage);
- };
- }, []); // Empty deps - listener never recreated, reads from refs
-
- useEffect(() => {
- handleLoadCourse();
- }, [courseOutline?.id, searchParams, courseID, activeTab, refresher]);
- return (
- <>
- {fetchingIframeData ? (
-
-
-
- ) : (
-
- {examInfo &&
}
- {(!examInfo || (examInfo?.exam && !_.isEmpty(examInfo?.exam?.attempt))) && (
-