gatsby-core-theme 2.0.1 → 2.0.2

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [2.0.2](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v2.0.1...v2.0.2) (2021-12-17)
+
+
+### Bug Fixes
+
+* added lazyload for starrating ([34a3bce](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/34a3bce70bde1e9364f4c5aba14845d19d39664e))
+* content iframe lazy ([413f83d](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/413f83d70eb05aa514f003e450afce04366537d5))
+* tests ([c56a1c0](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/c56a1c0168247d25f8445f6b9ed8102c6bae8c08))
+
+
+* Merge branch 'master' of git.ilcd.rocks:team-floyd/themes/gatsby-themes ([4c1f4f3](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/4c1f4f3c5f366cd57245ca2ef9bb5ec603d13e97))
+
 ## [2.0.1](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v2.0.0...v2.0.1) (2021-12-16)
 
 

package/package.json

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

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

@@ -4,13 +4,18 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import parse from 'html-react-parser';
 
+import loadable from '@loadable/component';
 import LazyImage from '~hooks/lazy-image';
 import { parseCss } from '~helpers/css-parser';
-
 import styles from './content.module.scss';
 
 const Content = ({ module, pageContext = null }) => {
   const replaceMedia = (node) => {
+    if (node.name === 'iframe') {
+      const Iframe = loadable(() => import('gatsby-core-theme/src/components/atoms/iframe'));
+      return <Iframe src={node.attribs.src} />;
+    }
+
     if (node.name === 'img') {
       let stylesClass = null;
       const classes = node.attribs.class;

package/src/components/molecules/star-rating/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
+import LazyLoad from 'react-lazyload';
 import styles from './star-rating.module.scss';
 import keygen from '~helpers/keygen';
 import { getRating } from '~helpers/rating';
@@ -33,7 +33,11 @@ const StarRating = ({ numOfStars, rating, halfStars = true }) => {
     }
     return output;
   };
-  return <div className={styles.starRatingContainer}>{renderFarm()}</div>;
+  return (
+    <div className={styles.starRatingContainer}>
+      <LazyLoad>{renderFarm()}</LazyLoad>
+    </div>
+  );
 };
 
 StarRating.propTypes = {

package/src/components/molecules/star-rating/star-rating.test.js

@@ -1,16 +1,15 @@
 import React from 'react';
-import { render, cleanup } from '@testing-library/react';
+import { render, cleanup, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
 import StarRating from '.';
 
 describe('StarRating Component', () => {
-  test('render container with lazyload', () => {
+  test('render container with lazyload', async () => {
     const { container } = render(<StarRating numOfStars={10} rating={6.5} />);
-
-    expect(container.querySelectorAll('.fullStar')).toHaveLength(6);
-    expect(container.querySelectorAll('.halfStar')).toHaveLength(1);
-    expect(container.querySelectorAll('.emptyStar')).toHaveLength(3);
+    await waitFor(() => {
+      expect(container.querySelectorAll('.lazyload-placeholder')).toHaveLength(1);
+    });
   });
 });
 afterEach(() => {