gatsby-core-theme 3.0.0 → 4.0.0

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

@@ -10,8 +10,8 @@ const Label = ({ title = '', bgColor = 'yellow' }) => (
 );
 
 Label.propTypes = {
-  title: PropTypes.string.isRequired,
-  bgColor: PropTypes.string.isRequired,
+  title: PropTypes.string,
+  bgColor: PropTypes.string,
 };
 
 export default Label;

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

@@ -12,6 +12,10 @@ describe('Label Component', () => {
     expect(myLabel).toBeTruthy();
     expect(myLabel.getAttribute('style')).toEqual('background-color: blue;');
   });
+  test('render with props', () => {
+    const { container } = render(<Label />);
+    expect(container.querySelector('span')).toBeEmptyDOMElement();
+  });
 });
 afterEach(() => {
   cleanup();

package/src/components/atoms/module-title/index.js

@@ -14,15 +14,15 @@ const ModuleTitle = ({ module, viewMoreIcon = <FaAngleRight />, pageContext = nu
     if (module.module_title_tag === 'h6') return <h6>{module.module_title}</h6>;
     return <span className={styles.noTag}>{module.module_title}</span>;
   };
-  if (
-    module.name === 'content' &&
-    (module.module_title === 'table' ||
-      module.module_title === 'table-1' ||
-      module.module_title === 'table-2' ||
-      (module.style && module.style.includes('table')))
-  ) {
-    return null;
-  }
+  // if (
+  //   module.name === 'content' &&
+  //   (module.module_title === 'table' ||
+  //     module.module_title === 'table-1' ||
+  //     module.module_title === 'table-2' ||
+  //     (module.style && module.style.includes('table')))
+  // ) {
+  //   return null;
+  // }
 
   const template = pageContext && pageContext?.page?.template;
 

package/src/components/atoms/module-title/module-title.test.js

@@ -37,6 +37,82 @@ describe('Module Title Component', () => {
     expect(getByText('View More')).toBeTruthy();
     expect(container.querySelector('a.viewMore').getAttribute('href')).toEqual('/more');
   });
+
+  test('all H elements', () => {
+    const arr = ['h2', 'h3', 'h4', 'h5', 'h6'];
+
+    const madeObj = (current) => {
+      const obj = {
+        module_title_tag: current,
+        module_title: `Title with current + ${current} `,
+      };
+      return obj;
+    };
+
+    const arrWithObj = arr.reduce((acc, current) => {
+      acc.push(madeObj(current));
+      return acc;
+    }, []);
+
+    arrWithObj.forEach((element) => {
+      const { container } = render(
+        <ModuleTitle
+          module={{
+            name: 'content',
+            module_title: element.module_title,
+            module_title_tag: element.module_title_tag,
+            link_label: 'View More',
+            link_value: '/all',
+          }}
+        />
+      );
+
+      expect(container.querySelector(element.module_title_tag)).toBeTruthy();
+      // expect(container.querySelector(element.module_title_tag)).toHaveLength(1)
+    });
+  });
+
+  test('test', () => {
+    const { getByText } = render(
+      <ModuleTitle
+        module={{
+          name: 'TestName',
+          module_title: 'Test',
+          module_title_tag: '',
+          link_label: 'View More',
+          link_value: '/all',
+        }}
+      />
+    );
+
+    expect(getByText('Test')).toBeTruthy();
+  });
+
+  test('with pageContext', () => {
+    const { container, getByText } = render(
+      <ModuleTitle
+        module={{
+          name: 'content',
+          module_title: 'Test Title',
+          module_title_tag: 'h2',
+          link_label: 'View More',
+          link_value: '/all',
+          style: 'Style test',
+        }}
+        pageContext={{
+          page: {
+            template: true,
+          },
+        }}
+      />
+    );
+
+    expect(getByText('Test Title')).toBeTruthy();
+    expect(container.querySelector('a')).toHaveAttribute('href', '/all');
+    expect(container.querySelectorAll('a')).toHaveLength(1);
+    expect(getByText('View More')).toBeTruthy();
+    expect(container.querySelectorAll('svg')).toHaveLength(1);
+  });
 });
 afterEach(() => {
   cleanup();

package/src/components/atoms/open-graph/open-graph.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 { getUrl } from '~helpers/getters';
 import '@testing-library/jest-dom/extend-expect';
 
@@ -11,18 +13,45 @@ describe('OpenGraph Component', () => {
       <OpenGraph
         text="test title"
         page={{
-            title: 'test',
-            path: '/test/path'
+          title: 'test',
+          path: '/test/path',
         }}
       />
     );
+    global.open = jest.fn();
 
-    const fbURL = `https://www.facebook.com/sharer/sharer.php?caption=test&u=${getUrl('/test/path')}`;
+    const fbURL = `https://www.facebook.com/sharer/sharer.php?caption=test&u=${getUrl(
+      '/test/path'
+    )}`;
     const twitterURL = `https://twitter.com/intent/tweet?text=test&url=${getUrl('/test/path')}`;
 
     expect(getByText('test title')).toBeTruthy();
+    expect(container.querySelectorAll('svg')).toHaveLength(2);
     expect(container.querySelectorAll('a')[0]).toHaveAttribute('href', fbURL);
-    
+    expect(container.querySelectorAll('a')[1]).toHaveAttribute('href', twitterURL);
+
+    const firstAhref = container.querySelectorAll('a')[0];
+    const secondAhref = container.querySelectorAll('a')[1];
+    // eslint-disable-next-line no-lone-blocks
+    {
+      firstAhref && fireEvent.click(firstAhref);
+    }
+    {
+      secondAhref && fireEvent.click(secondAhref);
+    }
+    expect(global.open).toBeCalled();
+  });
+
+  test('Render component without Title', () => {
+    const { getByText } = render(
+      <OpenGraph
+        page={{
+          title: 'test2',
+          path: '/test2/path',
+        }}
+      />
+    );
+    expect(getByText('Share:')).toBeTruthy();
   });
 });
 afterEach(() => {

package/src/components/atoms/operator-cta/operator-cta.test.js

@@ -14,9 +14,15 @@ describe('OperatorCta Component', () => {
   // });
 
   // test('test closedCasino', () => {
-  //   const { getByText } = render(<OperatorCta closedCasinoText="test2" />);
-  //   expect(getByText('test2')).toBeTruthy();
-  //   expect(container.querySelector('.closed')).toBeTruthy();
+  //   const data = getPageData().relation;
+  //   const obj = {
+  //     ...data,
+  //     status: 'closed',
+  //   };
+  //   const { container, getByText } = render(
+  //     <OperatorCta closedCasinoText="test2" operator={obj} />
+  //   );
+  //   // expect(container.querySelector('.closed')).toBeTruthy();
   // });
 
   // test('test Active CTA', () => {
@@ -24,6 +30,12 @@ describe('OperatorCta Component', () => {
   //   expect(getByText('test3')).toBeTruthy();
   // });
 
+  const inactiveOperator = {
+    bonus: { tax_free: false, min_deposit: '0', min_withdrawal: '', max_withdrawal: '' },
+    short_name: 'the_lotter',
+    status: 'inactive',
+  };
+
   test('test GTM class', () => {
     const data = getPageData();
     const { getByText } = render(
@@ -33,6 +45,17 @@ describe('OperatorCta Component', () => {
     expect(getByText('test3').closest('a').classList.contains('operator-cta-gtm')).toBe(true);
     expect(getByText('test3').closest('a').classList.contains('btn-cta')).toBe(true);
   });
+
+  test('test closed status', () => {
+    const { getByText } = render(
+      <OperatorCta
+        operator={inactiveOperator}
+        closedCasinoText="isClosedd"
+        placeholderText="test"
+      />
+    );
+    expect(getByText('isClosedd')).toBeTruthy();
+  });
 });
 afterEach(() => {
   cleanup();

package/src/components/atoms/scroll-to-top/scroll-to-top.test.js

@@ -18,6 +18,12 @@ describe('ScrollToTop Component', () => {
     fireEvent.click(btn);
     expect(scrollToSpy).toHaveBeenCalled();
   });
+
+  test('on scroll', () => {
+    render(<ScrollToTop scrollTo="50" />);
+    fireEvent.scroll(window, { target: { pageYOffset: 501 } });
+    fireEvent.scroll(window, { target: { pageYOffset: 301 } });
+  });
 });
 afterEach(() => {
   cleanup();

package/src/components/atoms/search/autocomplete/operator.js

@@ -8,7 +8,7 @@ import styles from './operator.module.scss';
 
 const Operator = ({ item = {} }) => (
   <div className={styles.row}>
-    <LazyImage src={imagePrettyUrl(item.relation.logo_url, null, 20)} />
+    <LazyImage src={imagePrettyUrl(item.relation.logo_url, null, 20)} alt={item.title} />
     <h3>{item.title}</h3>
     <Button to="/#" primaryColor isInternalLink={false} gtmClass="operator-gtm btn-cta" />
   </div>

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

@@ -42,7 +42,7 @@ const Sitemap = ({ pageContext, templateIcon = <BiSitemap />, linkIcon = <IoMdLi
         if (page !== undefined) {
           const pageObj = sitemapData[market][template][page];
           return (
-            <li>
+            <li key={page}>
               {linkIcon && linkIcon}
               <Link to={pageObj.path} title={pageObj.title}>
                 {pageObj.title}

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

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
 /* eslint-disable react/no-danger */
 /* eslint-disable camelcase */
 import React from 'react';
@@ -10,40 +11,41 @@ import { imagePrettyUrl } from '~helpers/getters';
 import Link from '~hooks/link';
 import styles from './spotlights.module.scss';
 
-const Spotlights = ({ module }) => {
+const Spotlights = ({ module, themeStyles = {} }) => {
   const { show_read_more, read_more_text, items, mode } = module;
 
   const content = (item) => {
     const img = mode === 'icon' ? item.icon : item.image;
     return (
       <>
-        <span className={styles.itemImage}>
-          <LazyImage
-            width={100}
-            height={50}
-            alt={item.label || item?.link_text}
-            src={imagePrettyUrl(img)}
-          />
-        </span>
-        <div className={styles.content}>
-          <span className={styles.label}>{item.label}</span>
-          {item.subtitle && <span className={styles.subtitle}>{item.subtitle}</span>}
-        </div>
+        <LazyImage
+          width={100}
+          height={50}
+          alt={item.label || item?.link_text}
+          src={imagePrettyUrl(img)}
+        />
+        <label>{item.label}</label>
+        {item.subtitle && <span>{item.subtitle}</span>}
       </>
     );
   };
 
+  const getStyle = () => {
+    if (module.style) {
+      return themeStyles[module.style] || styles[module.style];
+    }
+
+    return ``;
+  };
+
   return (
-    <div className={`${styles.spotlightsContainer} ${module.style ? styles[module.style] : ''}`}>
+    <div className={`${styles.spotlightsContainer} ${getStyle()}`}>
       {show_read_more === '1' && (
-        <div
-          className={styles.spotlightstext}
-          dangerouslySetInnerHTML={{ __html: read_more_text }}
-        />
+        <div className="spotlightstext" dangerouslySetInnerHTML={{ __html: read_more_text }} />
       )}
-      <ul className={styles[mode]}>
+      <ul>
         {items.map((item) => (
-          <li key={keygen()} className={styles.spotlightItem}>
+          <li key={keygen()}>
             {item.link.type === 'external' ? (
               <a
                 href={item.link.value}
@@ -66,39 +68,37 @@ const Spotlights = ({ module }) => {
               </Link>
             )}
 
-            {mode === 'image_text' && (
-              <div className={styles.body}>
-                <div className={styles.text} dangerouslySetInnerHTML={{ __html: item.text }} />
-                {item.link.value && item.link.type === 'external' ? (
-                  <a
-                    href={item.link.value}
-                    title={item.label}
-                    target="_blank"
-                    rel="noreferrer"
-                    className={`${styles.readMore} spotlights-gtm`}
-                  >
-                    {item.link_text ? item.link_text : 'Read More'}
-                    <GrFormNextLink />
-                  </a>
-                ) : (
-                  <>
-                    {item.link.value && (
-                      <Button
-                        btnText={item.link_text ? item.link_text : 'Read More'}
-                        invertColors
-                        className={styles.readMore}
-                        isAnchorLink
-                        isInternalLink={item.link.type !== 'external'}
-                        targetBlank={item.link.type === 'external'}
-                        to={item.link.value}
-                        primaryColor={false}
-                        gtmClass="spotlights-gtm btn-cta"
-                      />
-                    )}
-                  </>
-                )}
-              </div>
-            )}
+            {mode === 'image_text' &&
+              (item.link.value ? (
+                <div>
+                  <div dangerouslySetInnerHTML={{ __html: item.text }} />
+                  {item.link.type === 'external' ? (
+                    <a
+                      href={item.link.value}
+                      title={item.label}
+                      target="_blank"
+                      rel="noreferrer"
+                      className="spotlights-gtm"
+                    >
+                      {item.link_text ? item.link_text : 'Read More'}
+                      <GrFormNextLink />
+                    </a>
+                  ) : (
+                    <Button
+                      btnText={item.link_text ? item.link_text : 'Read More'}
+                      invertColors
+                      isAnchorLink
+                      isInternalLink={item.link.type !== 'external'}
+                      targetBlank={item.link.type === 'external'}
+                      to={item.link.value}
+                      primaryColor={false}
+                      gtmClass="spotlights-gtm btn-cta"
+                    />
+                  )}
+                </div>
+              ) : (
+                <div dangerouslySetInnerHTML={{ __html: item.text }} />
+              ))}
           </li>
         ))}
       </ul>
@@ -106,6 +106,8 @@ const Spotlights = ({ module }) => {
   );
 };
 Spotlights.propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
+  themeStyles: PropTypes.object,
   module: PropTypes.shape({
     style: PropTypes.string,
     mode: PropTypes.oneOf(['image', 'icon', 'image_text']).isRequired,

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

@@ -2,6 +2,7 @@
   margin: 0 auto;
   width: 100%;
   max-width: var(--main-container-max);
+
   ul {
     display: grid;
     grid-template-columns: repeat(1, 1fr);
@@ -15,58 +16,45 @@
       column-gap: 1.6rem;
     }
     li {
-      background-color: white;
-      border: 1px solid #eee;
+      text-align: center;
+      background-color: var(--color-9);
+      border: none;
       margin-bottom: 1rem;
+      padding: 1.5rem;
+
       @include min(desktop) {
         margin-bottom: 1.6rem;
       }
+
       @include flex-direction(column);
-      span {
-        display: block;
-      }
-      .itemImage {
-        width: 100%;
-        height: 15rem;
-        img {
-          width: auto;
-          height: 100%;
-          object-fit: cover;
-        }
+
+      img {
+        margin: 0 auto;
       }
 
-      .content {
-        padding: 1rem;
-        .label {
-          font-weight: 700;
-          font-size: 2rem;
-          color: black;
+      > a {
+        @include flex-direction(column);
+        color: #000;
+        font-size: 2rem;
+        font-weight: 700;  
+
+        label {
+          cursor: pointer;
         }
       }
 
-      .body {
-        padding: 0 1rem 1rem 1rem;
+      span {
+        display: block;
       }
-      .text {
+
+      > div {
         font-size: 1.4rem;
         color: #777;
       }
-      .readMore {
-        color: blue;
-        font-size: 1.4rem;
-        @include flex-direction(row);
-        @include flex-align(center, flex-end);
-        margin: 1rem 0 0 0;
-        svg * {
-          color: blue;
-          stroke: blue;
-        }
+
+      svg {
+        display: none;
       }
     }
   }
 }
-.spotlightstext {
-  width: 100%;
-  margin: 2rem 0;
-  font-size: 1.6rem;
-}

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

@@ -9,13 +9,11 @@ describe('Spotlights Component', () => {
   test('render', () => {
     const { container, getByText } = render(<Spotlights module={getSpotlightItems(4)} />);
     expect(container).toBeTruthy();
-    expect(container.querySelector('div.spotlightstext')).toBeTruthy();
-    expect(container.querySelector('ul.image_text')).toBeTruthy();
-    expect(container.querySelectorAll('li.spotlightItem')).toHaveLength(4);
-    expect(container.querySelectorAll('div.text')).toHaveLength(4);
-    expect(container.querySelectorAll('.readMore')).toHaveLength(4);
-    expect(container.querySelectorAll('.label')).toHaveLength(4);
-    expect(container.querySelectorAll('.itemImage')).toHaveLength(4);
+    expect(container.querySelector('ul')).toBeTruthy();
+    expect(container.querySelectorAll('li')).toHaveLength(4);
+    expect(container.querySelectorAll('label')).toHaveLength(4);
+    // For images lazy loaded
+    expect(container.querySelectorAll('noscript')).toHaveLength(4);
     expect(getByText('read more text')).toBeTruthy();
     expect(getByText('html text 4')).toBeTruthy();
   });
@@ -29,20 +27,20 @@ describe('Spotlights Component', () => {
   test('image mode', () => {
     const { container } = render(<Spotlights module={getSpotlightItems(3, 'image')} />);
     expect(container).toBeTruthy();
-    expect(container.querySelector('ul.image')).toBeTruthy();
+    expect(container.querySelector('ul')).toBeTruthy();
     expect(container.querySelectorAll('p.text')).toHaveLength(0);
-    expect(container.querySelectorAll('.readMore')).toHaveLength(0);
-    expect(container.querySelectorAll('.label')).toHaveLength(3);
-    expect(container.querySelectorAll('.itemImage')).toHaveLength(3);
+    expect(container.querySelectorAll('label')).toHaveLength(3);
+    // For images lazy loaded
+    expect(container.querySelectorAll('noscript')).toHaveLength(3);
   });
   test('icon mode', () => {
     const { container } = render(<Spotlights module={getSpotlightItems(6, 'icon')} />);
     expect(container).toBeTruthy();
-    expect(container.querySelector('ul.icon')).toBeTruthy();
+    expect(container.querySelector('ul')).toBeTruthy();
     expect(container.querySelectorAll('p.text')).toHaveLength(0);
-    expect(container.querySelectorAll('.readMore')).toHaveLength(0);
-    expect(container.querySelectorAll('.label')).toHaveLength(6);
-    expect(container.querySelectorAll('.itemImage')).toHaveLength(6);
+    expect(container.querySelectorAll('label')).toHaveLength(6);
+    // For images lazy loaded
+    expect(container.querySelectorAll('noscript')).toHaveLength(6);
   });
 });
 afterEach(() => {