test: adding more test unit for insert link modal

openedx · Jan 18, 2024 · e9dee15 · e9dee15
1 parent 53ce3a6
commit e9dee15
Show file tree

Hide file tree

Showing 9 changed files with 437 additions and 6 deletions.
diff --git a/src/editors/sharedComponents/InsertLinkModal/BlocksList/__snapshots__/index.test.jsx.snap b/src/editors/sharedComponents/InsertLinkModal/BlocksList/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,107 @@
+// 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": "sequential",
+        },
+      }
+    }
+    onBlockSelected={[Function]}
+  />
+</IntlProvider>
+`;
+
+exports[`BlocksList Component snapshot with onBlockSelected 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": "sequential",
+        },
+      }
+    }
+    onBlockSelected={[Function]}
+  />
+</IntlProvider>
+`;
diff --git a/src/editors/sharedComponents/InsertLinkModal/BlocksList/index.test.jsx b/src/editors/sharedComponents/InsertLinkModal/BlocksList/index.test.jsx
@@ -8,8 +8,34 @@ import BlocksList from '.';
 Enzyme.configure({ adapter: new Adapter() });
 
 const mockBlocks = {
-  block1: { id: 'block1', path: 'Block 1', type: 'section' },
-  block2: { id: 'block2', path: 'Block 2', type: 'subsection' },
+  'block-key': {
+    id: 'block-key',
+    blockId: 'edx_block-1',
+    lmsWebUrl: 'http://localhost/weburl',
+    legacyWebUrl: 'http://localhost/legacy',
+    studentViewUrl: 'http://localhost/studentview',
+    type: 'sequential',
+    displayName: 'Any display name',
+    children: ['block-children-1', 'block-children-2'],
+  },
+  'block-children-1': {
+    id: 'block-children-1',
+    blockId: 'edx_block-1',
+    lmsWebUrl: 'http://localhost/weburl',
+    legacyWebUrl: 'http://localhost/legacy',
+    studentViewUrl: 'http://localhost/studentview',
+    type: 'sequential',
+    displayName: 'Block children 1',
+  },
+  'block-children-2': {
+    id: 'block-children-2',
+    blockId: 'edx_block-2',
+    lmsWebUrl: 'http://localhost/weburl',
+    legacyWebUrl: 'http://localhost/legacy',
+    studentViewUrl: 'http://localhost/studentview',
+    type: 'sequential',
+    displayName: 'Block children 2',
+  },
 };
 
 describe('BlocksList Component', () => {
@@ -28,4 +54,22 @@ describe('BlocksList Component', () => {
     );
     expect(wrapper.exists()).toBeTruthy();
   });
+
+  test('snapshot', () => {
+    const wrapper = shallow(
+      <IntlProviderWrapper>
+        <BlocksList blocks={mockBlocks} />
+      </IntlProviderWrapper>,
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('snapshot with onBlockSelected', () => {
+    const wrapper = shallow(
+      <IntlProviderWrapper>
+        <BlocksList blocks={mockBlocks} onBlockSelected={() => {}} />
+      </IntlProviderWrapper>,
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
 });
diff --git a/src/editors/sharedComponents/InsertLinkModal/FilterBlock/__snapshots__/index.test.jsx.snap b/src/editors/sharedComponents/InsertLinkModal/FilterBlock/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FilterBlock Component snapshot 1`] = `
+<FilterBlock
+  block={
+    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": "Path / To / Block 1",
+      "studentViewUrl": "http://localhost/studentview",
+      "type": "sequential",
+    }
+  }
+  onBlockFilterClick={[MockFunction]}
+>
+  <Button
+    className="d-flex flex-column w-100 align-items-start p-3"
+    data-testid="filter-block-item"
+    key="filtered_block_block-key"
+    onClick={[Function]}
+    variant="tertiary"
+  >
+    <span
+      className="h5 text-left"
+    >
+      Path / To
+    </span>
+    <span
+      className="h3"
+    >
+      Block 1
+    </span>
+  </Button>
+</FilterBlock>
+`;
diff --git a/src/editors/sharedComponents/InsertLinkModal/FilterBlock/index.test.jsx b/src/editors/sharedComponents/InsertLinkModal/FilterBlock/index.test.jsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+
+import FilterBlock from '.';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+const mockBlock = {
+  id: 'block-key',
+  blockId: 'edx_block-1',
+  lmsWebUrl: 'http://localhost/weburl',
+  legacyWebUrl: 'http://localhost/legacy',
+  studentViewUrl: 'http://localhost/studentview',
+  type: 'sequential',
+  displayName: 'Any display name',
+  path: 'Path / To / Block 1',
+  children: ['block-children-1', 'block-children-2'],
+};
+
+describe('FilterBlock Component', () => {
+  const mockOnBlockFilterClick = jest.fn();
+
+  const setup = (
+    block = mockBlock,
+    onBlockFilterClick = mockOnBlockFilterClick,
+  ) => mount(<FilterBlock block={block} onBlockFilterClick={onBlockFilterClick} />);
+
+  test('renders without crashing', () => {
+    const wrapper = setup();
+    expect(wrapper.exists()).toBeTruthy();
+  });
+
+  test('snapshot', () => {
+    const wrapper = setup();
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('calls onBlockFilterClick when the button is clicked', () => {
+    const wrapper = setup();
+    const button = wrapper.find('Button[data-testid="filter-block-item"]');
+    button.simulate('click');
+    expect(mockOnBlockFilterClick).toHaveBeenCalledWith(mockBlock);
+  });
+
+  test('displays the block title and subtitle', () => {
+    const wrapper = setup();
+    expect(wrapper.find('.h5').text()).toContain('Path / To');
+    expect(wrapper.find('.h3').text()).toContain('Block 1');
+  });
+});
diff --git a/src/editors/sharedComponents/InsertLinkModal/SearchBlocks/__snapshots__/index.test.jsx.snap b/src/editors/sharedComponents/InsertLinkModal/SearchBlocks/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,59 @@
+// 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={[Function]}
+    onSearchFilter={[Function]}
+    searchInputValue=""
+  />
+</IntlProvider>
+`;
diff --git a/src/editors/sharedComponents/InsertLinkModal/SearchBlocks/index.jsx b/src/editors/sharedComponents/InsertLinkModal/SearchBlocks/index.jsx
@@ -8,7 +8,7 @@ import { filterBlocksByText } from '../utils';
 import messages from './messages';
 import './index.scss';
 
-const SearchBlocks = ({
+export const SearchBlocks = ({
   blocks,
   onSearchFilter,
   searchInputValue = '',
@@ -53,7 +53,7 @@ const SearchBlocks = ({
       />
 
       {searchField.trim() && (
-        <p className="h5 ml-1 text-gray-500">
+        <p className="h5 ml-1 text-gray-500" data-testid="filtered-block-text">
           {intl.formatMessage(messages.searchBlocksResultMessages, {
             searchField: `"${searchField}"`,
           })}

diff --git a/src/editors/sharedComponents/InsertLinkModal/SearchBlocks/index.test.jsx b/src/editors/sharedComponents/InsertLinkModal/SearchBlocks/index.test.jsx
@@ -8,8 +8,37 @@ import SearchBlocks from '.';
 Enzyme.configure({ adapter: new Adapter() });
 
 const mockBlocks = {
-  block1: { id: 'block1', path: 'Block 1', type: 'section' },
-  block2: { id: 'block2', path: 'Block 2', type: 'subsection' },
+  'block-key': {
+    id: 'block-key',
+    blockId: 'edx_block-1',
+    lmsWebUrl: 'http://localhost/weburl',
+    legacyWebUrl: 'http://localhost/legacy',
+    studentViewUrl: 'http://localhost/studentview',
+    type: 'sequential',
+    displayName: 'Any display name',
+    path: 'Any display name',
+    children: ['block-children-1', 'block-children-2'],
+  },
+  'block-children-1': {
+    id: 'block-children-1',
+    blockId: 'edx_block-1',
+    lmsWebUrl: 'http://localhost/weburl',
+    legacyWebUrl: 'http://localhost/legacy',
+    studentViewUrl: 'http://localhost/studentview',
+    type: 'sequential',
+    displayName: 'Block children 1',
+    path: 'Any display name / Block children 1',
+  },
+  'block-children-2': {
+    id: 'block-children-2',
+    blockId: 'edx_block-2',
+    lmsWebUrl: 'http://localhost/weburl',
+    legacyWebUrl: 'http://localhost/legacy',
+    studentViewUrl: 'http://localhost/studentview',
+    type: 'sequential',
+    displayName: 'Block children 2',
+    path: 'Any display name / Block children 2',
+  },
 };
 
 describe('SearchBlocks Component', () => {
@@ -28,4 +57,13 @@ describe('SearchBlocks Component', () => {
     );
     expect(wrapper.exists()).toBeTruthy();
   });
+
+  test('snapshot', () => {
+    const wrapper = shallow(
+      <IntlProviderWrapper>
+        <SearchBlocks blocks={mockBlocks} />
+      </IntlProviderWrapper>,
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
 });