@eeacms/volto-tabs-block 7.0.4 → 7.0.5

package/CHANGELOG.md

@@ -4,6 +4,17 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [7.0.5](https://github.com/eea/volto-tabs-block/compare/7.0.4...7.0.5) - 10 December 2023
+
+#### :rocket: New Features
+
+- feat: add more tests for view/edit component [hazigabriel - [`72d0467`](https://github.com/eea/volto-tabs-block/commit/72d0467e74042b103630aacb8cffafb7c7a4a83f)]
+- feat: refactor custom useQuery hook to avoid uncessary rerender [hazigabriel - [`6f28052`](https://github.com/eea/volto-tabs-block/commit/6f28052336db391ef9c918b2b329da4ae1639850)]
+
+#### :bug: Bug Fixes
+
+- fix: add jest config to fix jenkins error [hazigabriel - [`63fa962`](https://github.com/eea/volto-tabs-block/commit/63fa962f7f49ac8986ff250db57f544292aa951c)]
+
 ### [7.0.4](https://github.com/eea/volto-tabs-block/compare/7.0.3...7.0.4) - 4 December 2023
 
 #### :bug: Bug Fixes

package/jest-addon.config.js

@@ -19,6 +19,7 @@ module.exports = {
     'load-volto-addons':
       '<rootDir>/node_modules/@plone/volto/jest-addons-loader.js',
   },
+  transformIgnorePatterns: ['node_modules/(?!@eeacms)/volto-anchors/helpers'],
   transform: {
     '^.+\\.js(x)?$': 'babel-jest',
     '^.+\\.(png)$': 'jest-file',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-tabs-block",
-  "version": "7.0.4",
+  "version": "7.0.5",
   "description": "volto-tabs-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/View.jsx

@@ -33,12 +33,11 @@ const View = (props) => {
 
   const TabsView = activeTemplate?.[0]?.view || DefaultView;
 
-  const useQuery = () => {
+  const query = React.useMemo(() => {
     const { search } = location;
-    return React.useMemo(() => new URLSearchParams(search), [search]);
-  };
 
-  const query = useQuery();
+    return new URLSearchParams(search);
+  }, [location]);
   const activeTabId = query.get('activeTab');
 
   const addQueryParam = (key, value) => {

package/src/components/View.test.jsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import View from './View';
+import config from '@plone/volto/registry';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import '@testing-library/jest-dom/extend-expect';
+
+config.blocks.blocksConfig = {
+  tabs_block: {
+    variations: [{ id: 'default' }, { id: 'accordion' }],
+  },
+};
+config.settings = {
+  integratesBlockStyles: [],
+};
+jest.mock('react-router', () => ({
+  withRouter: (WrapperComponent) => (props) => {
+    return (
+      <WrapperComponent
+        {...props}
+        location={{
+          pathname: '/',
+          search: '?activeTab=tab1',
+          hash: '',
+          key: 'qruhb8',
+        }}
+        history={{
+          push: jest.fn(),
+        }}
+      />
+    );
+  },
+}));
+
+jest.mock('@eeacms/volto-block-style/StyleWrapper', () => ({
+  StyleWrapperView: (props) => {
+    return <div className="mocked-style-wrapper">{props.children}</div>;
+  },
+}));
+const mockStore = configureStore();
+const store = mockStore({
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+});
+
+describe('View Component', () => {
+  it('Should render and switch Tabs', () => {
+    const customTabsData = {
+      blocks_layout: {
+        items: ['tab1', 'tab2', 'tab3'],
+      },
+      blocks: {
+        tab1: {
+          title: 'Tab 1 Title',
+          content: 'Tab 1 Content',
+        },
+        tab2: {
+          title: 'Tab 2 Title',
+          content: 'Tab 2 Content',
+        },
+        tab3: {
+          title: 'Tab 3 Title',
+          content: 'Tab 3 Content',
+        },
+      },
+    };
+
+    const { container, getByText } = render(
+      <Provider store={store}>
+        <Router>
+          <View data={{ variation: 'default', data: customTabsData }} />
+        </Router>
+      </Provider>,
+    );
+    const tabItemsMenu = container.querySelectorAll(
+      '.ui.tabs-secondary-variant.menu a',
+    );
+
+    expect(
+      container.querySelector('.tabs-block.default.light.flex-start'),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('.default.tabs.tabs-accessibility'),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('.ui.tabs-secondary-variant.menu'),
+    ).toBeInTheDocument();
+    expect(
+      container.getElementsByClassName('mocked-style-wrapper'),
+    ).toHaveLength(2);
+    expect(getByText('Tab 1 Title')).toBeInTheDocument();
+
+    fireEvent.click(getByText('Tab 2 Title'));
+    expect(tabItemsMenu).toHaveLength(3);
+    expect(tabItemsMenu[0].classList.contains('item'));
+    expect(tabItemsMenu[0].classList).not.toContain('active');
+    expect(tabItemsMenu[1].classList.contains('active'));
+
+    fireEvent.click(getByText('Tab 1 Title'));
+    expect(tabItemsMenu).toHaveLength(3);
+    expect(tabItemsMenu[1].classList.contains('item'));
+    expect(tabItemsMenu[1].classList).not.toContain('active');
+    expect(tabItemsMenu[0].classList.contains('active'));
+  });
+});