gatsby-matrix-theme 53.3.14 → 53.3.15

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [53.3.15](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v53.3.14...v53.3.15) (2025-11-06)
+
+
+### Bug Fixes
+
+* update sticky banner ([d9b9869](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/d9b9869b7711c84dced4333f7bfd44e2cf36e6cc))
+
 ## [53.3.14](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v53.3.13...v53.3.14) (2025-11-05)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "53.3.14",
+  "version": "53.3.15",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -25,7 +25,7 @@
   "dependencies": {
     "@react-icons/all-files": "^4.1.0",
     "gatsby": "^5.11.0",
-    "gatsby-core-theme": "44.6.0",
+    "gatsby-core-theme": "44.6.1",
     "gatsby-plugin-sharp": "^5.11.0",
     "gatsby-transformer-sharp": "^5.11.0",
     "gatsby-plugin-sitemap": "^6.13.1",

package/src/components/molecules/stickyOperatorBanner/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { imagePrettyUrl } from '~helpers/getters';
+import { imagePrettyUrl, removeDomain } from '~helpers/getters';
 import LazyImage from '~hooks/lazy-image';
 import PrettyLink from '~atoms/pretty-link';
 import styles from './stickyOperatorBanner.module.scss';
@@ -12,13 +12,13 @@ const StickyOperatorBanner = ({ data, template }) => {
     return array[randomIndex];
   };
 
-  const gif = data?.extra_fields?.gif;
   const toplist = data?.modules?.find((module) => module.name === 'top_list');
   const tracker = toplist?.items?.[0]?.tracker || 'main';
   const randomItem = getRandomItem(toplist?.items?.[0]?.items);
+  const gifUrl = randomItem?.extra_fields?.gif?.url;
+  if (!gifUrl || !randomItem) return null;
 
-  if (!gif || !randomItem) return null; 
-
+  const filename = removeDomain(gifUrl);
   return (
     <PrettyLink
       operator={randomItem}
@@ -26,7 +26,7 @@ const StickyOperatorBanner = ({ data, template }) => {
       template={template}
       className={styles.container}
     >
-      <LazyImage src={imagePrettyUrl(gif, 'auto', 'auto')} alt="Sticky Operator Banner" />
+      <LazyImage src={imagePrettyUrl(filename, 'auto', 'auto')} alt="Sticky Operator Banner" />
     </PrettyLink>
   );
 };
@@ -42,7 +42,7 @@ StickyOperatorBanner.propTypes = {
         items: PropTypes.arrayOf(
           PropTypes.shape({
             tracker: PropTypes.string,
-            
+
             items: PropTypes.shape({}),
           })
         ),

package/src/components/molecules/stickyOperatorBanner/stickyOperatorBanner.test.js

@@ -2,13 +2,17 @@
 /* eslint-disable react/destructuring-assignment */
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import StickyOperatorBanner from ".";
+import StickyOperatorBanner from '.';
 
 // Mock dependencies
 jest.mock('~helpers/getters', () => ({
   imagePrettyUrl: jest.fn((url) => `pretty/${url}`),
+  removeDomain: jest.fn((url) => url), // MOCK removeDomain
 }));
-jest.mock('~hooks/lazy-image', () => (props) => <img data-testid="lazy-image" {...props} alt='Test' />);
+
+jest.mock('~hooks/lazy-image', () => (props) => (
+  <img data-testid="lazy-image" {...props} alt="Test" />
+));
 jest.mock('~atoms/pretty-link', () => (props) => (
   <a data-testid="pretty-link" {...props}>
     {props.children}
@@ -17,7 +21,6 @@ jest.mock('~atoms/pretty-link', () => (props) => (
 
 describe('StickyOperatorBanner', () => {
   const mockData = {
-    extra_fields: { gif: 'banner.gif' },
     modules: [
       {
         name: 'top_list',
@@ -25,8 +28,8 @@ describe('StickyOperatorBanner', () => {
           {
             tracker: 'test-tracker',
             items: [
-              { id: 1, name: 'Operator A' },
-              { id: 2, name: 'Operator B' },
+              { id: 1, name: 'Operator A', extra_fields: { gif: { url: 'banner.gif' } } },
+              { id: 2, name: 'Operator B', extra_fields: { gif: { url: 'banner2.gif' } } },
             ],
           },
         ],
@@ -34,6 +37,15 @@ describe('StickyOperatorBanner', () => {
     ],
   };
 
+  // Always pick first item for deterministic test
+  beforeAll(() => {
+    jest.spyOn(Math, 'random').mockReturnValue(0);
+  });
+
+  afterAll(() => {
+    jest.spyOn(Math, 'random').mockRestore();
+  });
+
   it('renders banner with LazyImage and PrettyLink', () => {
     render(<StickyOperatorBanner data={mockData} template="casino" />);
 
@@ -41,31 +53,37 @@ describe('StickyOperatorBanner', () => {
     const link = screen.getByTestId('pretty-link');
 
     expect(image).toBeInTheDocument();
-    expect(image).toHaveAttribute('src', 'pretty/banner.gif');
+    expect(image).toHaveAttribute('src', 'pretty/banner.gif'); // now deterministic
     expect(link).toBeInTheDocument();
   });
 
-  it('renders null if gif is missing', () => {
-    const dataWithoutGif = { ...mockData, extra_fields: {} };
+  it('renders null if gif is missing in randomItem', () => {
+    const dataWithoutGif = {
+      modules: [
+        {
+          name: 'top_list',
+          items: [{ items: [{ id: 1, name: 'Operator A', extra_fields: {} }] }],
+        },
+      ],
+    };
     const { container } = render(<StickyOperatorBanner data={dataWithoutGif} />);
     expect(container.firstChild).toBeNull();
   });
 
   it('renders null if toplist items missing', () => {
-    const dataWithoutItems = { ...mockData, modules: [] };
+    const dataWithoutItems = { modules: [] };
     const { container } = render(<StickyOperatorBanner data={dataWithoutItems} />);
     expect(container.firstChild).toBeNull();
   });
 
   it('uses default tracker if not provided', () => {
     const dataNoTracker = {
-      extra_fields: { gif: 'banner.gif' },
       modules: [
         {
           name: 'top_list',
           items: [
             {
-              items: [{ id: 1, name: 'Operator X' }],
+              items: [{ id: 1, name: 'Operator X', extra_fields: { gif: { url: 'banner.gif' } } }],
             },
           ],
         },

package/storybook/public/project.json

@@ -1 +1 @@
-{"generatedAt":1762338028556,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"metaFramework":{"name":"Gatsby","packageName":"gatsby","version":"5.13.6"},"monorepo":"Workspaces","packageManager":{"type":"yarn","version":"1.22.19"},"storybookVersion":"6.5.16","language":"javascript","storybookPackages":{"@storybook/addon-actions":{"version":"6.5.16"},"@storybook/builder-webpack5":{"version":"6.5.16"},"@storybook/manager-webpack5":{"version":"6.5.16"},"@storybook/react":{"version":"6.5.16"}},"framework":{"name":"react"},"addons":{"@storybook/addon-links":{"version":"6.5.16"},"@storybook/addon-essentials":{"version":"6.5.16"}}}
+{"generatedAt":1762359862613,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"metaFramework":{"name":"Gatsby","packageName":"gatsby","version":"5.13.6"},"monorepo":"Workspaces","packageManager":{"type":"yarn","version":"1.22.19"},"storybookVersion":"6.5.16","language":"javascript","storybookPackages":{"@storybook/addon-actions":{"version":"6.5.16"},"@storybook/builder-webpack5":{"version":"6.5.16"},"@storybook/manager-webpack5":{"version":"6.5.16"},"@storybook/react":{"version":"6.5.16"}},"framework":{"name":"react"},"addons":{"@storybook/addon-links":{"version":"6.5.16"},"@storybook/addon-essentials":{"version":"6.5.16"}}}