Merge pull request #82 from eea/develop

Release

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

cypress/e2e/02-block-tabs-edit.cy.js

@@ -0,0 +1,41 @@
+import { slateBeforeEach, slateAfterEach } from '../support/e2e';
+
+describe('Blocks Edit Tests', () => {
+  beforeEach(slateBeforeEach);
+  afterEach(slateAfterEach);
+
+  it('Should be able to press different keys and select multiple blocks', () => {
+    cy.clearSlateTitle();
+    cy.getSlateTitle().type('Tabs block default template');
+    cy.get('.documentFirstHeading').contains('Tabs block default template');
+
+    cy.getSlate().click().type('/tabs{enter}');
+    cy.get('.tabs-block.edit .block-editor-slate')
+      .click()
+      .type('Tab 1 text{enter}');
+    cy.get('.block.tabs_block legend').click();
+
+    cy.get('.tabs-block .addition-button').click();
+    cy.get('.tabs-block.edit .block-editor-slate')
+      .click()
+      .type('Tab 2 text{enter}');
+    cy.getSlate().click().type('/tabs{enter}');
+    cy.get('#toolbar-save').click();
+
+    cy.url().should('eq', Cypress.config().baseUrl + '/cypress/my-page');
+
+    cy.contains('Tab 1');
+    cy.contains('Tab 1 text');
+    cy.get('.styled-tabs_block').contains('Tab 2').type('{uparrow}');
+    cy.contains('Tab 2 text');
+    cy.get('.edit').click();
+
+    cy.wait(500);
+
+    cy.get('.item').contains('Tab 2').type('{uparrow}');
+    cy.get('.item').contains('Tab 1').type('{downarrow}');
+    cy.get('.item').contains('Tab 2').type('{enter}');
+    cy.get('.block-editor-tabs_block').first().click({ shiftKey: true });
+    cy.get('.block-editor-tabs_block').last().click({ shiftKey: true });
+  });
+});

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.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",

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) => {

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'));
+  });
+});