gatsby-core-theme 3.0.0 → 5.0.1

package/src/components/molecules/carousel/default-slide/index.js

@@ -13,6 +13,7 @@ const Slide = ({
   primaryBtnText = '',
   secondaryBtnText = '',
   imageSizes = { width: null, height: 930 },
+  slideTitle = '',
 }) => {
   return (
     <>
@@ -21,7 +22,7 @@ const Slide = ({
         <LazyImage
           className={styles.image}
           src={imagePrettyUrl(item.image, imageSizes.width, imageSizes.height)}
-          alt={item.title}
+          alt={item.title || slideTitle}
         />
       )}
       {item.content && <p className={styles.content}>{item.content}</p>}
@@ -62,6 +63,7 @@ Slide.propTypes = {
   primaryBtnText: PropTypes.string,
   secondaryBtnText: PropTypes.string,
   imageSizes: PropTypes.shape({ width: PropTypes.any, height: PropTypes.any }),
+  slideTitle: PropTypes.string,
 };
 
 export default Slide;

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

@@ -20,6 +20,133 @@ describe('Content Component', () => {
     // expect(container.querySelector('img')).toBeFalsy();
     // expect(container.querySelector('div.lazyload-placeholder')).toBeTruthy();
   });
+
+  test('Iframe props', () => {
+    const iframeModule = {
+      anchor_label: 'Slot tips',
+      anchor_slug: 'slot-tips',
+      anchored: 1,
+      background_color: null,
+      extra_anchors: null,
+      module_title: 'Tips when Choosing Slot Machines',
+      module_title_tag: 'h2',
+      module_value_id: 208480,
+      name: 'content',
+      see_more_link: null,
+      show_more_content: null,
+      show_more_enabled: '0',
+      show_more_label: null,
+      style: 'content_frame_style',
+      style_id: 41,
+      tag: 'h2',
+      title: 'Tips when Choosing Slot Machines',
+      value: `
+      <p>
+        Whether youre a newcomer to the world of online gambling, or whether you are a seasoned player with a desire to keep abreast of whats happening in the industry, youll find all the information you need, right here on Playcasino.</p>
+        <p>
+          <img src="https://assets-srv.s3.eu-west-1.amazonaws.com/online-casinos-in-south-africa.jpg" width="929px" id="67595" height="266px" alt="Online Casinos in South Africa" title="Online Casinos in South Africa" class="content-image--align-center fr-fic fr-dib">
+        </p>
+        <p>
+          <img src="https://assets-srv.s3.eu-west-1.amazonaws.com/online-casinos-in-south-africa.jpg" width="929px" id="67595" height="266px" alt="Online Casinos in South Africa" title="Online Casinos in South Africa" class="content-image--align-right fr-fic fr-dib">
+        </p>
+        <p>
+          <img src="https://assets-srv.s3.eu-west-1.amazonaws.com/online-casinos-in-south-africa.jpg" width="929px" id="67595" height="266px" alt="Online Casinos in South Africa" title="Online Casinos in South Africa" class="content-image--align-left fr-fic fr-dib">
+        </p>
+        <p>
+          <img src="https://assets-srv.s3.eu-west-1.amazonaws.com/online-casinos-in-south-africa.jpg" width="929px" id="67595" height="266px" alt="Online Casinos in South Africa" title="Online Casinos in South Africa" class="content-image--float-right fr-fic fr-dib">
+        </p>
+        <p>
+          <img src="https://assets-srv.s3.eu-west-1.amazonaws.com/online-casinos-in-south-africa.jpg" width="929px" id="67595" height="266px" alt="Online Casinos in South Africa" title="Online Casinos in South Africa" class="content-image--float-left fr-fic fr-dib">
+        </p>
+        <p>&nbsp;</p>
+        <p>
+          <strong>1. Top Lists:&nbsp;</strong>
+            Our team loves putting together lists of all kinds, including 
+        <a data-page-id="99259" href="/real-money-online-casinos">
+          top real money casinos
+        </a>
+        , top casino bonuses,
+         <a data-page-id="99338" href="/free-casinos-no-deposit-south-africa">
+           top no deposit bonus casinos
+         </a>
+         , 
+         <a data-page-id="99254" href="/live-dealer-casinos-south-africa">top live dealer casinos</a>
+         , 
+         <a data-page-id="99363" href="/sports-betting-listings">
+          top sportsbooks,&nbsp;
+         </a>
+          <a data-page-id="98607" href="/low-wagering-casino-bonuses">
+          top low wagering bonuses
+          </a>
+          etc.</p>
+          <p>
+            <strong>
+            2. Casino and Sportsbook Reviews:&nbsp;
+            </strong>
+            Every casino and sportsbook we recommend is extensively reviewed by our professional team. We look at everything from games and bonuses available, to issues such as fairness, payouts, and security. Well provide unbiased and 
+            <a href="/online-casino-reviews">
+              objective reviews of the casinos
+            </a>
+              and sportsbooks listings, to help you make an educated decision before betting your bankroll at the site of any online or 
+            <a data-page-id="99146" href="/land-based-casino-listings">land based casino
+            </a>
+            .</p><p><strong>3. Game Reviews:</strong> New games are released to the South African casino landscape every month. Youll find reviews of all these new games, as well as all the popular classics. Learn about the important features of<a data-page-id="98606" href="/slots">&nbsp;new slots
+            </a>, real money slots, and table games, such as betting limits, themes, bonus features, free play and 
+            <a data-page-id="99186" href="/progressive-jackpots">
+              progressive jackpots
+            </a>.
+            Discover exciting and rewarding new titles to spice up your gaming sessions.
+          </p>
+          <p>
+            <strong>4. Reviews on Software Providers:
+            </strong> The companies that provide fantastic games at the best SA online casinos are reviewed on this site. Well examine which providers are better than others and let you know why.&nbsp; Well list the games that make up their portfolio and tell you where you can find their titles.
+          </p>
+          <p>
+            <strong>
+            5. Reviews on Payment Methods:
+            </strong> Payment methods form the backbone for the secure transfer of funds into and from your
+            <a data-page-id="99253" href="/zar-online-casinos-south-africa">
+            &nbsp;ZAR-friendly casino accounts
+            </a> which is why we only recommend trusted and proven banking methods that are safe, easy and convenient for South Africans to use.
+            </p> <p>
+            <iframe width="960" height="560" src="https://www.youtube.com/embed/zdzQcsduee8" title="YouTube video player" frameborder="0" allowfullscreen="0">
+            </iframe>
+          </p>
+          <p>
+            <strong>
+              6. Guides:&nbsp;
+            </strong> 
+            From 
+            <a data-page-id="99185" href="/online-casino-gambling">
+              beginner guides and how-to-play guides
+            </a>
+              to more intermediate and advanced strategies and tips, we cover everything players need to know whether they are new or experienced.
+          </p>
+          <p>
+            <strong>
+              7. News:&nbsp;
+            </strong>
+            We are firm believers that to truly succeed in online gambling, you need to keep abreast of the
+            <a href="/blog">
+              &nbsp;latest news
+            </a>
+              and be informed about industry updates. We are proud of our regularly updated news page that tells you about the latest promotions and reports on industry-related developments, both in South Africa and in the greater global industry. Dont miss out on the informative content on everything you wish to know, including much needed data &amp; math to check 
+            <a data-page-id="98584" href="/blog/chances-you-win-south-african-lottery">
+              how likely you are to win the lottery
+            </a>
+            ?
+          </p>
+            <p>
+              <iframe width="960" height="560" src="https://www.youtube.com/embed/zdzQcsduee8" title="YouTube video player" frameborder="0" allowfullscreen="0">
+              </iframe>
+            </p>
+      `,
+    };
+    const { container } = render(<Content module={iframeModule} />);
+
+    expect(container.querySelectorAll('iframe')).toBeTruthy();
+    expect(container.querySelectorAll('noscript').length).toEqual(5);
+  });
 });
 afterEach(() => {
   cleanup();

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

@@ -42,7 +42,6 @@ const Content = ({ module, pageContext = null }) => {
     }
     return null;
   };
-
   const template = pageContext?.page?.template;
 
   return (

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

@@ -20,6 +20,12 @@ describe('header component', () => {
     // Testing image
     expect(container.querySelector('img')).toBeTruthy();
   });
+
+  test('render header', () => {
+    const { container } = render(<Header section={headerSection} content="<p>Hello</p>" />);
+    expect(container.querySelectorAll('header')).toHaveLength(1);
+    expect(container.querySelectorAll('.headerContent')).toHaveLength(1);
+  });
 });
 afterEach(() => {
   cleanup();

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

@@ -1,31 +1,67 @@
 import React from 'react';
-import { render, cleanup, waitFor } from '@testing-library/react';
+import { render, cleanup } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
 import '~tests/helpers/match-media.mock';
 import { getSingleContentData } from '~tests/factories/modules/content.factory';
 import Main from '.';
+import { schema, templatesInSchema } from '~tests/factories/modules/schema.factory.js';
 
-const section = {
-  modules: [
-    {
-      name: 'content',
-      ...getSingleContentData(),
-    },
-  ],
+const section = (title) => {
+  const data = {
+    modules: [
+      {
+        name: 'content',
+        ...getSingleContentData('h2', 1, title),
+      },
+    ],
+  };
+
+  return data;
 };
 
 const pageObject = { page: { path: 's' } };
 
 describe('Main Component', () => {
   test('render main', async () => {
-    const { container, getByText } = render(<Main section={section} pageContext={pageObject} />);
+    const sectionData = section('main');
+    const { container } = render(<Main section={sectionData} pageContext={pageObject} />);
+    expect(container).toBeTruthy();
+    expect(container.querySelectorAll('main.modulePage')).toHaveLength(1);
+  });
+  test('render main with author', async () => {
+    const sectionData = section('author');
+    const pageObjectSecond = { page: { path: 'author', author: {} } };
+
+    const { container } = render(<Main section={sectionData} pageContext={pageObjectSecond} />);
+
+    expect(container).toBeTruthy();
+    expect(container.querySelectorAll('main.modulePage')).toHaveLength(1);
+  });
+
+  test('render main with sitemap as path', async () => {
+    const sectionData = section('sitemap');
+
+    const pageObjectSecond = {
+      page: { path: 'sitemap' },
+      templates: templatesInSchema,
+      sitemapData: schema,
+    };
+
+    const { container } = render(<Main section={sectionData} pageContext={pageObjectSecond} />);
+
     expect(container).toBeTruthy();
     expect(container.querySelectorAll('main.modulePage')).toHaveLength(1);
+  });
 
-    await waitFor(() => {
-      expect(getByText('Test Content 1')).toBeTruthy();
-    });
+  test('render main with 404 as path ', async () => {
+    const sectionData = section('404Sites');
+
+    const pageObjectSecond = { page: { path: '404', author: {} } };
+
+    const { container } = render(<Main section={sectionData} pageContext={pageObjectSecond} />);
+    expect(container).toBeTruthy();
+    expect(container.querySelectorAll('main.modulePage')).toHaveLength(1);
   });
 });
 afterEach(() => {

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

@@ -52,6 +52,7 @@ describe('Menu Component', () => {
             mobile: {
               animation: 'collapse',
               closeHandler: null,
+              stopScrollOnOpen: true,
             },
             desktop: {
               orientation: 'horizontal',
@@ -64,6 +65,32 @@ describe('Menu Component', () => {
   });
 
   test('menu icon', () => {
+    const mockFn = jest.fn();
+    const { container } = render(
+      <NavigationProvider>
+        <Menu
+          section={menuSection.navigation}
+          menu={menuSection.menuList[0]}
+          options={{
+            mobile: {
+              animation: 'collapse',
+              closeHandler: mockFn,
+            },
+            desktop: {
+              orientation: 'horizontal',
+            },
+          }}
+        />
+      </NavigationProvider>
+    );
+    expect(container.querySelectorAll('.menuIconContainer')).toHaveLength(1);
+    expect(container.querySelectorAll('.menuIcon')).toHaveLength(1);
+    fireEvent.click(container.querySelector('.menuIconContainer'));
+    fireEvent.keyDown(container.querySelector('.menuIconContainer'));
+    expect(mockFn).toHaveBeenCalled();
+  });
+
+  test('test menu with children', () => {
     const mockFn = jest.fn();
     const { container } = render(
       <NavigationProvider>

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

@@ -5,6 +5,39 @@ import '@testing-library/jest-dom/extend-expect';
 import '~tests/helpers/match-media.mock';
 import Module from '.';
 import { getListContentData, contentTableOne } from '~tests/factories/modules/content.factory';
+import { objectsHolder } from '~tests/factories/modules/modules.factory';
+
+const getAnchorList = (number = 1) => {
+  function anchor(idNumber) {
+    return {
+      label: `Game Selection  ${idNumber}`,
+      slug: `game-selection  ${idNumber}`,
+      type: `module ${idNumber}`,
+    };
+  }
+
+  const arr = [];
+  for (let i = 0; i < number; i += 1) {
+    arr.push(anchor(i));
+  }
+
+  return arr;
+};
+
+const getCaruselData = (number) => {
+  function caruselImg(idNumber) {
+    return {
+      image: `http://imgSrc//${idNumber}`,
+    };
+  }
+
+  const arr = [];
+  for (let i = 0; i < number; i += 1) {
+    arr.push(caruselImg(i));
+  }
+
+  return arr;
+};
 
 describe('Modules Component ', () => {
   test('render with props', async () => {
@@ -30,6 +63,107 @@ describe('Modules Component ', () => {
     const { container } = render(<Module module={{ name: 'content', ...contentTableOne }} />);
     expect(container.querySelectorAll('h2')).toHaveLength(0);
   });
+
+  test('Swich for All component', () => {
+    const arr = [
+      'content',
+      'top_list',
+      'cards',
+      'cards_v2',
+      'pros_and_cons',
+      'accordion',
+      'bonus',
+      'image',
+      'spotlights',
+    ];
+    arr.forEach((title) => {
+      const data = objectsHolder(title);
+
+      const { container } = render(
+        <Module
+          module={{
+            name: title,
+            anchor_label: title,
+            ...data,
+          }}
+          page={{ template: 'default' }}
+        />
+      );
+
+      expect(container.querySelector('div')).toBeTruthy();
+    });
+  });
+
+  test('Anchor and archive without moduleItem items', () => {
+    const arr = ['archive', 'anchor'];
+
+    arr.forEach((elm) => {
+      const { container } = render(
+        <Module
+          module={{
+            name: elm,
+            items: [],
+          }}
+        />
+      );
+      expect(container.querySelector('div')).toBe(null);
+    });
+  });
+
+  test('Anchor and archive with moduleItem', () => {
+    const arr = ['archive', 'anchor'];
+
+    arr.forEach((elm) => {
+      const content = getAnchorList(3);
+      const { container } = render(
+        <Module
+          module={{
+            name: elm,
+            items: content,
+          }}
+        />
+      );
+      // console.log('getByText(container)', getByText(container))
+      expect(container).toBeTruthy();
+    });
+  });
+
+  test('carousel without data', () => {
+    const { container } = render(
+      <Module
+        module={{
+          name: 'carousel',
+          items: [{ image: null }],
+        }}
+      />
+    );
+
+    expect(container.querySelector('div')).toBe(null);
+  });
+
+  test('carusel with data', () => {
+    const data = getCaruselData(3);
+    const { container } = render(
+      <Module
+        module={{
+          name: 'carousel',
+          items: data,
+        }}
+      />
+    );
+    expect(container).toBeTruthy();
+  });
+
+  test('module name is not in swich', () => {
+    const { container } = render(
+      <Module
+        module={{
+          name: 'test',
+        }}
+      />
+    );
+    expect(container.querySelector('div')).toBe(null);
+  });
 });
 afterEach(() => {
   cleanup();

package/src/components/molecules/operator-banner/operator-banner.test.js

@@ -1,5 +1,7 @@
+/* eslint-disable no-lone-blocks */
+/* eslint-disable no-unused-expressions */
 import React from 'react';
-import { render, cleanup } from '@testing-library/react';
+import { render, cleanup, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
 import OperatorBanner from '.';
@@ -14,6 +16,10 @@ describe('OperatorBanner Component', () => {
     expect(container.querySelectorAll('.sticky')).toHaveLength(1);
     expect(getByText('Rizk Casino')).toBeTruthy();
     expect(getByText('Visit')).toBeTruthy();
+    const button = container.querySelector('.closeBtn');
+    {
+      button && fireEvent.click(button);
+    }
   });
   test('render component placeholder', () => {
     const data = getPageData();

package/src/components/molecules/pagination/pagination-with-midpoints.module.scss

@@ -1,60 +1,59 @@
 .padd {
-    padding: 0 1.15rem;
-    border-radius: var(--border-radius);
-    background-color: white;
-    margin: 0 0.4rem;
+  padding: 0 1.15rem;
+  border-radius: var(--border-radius);
+  background-color: white;
+  margin: 0 0.4rem;
+  height: 4.8rem;
+  // TODO remove border
+  border: 1px solid var(--pagination-with-midpoints-color);
+  @include flex-align(center, center);
+  @media all and (max-width: 400px) {
+    margin: 0 0.1rem;
+    padding: 0 0.7rem;
+  }
+}
+.pagination {
+  margin: 1rem auto;
+  @include flex-align(center, center);
+
+  a,
+  span {
+    color: var(--color-10);
+    display: inline-block;
+    font-size: 1.8rem;
+    line-height: 4.8rem;
     height: 4.8rem;
-    // TODO remove border
-    border: 1px solid #ccc;
-    @include flex-align(center, center);
-    @media all and (max-width: 400px) {
-      margin: 0 0.1rem;
-      padding: 0 0.7rem;
-    }
   }
-  .pagination {
-    margin: 1rem auto;
+  a {
+    padding: 0 0.4rem;
+  }
+  .button {
     @include flex-align(center, center);
-  
-    a,
-    span {
+    font-size: 2.5rem;
+    @extend .padd;
+    color: var(--color-7);
+    cursor: not-allowed;
+    &.isActive {
       color: var(--color-10);
-      display: inline-block;
-      font-size: 1.8rem;
-      line-height: 4.8rem;
-      height: 4.8rem;
-    }
-    a {
-      padding: 0 0.4rem;
-    }
-    .button {
-      @include flex-align(center, center);
-      font-size: 2.5rem;
-      @extend .padd;
-      color: var(--color-7);
-      cursor: not-allowed;
-      &.isActive {
-        color: var(--color-10);
-        cursor: pointer;
-      }
+      cursor: pointer;
     }
-  
-    .active {
-      color: var(--secondary-color);
+  }
+
+  .active {
+    color: var(--secondary-color);
+  }
+  li {
+    &.showInMobile {
+      display: none;
     }
+  }
+  @include max(mobile) {
     li {
-      &.showInMobile {
-        display: none;
-      }
-    }
-    @include max(mobile) {
-      li {
-        display: none;
-        &.showInMobile,
-        &.showInAll {
-          display: inline-block;
-        }
+      display: none;
+      &.showInMobile,
+      &.showInAll {
+        display: inline-block;
       }
     }
   }
-  
+}

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

@@ -132,6 +132,12 @@ function Slider({
     // Keep slider node reference for multiple carousels in an instance
     const sliderContentNode = sliderContentRef.current;
 
+    sliderContentNode.style.setProperty('width', style.width);
+    sliderContentNode.style.setProperty('transition', style.transition);
+    sliderContentNode.style.setProperty('transform', style.transform);
+    sliderContentNode.style.setProperty('grid-template-columns', style.gridTemplateColumns);
+    sliderContentNode.style.setProperty('gap', style.gridGap);
+
     const mousedown = (e) => {
       sliderIsActive.current = true;
       swipeStart(e, updateOnSwipe);

package/src/components/organisms/anchor/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-array-index-key */
 import React from 'react';
 import PropTypes from 'prop-types';
 
@@ -22,18 +23,20 @@ function Anchor({ module: { items }, headerOffset = 80 }) {
   };
 
   return (
-    <div className={styles.anchor}>
-      {items.map((anchor) => (
-        <a
-          className={`${styles.link} anchor-carousel-gtm anchor-menu-gtm`}
-          key={keygen()}
-          onClick={handleClick}
-          href={`#${anchor.label && anchorLink(anchor?.label?.toLowerCase().trim())}`}
-        >
-          {anchor?.label}
-        </a>
+    <ul className={styles.anchor}>
+      {items.map((anchor, index) => (
+        <li key={index}>
+          <a
+            className={`${styles.link} anchor-carousel-gtm anchor-menu-gtm`}
+            key={keygen()}
+            onClick={handleClick}
+            href={`#${anchor.label && anchorLink(anchor?.label?.toLowerCase().trim())}`}
+          >
+            {anchor?.label}
+          </a>
+        </li>
       ))}
-    </div>
+    </ul>
   );
 }
 

package/src/components/organisms/carousel/index.js

@@ -6,15 +6,25 @@ import Slide from '~molecules/carousel/default-slide';
 import keygen from '~helpers/keygen';
 import styles from './carousel.module.scss';
 
-const Carousel = ({ module = {}, settings = {}, CustomSlideComponent, gtmClass = '' }) => (
+const Carousel = ({
+  page = {},
+  module = {},
+  settings = {},
+  CustomSlideComponent,
+  gtmClass = '',
+}) => (
   <div className={styles.carouselContainer}>
     <Slider {...settings} gtmClass={gtmClass}>
-      {module.items.map((item) => (
+      {module.items.map((item, index) => (
         <div key={keygen()} className={styles.carouselItem}>
           {CustomSlideComponent !== undefined ? (
             <CustomSlideComponent item={item} gtmClass={gtmClass} />
           ) : (
-            <Slide item={item} gtmClass={gtmClass} />
+            <Slide
+              slideTitle={`${page.title}-carousel-${index + 1}`}
+              item={item}
+              gtmClass={gtmClass}
+            />
           )}
         </div>
       ))}
@@ -23,6 +33,9 @@ const Carousel = ({ module = {}, settings = {}, CustomSlideComponent, gtmClass =
 );
 
 Carousel.propTypes = {
+  page: PropTypes.shape({
+    title: PropTypes.string,
+  }),
   module: PropTypes.shape({
     items: PropTypes.arrayOf(
       PropTypes.shape({