feat: edit Text components within content libraries [FC-0062] (#1240)

src/generic/data/api.mock.ts

@@ -0,0 +1,49 @@
+/* istanbul ignore file */
+import * as api from './api';
+
+/**
+ * Mock for `getClipboard()` that simulates an empty clipboard
+ */
+export async function mockClipboardEmpty(): Promise<api.ClipboardStatus> {
+  return {
+    content: null,
+    sourceUsageKey: '',
+    sourceContextTitle: '',
+    sourceEditUrl: '',
+  };
+}
+mockClipboardEmpty.applyMock = () => jest.spyOn(api, 'getClipboard').mockImplementation(mockClipboardEmpty);
+mockClipboardEmpty.applyMockOnce = () => jest.spyOn(api, 'getClipboard').mockImplementationOnce(mockClipboardEmpty);
+
+/**
+ * Mock for `getClipboard()` that simulates a copied HTML component
+ */
+export async function mockClipboardHtml(): Promise<api.ClipboardStatus> {
+  return {
+    content: {
+      id: 69,
+      userId: 3,
+      created: '2024-01-16T13:33:21.314439Z',
+      purpose: 'clipboard',
+      status: 'ready',
+      blockType: 'html',
+      blockTypeDisplay: 'Text',
+      olxUrl: 'http://localhost:18010/api/content-staging/v1/staged-content/69/olx',
+      displayName: 'Blank HTML Page',
+    },
+    sourceUsageKey: 'block-v1:edX+DemoX+Demo_Course+type@html+block@html1',
+    sourceContextTitle: 'Demonstration Course',
+    sourceEditUrl: 'http://localhost:18010/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical1',
+  };
+}
+mockClipboardHtml.applyMock = () => jest.spyOn(api, 'getClipboard').mockImplementation(mockClipboardHtml);
+mockClipboardHtml.applyMockOnce = () => jest.spyOn(api, 'getClipboard').mockImplementationOnce(mockClipboardHtml);
+
+/** Mock the DOM `BroadcastChannel` API which the clipboard code uses */
+export function mockBroadcastChannel() {
+  const clipboardBroadcastChannelMock = {
+    postMessage: jest.fn(),
+    close: jest.fn(),
+  };
+  (global as any).BroadcastChannel = jest.fn(() => clipboardBroadcastChannelMock);
+}

src/generic/data/api.ts

@@ -47,10 +47,27 @@ export async function createOrRerunCourse(courseData: Object): Promise<unknown>
   return camelCaseObject(data);
 }
 
+export interface ClipboardStatus {
+  content: {
+    id: number;
+    userId: number;
+    created: string; // e.g. '2024-08-28T19:02:08.272192Z'
+    purpose: 'clipboard';
+    status: 'ready' | 'loading' | 'expired' | 'error';
+    blockType: string;
+    blockTypeDisplay: string;
+    olxUrl: string;
+    displayName: string;
+  } | null;
+  sourceUsageKey: string; // May be an empty string
+  sourceContextTitle: string; // May be an empty string
+  sourceEditUrl: string; // May be an empty string
+}
+
 /**
  * Retrieves user's clipboard.
  */
-export async function getClipboard(): Promise<unknown> {
+export async function getClipboard(): Promise<ClipboardStatus> {
   const { data } = await getAuthenticatedHttpClient()
     .get(getClipboardUrl());
 
@@ -60,7 +77,7 @@ export async function getClipboard(): Promise<unknown> {
 /**
  * Updates user's clipboard.
  */
-export async function updateClipboard(usageKey: string): Promise<unknown> {
+export async function updateClipboard(usageKey: string): Promise<ClipboardStatus> {
   const { data } = await getAuthenticatedHttpClient()
     .post(getClipboardUrl(), { usage_key: usageKey });