gatsby-matrix-theme 10.0.13 → 11.0.0

package/CHANGELOG.md

@@ -1,3 +1,73 @@
+# [11.0.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v10.0.14...v11.0.0) (2023-01-20)
+
+
+### Bug Fixes
+
+* add max width for slots ([0d6f830](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0d6f830c3abdabf1e657c3cc491034533390857e))
+* add padding to slotheader ([8b28ce6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8b28ce6e18be246c8db471afe4efb903a12b308a))
+* add template one for slot/gaming ([e849f5e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e849f5ea685aa3d993a082256d6f9fd222d5e69f))
+* added translations ([9f2c5e7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9f2c5e7d020dc54da27122ee9e726f379a6ce305))
+* change svg and its size ([c134993](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c134993a0ebbb3203c87483fcae13023f7c1b85b))
+* clean up header section ([6cce914](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6cce914c78bdeb3a7bbdf30bfdd06a8ac65ca87d))
+* remove typo ([10f94eb](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/10f94eb0db5eaab58bffaab6d4a2867f7858b640))
+* show in the toplist just operator that has active status ([4d677bc](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/4d677bc038cae31279822a6edfdfed309cc99d84))
+* storybook folder structure names ([9a251dd](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9a251dd913bf90e4737289fa4e12b6ad0ad61cab))
+* storybook structure and default colour ([96cb803](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/96cb803654daed0e413885e981c2d6e6ff806d0e))
+* test coverage ([9859301](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/98593019552600fc990c645e291f41aa92104800))
+* typo issue on header module ([ebfe10b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ebfe10b24e5db55deaf7da0651214fa3be3f4704))
+* update changes and add story book and tests ([c8e522e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c8e522e559ccabe2af97643da96c53a87a78327a))
+* update header component scss ([095eba0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/095eba06dab2f22b8a1a1902a3e576c89484b466))
+* update name storybook ([5093cd5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5093cd5cd1e4f5b3089146a86a8a9d0d98e8da21))
+* update tests, removed console.logs and updated styling for ratings ([44aaa62](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/44aaa62425542896bc097a58725912c4c85059b1))
+* updated project based on the requirements ([089dbad](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/089dbad6f50409d3e67a2dae18f70b8a99332ccf))
+
+
+### Code Refactoring
+
+* add css vars for tem two bg colour ([4053130](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/4053130a999d1a5205a81dcc63c9a9e3730a7465))
+* add temp featured image ([7eaa990](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7eaa990e3bbebf6d86fb447242a670e2f645ae6a))
+* add template based classes ([2737131](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/27371317510577af1cb85bcf7cdde79dda3a1c19))
+* add two templates for default headers ([ed070cd](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ed070cd367bcf03fb43960addc4cd04becf6daca))
+* change dummy link ([a96fca2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a96fca2578ea4583abbd2ca4ba70e5f16b6a48f0))
+* change of scss ordering ([8794dbf](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8794dbf70865170a43f5a3d2138c25f32524571b))
+* changes to field types ([eabc3e8](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/eabc3e893cb5fdee4d7987363d9869478753f8ff))
+* correction to page type for default pages ([cd8aa25](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/cd8aa25141edfc9200057fa3b3bec9167e12c9b1))
+* corrections to code review and remove images ([e4d3137](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e4d31370853cbdd2cb1bb0dd3977de2bb64ec934))
+* fix for undefined classnames ([60306e9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/60306e9631deceb3f061aafbfef4155e13ba2d98))
+* fix mobile styles ([907f341](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/907f3419a3744a98cbd46c057e93a77699537e30))
+* fix storybook properties and tests ([79f9858](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/79f9858581b60f70e24d72e5b65233f7bf146517))
+* fix template one minor css issues ([5829ca2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5829ca2ab33899f0c4f9c03f7b14dc0ce60f63cb))
+* image dimensions ([f8cc38e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f8cc38e2f64b9fd6169fb04db20a6d637386b038))
+* restructure header component ([7747c9d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7747c9da6e0b4d5f791ef191cb4bdf6785ada743))
+* separate css ([7451e98](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7451e985b926e2c1d1f7a39acead52e7e3eeb019))
+* storybook images ([fff47ea](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/fff47ea3a6594143cbed2a6699f93917610285af))
+* storybook layout change ([4add525](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/4add525d95ae847dc0c995b0368518702f29e14f))
+
+
+* Merge branch 'tm-3113-toplist' into 'master' ([8238beb](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8238beba9fd95d9adbc2d1295d1562573c06f239))
+* Merge branch 'tm-3254-game-header' into 'master' ([b4d0d81](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b4d0d818fd80df7f95b0885917f5b5d9d2afadc4))
+* Merge branch 'master' into 'tm-3254-game-header' ([b2f96c6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b2f96c666e5288f63a7f1c736da379bd123d7a4a))
+* Merge branch 'tm-3252-default-headers' into 'master' ([9c313bd](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9c313bd53a7f34173e555712833444d3646ccb4e))
+* Merge branch 'master' into tm-3252-default-headers ([d9ea393](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d9ea393cd598a2fe0a79d29b0b95341e6bc9f828))
+* Merge branch 'master' into tm-3252-default-headers ([2c2960a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/2c2960a1f3791b4742b8ac6e71c78ca8d27d60d3))
+* Merge branch 'master' into tm-3252-default-headers ([30bdf57](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/30bdf577ac44e4229561297d54e153832c2ae0f2))
+* Merge branch 'master' into tm-3252-default-headers ([9aebd17](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9aebd1771db338a99675ef3491e1577b145d8896))
+* Merge branch 'master' into tm-3252-default-headers ([21582c7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/21582c7cbcfe08335b1ff45fd55265c1b5585cc5))
+
+
+### Tests
+
+* fix test ([5076a8c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5076a8c42acfd194701d7e176b536f24312b4e1d))
+* fix test scripts ([32ffbee](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/32ffbee13e6e421d9b7a9d8e1465d03a14c0f990))
+
+## [10.0.14](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v10.0.13...v10.0.14) (2023-01-17)
+
+
+### Bug Fixes
+
+* form ([fbbda88](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/fbbda8881a2ce94692807cef5c576199f60a5cf5))
+* operator cards table ([f7f9055](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f7f9055751386b0bcf91e6d79cf0268d09e433e9))
+
 ## [10.0.13](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v10.0.12...v10.0.13) (2023-01-17)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "10.0.13",
