test: update workflow test to test problem editor

src/library-authoring/add-content/AddContentWorkflow.test.tsx

@@ -85,18 +85,53 @@ describe('AddContentWorkflow test', () => {
   });
 
   it('can create a Problem component', async () => {
+    initializeMocks();
+    render(<LibraryLayout />, renderOpts);
+
+    // Click "New [Component]"
+    const newComponentButton = await screen.findByRole('button', { name: /New/ });
+    fireEvent.click(newComponentButton);
+
+    // Click "Problem" to create a capa problem component
+    fireEvent.click(await screen.findByRole('button', { name: /Problem/ }));
+
+    // Then the editor should open
+    expect(await screen.findByRole('heading', { name: /Select problem type/ })).toBeInTheDocument();
+
+    // Select the type: Numerical Input
+    fireEvent.click(await screen.findByRole('button', { name: 'Numerical input' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Select' }));
+
+    expect(await screen.findByRole('heading', { name: /Numerical input/ })).toBeInTheDocument();
+
+    // Enter an answer value:
+    const inputA = await screen.findByPlaceholderText('Enter an answer');
+    fireEvent.change(inputA, { target: { value: '123456' } });
+
+    // Mock the save() REST API method:
+    const saveSpy = jest.spyOn(editorCmsApi as any, 'saveBlock').mockImplementationOnce(async () => ({
+      status: 200, data: { id: mockXBlockFields.usageKeyNewProblem },
+    }));
+
+    // Click Save
+    const saveButton = screen.getByLabelText('Save changes and return to learning context');
+    fireEvent.click(saveButton);
+    expect(saveSpy).toHaveBeenCalledTimes(2); // TODO: why is this called twice?
+  });
+
+  it('can create a Video component', async () => {
     const { mockShowToast } = initializeMocks();
     render(<LibraryLayout />, renderOpts);
 
     // Click "New [Component]"
     const newComponentButton = await screen.findByRole('button', { name: /New/ });
     fireEvent.click(newComponentButton);
 
-    // Pre-condition - this is NOT shown yet:
-    expect(screen.queryByText('Content created successfully.')).not.toBeInTheDocument();
+    // Pre-condition - the success toast is NOT shown yet:
+    expect(mockShowToast).not.toHaveBeenCalled();
 
     // Click "Problem" to create a capa problem component
-    fireEvent.click(await screen.findByRole('button', { name: /Problem/ }));
+    fireEvent.click(await screen.findByRole('button', { name: /Video/ }));
 
     // We haven't yet implemented the problem editor, so we expect only a toast to appear
     await waitFor(() => expect(mockShowToast).toHaveBeenCalledWith('Content created successfully.'));

src/library-authoring/components/utils.test.ts

@@ -42,9 +42,9 @@ describe('component utils', () => {
       const usageKey = 'lb:org:ALPHA:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd';
       expect(getEditUrl(usageKey)).toStrictEqual(`/library/lib:org:ALPHA/editor/html/${usageKey}`);
     });
-    it('doesn\'t yet allow editing a problem block', () => {
+    it('returns the right URL for an HTML (Text) block', () => {
       const usageKey = 'lb:org:beta:problem:571fe018-f3ce-45c9-8f53-5dafcb422fdd';
-      expect(getEditUrl(usageKey)).toBeUndefined();
+      expect(getEditUrl(usageKey)).toStrictEqual(`/library/lib:org:beta/editor/problem/${usageKey}`);
     });
     it('doesn\'t yet allow editing a video block', () => {
       const usageKey = 'lb:org:beta:video:571fe018-f3ce-45c9-8f53-5dafcb422fdd';

src/library-authoring/data/api.mocks.ts

@@ -112,11 +112,14 @@ mockContentLibrary.applyMock = () => jest.spyOn(api, 'getContentLibrary').mockIm
 export async function mockCreateLibraryBlock(
   args: api.CreateBlockDataRequest,
 ): ReturnType<typeof api.createLibraryBlock> {
-  if (args.blockType === 'html' && args.libraryId === mockContentLibrary.libraryId) {
-    return mockCreateLibraryBlock.newHtmlData;
-  }
-  if (args.blockType === 'problem' && args.libraryId === mockContentLibrary.libraryId) {
-    return mockCreateLibraryBlock.newProblemData;
+  if (args.libraryId === mockContentLibrary.libraryId) {
+    switch (args.blockType) {
+      case 'html': return mockCreateLibraryBlock.newHtmlData;
+      case 'problem': return mockCreateLibraryBlock.newProblemData;
+      case 'video': return mockCreateLibraryBlock.newVideoData;
+      default:
+        // Continue to error handling below.
+    }
   }
   throw new Error(`mockCreateLibraryBlock doesn't know how to mock ${JSON.stringify(args)}`);
 }
@@ -146,6 +149,19 @@ mockCreateLibraryBlock.newProblemData = {
   created: '2024-07-22T21:37:49Z',
   tagsCount: 0,
 } satisfies api.LibraryBlockMetadata;
+mockCreateLibraryBlock.newVideoData = {
+  id: 'lb:Axim:TEST:video:prob1',
+  defKey: 'video1',
+  blockType: 'video',
+  displayName: 'New Video',
+  hasUnpublishedChanges: true,
+  lastPublished: null, // or e.g. '2024-08-30T16:37:42Z',
+  publishedBy: null, // or e.g. 'test_author',
+  lastDraftCreated: '2024-07-22T21:37:49Z',
+  lastDraftCreatedBy: null,
+  created: '2024-07-22T21:37:49Z',
+  tagsCount: 0,
+} satisfies api.LibraryBlockMetadata;
 /** Apply this mock. Returns a spy object that can tell you if it's been called. */
 mockCreateLibraryBlock.applyMock = () => (
   jest.spyOn(api, 'createLibraryBlock').mockImplementation(mockCreateLibraryBlock)
@@ -163,6 +179,7 @@ export async function mockXBlockFields(usageKey: string): Promise<api.XBlockFiel
   switch (usageKey) {
     case thisMock.usageKeyHtml: return thisMock.dataHtml;
     case thisMock.usageKeyNewHtml: return thisMock.dataNewHtml;
+    case thisMock.usageKeyNewProblem: return thisMock.dataNewProblem;
     default: throw new Error(`No mock has been set up for usageKey "${usageKey}"`);
   }
 }
@@ -180,6 +197,13 @@ mockXBlockFields.dataNewHtml = {
   data: '',
   metadata: { displayName: 'New Text Component' },
 } satisfies api.XBlockFields;
+// Mock of a blank/new problem (CAPA) block:
+mockXBlockFields.usageKeyNewProblem = 'lb:Axim:TEST:problem:prob1';
+mockXBlockFields.dataNewProblem = {
+  displayName: 'New Problem Component',
+  data: '',
+  metadata: { displayName: 'New Problem Component' },
+} satisfies api.XBlockFields;
 /** Apply this mock. Returns a spy object that can tell you if it's been called. */
 mockXBlockFields.applyMock = () => jest.spyOn(api, 'getXBlockFields').mockImplementation(mockXBlockFields);