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

package/tests/unit/src/components/Image/mocks.js

@@ -1,10 +1,57 @@
-import { getFiles, getFileById } from '../../../../../src/application/query';
+import {
+  getFiles,
+  getFileById,
+  generateSingleItemQuery
+} from '../../../../../src/application/query';
+import { DATA_SUMMARY_MOCK } from '../../../../helpers/mocks';
 
 const MOCK_BASIC = [
+  {
+    request: {
+      query: getFileById,
+      variables: { id: 'test-id' }
+    },
+    result: {
+      data: {
+        getFile: {
+          id: 'test-id',
+          location: 'test-location',
+          mimetype: 'test-mimetype',
+          url: 'test-url',
+          data: null,
+          __typename: 'File'
+        }
+      }
+    }
+  }
+];
+
+const MOCK_RELATION = [
+  ...DATA_SUMMARY_MOCK,
+  {
+    request: {
+      query: generateSingleItemQuery('getPublishedPage', 'publishedPage { otherImageIds }'),
+      variables: {
+        id: 'parentId'
+      }
+    },
+    result: {
+      data: {
+        entityData: {
+          id: 'parentId',
+          publishedPage: {
+            otherImageIds: ['test-id', 'test-id-2'],
+            __typename: 'PublishedPage'
+          },
+          __typename: 'PublishedPage'
+        }
+      }
+    }
+  },
   {
     request: {
       query: getFiles,
-      variables: { where: { id: { _in: ['test-id'] } } }
+      variables: { where: { id: { _in: ['test-id', 'test-id-2'] } } }
     },
     result: {
       data: {
@@ -14,7 +61,16 @@ const MOCK_BASIC = [
             location: 'test-location',
             mimetype: 'test-mimetype',
             url: 'test-url',
-            data: null
+            data: null,
+            __typename: 'File'
+          },
+          {
+            id: 'test-id-2',
+            location: 'test-location',
+            mimetype: 'test-mimetype',
+            url: 'test-url-2',
+            data: null,
+            __typename: 'File'
           }
         ]
       }
@@ -25,22 +81,21 @@ const MOCK_BASIC = [
 const MOCK_NO_URL = [
   {
     request: {
-      query: getFiles,
-      variables: { where: { id: { _in: ['test-no-url'] } } }
+      query: getFileById,
+      variables: { id: 'test-no-url' }
     },
     result: {
       data: {
-        getFiles: [
-          {
-            id: 'test-no-url',
-            location: 'test-location',
-            mimetype: 'test-mimetype',
-            url: null,
-            data: {
-              caption: 'image caption'
-            }
-          }
-        ]
+        getFile: {
+          id: 'test-no-url',
+          location: 'test-location',
+          mimetype: 'test-mimetype',
+          url: null,
+          data: {
+            caption: 'image caption'
+          },
+          __typename: 'File'
+        }
       }
     }
   }
@@ -49,10 +104,8 @@ const MOCK_NO_URL = [
 const MOCK_WITH_ERR = [
   {
     request: {
-      query: getFiles,
-      variables: {
-        variables: { where: { id: { _in: ['error'] } } }
-      }
+      query: getFileById,
+      variables: { id: 'error' }
     },
     error: new Error('this is an error')
   }
@@ -74,7 +127,8 @@ const MOCKS = [
             location: 'test-location',
             mimetype: 'test-mimetype',
             url: 'test-url',
-            data: null
+            data: null,
+            __typename: 'File'
           }
         }
       }
@@ -95,7 +149,8 @@ const MOCKS = [
             url: 'test-url',
             data: {
               caption: 'image caption'
-            }
+            },
+            __typename: 'File'
           }
         }
       }
@@ -116,7 +171,8 @@ const MOCKS = [
             url: 'test-url',
             data: {
               altText: 'image alt text'
-            }
+            },
+            __typename: 'File'
           }
         }
       }
@@ -148,4 +204,4 @@ const MOCKS = [
   ]
 ];
 