+  "version": "11.0.0",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",

package/src/components/atoms/cards/operators-table/index.js

@@ -13,16 +13,19 @@ const CasinosTable = ({ module, page }) => {
   const { items } = module || {};
 
   const oneLiner = ({ one_liner }) => {
-    const [firstLine, secondLine] = one_liner.split('+');
-    return (
-      <>
-        <span className={styles.firstLine}>
-          {firstLine}
-          <br />
-        </span>
-        {secondLine && <span className={styles.secondLine}>{`+${secondLine}`}</span>}
-      </>
-    );
+    if (one_liner) {
+      const [firstLine, secondLine] = one_liner.split('+');
+      return (
+        <>
+          <span className={styles.firstLine}>
+            {firstLine}
+            <br />
+          </span>
+          {secondLine && <span className={styles.secondLine}>{`+${secondLine}`}</span>}
+        </>
+      );
+    }
+    return <></>;
   };
 
   return (

package/src/components/atoms/ratings/index.js

@@ -0,0 +1,54 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+
+import { FaStar } from '@react-icons/all-files/fa/FaStar';
+import { translate } from 'gatsby-core-theme/src/helpers/getters';
+import { Context } from 'gatsby-core-theme/src/context/MainProvider';
+import styles from './ratings.module.scss';
+
+const Ratings = ({ averageRating, ratings, relation }) => {
+  const { translations } = useContext(Context) || {};
+  const votalityValue = relation?.volatility ? relation?.volatility : 0;
+  const rangeText = { 0: 'Low', 1: 'Medium', 2: 'High' }[votalityValue] || '0%';
+
+  return (
+    <ul className={styles.ratings}>
+      <li key="Overall">
+        <p>{translate(translations, 'overall', 'Overall')}</p>
+        <div>
+          <FaStar />
+          <p data-testid="overall-rating">{averageRating}</p>
+          <p>/5</p>
+        </div>
+      </li>
+      {ratings?.map((rating) => (
+        <li key={rating[rating?.field_name]}>
+          <p>{rating?.field_label}</p>
+          {rating?.field_name === 'rtp' ? (
+            <p>{relation[rating?.field_name]}%</p>
+          ) : (
+            <div>
+              <FaStar />
+              <p>{relation[rating?.field_name]}</p>
+              <p>/5</p>
+            </div>
+          )}
+        </li>
+      ))}
+      <li>
+        <p>{translate(translations, 'volatility', 'Volatility')}</p>
+        <div className={styles.bar}>{rangeText}</div>
+      </li>
+    </ul>
+  );
+};
+
+Ratings.propTypes = {
+  averageRating: PropTypes.string,
+  // eslint-disable-next-line react/forbid-prop-types
+  ratings: PropTypes.array,
+  relation: PropTypes.shape({
+    volatility: PropTypes.string,
+  }),
+};
+export default Ratings;

package/src/components/atoms/ratings/ratings.module.scss

@@ -0,0 +1,59 @@
+.ratings {
+  display: flex;
+  margin: 0rem;
+  height: 100%;
+  gap: 0.8rem;
+  overflow-x: scroll;
+  @include min(tablet) {
+    overflow: hidden;
+    gap: 1.6rem;
+    > :first-child {
+      display: none;
+    }
+  }
+  > li,
+  > div {
+    margin-bottom: inherit;
+    width: 100%;
+    background: #fbfbfb;
+    padding: 16px 8px;
+    min-width: 12.2rem;
+    box-shadow: 4px 4px 30px rgb(0 0 0 / 3%);
+    font-weight: bold;
+    font-size: 1.4rem;
+    border-radius: 8px;
+    border: 1px solid #e9e9e9;
+    @include flex-direction(column);
+    @include flex-align(center, center);
+    color: #1c1a28;
+    > p {
+      font-weight: 700;
+      font-size: 14px;
+      line-height: 22px;
+      color: #1c1a28;
+      margin-bottom: 8px;
+    }
+    > div {
+      display: flex;
+      align-items: center;
+      > svg {
+        color: #ffdb20;
+        height: 1.8rem;
+        width: 1.8rem;
+        margin-right: 6px;
+      }
+      > p {
+        color: #1c1a28;
+        font-weight: 800;
+        font-size: 18px;
+        line-height: 28px;
+      }
+      @include max(mobile) {
+        > :last-child {
+          font-size: 1.6rem;
+          line-height: 2.7rem;
+        }
+      }
+    }
+  }
+}

package/src/components/atoms/ratings/ratings.stories.js

@@ -0,0 +1,25 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import Ratings from '.';
+
+export default {
+  title: 'Matrix-Theme/Atoms/Ratings',
+  component: Ratings,
+};
+
+const Template = (args) => <Ratings {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  averageRating: 3,
+  ratings: [
+    { field_name: 'first_rating', field_label: 'Graphics' },
+    { field_name: 'third_rating', field_label: 'Bonuses' },
+    { field_name: 'rtp', field_label: 'RTP' },
+  ],
+  relation: {
+    first_rating: 2,
+    third_rating: 3,
+    rtp: 50,
+  },
+};

package/src/components/atoms/ratings/ratings.test.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+import getPageData from '../../../../test/factories/pages/slot';
+import Ratings from '.';
+
+describe('summary component', () => {
+  test('render', () => {
+    const { container } = render(<Ratings page={getPageData()} />);
+    expect(container).toBeTruthy();
+
+    // Description
+    expect(container.querySelectorAll('ul.ratings')).toHaveLength(1);
+  });
+
+  test('renders the correct ratings', () => {
+    const averageRating = 4.5;
+    const ratings = [
+      { field_label: 'Graphics', field_name: 'graphics', value: 4.2 },
+      { field_label: 'Sound', field_name: 'sound', value: 5 },
+    ];
+    const relation = { graphics: 4.2, sound: 5 };
+    const { getByText, getByTestId } = render(
+      <Ratings averageRating={averageRating} ratings={ratings} relation={relation} />
+    );
+    const overallRating = getByTestId('overall-rating');
+    const graphicsRating = getByText(`${relation.graphics}`);
+    const soundRating = getByText(`${relation.sound}`);
+    expect(overallRating).toBeInTheDocument();
+    expect(graphicsRating).toBeInTheDocument();
+    expect(soundRating).toBeInTheDocument();
+  });
+});
+
+afterEach(() => {
+  cleanup();
+});

package/src/components/atoms/tooltip/tooltip.test.js

@@ -16,5 +16,9 @@ describe('Tooltip Component', () => {
 
     fireEvent.mouseEnter(screen.getByText('Test Children'));
     await waitFor(() => screen.getByText('test content'));
+
+    fireEvent.mouseLeave(screen.getByText('Test Children'));
+    const isVisible = container.querySelector('.tooltip');
+    expect(isVisible).toBeFalsy();
   });
 });

