test: add unit tests View and AccordionEdit - refs #253277

eea · Jun 20, 2023 · 4b780ec · 4b780ec
1 parent a6b6d49
commit 4b780ec
Show file tree

Hide file tree

Showing 3 changed files with 129 additions and 53 deletions.
diff --git a/src/components/manage/Blocks/Accordion/AccordionEdit.test.jsx b/src/components/manage/Blocks/Accordion/AccordionEdit.test.jsx
@@ -2,8 +2,8 @@ import { render, fireEvent } from '@testing-library/react';
 import React from 'react';
 import AccordionEdit from './AccordionEdit';
 import renderer from 'react-test-renderer';
-import '@testing-library/jest-dom/extend-expect';
 import config from '@plone/volto/registry';
+import '@testing-library/jest-dom/extend-expect';
 
 config.blocks.blocksConfig.accordion = {
   ...config.blocks.blocksConfig.accordion,
@@ -118,4 +118,48 @@ describe('AccordionEdit', () => {
       panel,
     ]);
   });
+
+  it('should open accordion content when title is clicked', () => {
+    config.blocks.blocksConfig.accordion = {
+      ...config.blocks.blocksConfig.accordion,
+      semanticIcon: undefined,
+    };
+    const { container, getByText } = render(
+      <AccordionEdit
+        handleTitleChange={handleTitleChange}
+        handleTitleClick={handleTitleClick}
+        uid={uid}
+        panel={panel}
+        data={data}
+        index={index}
+      >
+        <p>Accordion Content</p>
+      </AccordionEdit>,
+    );
+    const accordionTitle = container.querySelector('.accordion-title');
+    fireEvent.click(accordionTitle);
+
+    const contentElement = getByText('Accordion Content');
+    expect(contentElement).toBeInTheDocument();
+  });
+
+  it('should open accordion content when title is clicked', () => {
+    const { container, getByText } = render(
+      <AccordionEdit
+        handleTitleChange={handleTitleChange}
+        handleTitleClick={handleTitleClick}
+        uid={uid}
+        panel={panel}
+        data={{ ...data, non_exclusive: false }}
+        index={index}
+      >
+        <p>Accordion Content</p>
+      </AccordionEdit>,
+    );
+    const accordionTitle = container.querySelector('.accordion-title');
+    fireEvent.click(accordionTitle);
+
+    const contentElement = getByText('Accordion Content');
+    expect(contentElement).toBeInTheDocument();
+  });
 });
diff --git a/src/components/manage/Blocks/Accordion/View.test.jsx b/src/components/manage/Blocks/Accordion/View.test.jsx
@@ -1,11 +1,12 @@
 import React from 'react';
 import View from './View';
 import renderer from 'react-test-renderer';
-import { render } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
 import config from '@plone/volto/registry';
+import * as utils from './util';
 import '@testing-library/jest-dom/extend-expect';
 
 config.blocks.blocksConfig.accordion = {
@@ -41,11 +42,8 @@ jest.mock('@plone/volto/components', () => ({
 }));
 
 jest.mock('./util', () => ({
-  getPanels: () => [
-    ['id1', { title: 'Panel 1' }],
-    ['id2', { title: 'Panel 2' }],
-  ],
-  accordionBlockHasValue: () => true,
+  getPanels: () => [['id1', { title: 'Panel 1' }]],
+  accordionBlockHasValue: jest.fn(),
 }));
 
 const mockData = {
@@ -69,6 +67,20 @@ const mockData1 = {
 
 describe('View Component', () => {
   it('renders without crashing', () => {
+    utils.accordionBlockHasValue.mockReturnValue(true);
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <View data={mockData} />
+        </MemoryRouter>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders null', () => {
+    utils.accordionBlockHasValue.mockReturnValue(false);
     const component = renderer.create(
       <Provider store={store}>
         <MemoryRouter>
@@ -81,6 +93,7 @@ describe('View Component', () => {
   });
 
   it('renders with panels', () => {
+    utils.accordionBlockHasValue.mockReturnValue(true);
     const { rerender, getByText } = render(
       <Provider store={store}>
         <MemoryRouter>
@@ -89,7 +102,6 @@ describe('View Component', () => {
       </Provider>,
     );
     expect(getByText('Panel 1')).toBeInTheDocument();
-    expect(getByText('Panel 2')).toBeInTheDocument();
 
     rerender(
       <Provider store={store}>
@@ -99,4 +111,63 @@ describe('View Component', () => {
       </Provider>,
     );
   });
+
+  it('should open accordion content when title is clicked', () => {
+    utils.accordionBlockHasValue.mockReturnValue(true);
+    config.blocks.blocksConfig.accordion = {
+      ...config.blocks.blocksConfig.accordion,
+      semanticIcon: 'someIcon',
+    };
+    const { container, getByText } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <View data={mockData} />
+        </MemoryRouter>
+      </Provider>,
+    );
+    const accordionTitle = container.querySelector('.accordion-title');
+    fireEvent.click(accordionTitle);
+
+    const contentElement = getByText('RenderBlocks');
+    expect(contentElement).toBeInTheDocument();
+  });
+
+  it('should open accordion content when title is clicked', () => {
+    utils.accordionBlockHasValue.mockReturnValue(true);
+    const { container, getByText } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <View data={{ ...mockData, non_exclusive: false }}>
+            <p>Accordion Content</p>
+          </View>
+        </MemoryRouter>
+      </Provider>,
+    );
+    const accordionTitle = container.querySelector('.accordion-title');
+    fireEvent.click(accordionTitle);
+
+    const contentElement = getByText('RenderBlocks');
+    expect(contentElement).toBeInTheDocument();
+  });
+
+  it('should open accordion content when Enter key is pressed', () => {
+    config.blocks.blocksConfig.accordion = {
+      ...config.blocks.blocksConfig.accordion,
+      semanticIcon: 'someIcon',
+    };
+
+    const { container, getByText } = render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <View data={mockData} />
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    const accordionTitle = container.querySelector('.accordion-title');
+    fireEvent.keyDown(accordionTitle, { keyCode: 13 });
+
+    const contentElement = getByText('RenderBlocks');
+    expect(contentElement).toBeInTheDocument();
+  });
 });
diff --git a/src/components/manage/Blocks/Accordion/__snapshots__/View.test.jsx.snap b/src/components/manage/Blocks/Accordion/__snapshots__/View.test.jsx.snap
@@ -1,5 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`View Component renders null 1`] = `
+<div
+  className="accordion-block"
+/>
+`;
+
 exports[`View Component renders without crashing 1`] = `
 <div
   className="accordion-block"
@@ -49,50 +55,5 @@ exports[`View Component renders without crashing 1`] = `
       </div>
     </div>
   </div>
-  <div
-    className="accordion ui default"
-  >
-    <h3
-      className="title accordion-title align-arrow-right"
-      onClick={[Function]}
-      onKeyDown={[Function]}
-      tabIndex={0}
-    >
-      <div>
-        Icon
-      </div>
-      <span>
-        Panel 2
-      </span>
-    </h3>
-    <div
-      aria-hidden={true}
-      className="rah-static rah-static--height-zero"
-      style={
-        Object {
-          "height": 0,
-          "overflow": "hidden",
-        }
-      }
-    >
-      <div
-        style={
-          Object {
-            "WebkitTransition": "opacity 500ms ease 0ms",
-            "opacity": 0,
-            "transition": "opacity 500ms ease 0ms",
-          }
-        }
-      >
-        <div
-          className="content"
-        >
-          <div>
-            RenderBlocks
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
 </div>
 `;