test: adding more coverage for insertlinkmodal components

src/editors/sharedComponents/InsertLinkModal/BlocksList/__snapshots__/index.test.jsx.snap

@@ -1,54 +1,59 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`BlocksList Component snapshot 1`] = `
-<IntlProvider
-  defaultFormats={Object {}}
-  defaultLocale="en"
-  fallbackOnEmptyString={true}
-  formats={Object {}}
-  locale="en"
-  messages={Object {}}
-  onError={[Function]}
-  onWarn={[Function]}
-  textComponent={Symbol(react.fragment)}
->
-  <BlocksList
-    blocks={
-      Object {
-        "block-children-1": Object {
-          "blockId": "edx_block-1",
-          "displayName": "Block children 1",
-          "id": "block-children-1",
-          "legacyWebUrl": "http://localhost/legacy",
-          "lmsWebUrl": "http://localhost/weburl",
-          "studentViewUrl": "http://localhost/studentview",
-          "type": "sequential",
-        },
-        "block-children-2": Object {
-          "blockId": "edx_block-2",
-          "displayName": "Block children 2",
-          "id": "block-children-2",
-          "legacyWebUrl": "http://localhost/legacy",
-          "lmsWebUrl": "http://localhost/weburl",
-          "studentViewUrl": "http://localhost/studentview",
-          "type": "sequential",
-        },
-        "block-key": Object {
-          "blockId": "edx_block-1",
-          "children": Array [
-            "block-children-1",
-            "block-children-2",
-          ],
-          "displayName": "Any display name",
-          "id": "block-key",
-          "legacyWebUrl": "http://localhost/legacy",
-          "lmsWebUrl": "http://localhost/weburl",
-          "studentViewUrl": "http://localhost/studentview",
-          "type": "character",
-        },
-      }
-    }
-    onBlockSelected={[Function]}
-  />
-</IntlProvider>
+<div>
+  <div
+    class="block-list-container"
+  >
+    <div
+      class="pgn-transition-replace-group position-relative"
+    >
+      <div
+        style="padding: .1px 0px;"
+      >
+        <div
+          class="w-100 d-flex justify-content-space-between p-3 pgn__action-row"
+        >
+          <button
+            class="col-11 py-4 btn btn-tertiary"
+            data-testid="block-name"
+            type="button"
+          >
+            <span
+              class="w-100 text-left"
+            >
+              Any display name
+            </span>
+          </button>
+          <button
+            class="col-1 py-4 btn btn-tertiary"
+            data-testid="block-navigation"
+            type="button"
+          >
+             
+            <span
+              class="pgn__icon btn-icon-after"
+            >
+              <svg
+                aria-hidden="true"
+                fill="none"
+                focusable="false"
+                height="24"
+                role="img"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="m6.49 20.13 1.77 1.77 9.9-9.9-9.9-9.9-1.77 1.77L14.62 12l-8.13 8.13Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 `;

src/editors/sharedComponents/InsertLinkModal/BlocksList/index.jsx