package/src/components/molecules/header/variants/default/template-one/index.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
+import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
+import Button from 'gatsby-core-theme/src/components/atoms/button';
+import { imagePrettyUrl, getAltText, getExtraField } from 'gatsby-core-theme/src/helpers/getters';
+import styles from './template-one.module.scss';
+
+export default function TemplateOne({ title, description, extraFields, imageObj }) {
+  const link = getExtraField(extraFields, 'link');
+
+  return (
+    <div className={styles.templateOne}>
+      <div className={styles.headerContainer}>
+        <h1>{title}</h1>
+        <div
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{ __html: description }}
+          className={styles.description}
+        />
+        {link && (
+          <Button
+            to={link}
+            primaryColor={false}
+            btnText={link}
+            invertColors
+            gtmClass="default-header-template-one-gtm btn-cta"
+            icon={<FaArrowRight />}
+          />
+        )}
+      </div>
+      {imageObj && (
+        <LazyImage
+          src={imagePrettyUrl(imageObj.filename, imageObj.width, imageObj.height)}
+          alt={getAltText(imageObj, imageObj.title)}
+          width={imageObj.width}
+          height={imageObj.height}
+          loading="eager"
+          className={styles.image}
+        />
+      )}
+    </div>
+  );
+}
+
+TemplateOne.propTypes = {
+  title: PropTypes.string,
+  description: PropTypes.string,
+  imageObj: PropTypes.shape({
+    alt: PropTypes.string,
+    width: PropTypes.string,
+    height: PropTypes.string,
+    filename: PropTypes.string,
+    title: PropTypes.string,
+  }),
+  extraFields: PropTypes.shape({
+    link: PropTypes.string,
+  }),
+};

