@eeacms/volto-hero-block 6.0.0 → 7.0.0

package/CHANGELOG.md

@@ -4,7 +4,22 @@ 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).
 
-### [6.0.0](https://github.com/eea/volto-hero-block/compare/5.5.0...6.0.0) - 4 April 2024
+### [7.0.0](https://github.com/eea/volto-hero-block/compare/6.0.1...7.0.0) - 22 April 2024
+
+#### :rocket: New Features
+
+- feat: Release 7.0.0 - Volto 17 support [alin - [`ae73069`](https://github.com/eea/volto-hero-block/commit/ae73069aca5ca8e7abd909d8692e7eeb3f05d15f)]
+- feat: Volto 17 support - refs #264527 [valentinab25 - [`b35a1d7`](https://github.com/eea/volto-hero-block/commit/b35a1d7d7c367a54cefcc58107cccd60802f97d7)]
+
+#### :hammer_and_wrench: Others
+
+### [6.0.1](https://github.com/eea/volto-hero-block/compare/6.0.0...6.0.1) - 5 April 2024
+
+#### :house: Internal changes
+
+- chore: Fix package.json [alin - [`a6f6427`](https://github.com/eea/volto-hero-block/commit/a6f6427acc6789a0c4a9a9b07e73b8186638d872)]
+
+## [6.0.0](https://github.com/eea/volto-hero-block/compare/5.5.0...6.0.0) - 5 April 2024
 
 #### :boom: Breaking Change
 
@@ -17,6 +32,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
+- Release 6.0.0 #45 from eea/develop [ichim-david - [`a0120da`](https://github.com/eea/volto-hero-block/commit/a0120da50fcf7d5962a9dd9a93abe88fcbee090d)]
 - Fix onClick event in Hero block to select the block in Edit mode [David Ichim - [`1f38992`](https://github.com/eea/volto-hero-block/commit/1f389922d05a5a04cf11d023229aca156873f4b9)]
 - Add ts-jest package to package.json [David Ichim - [`7c82b62`](https://github.com/eea/volto-hero-block/commit/7c82b626985bfdabcf10db6da159c13fa86b27e2)]
 - bump package version to a major 6.0.0 to indicate breaking changes [David Ichim - [`472b675`](https://github.com/eea/volto-hero-block/commit/472b675fcc037c5ac31ceed52f60aa13998fa896)]

package/jest-addon.config.js

@@ -14,6 +14,8 @@ module.exports = {
     '@package/(.*)$': '<rootDir>/node_modules/@plone/volto/src/$1',
     '@root/(.*)$': '<rootDir>/node_modules/@plone/volto/src/$1',
     '@plone/volto-quanta/(.*)$': '<rootDir>/src/addons/volto-quanta/src/$1',
+    '@eeacms/search/(.*)$': '<rootDir>/src/addons/volto-searchlib/searchlib/$1',
+    '@eeacms/search': '<rootDir>/src/addons/volto-searchlib/searchlib',
     '@eeacms/(.*?)/(.*)$': '<rootDir>/node_modules/@eeacms/$1/src/$2',
     '@plone/volto-slate$':
       '<rootDir>/node_modules/@plone/volto/packages/volto-slate/src',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-hero-block",
-  "version": "6.0.0",
+  "version": "7.0.0",
   "description": "@eeacms/volto-hero-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -29,9 +29,9 @@
     "babel-plugin-transform-class-properties": "^6.24.1",
     "dotenv": "^16.3.2",
     "husky": "^8.0.3",
-    "ts-jest": "^26.4.2",
     "lint-staged": "^14.0.1",
-    "md5": "^2.3.0"
+    "md5": "^2.3.0",
+    "ts-jest": "^26.4.2"
   },
   "lint-staged": {
     "src/**/*.{js,jsx,ts,tsx,json}": [

package/src/components/Blocks/Hero/Copyright.test.jsx

@@ -1,35 +1,62 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
-import Copyright from './Copyright';
+import { render, screen } from '@testing-library/react';
 import { Icon } from 'semantic-ui-react';
 import { Provider } from 'react-intl-redux';
 import configureStore from 'redux-mock-store';
 import config from '@plone/volto/registry';
+import '@testing-library/jest-dom/extend-expect';
+
+import Copyright from './Copyright';
 
 const mockStore = configureStore();
 
-test('renders copyright', () => {
+describe('Copyright', () => {
   const store = mockStore({
     intl: {
       locale: 'en',
       messages: {},
     },
   });
-  const copyrightPrefix =
-    config.blocks.blocksConfig.hero?.copyrightPrefix || '';
+  it('renders copyright with left position', () => {
+    const copyrightPrefix =
+      config.blocks.blocksConfig.hero?.copyrightPrefix || '';
 
-  const component = renderer.create(
-    <Provider store={store}>
-      <Copyright copyrightPosition={'left'}>
-        <Copyright.Prefix>{copyrightPrefix}</Copyright.Prefix>
-        <Copyright.Icon>
-          <Icon className={'copyright outline'} />
-        </Copyright.Icon>
-        <Copyright.Text>Copyright Text Test</Copyright.Text>
-      </Copyright>
-    </Provider>,
-  );
+    const { container } = render(
+      <Provider store={store}>
+        <Copyright copyrightPosition={'left'}>
+          <Copyright.Prefix>{copyrightPrefix}</Copyright.Prefix>
+          <Copyright.Icon>
+            <Icon className={'copyright outline'} />
+          </Copyright.Icon>
+          <Copyright.Text>Copyright Text Test</Copyright.Text>
+        </Copyright>
+      </Provider>,
+    );
 
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
+    expect(screen.getByText('Copyright Text Test')).toBeInTheDocument();
+    expect(container.querySelector('i.copyright.outline')).toBeInTheDocument();
+    expect(
+      container.querySelector('div.eea.copyright.left'),
+    ).toBeInTheDocument();
+  });
+
+  it('renders copyright without prefix', () => {
+    const { container } = render(
+      <Provider store={store}>
+        <Copyright copyrightPosition={'right'}>
+          <Copyright.Icon>
+            <Icon className={'copyright outline'} />
+          </Copyright.Icon>
+          <Copyright.Text>Copyright Text Test</Copyright.Text>
+        </Copyright>
+      </Provider>,
+    );
+
+    expect(screen.queryByText('Prefix')).not.toBeInTheDocument();
+    expect(screen.getByText('Copyright Text Test')).toBeInTheDocument();
+    expect(container.querySelector('i.copyright.outline')).toBeInTheDocument();
+    expect(
+      container.querySelector('div.eea.copyright.right'),
+    ).toBeInTheDocument();
+  });
 });

package/src/components/Blocks/Hero/Hero.test.jsx

@@ -1,9 +1,11 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
-import Hero from './Hero';
+import { render } from '@testing-library/react';
 import { Provider } from 'react-intl-redux';
 import configureStore from 'redux-mock-store';
 import config from '@plone/volto/registry';
+import '@testing-library/jest-dom/extend-expect';
+
+import Hero from './Hero';
 
 const { settings } = config;
 
@@ -28,7 +30,7 @@ describe('Hero block', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <Hero
           image=""
@@ -50,8 +52,10 @@ describe('Hero block', () => {
       </Provider>,
     );
 
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+    expect(container.querySelector('.eea.hero-block')).toBeInTheDocument();
+    expect(container.querySelector('.inverted')).toBeInTheDocument();
+    expect(container.querySelector('.full-height')).toBeInTheDocument();
+    expect(container.querySelector('.full-width')).toBeInTheDocument();
   });
 
   it('renders a hero component', () => {
@@ -61,7 +65,7 @@ describe('Hero block', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <Hero
           image=""
@@ -83,8 +87,10 @@ describe('Hero block', () => {
       </Provider>,
     );
 
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+    expect(container.querySelector('.eea.hero-block')).toBeInTheDocument();
+    expect(container.querySelector('.inverted')).toBeInTheDocument();
+    expect(container.querySelector('.full-height')).toBeInTheDocument();
+    expect(container.querySelector('.full-width')).not.toBeInTheDocument();
   });
 
   it('renders a hero component', () => {
@@ -94,7 +100,7 @@ describe('Hero block', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <Hero
           image={{ '@type': 'URL', url: 'url_url', href: 'href_url' }}
@@ -116,8 +122,10 @@ describe('Hero block', () => {
       </Provider>,
     );
 
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+    expect(container.querySelector('.eea.hero-block')).toBeInTheDocument();
+    expect(container.querySelector('.hero-block-image')).toHaveStyle({
+      backgroundImage: 'url(url_url)',
+    });
   });
 
   it('renders a hero component', () => {
@@ -127,7 +135,7 @@ describe('Hero block', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <Hero
           image={`${settings.apiPath}/foo/bar`}
@@ -149,41 +157,10 @@ describe('Hero block', () => {
       </Provider>,
     );
 
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
-  });
-
-  it('renders a hero component', () => {
-    const store = mockStore({
-      intl: {
-        locale: 'en',
-        messages: {},
-      },
+    expect(container.querySelector('.eea.hero-block')).toBeInTheDocument();
+    expect(container.querySelector('.hero-block-image')).toHaveStyle({
+      backgroundImage: 'url(/foo/bar/@@images/image/huge)',
     });
-    const component = renderer.create(
-      <Provider store={store}>
-        <Hero
-          image={`${settings.apiPath}/foo/bar.gif`}
-          overlay={true}
-          fullWidth={false}
-          fullHeight={true}
-          spaced={false}
-          inverted={true}
-          styles={{ alignContent: 'center', backgroundVariant: 'primary' }}
-        >
-          <Hero.Text
-            quoted={true}
-            styles={{ textVariant: 'white', textAlign: 'left' }}
-          >
-            Text test
-          </Hero.Text>
-          <Hero.Meta styles={{ buttonAlign: 'left' }}>Test meta</Hero.Meta>
-        </Hero>
-      </Provider>,
-    );
-
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
   });
 
   it('renders a hero component', () => {
@@ -193,7 +170,7 @@ describe('Hero block', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <Hero
           image={`${settings.apiPath}/foo/bar.gif`}
@@ -210,8 +187,7 @@ describe('Hero block', () => {
       </Provider>,
     );
 
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+    expect(container.querySelector('.quoted-wrapper')).toBeInTheDocument();
   });
 
   it('renders a hero component', () => {
@@ -221,7 +197,7 @@ describe('Hero block', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <Hero image={`${settings.apiPath}/foo/bar.gif`} styles={undefined}>
           <Hero.Text quoted={true} styles={undefined}>
@@ -232,7 +208,6 @@ describe('Hero block', () => {
       </Provider>,
     );
 
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+    expect(container.querySelector('.quoted-wrapper')).toBeInTheDocument();
   });
 });

package/src/components/Blocks/Hero/LayoutSchema.js

@@ -51,8 +51,7 @@ const messages = defineMessages({
     defaultMessage: 'Fixed layout',
   },
   FixedlayoutNewPanesTabs: {
-    id:
-      'Fixed layout, New panes (tabs) created by Editor within this block will be ignored',
+    id: 'Fixed layout, New panes (tabs) created by Editor within this block will be ignored',
     defaultMessage:
       'Fixed layout, New panes (tabs) created by Editor within this block will be ignored',
   },
@@ -98,7 +97,7 @@ const messages = defineMessages({
   },
 });
 
-export default (intl) => ({
+const layoutSchema = (intl) => ({
   title: intl.formatMessage(messages.HeroBlockSettings),
   fieldsets: [
     {
@@ -172,3 +171,5 @@ export default (intl) => ({
   },
   required: [],
 });
+
+export default layoutSchema;