test: Test for ComponentAdvancedAssetes

src/library-authoring/component-info/ComponentAdvancedInfo.test.tsx

@@ -14,6 +14,7 @@ import {
 } from '../data/api.mocks';
 import { LibraryProvider, SidebarBodyComponentId } from '../common/context';
 import { ComponentAdvancedInfo } from './ComponentAdvancedInfo';
+import { getXBlockAssetsApiUrl } from '../data/api';
 
 mockContentLibrary.applyMock();
 mockLibraryBlockMetadata.applyMock();
@@ -68,6 +69,58 @@ describe('<ComponentAdvancedInfo />', () => {
     expect(await screen.findByText(/\(12M\)/)).toBeInTheDocument(); // size of the above file
     expect(await screen.findByText(/static\/data\.csv/)).toBeInTheDocument();
     expect(await screen.findByText(/\(8K\)/)).toBeInTheDocument(); // size of the above file
+    expect(await screen.findByText(/Drag and drop your file here or click to upload/)).toBeInTheDocument();
+  });
+
+  it('should delete static assets of the block', async () => {
+    const { axiosMock } = initializeMocks();
+
+    render();
+
+    const url = `${getXBlockAssetsApiUrl(mockLibraryBlockMetadata.usageKeyPublished)}${encodeURIComponent('static/image1.png')}`;
+    axiosMock.onDelete(url).reply(200);
+
+    const expandButton = await screen.findByRole('button', { name: /Advanced details/ });
+    fireEvent.click(expandButton);
+
+    expect(await screen.findByText(/static\/image1\.png/)).toBeInTheDocument();
+
+    // Click on delete button
+    const deleteButtons = await screen.findAllByTitle('Delete this file');
+    expect(deleteButtons.length).toEqual(2);
+    fireEvent.click(deleteButtons[0]);
+
+    // Show the pop up and click on delete
+    expect(await screen.findByText(/Are you sure you want to delete static\/image1\.png/)).toBeInTheDocument();
+    const deleteButton = await screen.findByRole('button', { name: /delete/i });
+    fireEvent.click(deleteButton);
+
+    await waitFor(() => expect(axiosMock.history.delete[0].url).toEqual(url));
+  });
+
+  it('should add asset in Dropzone', async () => {
+    const { axiosMock } = initializeMocks();
+    render();
+
+    const url = `${getXBlockAssetsApiUrl(mockLibraryBlockMetadata.usageKeyPublished)}static/image3.png`;
+    axiosMock.onPut(url).reply(200);
+
+    const expandButton = await screen.findByRole('button', { name: /Advanced details/ });
+    fireEvent.click(expandButton);
+
+    const dropzone = await screen.findByText(/Drag and drop your file here or click to upload/);
+    expect(dropzone).toBeInTheDocument();
+
+    const file = new File(['file'], 'image3.png', {
+      type: 'image/png',
+    });
+    Object.defineProperty(dropzone, 'files', {
+      value: [file],
+    });
+
+    fireEvent.drop(dropzone);
+
+    await waitFor(() => expect(axiosMock.history.put[0].url).toEqual(url));
   });
 
   it('should display the OLX source of the block (when expanded)', async () => {
@@ -80,11 +133,12 @@ describe('<ComponentAdvancedInfo />', () => {
     await waitFor(() => expect(screen.getByText(olxPart)).toBeInTheDocument());
   });
 
-  it('does not display "Edit OLX" button when the library is read-only', async () => {
+  it('does not display "Edit OLX" button and assets dropzone when the library is read-only', async () => {
     render(mockXBlockOLX.usageKeyHtml, mockContentLibrary.libraryIdReadOnly);
     const expandButton = await screen.findByRole('button', { name: /Advanced details/ });
     fireEvent.click(expandButton);
     expect(screen.queryByRole('button', { name: /Edit OLX/ })).not.toBeInTheDocument();
+    expect(screen.queryByText(/Drag and drop your file here or click to upload/)).not.toBeInTheDocument();
   });
 
   it('can edit the OLX', async () => {