feat: show capa content summary on cards in library search results

openedx · Sep 17, 2024 · 4e6f3bd · 4e6f3bd
1 parent c46692b
commit 4e6f3bd
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 19 deletions.
diff --git a/src/library-authoring/__mocks__/libraryComponentsMock.ts b/src/library-authoring/__mocks__/libraryComponentsMock.ts
@@ -2,38 +2,40 @@ export default [
   {
     id: '1',
     usageKey: 'lb:org:lib:html:1',
-    displayName: 'Text',
+    displayName: 'Text Component 1',
     formatted: {
+      displayName: 'Text Component 1',
       content: {
         htmlContent: 'This is a text: ID=1',
       },
     },
     tags: {
       level0: ['1', '2', '3'],
     },
-    blockType: 'text',
+    blockType: 'html',
   },
   {
     id: '2',
     usageKey: 'lb:org:lib:html:2',
-    displayName: 'Text',
+    displayName: 'Text Component 2',
     formatted: {
+      displayName: 'Text Component 2',
       content: {
         htmlContent: 'This is a text: ID=2',
       },
     },
     tags: {
       level0: ['1', '2', '3'],
     },
-    blockType: 'text',
+    blockType: 'html',
   },
   {
     id: '3',
     usageKey: 'lb:org:lib:video:3',
-    displayName: 'Video',
+    displayName: 'Video Component 3',
     formatted: {
+      displayName: 'Video Component 3',
       content: {
-        htmlContent: 'This is a video: ID=3',
       },
     },
     tags: {
@@ -44,24 +46,24 @@ export default [
   {
     id: '4',
     usageKey: 'lb:org:lib:video:4',
-    displayName: 'Video',
+    displayName: 'Video Component 4',
     formatted: {
-      content: {
-        htmlContent: 'This is a video: ID=4',
-      },
+      displayName: 'Video Component 4',
+      content: {},
     },
     tags: {
       level0: ['1', '2'],
     },
-    blockType: 'text',
+    blockType: 'video',
   },
   {
     id: '5',
     usageKey: 'lb:org:lib:problem:5',
     displayName: 'Problem',
     formatted: {
+      displayName: 'Problem',
       content: {
-        htmlContent: 'This is a problem: ID=5',
+        capaContent: 'This is a problem: ID=5',
       },
     },
     blockType: 'problem',
@@ -71,8 +73,9 @@ export default [
     usageKey: 'lb:org:lib:problem:6',
     displayName: 'Problem',
     formatted: {
+      displayName: 'Problem',
       content: {
-        htmlContent: 'This is a problem: ID=6',
+        capaContent: 'This is a problem: ID=6',
       },
     },
     blockType: 'problem',

diff --git a/src/library-authoring/components/ComponentCard.test.tsx b/src/library-authoring/components/ComponentCard.test.tsx
@@ -34,7 +34,7 @@ const contentHit: ContentHit = {
   tags: {
     level0: ['1', '2', '3'],
   },
-  blockType: 'text',
+  blockType: 'html',
   created: 1722434322294,
   modified: 1722434322294,
   lastPublished: null,

diff --git a/src/library-authoring/components/ComponentCard.tsx b/src/library-authoring/components/ComponentCard.tsx
@@ -74,7 +74,11 @@ const ComponentCard = ({ contentHit, blockTypeDisplayName } : ComponentCardProps
     tags,
     usageKey,
   } = contentHit;
-  const description = formatted?.content?.htmlContent ?? '';
+  const description: string = (/* eslint-disable */
+    blockType === 'html' ? formatted?.content?.htmlContent :
+    blockType === 'problem' ? formatted?.content?.capaContent :
+    undefined
+  ) ?? '';/* eslint-enable */
   const displayName = formatted?.displayName ?? '';
 
   return (

diff --git a/src/library-authoring/components/LibraryComponents.test.tsx b/src/library-authoring/components/LibraryComponents.test.tsx
@@ -173,8 +173,8 @@ describe('<LibraryComponents />', () => {
 
     expect(await screen.findByText('This is a text: ID=1')).toBeInTheDocument();
     expect(screen.getByText('This is a text: ID=2')).toBeInTheDocument();
-    expect(screen.getByText('This is a video: ID=3')).toBeInTheDocument();
-    expect(screen.getByText('This is a video: ID=4')).toBeInTheDocument();
+    expect(screen.getByText('Video Component 3')).toBeInTheDocument();
+    expect(screen.getByText('Video Component 4')).toBeInTheDocument();
     expect(screen.getByText('This is a problem: ID=5')).toBeInTheDocument();
     expect(screen.getByText('This is a problem: ID=6')).toBeInTheDocument();
   });
@@ -189,8 +189,8 @@ describe('<LibraryComponents />', () => {
 
     expect(await screen.findByText('This is a text: ID=1')).toBeInTheDocument();
     expect(screen.getByText('This is a text: ID=2')).toBeInTheDocument();
-    expect(screen.getByText('This is a video: ID=3')).toBeInTheDocument();
-    expect(screen.getByText('This is a video: ID=4')).toBeInTheDocument();
+    expect(screen.getByText('Video Component 3')).toBeInTheDocument();
+    expect(screen.getByText('Video Component 4')).toBeInTheDocument();
     expect(screen.queryByText('This is a problem: ID=5')).not.toBeInTheDocument();
     expect(screen.queryByText('This is a problem: ID=6')).not.toBeInTheDocument();
   });