package/src/components/molecules/header/variants/default/template-one/template-one.module.scss

@@ -0,0 +1,67 @@
+.templateOne {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-direction: column-reverse;
+    gap: 2.4rem;
+    padding: 0 1.6rem;
+    max-width: var(--main-container-max);
+    margin: 0 auto;
+
+    @include min(tablet) {
+        flex-direction: row;
+        gap: 5rem;
+    }
+
+    @include min(desktop) {
+        gap: 15.2rem;
+    }
+}
+
+.image {
+    border-radius: 1.6rem;
+
+    @include min(tablet) {
+        max-width: 50%;
+    }
+
+    @include min(laptop) {
+        min-width: 35.6rem;
+        max-width: 35.6rem;
+    }
+}
+
+.headerContainer {
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    flex-direction: column;
+
+    h1 {
+        font-weight: 700;
+        font-size: 2.8rem;
+        line-height: 3.8rem;
+        text-transform: capitalize;
+        color: #1c1a28;
+        margin: 0 0 2.4rem;
+
+        @include min(tablet) {
+            font-size: 3.2rem;
+            line-height: 4.2rem;
+        }
+    }
+
+    a {
+        display: flex !important;
+        gap: 1.1rem;
+    }
+}
+
+.description {
+    font-weight: 500;
+    font-size: 1.6rem;
+    line-height: 2.7rem;
+    text-align: justify;
+    color: #3e3c47;
+    padding-bottom: 2.4rem;
+}

package/src/components/molecules/header/variants/default/template-one/template-one.stories.js

