gatsby-core-theme 3.0.0 → 4.0.0

package/CHANGELOG.md

@@ -1,3 +1,62 @@
+# [4.0.0](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v3.0.0...v4.0.0) (2022-02-21)
+
+
+### Bug Fixes
+
+* add global variable for pagination border ([6046cad](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/6046cad5a846f41220e3a6a7cbf5105c04d2f9a1))
+* added custom styles ([9d4f51c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/9d4f51cf96fba24b50b60dce92565c86b9f21334))
+* fix conflicts ([b5fb9c6](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/b5fb9c6972488ece497a2d5b50a63d7799f63358))
+* fix unit testing ([66f57d3](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/66f57d3d4e8192eeb72f852d9834e0d58077a48a))
+* fix unit testing ([88abd13](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/88abd1380c574cadd4c064580e458a862da71590))
+* fix unit testing ([0497042](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/0497042d8dc9aadae5f0d49e34ab8d1b3fa0663e))
+* fixed prelive path condition ([b7bf68f](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/b7bf68fc29de038bf23988d0a16eca3ef5ef9f52))
+* fixed unit testing ([8837446](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/88374469c79e64b7e9f04a1ab3c18bc011adc99f))
+* improve test for cookie and lazy ([7cc8a7d](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/7cc8a7da3bc8ffcaffb3b7326eecc0606c648f8c))
+* improve unit testing ([0fbf8fc](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/0fbf8fcd9e7a1df4d67bfc8e1b82eb433975850c))
+* make unit testing ([7938019](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/793801915c7ccd835ca1976b83824416b86b8126))
+* spotlight tests ([13f617c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/13f617c25ce7a2df84aec7acda9783c63890f59e))
+
+
+### Code Refactoring
+
+* add variables to pipeline ([3c7b842](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/3c7b8422769ffbc4196fc01770e2fd6df8f29923))
+* changes to variables ([3b5a5a3](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/3b5a5a31a9de8430e611615b885c387b0f2551b9))
+* cleaning up spotlights module ([9b8c181](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/9b8c181311b0dbd5cee0748e239b6ea96c713dea))
+* merge master to branch ([c4de93c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/c4de93c2151a1f681bc7b93515c3e0e7ea606185))
+* remove some unneeded components ([d29df5d](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d29df5d0d112ed70fd56da3c5d749daf8e3c9008))
+* remove test data ([8e3c0d6](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/8e3c0d60652e6a9f9b8541cccebc107c2d14a33d))
+* remove unneeded check ([8007c96](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/8007c967a82f5c216bc9196e35b67c1372e882a5))
+* remove unused pipeline ([f4ba474](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/f4ba474b9aa4bda20f1dae293888ee6869823023))
+* test new pipeline ([afbda7c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/afbda7c3885959cebb2a3e1194dbad352b96a50d))
+* test new pipeline ([74b1667](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/74b1667773a1bbf68e221dc9d990375b4efd61d1))
+* test new pipeline ([0070134](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/0070134d06fc8ef0ab8bb59dd82ff9a9a8bbf41f))
+* test new pipeline ([8e4a07f](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/8e4a07f910753d911b02b8e71d01f357ac98b3d0))
+* test new pipeline ([918dede](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/918dede9f7bcac0dbc89d8a01797765732039b90))
+* test new pipeline ([38f1572](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/38f15727f255602e46fad0deef41a80a07b2b5e8))
+* update getPageImage conditionals for readability ([3026c02](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/3026c02141ec1eb84e4347309571fa22fcf258c4))
+* update img alt tags ([234ae5e](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/234ae5eb892fc437197b79393508da69bc5b768e))
+* update schema publisher logo check ([9cffb56](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/9cffb5661157b3b7e8b549682b72628f4ce3aa04))
+* update tracker pages pageImage generation ([6c6c86f](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/6c6c86f2eaab60d580f05d9a1c79e19ff1523adf))
+
+
+### Config
+
+* increased threshold ([ef1c310](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/ef1c31023312841b11af983dab5a5a189124e06a))
+
+
+* Merge branch 'tm-2624-spotlight-custom-styles' into 'master' ([18d168b](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/18d168befd09fd279bc4a0e775f6a230df303fa0))
+* Merge branch 'tm-2738-trackers-page-image' into 'master' ([cfc1fb4](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/cfc1fb413ca4350e2b9b73f72b58e688966eb108))
+* Merge branch 'tm-2715-update-img-alt-tags' into 'master' ([fbbbad6](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/fbbbad60e6abc08cfc9c971519023177bbb61ad1))
+* Merge branch 'master' into 'tm-2715-update-img-alt-tags' ([b27f85f](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/b27f85faeb6e843a0d12733635c1524239176b85))
+* Merge branch 'tm-2716-html-cleanup' into 'master' ([83ff1de](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/83ff1de24d90207235833f43093c58edb519d0c4))
+* Merge branch 'master' into 'tm-2715-update-img-alt-tags' ([ab98ebd](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/ab98ebd2ac7a220b4dcaa54ff87d68c1d23529c8))
+* Merge branch 'tm-2706-custom-demo-deployment' into 'master' ([006e13d](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/006e13d08f2bb435e99fb35f1bfec76f3f0c2590))
+* Merge branch 'master' into tm-2706-custom-demo-deployment ([eb2483d](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/eb2483d76b494627555568ee2213ea7b8c6264a7))
+* Merge branch 'tm-2699-unit-testing' into 'master' ([e36d06d](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/e36d06d8cd96bb92468047c319cb467ecdbd9980))
+* Merge branch 'tm-2681-canary-tokens' into 'master' ([d70add6](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d70add68ba2ba599f6e44d6686f108c68490168c))
+* Merge branch 'tm-2705-gatsby-deployment-refactor' into 'master' ([d8dbeb2](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d8dbeb238502552d90e7092bca277a3f8873104a))
+* Merge branch 'master' into tm-2705-gatsby-deployment-refactor ([2a11b10](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/2a11b1015cf497661cc05ff3eb447921236fe0cc))
+
 # [3.0.0](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v2.2.6...v3.0.0) (2022-02-08)
 
 

