gatsby-core-theme 44.10.0 → 44.10.11

package/src/components/molecules/footer/variants/template-two/template-two.test.js

@@ -1,15 +1,15 @@
 /* eslint-disable no-restricted-syntax */
-import React from 'react';
-import { render, cleanup, waitFor } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-import { getExtraField, copyrightText } from 'gatsby-core-theme/src/helpers/getters';
-import MainProvider from '~context/MainProvider';
-import Security from '~images/icons/security';
-import getFooterData from '../../../../../../tests/factories/modules/footer.factory';
-import TemplateOne from '.';
+import React from "react";
+import { render, cleanup, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+import { getExtraField, copyrightText } from "~helpers/getters";
+import MainProvider from "~context/MainProvider";
+import Security from "~images/icons/security";
+import getFooterData from "../../../../../../tests/factories/modules/footer.factory";
+import TemplateOne from ".";
 
 const translations = {
-  licensed_casinos: 'We only list licensed casinos',
+  licensed_casinos: "We only list licensed casinos",
 };
 
 const helpText = `
@@ -22,7 +22,7 @@ const helpText = `
   </a>
   in order to get help.
 </p>`;
-const phoneNum = '- 89 241 5401';
+const phoneNum = "- 89 241 5401";
 
 const dmcaImg = (
   <img
@@ -56,18 +56,21 @@ let footerLogos;
 
 beforeEach(() => {
   data = getFooterData();
-  footerMenu = getExtraField(data?.extra_fields, 'links');
-  asSeenOn = getExtraField(data?.extra_fields, 'as_seen_on');
-  gamblingText = getExtraField(data?.extra_fields, 'gambling_text');
-  socialIcons = getExtraField(data?.extra_fields, 'social_icons');
-  copyrightDisclaimer = getExtraField(data.extra_fields, 'copyright_disclaimer');
-  footerLogos = getExtraField(data?.extra_fields, 'logos');
+  footerMenu = getExtraField(data?.extra_fields, "links");
+  asSeenOn = getExtraField(data?.extra_fields, "as_seen_on");
+  gamblingText = getExtraField(data?.extra_fields, "gambling_text");
+  socialIcons = getExtraField(data?.extra_fields, "social_icons");
+  copyrightDisclaimer = getExtraField(
+    data.extra_fields,
+    "copyright_disclaimer"
+  );
+  footerLogos = getExtraField(data?.extra_fields, "logos");
 
   props = {
     section: data,
-    template: 'default',
+    template: "default",
     hasFooterLinks: false,
-    footerTemplate: 'template_one',
+    footerTemplate: "template_one",
     showLinks: true,
     copyrightDisclaimer,
     footerLogos,
@@ -77,95 +80,109 @@ beforeEach(() => {
     socialIcons,
     hasDisclaimer: true,
     showCopyright: true,
-    logo: '/images/logo.svg',
+    logo: "/images/logo.svg",
     securityIcon: <Security />,
     helpText,
     phoneNum,
     dmcaImg,
   };
 });
-describe('Show template one', () => {
-  test('render with props', () => {
+describe("Show template one", () => {
+  test("render with props", () => {
     const { container } = renderComponent(props);
     expect(container).toBeTruthy();
   });
-  test('show correct template ', async () => {
+  test("show correct template ", async () => {
     const { container } = renderComponent(props);
     await waitFor(() => {
-      expect(container.querySelectorAll('.footer.templateTwo').length).toBe(1);
+      expect(container.querySelectorAll(".footer.templateTwo").length).toBe(1);
     });
   });
-  test('show as seen on in the middle, not top', async () => {
+  test("show as seen on in the middle, not top", async () => {
     const { container, getByText } = renderComponent(props);
     await waitFor(() => {
-      expect(container.querySelectorAll('footer > div')).toHaveLength(1);
-      expect(container.querySelectorAll('.asSeenOn')).toHaveLength(1);
+      expect(container.querySelectorAll("footer > div")).toHaveLength(1);
+      expect(container.querySelectorAll(".asSeenOn")).toHaveLength(1);
 
       // show correct title
-      expect(getByText('As Seen On:')).toHaveTextContent(`${asSeenOn.title}:`);
+      expect(getByText("As Seen On:")).toHaveTextContent(`${asSeenOn.title}:`);
 
       // show correct number of logos
-      expect(container.querySelectorAll('.asSeenOn li')).toHaveLength(3);
+      expect(container.querySelectorAll(".asSeenOn li")).toHaveLength(3);
     });
   });
-  test('footer middle part shows as seen on', async () => {
+  test("footer middle part shows as seen on", async () => {
     const { container } = renderComponent(props);
     await waitFor(() => {
-      expect(container.querySelectorAll('.footerHotline > div')).toHaveLength(2);
-      expect(container.querySelectorAll('.footerHotline .asSeenOn')).toHaveLength(1);
+      expect(container.querySelectorAll(".footerHotline > div")).toHaveLength(
+        2
+      );
+      expect(
+        container.querySelectorAll(".footerHotline .asSeenOn")
+      ).toHaveLength(1);
     });
   });
-  test('hide as seen on', async () => {
+  test("hide as seen on", async () => {
     props = {
       ...props,
       asSeenOn: null,
     };
     const { container } = renderComponent(props);
     await waitFor(() => {
-      expect(container.querySelectorAll('.asSeenOn')).toHaveLength(0);
+      expect(container.querySelectorAll(".asSeenOn")).toHaveLength(0);
     });
   });
-  test('render menu list', async () => {
+  test("render menu list", async () => {
     const { container, getByText } = renderComponent(props);
 
     await waitFor(() => {
-      expect(container.querySelectorAll('.topPart')).toHaveLength(1);
-      expect(container.querySelectorAll('.links')).toHaveLength(1);
-      expect(container.querySelectorAll('.links ul')).toHaveLength(footerMenu.children.length);
+      expect(container.querySelectorAll(".topPart")).toHaveLength(1);
+      expect(container.querySelectorAll(".links")).toHaveLength(1);
+      expect(container.querySelectorAll(".links ul")).toHaveLength(
+        footerMenu.children.length
+      );
 
       // show correct title
       expect(getByText(footerMenu.children[0].title)).toBeTruthy();
       expect(getByText(footerMenu.children[2].title)).toBeTruthy();
 
       // show correct number of child lists
-      expect(getByText(footerMenu.children[1].title).closest('ul').children).toHaveLength(7);
-      expect(getByText(footerMenu.children[2].title).closest('ul').children).toHaveLength(6);
+      expect(
+        getByText(footerMenu.children[1].title).closest("ul").children
+      ).toHaveLength(7);
+      expect(
+        getByText(footerMenu.children[2].title).closest("ul").children
+      ).toHaveLength(6);
 
       // show correct url
       expect(
-        getByText(footerMenu.children[1].children[0].title).closest('a').getAttribute('href')
+        getByText(footerMenu.children[1].children[0].title)
+          .closest("a")
+          .getAttribute("href")
       ).toEqual(`/${footerMenu.children[1].children[0].value}`);
       expect(
-        getByText(footerMenu.children[2].children[2].title).closest('a').getAttribute('href')
+        getByText(footerMenu.children[2].children[2].title)
+          .closest("a")
+          .getAttribute("href")
       ).toEqual(`/${footerMenu.children[2].children[2].value}`);
     });
   });
-  test('hide menu list', async () => {
+  test("hide menu list", async () => {
     props = {
       ...props,
       showLinks: null,
     };
     const { container } = renderComponent(props);
     await waitFor(() => {
-      expect(container.querySelectorAll('.links')).toHaveLength(0);
-      expect(container.querySelectorAll('.links ul')).toHaveLength(0);
+      expect(container.querySelectorAll(".links")).toHaveLength(0);
+      expect(container.querySelectorAll(".links ul")).toHaveLength(0);
     });
   });
-  test('show gambling text', async () => {
+  test("show gambling text", async () => {
     const { container } = renderComponent(props);
     await waitFor(() => {
-      expect(container.querySelectorAll('.license > div')).toHaveLength(4);
-      expect(container.querySelectorAll('.gamblingText')).toHaveLength(1);
+      expect(container.querySelectorAll(".license > div")).toHaveLength(4);
+      expect(container.querySelectorAll(".gamblingText")).toHaveLength(1);
     });
   });
   // test('correct security text', async () => {
@@ -178,72 +195,78 @@ describe('Show template one', () => {
   //     ).toContain('securityText');
   //   });
   // });
-  test('correct help text', async () => {
+  test("correct help text", async () => {
     const { container } = renderComponent(props);
     await waitFor(() => {
-      expect(container.querySelector('.helpText')).toBeTruthy();
-      expect(container.querySelector('.helpText').innerHTML).toBe(helpText);
+      expect(container.querySelector(".helpText")).toBeTruthy();
+      expect(container.querySelector(".helpText").innerHTML).toBe(helpText);
     });
   });
-  test('correct phone number', async () => {
+  test("correct phone number", async () => {
     const { getByText, container } = renderComponent(props);
     await waitFor(() => {
       expect(getByText(phoneNum)).toBeTruthy();
-      expect(container.querySelector('.phoneNum').innerHTML.split('</svg>')[1]).toBe(phoneNum);
+      expect(
+        container.querySelector(".phoneNum").innerHTML.split("</svg>")[1]
+      ).toBe(phoneNum);
     });
   });
-  test('show copyright disclaimer', async () => {
+  test("show copyright disclaimer", async () => {
     const { container } = renderComponent(props);
     await waitFor(() => {
-      expect(container.querySelectorAll('.copyrightDisclaimer')).toBeTruthy();
+      expect(container.querySelectorAll(".copyrightDisclaimer")).toBeTruthy();
 
-      expect(container.querySelector('.copyrightDisclaimer').innerHTML).toBe(copyrightDisclaimer);
+      expect(container.querySelector(".copyrightDisclaimer").innerHTML).toBe(
+        copyrightDisclaimer
+      );
     });
   });
-  test('show copyright', async () => {
+  test("show copyright", async () => {
     const { container } = renderComponent(props);
     await waitFor(() => {
-      expect(container.querySelector('.copyrightText')).toHaveTextContent(copyrightText());
+      expect(container.querySelector(".copyrightText")).toHaveTextContent(
+        copyrightText()
+      );
     });
   });
-  test('hide copyright', async () => {
+  test("hide copyright", async () => {
     props = {
       ...props,
       showCopyright: false,
     };
     const { container } = renderComponent(props);
     await waitFor(() => {
-      expect(container.querySelector('.copyrightText')).toBeFalsy();
+      expect(container.querySelector(".copyrightText")).toBeFalsy();
     });
   });
-  test('show dmca image', async () => {
+  test("show dmca image", async () => {
     // eslint-disable-next-line global-require
-    const func = require('gatsby-core-theme/src/helpers/device-detect');
+    const func = require("~helpers/device-detect");
     func.isNativeImageLazyLoadingSupported = jest.fn(() => true);
     props = {
       ...props,
       showCopyright: false,
-      dmcaImage: '/images/dmca.png',
+      dmcaImage: "/images/dmca.png",
     };
     const { container } = renderComponent(props);
-    expect(container.querySelector('.logos > a').querySelector('img')).toBeTruthy();
-    expect(container.querySelector('.logos > a').querySelector('img')).toHaveAttribute(
-      'src',
-      '/images/dmca.png'
-    );
-    expect(container.querySelector('.logos > a').querySelector('img')).toHaveAttribute(
-      'loading',
-      'lazy'
-    );
+    expect(
+      container.querySelector(".logos > a").querySelector("img")
+    ).toBeTruthy();
+    expect(
+      container.querySelector(".logos > a").querySelector("img")
+    ).toHaveAttribute("src", "/images/dmca.png");
+    expect(
+      container.querySelector(".logos > a").querySelector("img")
+    ).toHaveAttribute("loading", "lazy");
   });
-  test('hide dmca image', async () => {
+  test("hide dmca image", async () => {
     props = {
       ...props,
       hasDisclaimer: false,
     };
     const { container } = renderComponent(props);
     await waitFor(() => {
-      expect(container.querySelector('.logos > a')).toBeFalsy();
+      expect(container.querySelector(".logos > a")).toBeFalsy();
     });
   });
 });

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

@@ -1,13 +1,13 @@
 /* eslint-disable no-unused-vars */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
-import LazyImage from '~hooks/lazy-image';
-import { getAltText } from '~helpers/image';
-import Button from '~atoms/button/button';
-import { imagePrettyUrl, getExtraField } from '~helpers/getters';
-import VariableComponent from '~molecules/header/variants/default/variables';
-import styles from './template-one.module.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight";
+import LazyImage from "~hooks/lazy-image";
+import { getAltText } from "~helpers/image";
+import Button from "~atoms/button/button";
+import { imagePrettyUrl, getExtraField } from "~helpers/getters";
+import VariableComponent from "~molecules/header/variants/default/variables";
+import styles from "./template-one.module.scss";
 
 export default function TemplateOne({
   page,
@@ -17,11 +17,11 @@ export default function TemplateOne({
   imageObj,
   width = 356,
   height = 343,
-  buttonType="secondary",
-  buttonSize="m",
+  buttonType = "secondary",
+  buttonSize = "m",
   hasVariableComponent = false,
 }) {
-  const link = getExtraField(extraFields, 'link');
+  const link = getExtraField(extraFields, "link");
 
   return (
     <div className={styles.templateOne}>
@@ -55,7 +55,9 @@ export default function TemplateOne({
           className={styles.image}
         />
       )}
-      {hasVariableComponent && <VariableComponent page={page} className={styles.variable} />}
+      {hasVariableComponent && (
+        <VariableComponent page={page} className={styles.variable} />
+      )}
     </div>
   );
 }

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

@@ -1,14 +1,14 @@
-import React from 'react';
-import { render, cleanup } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+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 '.';
+import { getExtraField, imagePrettyUrl } from "~helpers/getters";
+import MainProvider from "~context/MainProvider";
+import getPageData from "../../../../../../../tests/factories/pages/default.factory";
+import TemplateOne from ".";
 
 const translations = {
-  online_casino: 'Online Casino',
+  online_casino: "Online Casino",
 };
 
 function renderComponent(pageData) {
@@ -35,44 +35,52 @@ let data;
 beforeEach(() => {
   data = getPageData();
 });
-describe('Show template one', () => {
-  test('render with props', () => {
+describe("Show template one", () => {
+  test("render with props", () => {
     const { container } = renderComponent(data);
-    expect(container.querySelector('.templateOne')).toBeTruthy();
+    // eslint-disable-next-line no-restricted-syntax
+    expect(container.querySelector(".templateOne")).toBeTruthy();
   });
-  test('show correct title', () => {
+  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
-    );
+    expect(
+      container.querySelector(".headerContainer").querySelector("h1")
+      // eslint-disable-next-line no-restricted-syntax
+    ).toBeTruthy();
+    expect(
+      container.querySelector(".headerContainer").querySelector("h1").innerHTML
+    ).toEqual(data.title);
   });
-  test('show correct description', () => {
+  test("show correct description", () => {
     const { container } = renderComponent(data);
-    expect(container.querySelector('.headerContainer').querySelector('div').innerHTML).toEqual(
-      data.description
-    );
+    expect(
+      container.querySelector(".headerContainer").querySelector("div").innerHTML
+    ).toEqual(data.description);
   });
-  test('show correct url', () => {
+  test("show correct url", () => {
     const { container } = renderComponent(data);
     expect(
-      container.querySelector('.headerContainer').querySelector('a').innerHTML.split('<svg')[0]
-    ).toEqual(getExtraField(data?.extra_fields, 'link'));
+      container
+        .querySelector(".headerContainer")
+        .querySelector("a")
+        .innerHTML.split("<svg")[0]
+    ).toEqual(getExtraField(data?.extra_fields, "link"));
   });
-  test('show correct image', () => {
+  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');
+    const func = require("~helpers/device-detect");
     func.isNativeImageLazyLoadingSupported = jest.fn(() => true);
     const { container } = renderComponent(data);
 
-    expect(container.querySelector('img')).toBeTruthy();
-    expect(container.querySelector('img')).toHaveAttribute(
-      'src',
+    // eslint-disable-next-line no-restricted-syntax
+    expect(container.querySelector("img")).toBeTruthy();
+    expect(container.querySelector("img")).toHaveAttribute(
+      "src",
       imagePrettyUrl(imgObj.filename, 356, 343)
     );
-    expect(container.querySelector('img')).toHaveAttribute('loading', 'eager');
+    expect(container.querySelector("img")).toHaveAttribute("loading", "eager");
   });
 });
 afterEach(() => {

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

@@ -1,47 +1,50 @@
-import React from 'react';
-import { render, cleanup, screen, waitFor } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-import { imagePrettyUrl } from 'gatsby-core-theme/src/helpers/getters';
-import getPageData from '../../../../../../../tests/factories/pages/slot';
-import TemplateOne from '.';
+import React from "react";
+import { render, cleanup, screen, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+import { imagePrettyUrl } from "~helpers/getters";
+import getPageData from "../../../../../../../tests/factories/pages/slot";
+import TemplateOne from ".";
 
-describe('summary component', () => {
-  test('render', () => {
-    const { container, getByText, getByRole } = render(<TemplateOne page={getPageData()} />);
+describe("summary component", () => {
+  test("render", () => {
+    const { container, getByText, getByRole } = render(
+      <TemplateOne page={getPageData()} />
+    );
 
-    expect(container.querySelectorAll('div.parentContainer')).toHaveLength(1);
+    expect(container.querySelectorAll("div.parentContainer")).toHaveLength(1);
 
-    const div = getByText('The Slot Title');
+    const div = getByText("The Slot Title");
     expect(div).toBeInTheDocument();
 
-    const h1 = getByRole('heading', { level: 1 });
+    const h1 = getByRole("heading", { level: 1 });
     expect(h1).toBeInTheDocument();
   });
 
   const page = {
     relation: {
-      name: 'Halloween',
+      name: "Halloween",
       thumbnail_filename_object: {
-        filename: 'image.jpg',
-        alt: 'Halloween',
+        filename: "image.jpg",
+        alt: "Halloween",
       },
     },
     sections: {
       header: {
         modules: [
           {
-            name: 'bonus',
+            name: "bonus",
             value: {
               bonuses: {
                 main: {
-                  one_liner: '20 Free Spins No Deposit Bonus + 300% & 555 Spins Welcome Bonus',
+                  one_liner:
+                    "20 Free Spins No Deposit Bonus + 300% & 555 Spins Welcome Bonus",
                 },
               },
               logo: {
-                filename: '1651670485/davincis-gold-casino-logo.png',
+                filename: "1651670485/davincis-gold-casino-logo.png",
               },
-              links: { main: 'test' },
-              status: 'active',
+              links: { main: "test" },
+              status: "active",
             },
           },
         ],
@@ -49,29 +52,29 @@ describe('summary component', () => {
     },
   };
 
-  describe('SlotHeader', () => {
-    it('should render the image', async () => {
+  describe("SlotHeader", () => {
+    it("should render the image", async () => {
       render(<TemplateOne page={page} />);
-      const img = screen.getByAltText('Halloween');
+      const img = screen.getByAltText("Halloween");
       await waitFor(() => expect(img).toBeVisible());
       expect(img).toHaveAttribute(
-        'src',
+        "src",
         imagePrettyUrl(page.relation?.logo?.filename, 170, 170)
       );
-      expect(img).toHaveAttribute('width', '170');
-      expect(img).toHaveAttribute('height', '170');
+      expect(img).toHaveAttribute("width", "170");
+      expect(img).toHaveAttribute("height", "170");
     });
 
-    it('should render the headerBonus logo', async () => {
+    it("should render the headerBonus logo", async () => {
       render(<TemplateOne page={page} />);
 
       await waitFor(() => {
-        const bonusText = screen.getByText('Welcome Bonus');
+        const bonusText = screen.getByText("Welcome Bonus");
         expect(bonusText).toBeInTheDocument();
       });
     });
 
-    it('should render the headerBonus one-liner', () => {
+    it("should render the headerBonus one-liner", () => {
       render(<TemplateOne page={page} />);
       const oneLiner = screen.getByText(/20 Free Spins No Deposit Bonus/);
       expect(oneLiner).toBeInTheDocument();