@@ -88,6 +88,7 @@ const BlocksList = ({ blocks, onBlockSelected }) => {
             className="col-1"
             onClick={handleGoBack}
             iconBefore={ArrowBack}
+            data-testid="block-back-navigation"
           >
            
           </Button>
@@ -106,6 +107,7 @@ const BlocksList = ({ blocks, onBlockSelected }) => {
                 variant="tertiary"
                 className={`${blockNameButtonClass} py-4`}
                 onClick={() => handleSelectBlock(block)}
+                data-testid="block-name"
               >
                 <span className="w-100 text-left">{block.displayName}</span>
               </Button>
@@ -114,6 +116,7 @@ const BlocksList = ({ blocks, onBlockSelected }) => {
                 variant="tertiary"
                 className="col-1 py-4"
                 onClick={() => handleSelectBlock(block, true)}
+                data-testid="block-navigation"
                 iconAfter={ArrowForwardIos}
               >
                 &nbsp;

src/editors/sharedComponents/InsertLinkModal/BlocksList/index.test.jsx

@@ -1,20 +1,18 @@
 import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { fireEvent, render } from '@testing-library/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
-import Enzyme, { shallow } from 'enzyme';
-import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 
 import BlocksList from '.';
 
-Enzyme.configure({ adapter: new Adapter() });
-
 const mockBlocks = {
   'block-key': {
     id: 'block-key',
     blockId: 'edx_block-1',
     lmsWebUrl: 'http://localhost/weburl',
     legacyWebUrl: 'http://localhost/legacy',
     studentViewUrl: 'http://localhost/studentview',
-    type: 'character',
+    type: 'chapter',
     displayName: 'Any display name',
     children: ['block-children-1', 'block-children-2'],
   },
@@ -38,25 +36,87 @@ const mockBlocks = {
   },
 };
 
+jest.unmock('@edx/frontend-platform/i18n');
+jest.unmock('@edx/paragon');
+jest.unmock('@edx/paragon/icons');
+
 describe('BlocksList Component', () => {
   // eslint-disable-next-line react/prop-types
   const IntlProviderWrapper = ({ children }) => (
-    <IntlProvider locale="en" messages={{}}>
+    <IntlProvider locale="en">
       {children}
     </IntlProvider>
   );
 
-  const wrapper = shallow(
+  let onBlockSelectedMock;
+
+  beforeEach(() => {
+    onBlockSelectedMock = jest.fn();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const renderComponent = (overrideProps = {}) => render(
     <IntlProviderWrapper>
-      <BlocksList blocks={mockBlocks} onBlockSelected={() => {}} />
+      <BlocksList
+        blocks={mockBlocks}
+        onBlockSelected={onBlockSelectedMock}
+        {...overrideProps}
+      />
     </IntlProviderWrapper>,
   );
 
+  test('snapshot', async () => {
+    const { container } = renderComponent();
+    expect(container).toMatchSnapshot();
+  });
+
   test('renders without crashing', () => {
-    expect(wrapper.exists()).toBeTruthy();
+    const { getByText } = renderComponent();
+    expect(getByText('Any display name')).toBeInTheDocument();
   });
 
-  test('snapshot', () => {
-    expect(wrapper).toMatchSnapshot();
+  test('should call onBlockSelected when block name is clicked ', () => {
+    const { getByTestId } = renderComponent();
+
+    const blockNameButton = getByTestId('block-name');
+    fireEvent.click(blockNameButton);
+    expect(onBlockSelectedMock).toHaveBeenCalledWith(mockBlocks['block-key']);
+  });
+
+  test('should not call onBlockSelected when block navigation is clicked ', () => {
+    const { getByTestId } = renderComponent();
+
+    const blockNavigateButton = getByTestId('block-navigation');
+    fireEvent.click(blockNavigateButton);
+    expect(onBlockSelectedMock).not.toHaveBeenCalled();
+  });
+
+  test('should show back button when navigation block happens ', () => {
+    const { getByTestId, getByText } = renderComponent();
+
+    const blockNavigateButton = getByTestId('block-navigation');
+    fireEvent.click(blockNavigateButton);
+
+    const backButton = getByTestId('block-back-navigation');
+    expect(getByText('Subsections')).toBeInTheDocument();
+    expect(getByText('Block children 1')).toBeInTheDocument();
+    expect(backButton).toBeInTheDocument();
+  });
+
+  test('should show previous block when back navigation button is clicked ', () => {
+    const { getByTestId, getByText } = renderComponent();
+
+    const blockNavigateButton = getByTestId('block-navigation');
+    fireEvent.click(blockNavigateButton);
+
+    const backButton = getByTestId('block-back-navigation');
+    expect(getByText('Subsections')).toBeInTheDocument();
+    expect(getByText('Block children 1')).toBeInTheDocument();
+    expect(backButton).toBeInTheDocument();
+    fireEvent.click(backButton);
+    expect(getByText('Any display name')).toBeInTheDocument();
   });
 });

src/editors/sharedComponents/InsertLinkModal/SearchBlocks/__snapshots__/index.test.jsx.snap

@@ -1,59 +1,67 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SearchBlocks Component snapshot 1`] = `
-<IntlProvider
-  defaultFormats={Object {}}
-  defaultLocale="en"
-  fallbackOnEmptyString={true}
-  formats={Object {}}
-  locale="en"
-  messages={Object {}}
-  onError={[Function]}
-  onWarn={[Function]}
-  textComponent={Symbol(react.fragment)}
->
-  <SearchBlocks
-    blocks={
-      Object {
-        "block-children-1": Object {
-          "blockId": "edx_block-1",
-          "displayName": "Block children 1",
-          "id": "block-children-1",
-          "legacyWebUrl": "http://localhost/legacy",
-          "lmsWebUrl": "http://localhost/weburl",
-          "path": "Any display name / Block children 1",
-          "studentViewUrl": "http://localhost/studentview",
-          "type": "sequential",
-        },
-        "block-children-2": Object {
-          "blockId": "edx_block-2",
-          "displayName": "Block children 2",
-          "id": "block-children-2",
-          "legacyWebUrl": "http://localhost/legacy",
-          "lmsWebUrl": "http://localhost/weburl",
-          "path": "Any display name / Block children 2",
-          "studentViewUrl": "http://localhost/studentview",
-          "type": "sequential",
-        },
-        "block-key": Object {
-          "blockId": "edx_block-1",
-          "children": Array [
-            "block-children-1",
-            "block-children-2",
-          ],
-          "displayName": "Any display name",
-          "id": "block-key",
-          "legacyWebUrl": "http://localhost/legacy",
-          "lmsWebUrl": "http://localhost/weburl",
-          "path": "Any display name",
-          "studentViewUrl": "http://localhost/studentview",
-          "type": "sequential",
-        },
-      }
-    }
-    onBlockSelected={[MockFunction]}
-    onSearchFilter={[MockFunction]}
-    searchInputValue=""
-  />
-</IntlProvider>
+<div>
+  <div>
+    <div
+      class="pgn__searchfield d-flex my-4"
+      data-testid="search-field"
+    >
+      <form
+        class="pgn__searchfield-form"
+        role="search"
+      >
+        <label
+          class="m-0"
+          for="pgn-searchfield-input-1"
+        >
+          <span
+            class="sr-only"
+          >
+            search
+          </span>
+        </label>
+        <input
+          class="form-control"
+          id="pgn-searchfield-input-1"
+          name="searchfield-input"
+          placeholder="Search course pages"
+          role="searchbox"
+          type="text"
+          value=""
+        />
+        <button
+          class="btn"
+          type="submit"
+        >
+          <span
+            class="pgn__icon"
+          >
+            <svg
+              aria-hidden="true"
+              fill="none"
+              focusable="false"
+              height="24"
+              role="img"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5Zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14Z"
+                fill="currentColor"
+              />
+            </svg>
+          </span>
+          <span
+            class="sr-only"
+          >
+            submit search
+          </span>
+        </button>
+      </form>
+    </div>
+    
+  </div>
+</div>
 `;

src/editors/sharedComponents/InsertLinkModal/SearchBlocks/index.jsx

@@ -76,8 +76,6 @@ export const SearchBlocks = ({
 };
 
 SearchBlocks.defaultProps = {
-  onSearchFilter: () => {},
-  onBlockSelected: () => {},
   searchInputValue: '',
 };
 
@@ -94,9 +92,9 @@ const blockShape = PropTypes.shape({
 
 SearchBlocks.propTypes = {
   blocks: PropTypes.objectOf(blockShape).isRequired,
-  onSearchFilter: PropTypes.func,
+  onSearchFilter: PropTypes.func.isRequired,
   searchInputValue: PropTypes.string,
-  onBlockSelected: PropTypes.func,
+  onBlockSelected: PropTypes.func.isRequired,
 };
 
 export default SearchBlocks;