@eeacms/volto-hero-block 7.1.0 → 8.0.0

package/CHANGELOG.md

@@ -4,6 +4,33 @@ 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).
 
+### [8.0.0](https://github.com/eea/volto-hero-block/compare/7.1.0...8.0.0) - 28 July 2025
+
+#### :house: Internal changes
+
+- chore: package.json [alin - [`61b396a`](https://github.com/eea/volto-hero-block/commit/61b396a72309e7be8cab0d77e92d1159d93a4d70)]
+- chore(release): use * for volto-object-widget instead of develop branch [David Ichim - [`075da00`](https://github.com/eea/volto-hero-block/commit/075da00049b8afc17e200369e544a11d37497d51)]
+- chore: bump major version [Nilesh - [`df4edc7`](https://github.com/eea/volto-hero-block/commit/df4edc70703c74ae89dfcef6dfed28cb63835e02)]
+- style: Automated code fix [eea-jenkins - [`7de43a1`](https://github.com/eea/volto-hero-block/commit/7de43a1730c18530d67cee67b573835eb5457dfe)]
+- style: Automated code fix [eea-jenkins - [`34d6a07`](https://github.com/eea/volto-hero-block/commit/34d6a07ad2d2ef83ef2a4c8c12e5343ca34ac810)]
+
+#### :hammer_and_wrench: Others
+
+- rafactor: do not preload the image as the LCP improvement is negligible [nileshgulia1 - [`dd49a13`](https://github.com/eea/volto-hero-block/commit/dd49a13ddb538d18278631eb46134926e384963d)]
+- revert to background image with image preload [vladcalin-edw - [`34a9533`](https://github.com/eea/volto-hero-block/commit/34a953327e9778c4a34c8c1b587cfe179b0f05ff)]
+- passing tests [vladcalin-edw - [`840ad7b`](https://github.com/eea/volto-hero-block/commit/840ad7b05395c913d712bb90eb64cc3e129f8646)]
+- removed console [vladcalin-edw - [`b47d199`](https://github.com/eea/volto-hero-block/commit/b47d1994fce50a5715580c117775e365ac9ab16c)]
+- fix pipeline and removed alt [vladcalin-edw - [`2183529`](https://github.com/eea/volto-hero-block/commit/218352982b9d2280073ae4b291efb6c843a57ae8)]
+- fix pipeline [vladcalin-edw - [`6be0b71`](https://github.com/eea/volto-hero-block/commit/6be0b71d339c0ae8960b704faa10a9779c3705b0)]
+- conditional image and using Image from core [vladcalin-edw - [`9000d76`](https://github.com/eea/volto-hero-block/commit/9000d7653bc515ec20c1ba96ed78a975a1cd4990)]
+- cleanup [vladcalin-edw - [`167c2b7`](https://github.com/eea/volto-hero-block/commit/167c2b7775016a8247671319f41d654a5fe7d692)]
+- modified Makefile and pipeline pass [vladcalin-edw - [`b7f6d1d`](https://github.com/eea/volto-hero-block/commit/b7f6d1db006d70c45c1bfb00b906f416d8b48f1c)]
+- removed preload, added Image from core, lazy to eager [vladcalin-edw - [`39c4fd1`](https://github.com/eea/volto-hero-block/commit/39c4fd1c120130d65724916ed9e1419c9764d881)]
+- updated tests [vladcalin-edw - [`0a9f94d`](https://github.com/eea/volto-hero-block/commit/0a9f94da3c9089ddd7d3b8ebc60eaf54500b43e1)]
+- passing pipeline [vladcalin-edw - [`3cf0b98`](https://github.com/eea/volto-hero-block/commit/3cf0b988beadc1c7238bceb62cb4ae1328e9eb92)]
+- small fixes [vladcalin-edw - [`e45156f`](https://github.com/eea/volto-hero-block/commit/e45156f7592690b9f06113b799c87cd6d49f6316)]
+- switched to img [vladcalin-edw - [`51e9362`](https://github.com/eea/volto-hero-block/commit/51e9362d8cb04894be032fd602df270dcc2c441f)]
+- background image preload [vladcalin-edw - [`f5b2e20`](https://github.com/eea/volto-hero-block/commit/f5b2e205ae93d4d51b73fd2c6a05659184150f39)]
 ### [7.1.0](https://github.com/eea/volto-hero-block/compare/7.0.1...7.1.0) - 28 June 2024
 
 #### :bug: Bug Fixes

package/package.json

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

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

@@ -15,8 +15,7 @@ import {
   UniversalLink,
 } from '@plone/volto/components';
 import { BodyClass } from '@plone/volto/helpers';
-
-import { getFieldURL } from '@eeacms/volto-hero-block/helpers';
+import { getFieldURL } from '@plone/volto/helpers/Url/Url';
 import { HeroBlockSchema } from './schema';
 import Copyright from './Copyright';
 import Hero from './Hero';
@@ -117,7 +116,7 @@ export default function Edit(props) {
               allowedBlocks={'slate'}
               selectedBlock={selectedBlock}
               title={data.placeholder}
-              onSelectBlock={(s, e) => {
+              onSelectBlock={(s) => {
                 setSelectedBlock(s);
               }}
               onChangeFormData={(newFormData) => {

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

@@ -1,21 +1,30 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { Provider } from 'react-redux';
+import { IntlProvider } from 'react-intl';
 import configureStore from 'redux-mock-store';
 import Edit from './Edit';
 import config from '@plone/volto/registry';
 import '@testing-library/jest-dom/extend-expect';
 
+// Mock uuid to avoid node:crypto import issues
+jest.mock('uuid', () => ({
+  v4: () => 'mock-uuid-' + Math.random().toString(36).substr(2, 9),
+}));
+
 const mockStore = configureStore([]);
 const observe = jest.fn();
 const unobserve = jest.fn();
+const disconnect = jest.fn();
 jest.mock('@plone/volto/components', () => {
   return {
     __esModule: true,
     BlocksForm: ({ placeholder, children, onChange, onFocus }) => (
       <div id="test">
         <div>{placeholder}</div>
-        {children}
+        {typeof children === 'function'
+          ? children({}, <div>Mock Edit Block</div>, {})
+          : children}
       </div>
     ),
     SidebarPortal: ({ children }) => <div>{children}</div>,
@@ -24,6 +33,15 @@ jest.mock('@plone/volto/components', () => {
     RenderBlocks: () => <div></div>,
   };
 });
+
+jest.mock(
+  '@plone/volto/components/manage/Blocks/Block/EditBlockWrapper',
+  () => {
+    return ({ children }) => (
+      <div className="edit-block-wrapper">{children}</div>
+    );
+  },
+);
 jest.mock('react-router-dom', () => ({
   useLocation: jest.fn().mockReturnValue({
     pathname: '/test-jest',
@@ -34,9 +52,10 @@ jest.mock('react-router-dom', () => ({
   }),
 }));
 
-window.IntersectionObserver = jest.fn((callback) => ({
+window.IntersectionObserver = jest.fn(() => ({
   observe,
   unobserve,
+  disconnect,
 }));
 
 config.blocks = {
@@ -45,6 +64,7 @@ config.blocks = {
       copyrightPrefix: 'Test Prefix',
       schema: {
         title: 'Hero',
+        required: [],
       },
     },
   },
@@ -53,6 +73,7 @@ config.settings = {
   slate: {
     textblockExtensions: [],
   },
+  themeColors: [],
 };
 
 describe('Edit component', () => {
@@ -67,9 +88,11 @@ describe('Edit component', () => {
 
   it('renders without crashing', () => {
     const { container } = render(
-      <Provider store={store}>
-        <Edit onChangeBlock={() => {}} onSelectBlock={() => {}} />
-      </Provider>,
+      <IntlProvider locale="en" messages={{}}>
+        <Provider store={store}>
+          <Edit onChangeBlock={() => {}} onSelectBlock={() => {}} />
+        </Provider>
+      </IntlProvider>,
     );
     expect(container).toBeTruthy();
   });
@@ -89,9 +112,11 @@ describe('Edit component', () => {
     };
 
     const { container } = render(
-      <Provider store={store}>
-        <Edit data={data} onChangeBlock={() => {}} />
-      </Provider>,
+      <IntlProvider locale="en" messages={{}}>
+        <Provider store={store}>
+          <Edit data={data} onChangeBlock={() => {}} />
+        </Provider>
+      </IntlProvider>,
     );
 
     expect(container.querySelector('#test')).toBeInTheDocument();
@@ -103,15 +128,18 @@ describe('Edit component', () => {
         hero: {
           schema: () => ({
             title: 'Hero',
+            required: [],
           }),
         },
       },
     };
     const onSelectBlock = jest.fn();
     render(
-      <Provider store={store}>
-        <Edit onSelectBlock={onSelectBlock} onChangeBlock={() => {}} />
-      </Provider>,
+      <IntlProvider locale="en" messages={{}}>
+        <Provider store={store}>
+          <Edit onSelectBlock={onSelectBlock} onChangeBlock={() => {}} />
+        </Provider>
+      </IntlProvider>,
     );
   });
 });

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

@@ -1,12 +1,11 @@
-import React from 'react';
+import React, { useMemo, useRef } from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import { isInternalURL } from '@plone/volto/helpers/Url/Url';
-import { isImageGif, getFieldURL } from '@eeacms/volto-hero-block/helpers';
+import { getImageScaleParams } from '@eeacms/volto-object-widget/helpers';
 import { useFirstVisited } from '@eeacms/volto-hero-block/hooks';
 
 Hero.propTypes = {
-  image: PropTypes.string,
+  image: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
   fullWidth: PropTypes.bool,
   fullHeight: PropTypes.bool,
   alignContent: PropTypes.string,
@@ -18,46 +17,48 @@ Hero.propTypes = {
   textVariant: PropTypes.string,
 };
 
-function Hero({
-  overlay = true,
-  fullWidth = true,
-  fullHeight = true,
-  children,
-  spaced = false,
-  inverted = true,
-  styles,
-  height,
-  ...props
-}) {
-  const image = getFieldURL(props.image);
-  const isExternal = !isInternalURL(image);
+function Hero(props) {
+  const {
+    image,
+    fullWidth = false,
+    fullHeight = false,
+    height,
+    styles,
+    overlay = true,
+    children,
+    spaced = false,
+    inverted = false,
+  } = props;
+
+  const scaledImage = useMemo(
+    () => (image ? getImageScaleParams(image, 'huge') : null),
+    [image],
+  );
   const { alignContent = 'center', backgroundVariant = 'primary' } =
     styles || {};
-  const bgImgRef = React.useRef();
+  const bgImgRef = useRef();
   const onScreen = useFirstVisited(bgImgRef);
-  const containerCssStyles = React.useMemo(
+  const containerCssStyles = useMemo(
     () => ({
       ...(height && !fullHeight ? { height } : {}),
     }),
     [height, fullHeight],
   );
-
-  const backgroundImageStyle =
-    onScreen && image
-      ? {
-          backgroundImage: isExternal
-            ? `url(${image})`
-            : isImageGif(image)
-            ? `url(${image}/@@images/image)`
-            : `url(${image}/@@images/image/huge)`,
-        }
-      : {};
+  const backgroundImageStyle = useMemo(
+    () =>
+      onScreen && scaledImage
+        ? {
+            backgroundImage: `url(${scaledImage.download})`,
+          }
+        : {},
+    [onScreen, scaledImage],
+  );
 
   return (
     <div
       className={cx(
         'eea hero-block',
-        !image &&
+        !scaledImage &&
           backgroundVariant &&
           !fullWidth &&
           `color-bg-${backgroundVariant}`,
@@ -71,7 +72,7 @@ function Hero({
       <div
         className={cx(
           'hero-block-image-wrapper',
-          !image &&
+          !scaledImage &&
             backgroundVariant &&
             fullWidth &&
             `color-bg-${backgroundVariant}`,
@@ -86,7 +87,7 @@ function Hero({
           ref={bgImgRef}
           style={backgroundImageStyle}
         />
-        {image && overlay && (
+        {scaledImage && overlay && (
           <div className="hero-block-image-overlay dark-overlay-4"></div>
         )}
       </div>

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

@@ -103,7 +103,7 @@ describe('Hero block', () => {
     const { container } = render(
       <Provider store={store}>
         <Hero
-          image={{ '@type': 'URL', url: 'url_url', href: 'href_url' }}
+          image={[{ '@type': 'URL', url: 'url_url', href: 'href_url' }]}
           overlay={true}
           fullWidth={false}
           fullHeight={true}
@@ -122,10 +122,10 @@ describe('Hero block', () => {
       </Provider>,
     );
 
-    expect(container.querySelector('.eea.hero-block')).toBeInTheDocument();
     expect(container.querySelector('.hero-block-image')).toHaveStyle({
       backgroundImage: 'url(url_url)',
     });
+    expect(container.querySelector('.eea.hero-block')).toBeInTheDocument();
   });
 
   it('renders a hero component', () => {
@@ -157,10 +157,10 @@ describe('Hero block', () => {
       </Provider>,
     );
 
-    expect(container.querySelector('.eea.hero-block')).toBeInTheDocument();
     expect(container.querySelector('.hero-block-image')).toHaveStyle({
       backgroundImage: 'url(/foo/bar/@@images/image/huge)',
     });
+    expect(container.querySelector('.eea.hero-block')).toBeInTheDocument();
   });
 
   it('renders a hero component', () => {

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import cx from 'classnames';
 import { Icon } from 'semantic-ui-react';
 import { UniversalLink, RenderBlocks } from '@plone/volto/components';
@@ -6,7 +6,8 @@ import { BodyClass } from '@plone/volto/helpers';
 import { useLocation } from 'react-router-dom';
 import Hero from './Hero';
 import Copyright from './Copyright';
-import { serializeText, getFieldURL } from '@eeacms/volto-hero-block/helpers';
+import { serializeText } from '@eeacms/volto-hero-block/helpers';
+import { getFieldURL } from '@plone/volto/helpers/Url/Url';
 import config from '@plone/volto/registry';
 
 const Metadata = ({ buttonLabel, inverted, styles, ...props }) => {
@@ -29,6 +30,7 @@ const View = (props) => {
   const location = useLocation();
   const { data = {} } = props;
   const { text, copyright, copyrightIcon, copyrightPosition } = data;
+  const serializedText = useMemo(() => serializeText(text), [text]);
 
   const metadata = props.metadata || props.properties;
   const copyrightPrefix = config.blocks.blocksConfig.hero.copyrightPrefix || '';
@@ -44,7 +46,7 @@ const View = (props) => {
               content={data?.data || {}}
             />
           ) : (
-            serializeText(text)
+            serializedText
           )}
         </Hero.Text>
         <Hero.Meta {...data}>

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

@@ -5,9 +5,11 @@ import View from './View';
 
 const observe = jest.fn();
 const unobserve = jest.fn();
-window.IntersectionObserver = jest.fn((callback) => ({
+const disconnect = jest.fn();
+window.IntersectionObserver = jest.fn(() => ({
   observe,
   unobserve,
+  disconnect,
 }));
 jest.mock('@plone/volto/components', () => {
   return {
@@ -46,7 +48,7 @@ describe('View Component', () => {
       text: 'Hello, World!',
       copyright: 'Copyright 2023',
       copyrightIcon: 'copyright-icon-class',
-      copyrightPosition: 'bottom',
+      copyrightPosition: 'left',
     };
     render(<View data={data} />);
   });

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

@@ -13,7 +13,7 @@ const ALIGN_INFO_MAP = {
   '': [clearSVG, 'None'],
 };
 
-export const HeroBlockSchema = ({ data }) => {
+export const HeroBlockSchema = ({ data = {} }) => {
   return {
     title: 'Hero',
     fieldsets: [
@@ -43,27 +43,27 @@ export const HeroBlockSchema = ({ data }) => {
       fullWidth: {
         title: 'Full width',
         type: 'boolean',
-        defaultValue: true,
+        default: true,
       },
       fullHeight: {
         title: 'Full height',
         type: 'boolean',
-        defaultValue: true,
+        default: true,
       },
       quoted: {
         title: 'Quoted',
         type: 'boolean',
-        defaultValue: false,
+        default: false,
       },
       spaced: {
         title: 'Spaced',
         type: 'boolean',
-        defaultValue: false,
+        default: false,
       },
       inverted: {
         title: 'Inverted',
         type: 'boolean',
-        defaultValue: true,
+        default: true,
       },
       buttonLabel: {
         title: 'Button label',
@@ -76,11 +76,12 @@ export const HeroBlockSchema = ({ data }) => {
       overlay: {
         title: 'Image darken overlay',
         type: 'boolean',
-        defaultValue: true,
+        default: true,
       },
       image: {
         title: 'Image',
         widget: 'attachedimage',
+        selectedItemAttrs: ['image_field', 'image_scales'],
       },
       copyright: {
         title: 'Text',

package/src/components/Blocks/Hero/schema.test.js

@@ -0,0 +1,66 @@
+import { stylingSchema, HeroBlockSchema } from './schema';
+import config from '@plone/volto/registry';
+
+jest.mock('@plone/volto/helpers', () => ({
+  addStyling: jest.fn((schema) => schema),
+}));
+
+export const EMPTY_STYLES_SCHEMA = {
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: [],
+    },
+  ],
+  properties: {
+    styles: {},
+  },
+  required: [],
+};
+
+describe('stylingSchema', () => {
+  it('returns the enhanced stylesSchema', () => {
+    const schema = EMPTY_STYLES_SCHEMA;
+    expect(stylingSchema(schema)).not.toBe({});
+  });
+  it('checks if the stylesSchema has desired fields', () => {
+    const schema = EMPTY_STYLES_SCHEMA;
+    const stylesSchema = stylingSchema(schema);
+    expect(
+      stylesSchema.properties.styles.schema.fieldsets[0].fields,
+    ).toHaveLength(7);
+  });
+
+  it('checks if the backgroundVariant styles has value', () => {
+    config.settings.themeColors = [{ value: 'primary', title: 'Primary' }];
+    const schema = EMPTY_STYLES_SCHEMA;
+    const stylesSchema = stylingSchema(schema);
+    expect(
+      stylesSchema.properties.styles.schema.properties.backgroundVariant.colors,
+    ).toHaveLength(1);
+  });
+  it('checks if the Text styles has value', () => {
+    config.settings.themeColors = [{ value: 'primary', title: 'Primary' }];
+    const schema = EMPTY_STYLES_SCHEMA;
+    const stylesSchema = stylingSchema(schema);
+    expect(
+      stylesSchema.properties.styles.schema.properties.textVariant.colors,
+    ).toHaveLength(1);
+  });
+  it('checks if the button styles has value', () => {
+    config.settings.themeColors = [{ value: 'primary', title: 'Primary' }];
+    const schema = EMPTY_STYLES_SCHEMA;
+    const stylesSchema = stylingSchema(schema);
+    expect(
+      stylesSchema.properties.styles.schema.properties.buttonVariant.colors,
+    ).toHaveLength(1);
+  });
+});
+
+describe('HeroBlockSchema', () => {
+  it('checks if the hero block schema is valid', () => {
+    const schema = HeroBlockSchema({ data: {} });
+    expect(schema.fieldsets).toHaveLength(2);
+  });
+});

package/src/helpers.js

@@ -1,23 +1,4 @@
 import { serializeNodes } from '@plone/volto-slate/editor/render';
-import isArray from 'lodash/isArray';
-import isObject from 'lodash/isObject';
-import isString from 'lodash/isString';
-import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
-
-export const getFieldURL = (data) => {
-  let url = data;
-  const _isObject = data && isObject(data) && !isArray(data);
-  if (_isObject && data['@type'] === 'URL') {
-    url = data['value'] ?? data['url'] ?? data['href'] ?? data;
-  } else if (_isObject) {
-    url = data['@id'] ?? data['url'] ?? data['href'] ?? data;
-  }
-  if (isArray(data)) {
-    url = data.map((item) => getFieldURL(item));
-  }
-  if (isString(url) && isInternalURL(url)) return flattenToAppURL(url);
-  return url;
-};
 
 const createEmptyHeader = () => {
   return {
@@ -27,13 +8,9 @@ const createEmptyHeader = () => {
 };
 
 export const createSlateHeader = (text) => {
-  return isArray(text) ? text : [createEmptyHeader()];
+  return Array.isArray(text) ? text : [createEmptyHeader()];
 };
 
 export const serializeText = (text) => {
-  return isArray(text) ? serializeNodes(text) : text;
-};
-
-export const isImageGif = (image) => {
-  return image?.endsWith?.('.gif');
+  return Array.isArray(text) ? serializeNodes(text) : text;
 };

package/src/helpers.test.js

@@ -1,9 +1,4 @@
-import {
-  getFieldURL,
-  createSlateHeader,
-  serializeText,
-  isImageGif,
-} from './helpers';
+import { createSlateHeader, serializeText } from './helpers';
 import { isArray } from 'lodash';
 import { serializeNodes } from '@plone/volto-slate/editor/render';
 
@@ -11,94 +6,6 @@ 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'];
@@ -133,27 +40,3 @@ describe('serializeText', () => {
     expect(serializeNodes).toHaveBeenCalledWith(text);
   });
 });
-
-describe('isImageGif', () => {
-  it('should return true when input is a gif image', () => {
-    const input = 'image.gif';
-    const result = isImageGif(input);
-    expect(result).toBeTruthy();
-  });
-
-  it('should return false when input is not a gif image', () => {
-    const input = 'image.jpg';
-    const result = isImageGif(input);
-    expect(result).toBeFalsy();
-  });
-
-  it('should return false when input is null or undefined', () => {
-    let input;
-    let result = isImageGif(input);
-    expect(result).toBeFalsy();
-
-    input = null;
-    result = isImageGif(input);
-    expect(result).toBeFalsy();
-  });
-});

package/src/hooks.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, act } from '@testing-library/react';
 import { useFirstVisited } from './hooks';
 
 let observerCallback;
@@ -16,6 +16,12 @@ window.IntersectionObserver = jest.fn((callback) => {
 });
 
 describe('useFirstVisited', () => {
+  beforeEach(() => {
+    observeMock.mockClear();
+    unobserveMock.mockClear();
+    disconnectMock.mockClear();
+  });
+
   it('should observe and unobserve the ref element', () => {
     const ref = { current: {} };
     const rootMargin = '10px';
@@ -31,7 +37,9 @@ describe('useFirstVisited', () => {
     expect(container.textContent).toBe('Not Intersected');
 
     // Simulate the element becoming visible in the viewport
-    observerCallback([{ isIntersecting: true }]);
+    act(() => {
+      observerCallback([{ isIntersecting: true }]);
+    });
 
     // Re-render: Intersected
     expect(container.textContent).toBe('Intersected');
@@ -44,7 +52,7 @@ describe('useFirstVisited', () => {
     expect(disconnectMock).toHaveBeenCalled();
   });
 
-  it('should not observe when intersected is true', () => {
+  it('should stay intersected once it becomes true', () => {
     const ref = { current: {} };
 
     const TestComponent = () => {
@@ -58,17 +66,15 @@ describe('useFirstVisited', () => {
     expect(container.textContent).toBe('Not Intersected');
 
     // Simulate the element becoming visible in the viewport
-    observerCallback([{ isIntersecting: true }]);
+    act(() => {
+      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();
+    // Once intersected is true, it should stay true regardless of further callbacks
+    // The hook should not set up a new observer when intersected is already true
+    expect(container.textContent).toBe('Intersected');
   });
 });