package/__mocks__/gatsby.js

@@ -1,12 +1,23 @@
-const React = require('react')
-const gatsby = jest.requireActual('gatsby')
+const React = require('react');
+
+const gatsby = jest.requireActual('gatsby');
 
 module.exports = {
   ...gatsby,
   graphql: jest.fn(),
   Link: jest.fn().mockImplementation(
     // these props are invalid for an `a` tag
-    ({ activeClassName, activeStyle, getProps, innerRef, partiallyActive, ref, replace, to, ...rest }) =>
+    ({
+      activeClassName,
+      activeStyle,
+      getProps,
+      innerRef,
+      partiallyActive,
+      ref,
+      replace,
+      to,
+      ...rest
+    }) =>
       React.createElement('a', {
         ...rest,
         href: to,
@@ -14,4 +25,5 @@ module.exports = {
   ),
   StaticQuery: jest.fn(),
   useStaticQuery: jest.fn(),
-}
+  navigate: jest.fn(),
+};

package/gatsby-node.esm.js

@@ -270,6 +270,7 @@ exports.createPages = async ({ actions: { createPage } }, themeOptions) => {
         component: require.resolve('./src/components/app.js'),
         context: {
           page: trackerPageObject,
+          siteInfo,
           provider,
           isTracker: true,
         },
@@ -299,7 +300,12 @@ exports.createPages = async ({ actions: { createPage } }, themeOptions) => {
           createPage({
             path: trackerPath,
             component: require.resolve('./src/components/app.js'),
-            context: { page: trackerPageObject, operator, isTracker: true },
+            context: {
+              page: trackerPageObject,
+              siteInfo,
+              operator,
+              isTracker: true,
+            },
           });
         }
       });

package/jest.config.js

@@ -20,6 +20,13 @@ module.exports = {
     'data.json': '<rootDir>/__mocks__/search-data.json',
   },
   // testPathIgnorePatterns: [`node_modules`, `\\.cache`, `<rootDir>.*/public`],
+  coveragePathIgnorePatterns: [
+    'tests/helpers',
+    'src/components/organisms/search',
+    'src/components/molecules/search',
+    'src/components/app.js',
+    // ''
+  ],
   transformIgnorePatterns: [`node_modules/(?!(gatsby)/)`],
   globals: {
     __PATH_PREFIX__: ``,
@@ -29,7 +36,7 @@ module.exports = {
   collectCoverage: true,
   coverageThreshold: {
     global: {
-      statements: 70,
+      statements: 80,
     },
   },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "Gatsby Theme NPM Package",
   "main": "index.js",
   "GATSBY_RECAPTCHA_SITEKEY": "6LfoyvMUAAAAAO4nl_MQnqHb4XdHxEiu5cXgIqeB",

package/src/components/app.js

@@ -8,7 +8,7 @@ import Body from '~pages/body';
 import Head from '~organisms/head';
 
 const App = ({ pageContext }) => {
-  const { translations, isTracker, isPreview } = pageContext;
+  const { translations = {}, isTracker, isPreview } = pageContext;
   const [previewContext, setPreviewContext] = useState({});
   const [isLoading, setIsLoading] = useState({});
 
@@ -33,26 +33,10 @@ const App = ({ pageContext }) => {
         window.location = `${window.location.origin}/preview?path=/`;
       }
       getData(searchParams);
-      // let { hi, bye } = await import('./say.js');
-      // getPreview(pageContext.siteName, searchParams.get('path') || '/', pageContext).then(
-      //   (previewResponse) => {
-      //     setPreviewContext(previewResponse);
-      //     setIsLoading(false);
-      //   }
-      // );
-
       globalHistory.listen(({ location }) => {
         setIsLoading(true);
 
         getData(null, location.search.replace('?path=', ''));
-        // getPreview(pageContext.siteName, location.search.replace('?path=', ''), pageContext)
-        //   .then((previewResponse) => {
-        //     setPreviewContext(previewResponse);
-        //     setIsLoading(false);
-        //   })
-        //   .catch(() => {
-        //     alert('failed to load..');
-        //   });
       });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps

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

@@ -10,30 +10,37 @@ describe('Author Component', () => {
       <Author
         name="mohsen"
         prefix="by"
+        authorProfile="/author"
         link="https://twitter.com/name"
         icon={<i className="twitter" />}
       />
     );
     expect(container.querySelector('.authorInfo')).toBeTruthy();
-    const info = getByText('by mohsen');
+    const info = getByText('mohsen');
     expect(info).toBeTruthy();
     expect(container.querySelector('a').getAttribute('href')).toEqual('https://twitter.com/name');
     expect(container.querySelector('i.twitter')).toBeTruthy();
   });
 
   test('without link and icon', () => {
-    const { container, getByText } = render(<Author name="mohsen" prefix="with" />);
+    const { container } = render(<Author name="mohsen" />);
     expect(container.querySelector('.authorInfo')).toBeTruthy();
-    const info = getByText('with mohsen');
-    expect(info).toBeTruthy();
     expect(container.querySelector('a')).toBeFalsy();
   });
 
   test('with date', () => {
-    const { container, getByText } = render(<Author name="mohsen" prefix="with" date="2020-04-24 15:37:42" />);
+    const { container, getByText } = render(
+      <Author
+        name="mohsen"
+        icon={<i className="twitter" />}
+        prefix="with"
+        date="2020-04-24 15:37:42"
+      />
+    );
     expect(container.querySelector('.date')).toBeTruthy();
     const info = getByText('with mohsen');
     expect(info).toBeTruthy();
+    expect(container.querySelector('i')).toBeTruthy();
     expect(container.querySelector('a')).toBeFalsy();
   });
 });

package/src/components/atoms/author-box/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-danger */
 import React, { useContext } from 'react';
 import { FaInstagram, FaFacebookSquare, FaTwitter, FaLinkedin } from 'react-icons/fa';
 import PropTypes from 'prop-types';
@@ -19,17 +20,14 @@ export default function AuthorBox({ author }) {
     <div className={styles.container}>
       <div className={styles.innerContainer}>
         <div className={styles.information}>
-          <div>
-            {' '}
-            {author.image_object && (
-              <LazyImage
-                src={imagePrettyUrl(author.image_object.filename)}
-                alt={author.image_alt}
-                width={author.image_object?.width}
-                height={author.image_object?.height}
-              />
-            )}
-          </div>
+          {author.image_object && (
+            <LazyImage
+              src={imagePrettyUrl(author.image_object.filename)}
+              alt={author.image_alt}
+              width={author.image_object?.width}
+              height={author.image_object?.height}
+            />
+          )}
           <span className={styles.name}>{author.name}</span>
           <p className={styles.title}>{author.author_title}</p>
         </div>

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

@@ -20,6 +20,14 @@ describe('Show Breadcrumbs in a page', () => {
     const { container } = render(<Breadcrumbs page={page} />);
     expect(container).toBeEmptyDOMElement();
   });
+  test('Breadcrumb when we dont have link', () => {
+    const page = {
+      ...getPageData(),
+      breadcrumbs: [{ label: 'Sport', path: null }],
+    };
+    const { container } = render(<Breadcrumbs page={page} />);
+    expect(container.querySelectorAll('a')).toHaveLength(1);
+  });
   test('Vanity label', () => {
     const page = {
       vanity_label: 'Alternative title',

package/src/components/atoms/carousel/pagination-item/pagination-item.test.js

@@ -9,18 +9,33 @@ const currentSlide = 3;
 
 describe('Pagination Item Component', () => {
   test('render pagination item', () => {
-    const { container } = render(<PaginationItem slideIndex={currentSlide} type="dots" totalSlides={5} />);
+    const { container } = render(
+      <PaginationItem slideIndex={currentSlide} type="dots" totalSlides={5} />
+    );
     expect(container.querySelectorAll('button.paginationItem')).toHaveLength(5);
     expect(container.querySelectorAll('button.paginationItem.active')).toHaveLength(1);
   });
   test('on click', () => {
     const paginationClick = jest.fn();
 
-    const { container } = render(<PaginationItem slideIndex={currentSlide} type="dots" totalSlides={5} paginationHandler={paginationClick} />);
+    const { container } = render(
+      <PaginationItem
+        slideIndex={currentSlide}
+        type="dots"
+        totalSlides={5}
+        paginationHandler={paginationClick}
+      />
+    );
     const paginationItemBtn = container.querySelector('button.paginationItem.active');
     fireEvent.click(paginationItemBtn);
+    fireEvent.keyDown(paginationItemBtn);
     expect(paginationClick).toHaveBeenCalled();
-    expect(paginationClick).toHaveBeenCalledWith(3)
+    expect(paginationClick).toHaveBeenCalledWith(3);
+  });
+
+  test('render empty', () => {
+    const { container } = render(<PaginationItem totalSlides={0} />);
+    expect(container.querySelector('button')).toBeFalsy();
   });
 });
 afterEach(() => {

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

@@ -27,6 +27,16 @@ describe('Collapse Component', () => {
     // jest does not render the component, hence testing the actual layout cannot be done due to the collapse using scrollHeight.
   });
 
+  test('Open collapse with different initial height', () => {
+    const { container } = render(
+      <Collapse buttonText="Open" maxHeight={20} contentText="Content Text" />
+    );
+
+    const button = container.querySelector('button');
+    fireEvent.click(button);
+    expect(button.classList.contains('active')).toBeFalsy();
+  });
+
   test('Only Mobile', () => {
     const { container } = render(
       <Collapse buttonText="Open" contentText="Content Text" onlyMobile />

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

@@ -10,8 +10,9 @@ const Collapse = ({
   onlyMobile = false,
   onlyDesktop = false,
   initOpen = false,
+  maxHeight = 0,
 }) => {
-  const [maxHeightStyle, setMaxHeightStyle] = useState(0);
+  const [maxHeightStyle, setMaxHeightStyle] = useState(maxHeight);
   const contentRef = useRef(React.createRef());
   let showButton = true;
   const isMobile = useIsMobile();
@@ -68,6 +69,7 @@ Collapse.propTypes = {
   onlyMobile: PropTypes.bool,
   onlyDesktop: PropTypes.bool,
   initOpen: PropTypes.bool,
+  maxHeight: PropTypes.number,
 };
 
 export default Collapse;

package/src/components/atoms/content-box/content-box.test.js

@@ -8,20 +8,17 @@ const info = [
   {
     title: 'Fully licensed casinos',
     image: '../../../images/content-1.png',
-    text:
-      'We only list and review fully licensed and legally operating casinos so you can be sure where you end up playing will be safe and secure.',
+    text: 'We only list and review fully licensed and legally operating casinos so you can be sure where you end up playing will be safe and secure.',
   },
   {
     title: 'Get the most for your money',
     image: '../../../images/content-2.png',
-    text:
-      'We list all the features the Casinos have to offer so you can make an educated decision about where to place your money for maximum gains!',
+    text: 'We list all the features the Casinos have to offer so you can make an educated decision about where to place your money for maximum gains!',
   },
   {
     title: 'Authenticly written articles',
     image: '../../../images/content-3.png',
-    text:
-      'All our Authors are professional writers with industry know-how, so you can depend on what we say is the truth!',
+    text: 'All our Authors are professional writers with industry know-how, so you can depend on what we say is the truth!',
   },
 ];
 
@@ -32,6 +29,12 @@ describe('ContentBox Component', () => {
     expect(getByText('Authenticly written articles')).toBeTruthy();
     expect(container.querySelectorAll('.icon')).toHaveLength(3);
   });
+
+  test('render without props', () => {
+    const { container } = render(<ContentBox data={[]} />);
+
+    expect(container.querySelector('li')).toBeFalsy();
+  });
 });
 afterEach(() => {
   cleanup();

package/src/components/atoms/content-box/index.js

@@ -8,19 +8,20 @@ import styles from './content-box.module.scss';
 const ContentBox = ({ data = [] }) => (
   <div className={styles.contentBoxContainer}>
     <ul className={styles.contentBoxList}>
-      {data.map((item) => (
-        <li key={keygen()}>
-          <div className={styles.item}>
-            <div className={styles.icon}>
-              <LazyImage alt={item.title} src={item.image} />
+      {data &&
+        data.map((item) => (
+          <li key={keygen()}>
+            <div className={styles.item}>
+              <div className={styles.icon}>
+                <LazyImage alt={item.title} src={item.image} />
+              </div>
+              <div className={styles.body}>
+                <div className="h2">{item.title}</div>
+                <p>{item.text}</p>
+              </div>
             </div>
-            <div className={styles.body}>
-              <div className="h2">{item.title}</div>
-              <p>{item.text}</p>
-            </div>
-          </div>
-        </li>
-      ))}
+          </li>
+        ))}
     </ul>
   </div>
 );

package/src/components/atoms/custom-select/index.js

@@ -35,39 +35,40 @@ const CustomSelect = ({
         onClick={showDropdown}
         data-id="select-button"
       >
-        {selectedOption[itemsLabel]}
+        {selectedOption && selectedOption[itemsLabel]}
       </button>
       <ol ref={selectList} className={styles.list} data-id="select-list">
-        {options.map((item) => {
-          if (item[itemsValue] === selectedOption[itemsValue]) return null;
-          const currentItem = item;
-          if (currentItem[itemsValue] === undefined) {
-            currentItem[itemsValue] = 'id';
-          }
-          if (currentItem.type === undefined) {
-            currentItem.type = 'type';
-          }
-          return (
-            <li
-              className={styles.selectListItem}
-              key={keygen()}
-              data-value={currentItem[itemsValue]}
-              data-type={currentItem.type}
-            >
-              <button
-                type="button"
-                className="custom-select-gtm btn-cta"
-                onClick={() => {
-                  onClick(currentItem[itemsValue], currentItem[itemsLabel], currentItem.type);
-                  setSelectedOption(currentItem);
-                  showDropdown();
-                }}
+        {options &&
+          options.map((item) => {
+            if (item[itemsValue] === selectedOption[itemsValue]) return null;
+            const currentItem = item;
+            if (currentItem[itemsValue] === undefined) {
+              currentItem[itemsValue] = 'id';
+            }
+            if (currentItem.type === undefined) {
+              currentItem.type = 'type';
+            }
+            return (
+              <li
+                className={styles.selectListItem}
+                key={keygen()}
+                data-value={currentItem[itemsValue]}
+                data-type={currentItem.type}
               >
-                {currentItem[itemsLabel]}
-              </button>
-            </li>
-          );
-        })}
+                <button
+                  type="button"
+                  className="custom-select-gtm btn-cta"
+                  onClick={() => {
+                    onClick(currentItem[itemsValue], currentItem[itemsLabel], currentItem.type);
+                    setSelectedOption(currentItem);
+                    showDropdown();
+                  }}
+                >
+                  {currentItem[itemsLabel]}
+                </button>
+              </li>
+            );
+          })}
       </ol>
     </div>
   );

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

@@ -1,5 +1,6 @@
+/* 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';
 
@@ -17,6 +18,20 @@ describe('Disclaimer Component', () => {
     const { container } = render(<Disclaimer image={dmcaImg} />);
     expect(container.querySelectorAll('a')).toHaveLength(1);
     expect(container.querySelectorAll('img')).toHaveLength(1);
+    const ahref = container.querySelector('a');
+    // eslint-disable-next-line no-lone-blocks
+    {
+      ahref &&
+        fireEvent.change(ahref, {
+          target: {
+            href: '//www.dmca.com/Protection/Status.aspx?ID=9e466e76-827d-4247-ac51-4eb75b227301',
+          },
+        });
+    }
+    // eslint-disable-next-line no-lone-blocks
+    {
+      ahref && fireEvent.click(container.querySelector('a'));
+    }
   });
 });
 afterEach(() => {

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

@@ -0,0 +1,3 @@
+.iframeContainer{
+    display: flex;
+}

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

@@ -22,6 +22,12 @@ describe('Iframe Component', () => {
     expect(iframe.getAttribute('style')).toEqual('width: 100%; min-height: 10rem; display: block;');
     expect(iframe.getAttribute('src')).toEqual('http://google.com');
   });
+
+  test('without data', () => {
+    const { container } = render(<Iframe src="http://google.com" />);
+
+    expect(container.querySelector('iframe')).toBeFalsy();
+  });
 });
 afterEach(() => {
   cleanup();

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

@@ -5,13 +5,13 @@ import '@testing-library/jest-dom/extend-expect';
 import Image from '.';
 
 describe('Image Component', () => {
+  const imageModule = {
+    alignment: 'align_right',
+    alt: 'image alt',
+    title: 'title',
+    value: 'image.png',
+  };
   test('render', () => {
-    const imageModule = {
-      alignment: 'align_right',
-      alt: 'image alt',
-      title: 'title',
-      value: 'image.png',
-    };
     const { container } = render(<Image module={imageModule} />);
     expect(container).toBeTruthy();
 
@@ -19,6 +19,19 @@ describe('Image Component', () => {
     // expect(container.querySelector('img')).toBeFalsy();
     // expect(container.querySelector('div.lazyload-placeholder')).toBeTruthy();
   });
+
+  test('render without data', () => {
+    const { container } = render(<Image />);
+
+    expect(container.querySelector('img')).toBeFalsy();
+  });
+
+  test('render without alt ', () => {
+    delete imageModule.alt;
+    const { container } = render(<Image module={imageModule} />);
+
+    expect(container).toBeTruthy();
+  });
 });
 afterEach(() => {
   cleanup();

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

@@ -6,19 +6,17 @@ import { imagePrettyUrl } from '~helpers/getters';
 import styles from './image.module.scss';
 
 const Image = ({ module = {} }) => {
-  const { title, value, alt, alignment } = module;
+  const { title, value, alt = 'missing alt', alignment } = module;
 
   if (!value) return <></>;
 
   return (
-    <div>
       <LazyImage
         src={imagePrettyUrl(value)}
-        alt={alt ? alt : 'missing alt'}
+        alt={alt || 'missing alt'}
         title={title && title}
         className={`${styles.imageModule} ${styles[alignment]}`}
       />
-    </div>
   );
 };
 

package/src/components/atoms/info-grid/index.js

@@ -4,18 +4,16 @@ import PropTypes from 'prop-types';
 import styles from './info-grid.module.scss';
 import keygen from '~helpers/keygen';
 
-const InfoGrid = ({ data }) => {
-  return (
-    <div className={styles.infoGridContainer}>
-      {data.map((row) => (
-        <div key={keygen()} className={styles.infoGridItem}>
-          <div className={styles.infoGridItemTitle}>{row.name}</div>
-          <div className={styles.infoGridItemValue}>{row.value}</div>
-        </div>
-      ))}
-    </div>
-  );
-};
+const InfoGrid = ({ data }) => (
+  <div className={styles.infoGridContainer}>
+    {data.map((row) => (
+      <div key={keygen()} className={styles.infoGridItem}>
+        <div className={styles.infoGridItemTitle}>{row.name}</div>
+        <div className={styles.infoGridItemValue}>{row.value}</div>
+      </div>
+    ))}
+  </div>
+);
 InfoGrid.propTypes = {
   data: PropTypes.arrayOf(PropTypes.shape({ name: PropTypes.string, value: PropTypes.string }))
     .isRequired,