@eeacms/volto-hero-block 5.4.1 → 5.4.2

package/.husky/pre-commit

@@ -0,0 +1,2 @@
+[ -n "$CI" ] && exit 0
+yarn lint-staged

package/CHANGELOG.md

@@ -4,6 +4,25 @@ 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).
 
+### [5.4.2](https://github.com/eea/volto-hero-block/compare/5.4.1...5.4.2) - 29 September 2023
+
+#### :house: Internal changes
+
+- style: lint-staged reorder in package.json [Alin Voinea - [`406bd25`](https://github.com/eea/volto-hero-block/commit/406bd25f148e196d8f875ccd8c648511bda711db)]
+
+#### :house: Documentation changes
+
+- docs: Update README and DEVELOP [Alin Voinea - [`4701adf`](https://github.com/eea/volto-hero-block/commit/4701adfd8f364ba43ea8deef4c6efd48fbdfff31)]
+- docs: Update DEVELOP [Alin Voinea - [`ed3c9db`](https://github.com/eea/volto-hero-block/commit/ed3c9db96c7778c8d5c904db98cf12a59c31c0f3)]
+- docs: Cleanup Makefile, update DEVELOP documentation, i18n - refs #254894 [valentinab25 - [`486dfc8`](https://github.com/eea/volto-hero-block/commit/486dfc8699c5bcec65673807ffc9802705092f47)]
+
+#### :hammer_and_wrench: Others
+
+- test: EN locales, pre-commit fix, feature PRs checks Refs #257193 [valentinab25 - [`9cd9698`](https://github.com/eea/volto-hero-block/commit/9cd9698fc7c6e4b4de6c521573a0dddb21a13ea8)]
+- test: add unit tests for Hero, Edit, helpers, hooks - refs #254313 [ana-oprea - [`89b39af`](https://github.com/eea/volto-hero-block/commit/89b39afe7ad5ce94d341482be91ab55e2c1a31ed)]
+- i18n: Add en [Alin Voinea - [`9cdb7f1`](https://github.com/eea/volto-hero-block/commit/9cdb7f1ff9d81dade3d91551b53cf7200f08937e)]
+- test: Update Makefile and docker-compose to align it with Jenkinsfile [valentinab25 - [`0fe0d91`](https://github.com/eea/volto-hero-block/commit/0fe0d91fe9c43d10574990e9b163ffc49fe5bee7)]
+- Add Sonarqube tag using freshwater-frontend addons list [EEA Jenkins - [`b1d1446`](https://github.com/eea/volto-hero-block/commit/b1d14467bcde28023b2831235928db1f328d6b0a)]
 ### [5.4.1](https://github.com/eea/volto-hero-block/compare/5.4.0...5.4.1) - 24 July 2023
 
 ### [5.4.0](https://github.com/eea/volto-hero-block/compare/5.3.1...5.4.0) - 12 June 2023

package/DEVELOP.md

@@ -1,7 +1,31 @@
-# volto-addon-template
+# volto-hero-block
 
 ## Develop
 
+1. Make sure you have `docker` and `docker compose` installed and running on your machine:
+
+    ```Bash
+    git clone https://github.com/eea/volto-hero-block.git
+    cd volto-hero-block
+    git checkout -b bugfix-123456 develop
+    make
+    make start
+    ```
+
+1. Wait for `Volto started at 0.0.0.0:3000` meesage
+
+1. Go to http://localhost:3000
+
+1. Initialize git hooks
+
+    ```Bash
+    yarn prepare
+    ```
+
+1. Happy hacking!
+
+### Or add @eeacms/volto-hero-block to your Volto project
+
 Before starting make sure your development environment is properly set. See [Volto Developer Documentation](https://docs.voltocms.com/getting-started/install/)
 
 1.  Make sure you have installed `yo`, `@plone/generator-volto` and `mrs-developer`
@@ -10,15 +34,15 @@ Before starting make sure your development environment is properly set. See [Vol
 
 1.  Create new volto app
 
-        yo @plone/volto my-volto-project --addon @eeacms/volto-addon-template --skip-install
+        yo @plone/volto my-volto-project --addon @eeacms/volto-hero-block --skip-install
         cd my-volto-project
 
 1.  Add the following to `mrs.developer.json`:
 
         {
-            "volto-addon-template": {
-                "url": "https://github.com/eea/volto-addon-template.git",
-                "package": "@eeacms/volto-addon-template",
+            "volto-hero-block": {
+                "url": "https://github.com/eea/volto-hero-block.git",
+                "package": "@eeacms/volto-hero-block",
                 "branch": "develop",
                 "path": "src"
             }
@@ -26,18 +50,15 @@ Before starting make sure your development environment is properly set. See [Vol
 
 1.  Install
 
-        yarn develop
+        make develop
         yarn
 
 1.  Start backend
 
-        docker pull plone
-        docker run -d --name plone -p 8080:8080 -e SITE=Plone -e PROFILES="profile-plone.restapi:blocks" plone
+        docker run --pull always -it --rm --name plone -p 8080:8080 -e SITE=Plone plone/plone-backend
 
     ...wait for backend to setup and start - `Ready to handle requests`:
 
-        docker logs -f plone
-
     ...you can also check http://localhost:8080/Plone
 
 1.  Start frontend
@@ -48,4 +69,38 @@ Before starting make sure your development environment is properly set. See [Vol
 
 1.  Happy hacking!
 
-        cd src/addons/volto-addon-template/
+        cd src/addons/volto-hero-block/
+
+## Cypress
+
+To run cypress locally, first make sure you don't have any Volto/Plone running on ports `8080` and `3000`.
+
+You don't have to be in a `clean-volto-project`, you can be in any Volto Frontend
+project where you added `volto-hero-block` to `mrs.developer.json`
+
+Go to:
+
+  ```BASH
+  cd src/addons/volto-hero-block/
+  ```
+
+Start:
+
+  ```Bash
+  make
+  make start
+  ```
+
+This will build and start with Docker a clean `Plone backend` and `Volto Frontend` with `volto-hero-block` block installed.
+
+Open Cypress Interface:
+
+  ```Bash
+  make cypress-open
+  ```
+
+Or run it:
+
+  ```Bash
+  make cypress-run
+  ```

package/README.md

@@ -29,10 +29,23 @@ This version requires: `@plone/volto >= 16.0.0.alpha.46` (schemaEnhancer / addSt
 
 ## Getting started
 
+### Try volto-hero-block with Docker
+
+      git clone https://github.com/eea/volto-hero-block.git
+      cd volto-hero-block
+      make
+      make start
+
+Go to http://localhost:3000
+
 ### Add volto-hero-block to your Volto project
 
 1. Make sure you have a [Plone backend](https://plone.org/download) up-and-running at http://localhost:8080/Plone
 
+   ```Bash
+   docker compose up backend
+   ```
+
 1. Start Volto frontend
 
 * If you already have a volto project, just update `package.json`:
@@ -43,7 +56,7 @@ This version requires: `@plone/volto >= 16.0.0.alpha.46` (schemaEnhancer / addSt
    ],
 
    "dependencies": {
-       "@eeacms/volto-hero-block": "^1.0.0"
+       "@eeacms/volto-hero-block": "*"
    }
    ```
 
@@ -51,7 +64,7 @@ This version requires: `@plone/volto >= 16.0.0.alpha.46` (schemaEnhancer / addSt
 
    ```
    npm install -g yo @plone/generator-volto
-   yo @plone/volto my-volto-project --addon @eeacms/volto-hero-block
+   yo @plone/volto my-volto-project --canary --addon @eeacms/volto-hero-block
    cd my-volto-project
    ```
 
@@ -81,8 +94,6 @@ All Rights Reserved.
 
 See [LICENSE.md](https://github.com/eea/volto-hero-block/blob/master/LICENSE.md) for details.
 
-
 ## Funding
 
 [European Environment Agency (EU)](http://eea.europa.eu)
-

package/cypress.config.js

@@ -2,12 +2,12 @@ const { defineConfig } = require('cypress');
 
 module.exports = defineConfig({
   viewportWidth: 1280,
-  defaultCommandTimeout: 8888,
+  defaultCommandTimeout: 5000,
   chromeWebSecurity: false,
   reporter: 'junit',
   video: true,
   retries: {
-    runMode: 8,
+    runMode: 1,
     openMode: 0,
   },
   reporterOptions: {

package/docker-compose.yml

@@ -0,0 +1,32 @@
+version: "3"
+services:
+  backend:
+    image: eeacms/plone-backend
+    ports:
+      - "8080:8080"
+    environment:
+      SITE: "Plone"
+      PROFILES: "eea.kitkat:testing"
+
+  frontend: 
+    build:
+      context: ./
+      dockerfile: ./Dockerfile
+      args:
+        ADDON_NAME: "${ADDON_NAME}"
+        ADDON_PATH: "${ADDON_PATH}"
+        VOLTO_VERSION: ${VOLTO_VERSION:-16}
+    ports:
+    - "3000:3000"
+    - "3001:3001"
+    depends_on:
+      - backend
+    volumes:
+      - ./:/app/src/addons/${ADDON_PATH}
+    environment:
+      CI: "true"
+      NODE_ENV: "development"
+      RAZZLE_JEST_CONFIG: "src/addons/${ADDON_PATH}/jest-addon.config.js"
+      RAZZLE_INTERNAL_API_PATH: "http://backend:8080/Plone"
+      RAZZLE_DEV_PROXY_API_PATH: "http://backend:8080/Plone"
+      HOST: "0.0.0.0"

package/locales/de/LC_MESSAGES/volto.po

@@ -0,0 +1,14 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language: \n"
+"Language-Team: \n"
+"Content-Type: \n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"
+
+

package/locales/en/LC_MESSAGES/volto.po

@@ -0,0 +1,14 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language: \n"
+"Language-Team: \n"
+"Content-Type: \n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"
+
+

package/locales/it/LC_MESSAGES/volto.po

@@ -0,0 +1,14 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language: \n"
+"Language-Team: \n"
+"Content-Type: \n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"
+
+

package/locales/ro/LC_MESSAGES/volto.po

@@ -0,0 +1,14 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language: \n"
+"Language-Team: \n"
+"Content-Type: \n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"
+
+

package/locales/volto.pot

@@ -0,0 +1,16 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: Plone\n"
+"POT-Creation-Date: 2023-06-28T10:48:22.678Z\n"
+"Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
+"Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=1; plural=0;\n"
+"Language-Code: en\n"
+"Language-Name: English\n"
+"Preferred-Encodings: utf-8\n"
+"Domain: volto\n"
+
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-hero-block",
-  "version": "5.4.1",
+  "version": "5.4.2",
   "description": "@eeacms/volto-hero-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -27,8 +27,31 @@
     "@cypress/code-coverage": "^3.10.0",
     "@plone/scripts": "*",
     "babel-plugin-transform-class-properties": "^6.24.1",
+    "husky": "*",
+    "lint-staged": "*",
     "md5": "^2.3.0"
   },
+  "lint-staged": {
+    "src/**/*.{js,jsx,ts,tsx,json}": [
+      "make lint-fix",
+      "make prettier-fix"
+    ],
+    "src/**/*.{jsx}": [
+      "make i18n"
+    ],
+    "theme/**/*.{css,less}": [
+      "make stylelint-fix"
+    ],
+    "src/**/*.{css,less}": [
+      "make stylelint-fix"
+    ],
+    "theme/**/*.overrides": [
+      "make stylelint-fix"
+    ],
+    "src/**/*.overrides": [
+      "make stylelint-fix"
+    ]
+  },
   "scripts": {
     "release": "release-it",
     "release-major-beta": "release-it major --preRelease=beta",
@@ -46,6 +69,7 @@
     "lint:fix": "make lint-fix",
     "i18n": "make i18n",
     "cypress:run": "make cypress-run",
-    "cypress:open": "make cypress-open"
+    "cypress:open": "make cypress-open",
+    "prepare": "husky install"
   }
 }

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

@@ -0,0 +1,113 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import configureStore from 'redux-mock-store';
+import Edit from './Edit';
+import config from '@plone/volto/registry';
+import '@testing-library/jest-dom/extend-expect';
+
+const mockStore = configureStore([]);
+
+jest.mock('@plone/volto-slate/editor/SlateEditor', () => {
+  return {
+    __esModule: true,
+    default: ({ placeholder, children, onChange, onFocus }) => (
+      <div
+        onChange={(target) => onChange(target)}
+        onFocus={() => onFocus()}
+        id="test"
+      >
+        <div>{placeholder}</div>
+        {children}
+      </div>
+    ),
+  };
+});
+
+const observe = jest.fn();
+const unobserve = jest.fn();
+window.IntersectionObserver = jest.fn((callback) => ({
+  observe,
+  unobserve,
+}));
+
+config.blocks = {
+  blocksConfig: {
+    hero: {
+      copyrightPrefix: 'Test Prefix',
+      schema: {
+        title: 'Hero',
+      },
+    },
+  },
+};
+config.settings = {
+  slate: {
+    textblockExtensions: [],
+  },
+};
+
+describe('Edit component', () => {
+  let store;
+
+  beforeEach(() => {
+    store = mockStore({
+      slate_block_selections: {},
+      upload_content: {},
+    });
+  });
+
+  it('renders without crashing', () => {
+    const { container } = render(
+      <Provider store={store}>
+        <Edit />
+      </Provider>,
+    );
+    expect(container).toBeTruthy();
+  });
+
+  it('renders hero text', () => {
+    const data = {
+      text: [
+        {
+          type: 'paragraph',
+          children: [{ text: 'Sample text' }],
+        },
+      ],
+      copyright: 'true',
+      copyrightIcon: 'test',
+      copyrightPosition: 'right',
+      buttonLabel: 'Test',
+    };
+
+    const { container } = render(
+      <Provider store={store}>
+        <Edit data={data} />
+      </Provider>,
+    );
+
+    expect(container.querySelector('#test')).toBeInTheDocument();
+  });
+
+  it('calls onFocus when SlateEditor is focused', () => {
+    config.blocks = {
+      blocksConfig: {
+        hero: {
+          copyrightPrefix: 'Test Prefix',
+          schema: () => ({
+            title: 'Hero',
+          }),
+        },
+      },
+    };
+    const onSelectBlock = jest.fn();
+    const { getByText } = render(
+      <Provider store={store}>
+        <Edit onSelectBlock={onSelectBlock} />
+      </Provider>,
+    );
+
+    fireEvent.focus(getByText('Add text...'));
+    expect(onSelectBlock).toHaveBeenCalled();
+  });
+});

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

@@ -3,38 +3,236 @@ import renderer from 'react-test-renderer';
 import Hero from './Hero';
 import { Provider } from 'react-intl-redux';
 import configureStore from 'redux-mock-store';
+import config from '@plone/volto/registry';
+
+const { settings } = config;
 
 const mockStore = configureStore();
 
-test('renders a hero component', () => {
-  const store = mockStore({
-    intl: {
-      locale: 'en',
-      messages: {},
-    },
+const observe = jest.fn();
+const unobserve = jest.fn();
+window.IntersectionObserver = jest.fn((callback) => ({
+  observe,
+  unobserve,
+}));
+
+jest.mock('@eeacms/volto-hero-block/hooks', () => ({
+  useFirstVisited: jest.fn(() => true),
+}));
+
+describe('Hero block', () => {
+  it('renders a hero component', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <Hero
+          image=""
+          overlay={true}
+          fullWidth={true}
+          fullHeight={true}
+          spaced={false}
+          inverted={true}
+          styles={{ alignContent: 'center', backgroundVariant: 'primary' }}
+        >
+          <Hero.Text
+            quoted={false}
+            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', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <Hero
+          image=""
+          overlay={true}
+          fullWidth={false}
+          fullHeight={true}
+          spaced={false}
+          inverted={true}
+          styles={{ alignContent: 'center', backgroundVariant: 'primary' }}
+        >
+          <Hero.Text
+            quoted={false}
+            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();
   });
-  const component = renderer.create(
-    <Provider store={store}>
-      <Hero
-        image=""
-        overlay={true}
-        fullWidth={true}
-        fullHeight={true}
-        spaced={false}
-        inverted={true}
-        styles={{ alignContent: 'center', backgroundVariant: 'primary' }}
-      >
-        <Hero.Text
-          quoted={false}
-          styles={{ textVariant: 'white', textAlign: 'left' }}
+
+  it('renders a hero component', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <Hero
+          image={{ '@type': 'URL', url: 'url_url', href: 'href_url' }}
+          overlay={true}
+          fullWidth={false}
+          fullHeight={true}
+          spaced={false}
+          inverted={true}
+          styles={{ alignContent: 'center', backgroundVariant: 'primary' }}
+        >
+          <Hero.Text
+            quoted={false}
+            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', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <Hero
+          image={`${settings.apiPath}/foo/bar`}
+          overlay={true}
+          fullWidth={false}
+          fullHeight={true}
+          spaced={false}
+          inverted={true}
+          styles={{ alignContent: 'center', backgroundVariant: 'primary' }}
         >
-          Text test
-        </Hero.Text>
-        <Hero.Meta styles={{ buttonAlign: 'left' }}>Test meta</Hero.Meta>
-      </Hero>
-    </Provider>,
-  );
-
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
+          <Hero.Text
+            quoted={false}
+            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', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    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', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <Hero
+          image={`${settings.apiPath}/foo/bar.gif`}
+          styles={{ alignContent: undefined, backgroundVariant: undefined }}
+        >
+          <Hero.Text
+            quoted={true}
+            styles={{ textVariant: undefined, textAlign: undefined }}
+          >
+            Text test
+          </Hero.Text>
+          <Hero.Meta styles={{ buttonAlign: undefined }}>Test meta</Hero.Meta>
+        </Hero>
+      </Provider>,
+    );
+
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a hero component', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <Hero image={`${settings.apiPath}/foo/bar.gif`} styles={undefined}>
+          <Hero.Text quoted={true} styles={undefined}>
+            Text test
+          </Hero.Text>
+          <Hero.Meta styles={undefined}>Test meta</Hero.Meta>
+        </Hero>
+      </Provider>,
+    );
+
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
 });

package/src/helpers.test.js

@@ -1,4 +1,9 @@
-import { createSlateHeader, serializeText, isImageGif } from './helpers';
+import {
+  getFieldURL,
+  createSlateHeader,
+  serializeText,
+  isImageGif,
+} from './helpers';
 import { isArray } from 'lodash';
 import { serializeNodes } from '@plone/volto-slate/editor/render';
 
@@ -6,6 +11,94 @@ jest.mock('@plone/volto-slate/editor/render', () => ({
   serializeNodes: jest.fn(),
 }));
 
+describe('getFieldURL', () => {
+  it('handles a URL type object with type and value', () => {
+    const data = {
+      '@type': 'URL',
+      value: 'value_url',
+      url: 'url_url',
+      href: 'href_url',
+    };
+    expect(getFieldURL(data)).toEqual('value_url');
+  });
+
+  it('handles an object with type and url', () => {
+    const data = {
+      '@type': 'URL',
+      url: 'url_url',
+      href: 'href_url',
+    };
+    expect(getFieldURL(data)).toEqual('url_url');
+  });
+
+  it('handles an object with type and href', () => {
+    const data = {
+      '@type': 'URL',
+      href: 'href_url',
+    };
+    expect(getFieldURL(data)).toEqual('href_url');
+  });
+
+  it('handles an object with type and no value, url and href', () => {
+    const data = {
+      '@type': 'URL',
+    };
+    expect(getFieldURL(data)).toEqual({ '@type': 'URL' });
+  });
+
+  it('handles an object without a specific type and url', () => {
+    const data = {
+      url: 'url_url',
+      href: 'href_url',
+    };
+    expect(getFieldURL(data)).toEqual('url_url');
+  });
+
+  it('handles an object without a specific type and href', () => {
+    const data = {
+      href: 'href_url',
+    };
+    expect(getFieldURL(data)).toEqual('href_url');
+  });
+
+  it('handles an object without a specific type and no id, url, href', () => {
+    const data = {
+      test: 'test_url',
+    };
+    expect(getFieldURL(data)).toEqual({
+      test: 'test_url',
+    });
+  });
+
+  it('handles an array', () => {
+    const data = [
+      {
+        '@type': 'URL',
+        value: 'value_url',
+        url: 'url_url',
+        href: 'href_url',
+      },
+      {
+        '@id': 'id_url',
+        url: 'url_url',
+        href: 'href_url',
+      },
+    ];
+    expect(getFieldURL(data)).toEqual(['value_url', 'id_url']);
+  });
+
+  it('handles a string', () => {
+    const data = '/some/url';
+    expect(getFieldURL(data)).toEqual('/some/url');
+  });
+
+  it('returns the data unchanged for non-object/non-array/non-string inputs', () => {
+    expect(getFieldURL(42)).toEqual(42);
+    expect(getFieldURL(undefined)).toEqual(undefined);
+    expect(getFieldURL(null)).toEqual(null);
+  });
+});
+
 describe('createSlateHeader', () => {
   it('should return the text if it is an array', () => {
     const text = ['some', 'text'];

package/src/hooks.test.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { useFirstVisited } from './hooks';
+
+let observerCallback;
+let observeMock = jest.fn();
+let unobserveMock = jest.fn();
+let disconnectMock = jest.fn();
+window.IntersectionObserver = jest.fn((callback) => {
+  observerCallback = callback;
+  return {
+    observe: observeMock,
+    unobserve: unobserveMock,
+    disconnect: disconnectMock,
+  };
+});
+
+describe('useFirstVisited', () => {
+  it('should observe and unobserve the ref element', () => {
+    const ref = { current: {} };
+    const rootMargin = '10px';
+
+    const TestComponent = () => {
+      const intersected = useFirstVisited(ref, rootMargin);
+      return <div>{intersected ? 'Intersected' : 'Not Intersected'}</div>;
+    };
+
+    const { container, unmount } = render(<TestComponent />);
+
+    // Initial render: Not Intersected
+    expect(container.textContent).toBe('Not Intersected');
+
+    // Simulate the element becoming visible in the viewport
+    observerCallback([{ isIntersecting: true }]);
+
+    // Re-render: Intersected
+    expect(container.textContent).toBe('Intersected');
+
+    // Unmount the component
+    unmount();
+
+    // Observer should be unobserved and disconnected
+    expect(unobserveMock).toHaveBeenCalled();
+    expect(disconnectMock).toHaveBeenCalled();
+  });
+
+  it('should not observe when intersected is true', () => {
+    const ref = { current: {} };
+
+    const TestComponent = () => {
+      const intersected = useFirstVisited(ref);
+      return <div>{intersected ? 'Intersected' : 'Not Intersected'}</div>;
+    };
+
+    const { container } = render(<TestComponent />);
+
+    // Initial render: Not Intersected
+    expect(container.textContent).toBe('Not Intersected');
+
+    // Simulate the element becoming visible in the viewport
+    observerCallback([{ isIntersecting: true }]);
+
+    // Re-render: Intersected
+    expect(container.textContent).toBe('Intersected');
+
+    // Simulate another render
+    // Intersected should stay true and not observe again
+    observerCallback([{ isIntersecting: false }]);
+
+    // Re-render: Intersected
+    expect(container.textContent).toBe('Not Intersected');
+    // expect(observeMock).not.toHaveBeenCalled();
+  });
+});

package/.i18n.babel.config.js

@@ -1 +0,0 @@
-module.exports = require('@plone/volto/babel');