@@ -0,0 +1,86 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import {
+  Title,
+  Description,
+  Primary,
+  PRIMARY_STORY,
+  ArgsTable,
+} from '@storybook/addon-docs/blocks';
+import MainProvider from '~context/MainProvider';
+import getPageData from '../../../../../../../tests/factories/pages/default.factory';
+import TemplateOne from '.';
+
+const pageData = getPageData();
+pageData.featured_image_object = {
+  alt: null,
+  filename: '1673344017/456x343px.png',
+  height: '343',
+  title: '456x343px',
+  url: 'https://assets-srv.s3.eu-west-1.amazonaws.com/1673344017/456x343px.png',
+  width: '456',
+};
+
+export default {
+  title: 'Matrix-Theme/Layout/Header/Default/Template One',
+  component: TemplateOne,
+  argTypes: {
+    title: {
+      title: 'Title',
+      type: { name: 'string', required: true },
+      defaultValue: pageData.title,
+      description: 'page title',
+    },
+    description: {
+      name: 'Description',
+      type: { name: 'string', required: true },
+      defaultValue: pageData.description,
+      description: 'page description',
+    },
+    extraFields: {
+      name: 'Extra Fields',
+      type: { name: 'object', required: true },
+      defaultValue: pageData?.extra_fields,
+      description: 'page link/CTA',
+    },
+    imageObj: {
+      name: 'Featured image',
+      type: { name: 'object', required: true },
+      defaultValue: pageData?.featured_image_object,
+      description: 'page featured image',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'A Default Header Component - Template two',
+      },
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      ),
+    },
+  },
+};
+
+const Template = (args) => (
+  <MainProvider
+    value={{
+      bannerIsActive: false,
+      cookieAccepted: true,
+      translations: {
+        online_casino: 'Online Casino',
+      },
+    }}
+  >
+    <div>
+      <TemplateOne {...args} />
+    </div>
+  </MainProvider>
+);
+export const Default = Template.bind({});
+Default.args = {};

package/src/components/molecules/header/variants/default/template-one/template-one.test.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+import { getExtraField, imagePrettyUrl } from 'gatsby-core-theme/src/helpers/getters';
+import MainProvider from '~context/MainProvider';
+import getPageData from '../../../../../../../tests/factories/pages/default.factory';
+import TemplateOne from '.';
+
+const translations = {
+  online_casino: 'Online Casino',
+};
+
+function renderComponent(pageData) {
+  return render(
+    <MainProvider
+      value={{
+        bannerIsActive: false,
+        cookieAccepted: true,
+        translations,
+      }}
+    >
+      <TemplateOne
+        title={pageData.title}
+        description={pageData.description}
+        extraFields={pageData.extra_fields}
+        imageObj={pageData.featured_image_object}
+      />
+    </MainProvider>
+  );
+}
+
+let data;
+
+beforeEach(() => {
+  data = getPageData();
+});
+describe('Show template one', () => {
+  test('render with props', () => {
+    const { container } = renderComponent(data);
+    expect(container.querySelector('.templateOne')).toBeTruthy();
+  });
+  test('show correct title', () => {
+    const { container } = renderComponent(data);
+    expect(container.querySelector('.headerContainer').querySelector('h1')).toBeTruthy();
+    expect(container.querySelector('.headerContainer').querySelector('h1').innerHTML).toEqual(
+      data.title
+    );
+  });
+  test('show correct description', () => {
+    const { container } = renderComponent(data);
+    expect(container.querySelector('.headerContainer').querySelector('div').innerHTML).toEqual(
+      data.description
+    );
+  });
+  test('show correct url', () => {
+    const { container } = renderComponent(data);
+    expect(
+      container.querySelector('.headerContainer').querySelector('a').innerHTML.split('<svg')[0]
+    ).toEqual(getExtraField(data?.extra_fields, 'link'));
+  });
+  test('show correct image', () => {
+    const imgObj = data.featured_image_object;
+
+    // eslint-disable-next-line global-require
+    const func = require('gatsby-core-theme/src/helpers/device-detect');
+    func.isNativeImageLazyLoadingSupported = jest.fn(() => true);
+    const { container } = renderComponent(data);
+
+    expect(container.querySelector('img')).toBeTruthy();
+    expect(container.querySelector('img')).toHaveAttribute(
+      'src',
+      imagePrettyUrl(imgObj.filename, imgObj.width, imgObj.height)
+    );
+    expect(container.querySelector('img')).toHaveAttribute('loading', 'eager');
+  });
+});
+afterEach(() => {
+  cleanup();
+});