-export { MOCKS, MOCK_BASIC, MOCK_WITH_ERR, MOCK_NO_URL };
+export { MOCKS, MOCK_BASIC, MOCK_WITH_ERR, MOCK_NO_URL, MOCK_RELATION };

package/tests/unit/src/components/List/ListRender.test.js

@@ -2,7 +2,8 @@ import React from 'react';
 import { render } from '@blaze-cms/tools/test-helpers/test-functions';
 import ListRender from '../../../../../src/components/List/ListRender';
 
-jest.mock('@apollo/react-hooks', () => ({
+jest.mock('@apollo/client', () => ({
+  ...jest.requireActual('@apollo/client'),
   useQuery: jest.fn(({ data, loading, error, fetchMore }) => ({ data, loading, error, fetchMore }))
 }));
 

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

@@ -9,7 +9,8 @@ jest.mock('@blaze-cms/core-auth-ui', () => ({
     .mockImplementationOnce(() => ({ isLoggedIn: true }))
 }));
 
-jest.mock('react-apollo', () => ({
+jest.mock('@apollo/client', () => ({
+  ...jest.requireActual('@apollo/client'),
   useMutation: jest.fn(() => [variables => variables, { client: { resetStore: null } }])
 }));
 

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

@@ -2,7 +2,7 @@ import '@testing-library/jest-dom/extend-expect';
 import React from 'react';
 import { RESET_USER_PASSWORD_MUTATION } from '@blaze-cms/core-auth-ui';
 import { fireEvent, render, queryByAttribute, waitFor } from '@testing-library/react';
-import { MockedProvider } from '@apollo/react-testing';
+import { MockedProvider } from '@apollo/client/testing';
 import PasswordReset from '../../../../../src/components/PasswordReset';
 
 jest.mock('next/router', () => ({
@@ -31,7 +31,7 @@ const mocks = [
 
 const setup = () => {
   const resetComponent = render(
-    <MockedProvider mocks={mocks} addTypename={false}>
+    <MockedProvider mocks={mocks}>
       <PasswordReset>
         <div>child</div>
       </PasswordReset>

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

@@ -2,7 +2,7 @@ import '@testing-library/jest-dom/extend-expect';
 import React from 'react';
 import { REQUEST_USER_PASSWORD_RESET_MUTATION } from '@blaze-cms/core-auth-ui';
 import { fireEvent, render, waitFor } from '@testing-library/react';
-import { MockedProvider } from '@apollo/react-testing';
+import { MockedProvider } from '@apollo/client/testing';
 import PasswordResetRequest from '../../../../../src/components/PasswordResetRequest';
 
 jest.mock('next/router', () => ({
@@ -28,7 +28,7 @@ const mocks = [
 
 const setup = () => {
   const resetRequestComponent = render(
-    <MockedProvider mocks={mocks} addTypename={false}>
+    <MockedProvider mocks={mocks}>
       <PasswordResetRequest modifier="pass-request-reset">
         <div className="child_1">one child</div>
       </PasswordResetRequest>

package/tests/unit/src/components/SearchFilter/SearchFilterContainer.test.js

@@ -4,7 +4,8 @@ import { render } from '@blaze-cms/tools/test-helpers/test-functions';
 import { MOCKED_PROPS_SEARCH_FILTER } from '../../../../helpers/mocks';
 import SearchFilterContainer from '../../../../../src/components/SearchFilter';
 
-jest.mock('@apollo/react-hooks', () => ({
+jest.mock('@apollo/client', () => ({
+  ...jest.requireActual('@apollo/client'),
   useQuery: jest.fn(() => ({ data: {}, loading: false, error: null }))
 }));
 

package/tests/unit/src/components/Video/providers/JWPlayer/JWPlayerProvider.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 JWPlayerProvider from '../../../../../../../src/components/Video/providers/JWPlayer/JWPlayerProvider';
 import IMAGE_MOCKS, { getMockedJWPlayerProps } from './mocks';

package/tests/unit/src/components/__snapshots__/CarouselWrapper.test.js.snap

@@ -3,16 +3,16 @@
 exports[`CarouselWrapper component should add banner modifier if passed 1`] = `
 <DocumentFragment>
   <div
-    class="card-carousel relative gap-2 has-a-banner"
+    class="cards-carousel has-a-banner"
   >
     <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-0 flex flex-nowrap p-4 gap-4 overflow-x-scroll"
+      class="cards-carousel--content items-per-row-0"
     >
       <div>
         <div>
@@ -39,16 +39,16 @@ exports[`CarouselWrapper component should add banner modifier if passed 1`] = `
 exports[`CarouselWrapper component should add modifier bassed on itemsPerRow 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-3 flex flex-nowrap p-4 gap-4 overflow-x-scroll"
+      class="cards-carousel--content items-per-row-3"
     >
       <div>
         <div>
@@ -75,16 +75,16 @@ exports[`CarouselWrapper component should add modifier bassed on itemsPerRow 1`]
 exports[`CarouselWrapper component should render without throwing an error and match snapshot 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-0 flex flex-nowrap p-4 gap-4 overflow-x-scroll"
+      class="cards-carousel--content items-per-row-0"
     >
       <div>
         <div>

package/tests/unit/src/helpers/build-props-query.test.js

@@ -55,7 +55,7 @@ describe('get card render props', () => {
     };
     const query = buildPropsQuery(_data, [], cardProps);
     expect(query).toEqual(
-      'id,name,url,sponsored,featured,category{name,listingPageId,listingPageEntity, publishedListingPage{url}},image{url,data}'
+      'id,name,url,sponsored,featured,category{name,listingPageId,listingPageEntity, id publishedListingPage{id, url}},image{id,url,data}'
     );
   });
 
@@ -86,18 +86,18 @@ describe('get card render props', () => {
       displayThumbnail: false
     });
     expect(query).toEqual(
-      'id,name,alternativePreHeader{name},alternativeHeadline,url,sponsored,featured,category{name,listingPageId,listingPageEntity, publishedListingPage{url}}'
+      'id,name,alternativePreHeader{name},alternativeHeadline,url,sponsored,featured,category{name,listingPageId,listingPageEntity, id publishedListingPage{id, url}}'
     );
   });
 
   it('should not include category if the schema does not have a category', () => {
     const query = buildPropsQuery(data, [], cardProps);
-    expect(query).toEqual('id,name,url,sponsored,featured,image{url,data}');
+    expect(query).toEqual('id,name,url,sponsored,featured,image{id,url,data}');
   });
 
   it('should return complex props when base includes published', () => {
     const query = buildPropsQuery(data, ['published.date'], cardProps);
-    expect(query).toEqual('id,name,url,sponsored,featured,image{url,data},published{date,url}');
+    expect(query).toEqual('id,name,url,sponsored,featured,image{id,url,data},published{date,url}');
   });
 
   it('should return result as if isCard was false when isCard is not passed', () => {
@@ -107,7 +107,7 @@ describe('get card render props', () => {
 
   it('should return result as if isCard was false when extraProps were not passed', () => {
     const query = buildPropsQuery(data, undefined, cardProps);
-    expect(query).toEqual('id,name,url,sponsored,featured,image{url,data}');
+    expect(query).toEqual('id,name,url,sponsored,featured,image{id,url,data}');
   });
 
   it('should return a string with respective props query when isCard is passed as true', () => {
@@ -123,7 +123,7 @@ describe('get card render props', () => {
     };
     const query = buildPropsQuery(_data, [], cardProps);
     expect(query).toEqual(
-      'id,name,category{name,listingPageId,listingPageEntity, publishedListingPage{url}}'
+      'id,name,category{name,listingPageId,listingPageEntity, id publishedListingPage{id, url}}'
     );
   });
 

package/tests/unit/src/hooks/use-get-entity-schema-as-obj.test.js

@@ -1,9 +1,9 @@
-import { useQuery } from '@apollo/react-hooks';
+import { useQuery } from '@apollo/client';
 import { useGetEntitySchemasAsObj } from '../../../../src/hooks';
 
 import { getMultipleSchema } from '../../../../src/application/query';
 
-jest.mock('@apollo/react-hooks', () => ({
+jest.mock('@apollo/client', () => ({
   useQuery: jest.fn(() => ({ data: {}, loading: false, error: null }))
 }));
 

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

@@ -1,5 +1,5 @@
 import { renderHook } from '@testing-library/react-hooks';
-import { MockedProvider } from '@apollo/react-testing';
+import { MockedProvider } from '@apollo/client/testing';
 import React from 'react';
 import useGetImageIdFromRelation from '../../../../src/hooks/use-get-image-id-from-relation';
 import * as query from '../../../../src/application/query';

package/tests/unit/src/hooks/use-get-images.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 { renderHook, act } from '@testing-library/react-hooks';
 import { useGetImages } from '../../../../src/hooks';
 import { getFiles, getFileById } from '../../../../src/application/query';
@@ -10,8 +10,6 @@ const id2 = 'test-id-2';
 const resultData = [
   {
     id: id1,
-    location: 'test-location-1',
-    mimetype: 'test-mimetype-1',
     url: 'test-url-1',
     data: {
       caption: 'test-caption-1'
@@ -19,8 +17,6 @@ const resultData = [
   },
   {
     id: id2,
-    location: 'test-location-2',
-    mimetype: 'test-mimetype-2',
     url: 'test-url-2',
     data: null
   }
@@ -67,9 +63,7 @@ const STRING_MOCK = [
 
 describe('UseGetImages hook', () => {
   const arrayWrapper = ({ children }) => (
-    <MockedProvider mocks={ARRAY_MOCK} addTypename={false}>
-      {children}
-    </MockedProvider>
+    <MockedProvider mocks={ARRAY_MOCK}>{children}</MockedProvider>
   );
 
   it('should be a function', () => {
@@ -78,9 +72,7 @@ describe('UseGetImages hook', () => {
 
   it('should return expected value (id is an array)', async () => {
     const wrapper = ({ children }) => (
-      <MockedProvider mocks={ARRAY_MOCK} addTypename={false}>
-        {children}
-      </MockedProvider>
+      <MockedProvider mocks={ARRAY_MOCK}>{children}</MockedProvider>
     );
     const ids = [id1, id2];
     const hasMultipleIds = true;
@@ -147,9 +139,7 @@ describe('UseGetImages hook', () => {
 
   it('should return expected value (id is a string)', async () => {
     const wrapper = ({ children }) => (
-      <MockedProvider mocks={STRING_MOCK} addTypename={false}>
-        {children}
-      </MockedProvider>
+      <MockedProvider mocks={STRING_MOCK}>{children}</MockedProvider>
     );
 
     const { result, waitForNextUpdate } = renderHook(() => useGetImages(id1), {

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

@@ -1,6 +1,6 @@
 import { renderHook, act } from '@testing-library/react-hooks';
 import React from 'react';
-import { MockedProvider } from '@apollo/react-testing';
+import { MockedProvider } from '@apollo/client/testing';
 import { useGetSingleEntitySchema } from '../../../../src/hooks';
 import { getSingleEntitySchema } from '../../../../src/application/query';
 
@@ -39,9 +39,7 @@ const getSingleEntitySchemaMock = {
 };
 
 const wrapper = ({ children }) => (
-  <MockedProvider mocks={[getSingleEntitySchemaMock]} addTypename={false}>
-    {children}
-  </MockedProvider>
+  <MockedProvider mocks={[getSingleEntitySchemaMock]}>{children}</MockedProvider>
 );
 
 describe('useGetSingleEntitySchema hook', () => {