@blaze-cms/react-page-builder 0.118.0-alpha.2 → 0.119.0-alpha.2

package/src/components/PasswordResetRequest/PasswordResetRequest.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import Input from '@blaze-react/input';
 import Button from '@blaze-react/button';
-import { useMutation } from 'react-apollo';
+import { useMutation } from '@apollo/client';
 import { useRouter } from 'next/router';
 import { checkIfLoggedIn, REQUEST_USER_PASSWORD_RESET_MUTATION } from '@blaze-cms/core-auth-ui';
 import { GRAPH_QL_ERROR } from '../../constants';

package/src/components/SearchFilter/SearchFilterContainer.js

@@ -1,6 +1,6 @@
 import React, { useState, useRef } from 'react';
 import { useRouter } from 'next/router';
-import { useQuery } from '@apollo/react-hooks';
+import { useQuery } from '@apollo/client';
 import PropTypes from 'prop-types';
 import { parseUrl, stringify } from 'query-string';
 import SearchFilter from './SearchFilter';

package/src/constants/index.js

@@ -194,10 +194,16 @@ const ALL_AZ_SORT = {
 
 const SCROLL_OFFSET = process.env.BLAZE_SCROLL_OFFSET || 50;
 
+const BANNER_LOADING = 'loading';
+const BANNER_EMPTY = 'empty';
+const BANNER_LOADED = 'loaded';
 const ANCHOR_TAG = 'a';
 const TARGET_BLANK = '_blank';
 
 export {
+  BANNER_LOADING,
+  BANNER_EMPTY,
+  BANNER_LOADED,
   BLANK_SPACE_UNICODE_STRING,
   BOLD_TAG,
   BUTTON,

package/src/helpers/build-props-query.js

@@ -1,7 +1,7 @@
 import { CATEGORY_ID, ID, PREHEADER_PROP, HEADLINE_PROP } from '../constants';
 
 const defaultProps = [ID, 'name'];
-const categoryProps = 'publishedListingPage{url}';
+const categoryProps = 'id publishedListingPage{id, url}';
 
 const checkProps = props =>
   !!(props && Object.keys(props).filter(prop => prop === CATEGORY_ID).length);
@@ -77,7 +77,7 @@ const getContentProps = (isContent, displayThumbnail) => {
   if (!isContent) return [];
 
   const props = ['url', 'sponsored', 'featured'];
-  if (displayThumbnail) props.push('image.url', 'image.data');
+  if (displayThumbnail) props.push('image.id', 'image.url', 'image.data');
 
   return props;
 };

package/src/hooks/use-get-entity-schema.js

@@ -1,4 +1,4 @@
-import { useQuery, useApolloClient } from '@apollo/react-hooks';
+import { useQuery, useApolloClient } from '@apollo/client';
 import { useState } from 'react';
 import { getEntitySchema } from '../application/query';
 import { ALL } from '../constants';

package/src/hooks/use-get-entity-schemas-as-obj.js

@@ -1,4 +1,4 @@
-import { useQuery } from '@apollo/react-hooks';
+import { useQuery } from '@apollo/client';
 import { getMultipleSchema } from '../application/query';
 
 function useGetEntitySchemasAsObj(identifiers, shouldSkip = false) {

package/src/hooks/use-get-image-id-from-relation.js

@@ -1,4 +1,4 @@
-import { useQuery } from '@apollo/react-hooks';
+import { useQuery } from '@apollo/client';
 import { generateSingleItemQuery } from '../application/query';
 
 function useGetImageIdFromRelation(id, imageRelation, actions, isUsingRelationImage, isPreview) {

package/src/hooks/use-get-images.js

@@ -1,4 +1,4 @@
-import { useQuery } from '@apollo/react-hooks';
+import { useQuery } from '@apollo/client';
 import { getFiles, getFileById } from '../application/query';
 
 function shouldSkip(id) {

package/src/hooks/use-get-single-entity-schema.js

@@ -1,4 +1,4 @@
-import { useQuery } from '@apollo/react-hooks';
+import { useQuery } from '@apollo/client';
 import { getSingleEntitySchema } from '../application/query';
 
 const useGetSingleEntitySchema = (id, skip = false) => {

package/tests/unit/src/components/Banner/AdSlotRender.test.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { render, fireEvent, waitFor } from '@testing-library/react';
+import AdSlotRender from '../../../../../src/components/Banner/AdSlotRender';
+
+jest.mock('react-dfp', () => {
+  const AdSlot = ({ onSlotRender }) => (
+    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+    <div
+      data-testid="adslot-test"
+      role="button"
+      onMouseLeave={() => onSlotRender({ event: { isEmpty: true } })}
+      onMouseOver={() => onSlotRender({ event: { isEmpty: false } })}
+    />
+  );
+  return { AdSlot };
+});
+
+const slotTestId = 'adslot-test';
+const sizeMapping = [
+  {
+    viewport: [970, 250],
+    sizes: [[970, 250], [970, 528]]
+  },
+  {
+    viewport: [320, 100],
+    sizes: [[320, 100]]
+  },
+  {
+    viewport: [728, 90],
+    sizes: [[320, 100]]
+  }
+];
+
+const defaultProps = {
+  shouldShowBanner: true,
+  sizeMapping,
+  sizeId: 'sizeId',
+  parsedAdunit: 'unit-name',
+  parsedSizes: [],
+  targetingArguments: {}
+};
+
+describe('Banner render component', () => {
+  it('should not render AdSlot if shouldShowBanner=false but should render styles and wrapper', () => {
+    const { asFragment, container, getByTestId } = render(
+      <AdSlotRender {...defaultProps} shouldShowBanner={false} />
+    );
+
+    expect(container.childNodes[0].nodeName).toEqual('STYLE');
+    expect(container.childNodes[1]).toHaveClass('ad-slot ad-slot-loading banner-sizeId');
+    expect(() => getByTestId(slotTestId)).toThrow();
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  describe('AdSlot loading', () => {
+    it('should render AdSlot', () => {
+      const { asFragment, container, getByTestId } = render(<AdSlotRender {...defaultProps} />);
+      expect(getByTestId('adslot-test')).toBeDefined();
+      expect(container.childNodes[1]).toHaveClass('ad-slot ad-slot-loading banner-sizeId');
+      expect(asFragment()).toMatchSnapshot();
+    });
+
+    it('should change class and remove styles after loaded events', async () => {
+      const { asFragment, container, getByTestId } = render(<AdSlotRender {...defaultProps} />);
+      const adSlot = getByTestId(slotTestId);
+
+      fireEvent.mouseOver(adSlot);
+      await waitFor(() =>
+        expect(container.childNodes[0]).toHaveClass('ad-slot ad-slot-loaded banner-sizeId')
+      );
+      expect(asFragment()).toMatchSnapshot();
+
+      fireEvent.mouseLeave(adSlot);
+      await waitFor(() =>
+        expect(container.childNodes[0]).toHaveClass('ad-slot ad-slot-empty banner-sizeId')
+      );
+      expect(asFragment()).toMatchSnapshot();
+    });
+  });
+});

package/tests/unit/src/components/Banner/Banner.test.js

@@ -2,7 +2,8 @@ import '@testing-library/jest-dom/extend-expect';
 import { render } from '@blaze-cms/tools/test-helpers/test-functions';
 import Banner from '../../../../../src/components/Banner/Banner';
 
-jest.mock('@apollo/react-hooks', () => ({
+jest.mock('@apollo/client', () => ({
+  ...jest.requireActual('@apollo/client'),
   useQuery: jest.fn(({ data, loading, error }) => ({ data, loading, error }))
 }));
 jest.mock('next/router', () => ({

package/tests/unit/src/components/Banner/BannerRender.test.js

@@ -0,0 +1,119 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { MockedProvider } from '@apollo/client/testing';
+import { render } from '@testing-library/react';
+import BannerRender from '../../../../../src/components/Banner/BannerRender';
+import { getAction, generateSingleItemQuery, getCount } from '../../../../../src/application/query';
+import {
+  BANNER_QUERY_PROPS,
+  COUNT_CONTENT_HIERARCHIES,
+  GET_BANNER,
+  PUBLISHED
+} from '../../../../../src/constants';
+
+const actionKey = 'getPublishedPage';
+const id = 'record id';
+const action = getAction(actionKey, 'id, name');
+const getEntityDataMock = {
+  request: {
+    query: action,
+    variables: {
+      id
+    }
+  },
+  result: {
+    data: {
+      [actionKey]: {
+        id,
+        name: 'record name'
+      }
+    }
+  }
+};
+
+const sizeId = 'sizeId';
+const sizes = [
+  {
+    width: 320,
+    height: 100,
+    viewports: [
+      {
+        width: 320,
+        height: 100
+      }
+    ]
+  }
+];
+const getBannerMock = {
+  request: {
+    query: generateSingleItemQuery(GET_BANNER, BANNER_QUERY_PROPS),
+    variables: { id: sizeId },
+    skip: false
+  },
+  result: {
+    data: {
+      entityData: {
+        sizes,
+        id,
+        __typename: 'Banner'
+      }
+    }
+  }
+};
+
+const getCountMock = {
+  request: {
+    query: getCount(COUNT_CONTENT_HIERARCHIES),
+    variables: {
+      where: {
+        parentId: id,
+        childEntity: {
+          _ilike: `${PUBLISHED}_%`
+        }
+      }
+    }
+  },
+  result: {
+    data: {
+      entityData: {
+        sizes,
+        id,
+        __typename: 'Banner'
+      }
+    }
+  }
+};
+
+const mocks = [getEntityDataMock, getBannerMock, getCountMock];
+
+const otherProps = { id };
+const defaultProps = {
+  parent: {},
+  asPath: 'path',
+  action,
+  actionKey,
+  adunit: '',
+  baseAdunit: '',
+  sizeId,
+  propsToDisplay: [],
+  entity: '',
+  targetings: '',
+  sizes: '',
+  cardBannerIndex: null,
+  ...otherProps
+};
+
+const setup = (props = defaultProps) =>
+  render(
+    <MockedProvider mocks={mocks}>
+      <BannerRender {...props} />
+    </MockedProvider>
+  );
+
+describe('Banner render component', () => {
+  it('should render', () => {
+    const { asFragment } = setup();
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/tests/unit/src/components/Banner/__snapshots__/AdSlotRender.test.js.snap

@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Banner render component AdSlot loading should change class and remove styles after loaded events 1`] = `
+<DocumentFragment>
+  <div
+    class="ad-slot ad-slot-loaded banner-sizeId"
+  >
+    <div
+      data-testid="adslot-test"
+      role="button"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Banner render component AdSlot loading should change class and remove styles after loaded events 2`] = `
+<DocumentFragment>
+  <div
+    class="ad-slot ad-slot-empty banner-sizeId"
+  >
+    <div
+      data-testid="adslot-test"
+      role="button"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Banner render component AdSlot loading should render AdSlot 1`] = `
+<DocumentFragment>
+  <style>
+    @media(min-width:320px){.banner-sizeId{min-height:100px;}@media(min-width:728px){.banner-sizeId{min-height:100px;}@media(min-width:970px){.banner-sizeId{min-height:250px;}
+  </style>
+  <div
+    class="ad-slot ad-slot-loading banner-sizeId"
+  >
+    <div
+      data-testid="adslot-test"
+      role="button"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Banner render component should not render AdSlot if shouldShowBanner=false but should render styles and wrapper 1`] = `
+<DocumentFragment>
+  <style>
+    @media(min-width:320px){.banner-sizeId{min-height:100px;}@media(min-width:728px){.banner-sizeId{min-height:100px;}@media(min-width:970px){.banner-sizeId{min-height:250px;}
+  </style>
+  <div
+    class="ad-slot ad-slot-loading banner-sizeId"
+  />
+</DocumentFragment>
+`;

package/tests/unit/src/components/Banner/__snapshots__/BannerRender.test.js.snap

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Banner render component should render 1`] = `
+<DocumentFragment>
+  <style />
+  <div
+    class="ad-slot ad-slot-loading banner-sizeId"
+  />
+</DocumentFragment>
+`;

package/tests/unit/src/components/Button.test.js

@@ -3,7 +3,8 @@ import { act, render } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import Button from '../../../../src/components/Button';
 
-jest.mock('react-apollo', () => ({
+jest.mock('@apollo/client', () => ({
+  ...jest.requireActual('@apollo/client'),
   useApolloClient: jest.fn(() => ({ resetStore: () => null }))
 }));
 

package/tests/unit/src/components/Card/CardRender.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import '@testing-library/jest-dom/extend-expect';
-import { MockedProvider } from '@apollo/react-testing';
+import { MockedProvider } from '@apollo/client/testing';
 import { render, act } from '@testing-library/react';
 import {
   CARD_RENDER_ENTITY_DATA_MOCK,

package/tests/unit/src/components/Card/__snapshots__/CardContainer.test.js.snap

@@ -3,16 +3,16 @@
 exports[`CardContainer component should render with carousel if option is enabled 1`] = `
 <DocumentFragment>
   <div
-    class="card-carousel relative gap-2"
+    class="cards-carousel"
   >
     <div
-      class="card-carousel__button-wrapper absolute left-0 h-full flex justify-center items-center z-10"
+      class="cards-carousel--left-button-wrapper"
     />
     <div
-      class="card-carousel__button-wrapper absolute right-0 h-full flex justify-center items-center z-10"
+      class="cards-carousel--right-button-wrapper"
     />
     <div
-      class="card-carousel__content card-carousel__content--items-per-row-1 flex flex-nowrap p-4 gap-4 overflow-x-scroll"
+      class="cards-carousel--content items-per-row-1"
     >
       <div
         class="card card--portrait"

package/tests/unit/src/components/Carousel/Carousel.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import '@testing-library/jest-dom/extend-expect';
-import { MockedProvider } from '@apollo/react-testing';
+import { MockedProvider } from '@apollo/client/testing';
 import { render, screen, waitFor } from '@testing-library/react';
 import { getFileById } from '../../../../../src/application/query';
 import Carousel from '../../../../../src/components/Carousel';

package/tests/unit/src/components/DataSummary/DataSummaryFactory.test.js

@@ -1,11 +1,12 @@
 import { render } from '@blaze-cms/tools/test-helpers/test-functions';
 import '@testing-library/jest-dom/extend-expect';
-import { useQuery } from '@apollo/react-hooks';
+import { useQuery } from '@apollo/client';
 import { DATA_SUMMARY_MOCK } from '../../../../helpers/mocks';
 
 import DataSummaryFactory from '../../../../../src/components/DataSummary/DataSummaryFactory';
 
-jest.mock('@apollo/react-hooks', () => ({
+jest.mock('@apollo/client', () => ({
+  ...jest.requireActual('@apollo/client'),
   useQuery: jest.fn()
 }));
 

package/tests/unit/src/components/EmailConfirm/EmailConfirm.test.js

@@ -3,7 +3,8 @@ import { render, act } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import EmailConfirm from '../../../../../src/components/EmailConfirm';
 
-jest.mock('react-apollo', () => ({
+jest.mock('@apollo/client', () => ({
+  ...jest.requireActual('@apollo/client'),
   useMutation: jest.fn(() => [variables => variables, { loading: false }])
 }));
 

package/tests/unit/src/components/Image/GlobalLightbox/GlobalLightbox.test.js

@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom/extend-expect';
-import { MockedProvider } from '@apollo/react-testing';
-import { render, act, screen } from '@testing-library/react';
+import { MockedProvider } from '@apollo/client/testing';
+import { render, act, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 import { Router } from 'react-router-dom';
 import { createMemoryHistory } from 'history';
@@ -10,6 +10,7 @@ import LIGHTBOX_MOCKS from './mocks';
 
 const [MOCK_WITH_DATA, MOCK_WITH_ERROR] = LIGHTBOX_MOCKS;
 
+const testId = 'globalLightboxImage';
 const credits = 'credits test';
 
 const mockProps = {
@@ -65,21 +66,24 @@ describe('GlobalLightbox component', () => {
   });
 
   it('should match snapshot', async () => {
-    const { asFragment } = await setupTest();
+    const { asFragment, getByTestId } = await setupTest();
+    await waitFor(() => getByTestId(testId));
     expect(asFragment()).toMatchSnapshot();
   });
 
   it('should not render caption if image does not have it', async () => {
     const { getByTestId } = await setupTest();
-    const image = await getByTestId('globalLightboxImage');
+    await waitFor(() => getByTestId(testId));
+    const image = await getByTestId(testId);
     expect(image).toHaveAttribute('alt', '');
   });
 
   it('should return error message if error', async () => {
     const props = getMockedLightboxProps({ images: [{ imageId: 'error' }] });
     const componentMock = await setup(props, MOCK_WITH_ERROR);
-    const { container } = await renderComponent(componentMock);
-    expect(container.innerHTML).toContain('Network error: this is an error');
+    const { container, getByText } = await renderComponent(componentMock);
+    await waitFor(() => getByText('this is an error'));
+    expect(container.innerHTML).toContain('this is an error');
   });
 
   it('should render ImageDetails if shouldDisplayCredits & shouldDisplayCaptions are true', async () => {

package/tests/unit/src/components/Image/ImageFactory.test.js

@@ -3,14 +3,14 @@ import '@testing-library/jest-dom/extend-expect';
 import { render, act, waitFor } from '@testing-library/react';
 import { MockedRoot } from '@blaze-cms/tools/test-helpers/test-functions';
 import ImageFactory from '../../../../../src/components/Image/ImageFactory';
-import { MOCK_BASIC, MOCK_NO_URL, MOCK_WITH_ERR } from './mocks';
+import { MOCK_BASIC, MOCK_NO_URL, MOCK_WITH_ERR, MOCK_RELATION } from './mocks';
 
 jest.mock('@blaze-react/utils/lib/customHooks', () => ({
   useInView: jest.fn(() => [true, null])
 }));
 
 const setup = async (props, mocks) => (
-  <MockedRoot mocks={mocks} addTypename={false}>
+  <MockedRoot mocks={mocks}>
     <ImageFactory {...props} />
   </MockedRoot>
 );
@@ -30,14 +30,14 @@ const renderComponent = async component => {
 const setupTest = async (props = {}, mocks = {}) => {
   const mockProps = {
     parent: {
+      itemId: 'parentId',
       getAction: 'getPublishedPage'
     },
     imageId: 'test-id',
     url: 'www.url-test-prop.com',
     style: {},
     enableLightbox: false,
-    imageRelation: ['publishedPage.imageId'],
-
+    imageRelation: ['publishedPage.otherImageIds'],
     ...props
   };
 
@@ -65,23 +65,19 @@ describe('ImageFactory component', () => {
   it('should render image', async () => {
     const { asFragment } = await setupTest({}, MOCK_BASIC);
 
-    await waitFor(() => {
-      expect(asFragment()).toBeDefined();
-
-      expect(asFragment()).toMatchSnapshot();
-    }, options);
+    await waitFor(() => expect(asFragment()).toBeDefined(), options);
+    expect(asFragment()).toMatchSnapshot();
   });
 
   it('should render image fetching data from relation', async () => {
-    // todo: extend to fully test relation
     const entity = 'page';
-    const { asFragment } = await setupTest(
+    const { asFragment, container } = await setupTest(
       { imageId: null, entity, fetchFromRelation: true },
-      MOCK_BASIC
+      MOCK_RELATION
     );
 
     await waitFor(() => {
-      expect(asFragment()).toBeDefined();
+      expect(container.childNodes.length).toBeGreaterThan(1);
     });
     expect(asFragment()).toMatchSnapshot();
   });
@@ -97,12 +93,8 @@ describe('ImageFactory component', () => {
   });
 
   it('should return error message if error', async () => {
-    const { container } = await setupTest({ imageId: 'test-altText' }, MOCK_WITH_ERR);
-
-    await waitFor(() => {
-      expect(container).toBeDefined();
-    });
+    const { container } = await setupTest({ imageId: 'error' }, MOCK_WITH_ERR);
 
-    expect(container.innerHTML).toContain('error');
+    await waitFor(() => expect(container.innerHTML).toContain('error'));
   });
 });

package/tests/unit/src/components/Image/__snapshots__/ImageFactory.test.js.snap

@@ -20,4 +20,37 @@ exports[`ImageFactory component should render image 1`] = `
 </DocumentFragment>
 `;
 
-exports[`ImageFactory component should render image fetching data from relation 1`] = `<DocumentFragment />`;
+exports[`ImageFactory component should render image fetching data from relation 1`] = `
+<DocumentFragment>
+  <div
+    class="image "
+  >
+    <a
+      class="image__wrapper"
+      href="http://www.url-test-prop.com"
+      rel="noopener nofollow"
+      target="_blank"
+    >
+      <img
+        alt=""
+        src="test-url"
+      />
+    </a>
+  </div>
+  <div
+    class="image "
+  >
+    <a
+      class="image__wrapper"
+      href="http://www.url-test-prop.com"
+      rel="noopener nofollow"
+      target="_blank"
+    >
+      <img
+        alt=""
+        src="test-url-2"
+      />
+    </a>
+  </div>
+</DocumentFragment>
+`;