test: add three more JS tests

src/editors/containers/LibraryContentEditor/BlocksSelector.test.jsx

@@ -16,7 +16,6 @@ jest.mock('./hooks', () => ({
       // Mocked blocksTableData
       { id: 1, display_name: 'Block 1', block_type: 'Type A' },
       { id: 2, display_name: 'Block 2', block_type: 'Type B' },
-      // Add more mocked table data as needed
     ],
     tempCandidates: [],
     setTempCandidates: jest.fn(),
@@ -33,11 +32,10 @@ function renderComponent(props) {
 
 const mockProps = {
   candidates: {
-    // mock candidates object here
   },
   mode: 'selected',
   studioEndpointUrl: 'https://example.com',
-  blocksInSelectedLibrary: [{ /* mock data for blocksInSelectedLibrary */ }],
+  blocksInSelectedLibrary: [{}],
   onCandidatesChange: jest.fn(),
   selectedLibraryId: 'exampleLibraryId',
 };

src/editors/containers/LibraryContentEditor/LibrarySelector.test.jsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { render, fireEvent, prettyDOM } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { LibrarySelector } from './LibrarySelector';
+
+jest.unmock('@edx/paragon');
+jest.unmock('@edx/paragon/icons');
+
+jest.mock('./data/api', () => ({
+    fetchLibraryContent: jest.fn().mockReturnValue({
+        blocks: 'SoMe BLOcKs',
+    }),
+    fetchLibraryProperty: jest.fn().mockReturnValue({
+        version: 'lIkE a VeRsiOn',
+    }),
+  }));
+
+function renderComponent(props) {
+  return render(
+    <IntlProvider locale="en">
+      <LibrarySelector {...props} />
+    </IntlProvider>,
+  );
+}
+
+describe('LibrarySelector',()=>{
+    const mocklibraries = [
+        {
+            display_name: 'lIb1',
+            library_key: 'LiB KEy 1',
+        },
+        {
+            display_name: 'LIb2',
+            library_key: 'LIb KEy 2',
+        },
+        {
+            display_name: 'liB3',
+            library_key: 'lIb keY 3',
+        }
+    ]
+    const props = {
+        studioEndpointUrl: 'eXaMplE.com',
+        libraries: mocklibraries,
+        loadLibrary: jest.fn(),
+        selectedLibrary: 0,
+        onSelectLibrary: jest.fn(),
+        settings: {
+            [mocklibraries[0].library_key]: {
+                value: 'SoMethIng'
+            }
+        },
+        unloadLibrary: jest.fn(),
+    }
+    it('Renders as expected with default props',()=>{
+        const {container, queryByText, queryByTestId} = renderComponent(props);
+
+        expect(queryByTestId('dropdown')).toBeTruthy();
+        // It renders the selected library as the title.
+        expect(queryByText(mocklibraries[0].display_name)).toBeTruthy();
+        // The other members of the library are not rendered.
+        expect(queryByText(mocklibraries[1].display_name)).toBeFalsy();
+        expect(queryByText(mocklibraries[2].display_name)).toBeFalsy();
+
+        //Clicking on the dropdown displays the options
+        fireEvent.click(container.querySelector("#library-selector"));
+        expect(queryByText(mocklibraries[1].display_name)).toBeTruthy();
+        expect(queryByText(mocklibraries[2].display_name)).toBeTruthy();
+        expect(queryByText('FormattedMessage')).toBeTruthy();
+    });
+    it('Does not render dropdown when there are no libraries',()=>{
+        const {container, queryByTestId} = renderComponent({
+            ...props,
+            libraries: null,
+            selectedLibrary: null,
+        });
+        expect(queryByTestId('dropdown')).toBeFalsy();
+    });
+
+    it('sets the default option to be selected if selectedLibrary is null.',()=>{
+        const {container, queryByTestId, queryByText} = renderComponent({
+            ...props,
+            selectedLibrary: null,
+        });
+        expect(queryByTestId('dropdown')).toBeTruthy();
+        expect(queryByText('Select a library')).toBeTruthy();
+    });
+    it('Clicking The default option calls onSelectLibrary with value null and calls unloadlibrary',()=>{
+        const {container, queryByTestId, queryByText} = renderComponent({
+            ...props,
+        });
+        fireEvent.click(container.querySelector("#library-selector"));
+        fireEvent.click(queryByText('FormattedMessage'));
+        expect(props.onSelectLibrary).toHaveBeenCalledWith({selectedLibrary: null});
+        expect(props.unloadLibrary).toHaveBeenCalled();
+    });
+    it('Clicking any other option in dropdown calls onSelectLibrary with value equal to its index  and calls loadlibrary',()=>{
+        const {container, queryByTestId, queryByText} = renderComponent({
+            ...props,
+        });
+        fireEvent.click(container.querySelector("#library-selector"));
+        fireEvent.click(queryByText(mocklibraries[1].display_name));
+        expect(props.onSelectLibrary).toHaveBeenCalledWith({selectedLibrary: 1});
+        expect(props.loadLibrary).toHaveBeenCalled();
+    });
+})

src/editors/containers/LibraryContentEditor/LibrarySettings.test.jsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { render, screen, fireEvent, prettyDOM } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { LibrarySettings } from './LibrarySettings';
+
+jest.unmock('@edx/paragon');
+jest.unmock('@edx/paragon/icons');
+
+
+jest.mock('@edx/frontend-platform/i18n', () => ({
+    ...jest.requireActual('@edx/frontend-platform/i18n'),
+    FormattedMessage: (content) =>(<p>{content.defaultMessage}</p>)
+  }));
+
+jest.mock('./data/api', () => ({
+    fetchLibraryContent: jest.fn().mockReturnValue({
+        blocks: 'SoMe BLOcKs',
+    }),
+    fetchLibraryProperty: jest.fn().mockReturnValue({
+        version: 'lIkE a VeRsiOn',
+    }),
+}));
+
+function renderComponent(props) {
+  return render(
+    <IntlProvider locale="en">
+      <LibrarySettings {...props} />
+    </IntlProvider>,
+  );
+}
+
+describe('LibrarySettings Component', () => {
+    const props = {
+        onCountChange: jest.fn(),
+        onModeChange: jest.fn(),
+        onShowResetChange: jest.fn(),
+        selectedLibrary: 'sOme vAluE',
+        selectedLibraryId: 0,
+        settings: { 0: { mode: 'random', count: 5, showReset: true } },
+    }
+
+    // For some reason, queyselector stops working outside the first test, so these are all in one test.
+    it('renders with selected library and editing form calls handlers', ()=>{
+        const {container, getByRole} = renderComponent(props);
+
+        // Settings values are expected by props.
+        expect(container.querySelector('#form-field1').getAttribute('value')).toBe('random');
+        expect(container.querySelector('#form-field1').getAttribute('checked')).toBe('');
+
+        expect(container.querySelector('#form-field2').getAttribute('value')).toBe('selected');
+        expect(container.querySelector('#form-field2').getAttribute('checked')).toBe(null);
+
+        expect(container.querySelectorAll('input')[2].getAttribute('value')).toBe('5');
+        expect(container.querySelector('#form-field3').getAttribute('checked')).toBe('');
+
+
+        //Count calls handler with correct input
+        const newCount = "345"
+        fireEvent.change(container.querySelectorAll('input')[2], {target: {value: newCount}})
+        expect(props.onCountChange).toHaveBeenCalledWith({
+            libraryId: props.selectedLibraryId,
+            count: newCount
+        });
+
+        // ShowReset calls hadnler with correct input
+        fireEvent.click(getByRole("switch"))
+
+        expect(props.onShowResetChange).toHaveBeenCalledWith({
+            libraryId: props.selectedLibraryId,
+            showReset: false,
+        });
+
+        // Mode Calls handler with correct input
+        const newMode = 'selected'
+        fireEvent.click(container.querySelector('#form-field2'))
+        expect(props.onModeChange).toHaveBeenCalledWith({
+            libraryId: props.selectedLibraryId,
+            mode: newMode
+        });
+    });
+});