@blaze-cms/react-page-builder 0.146.0-node18.1 → 0.146.0-rc-eagle.0

package/tests/unit/src/components/SearchFilter/components/__snapshots__/Range.test.js.snap

@@ -2,46 +2,52 @@
 
 exports[`Range component should match snapshot 1`] = `
 <div
-  className="form-field form-field--range "
+  className="range-filter-wrapper"
+  style={Object {}}
 >
-  <label
-    className=""
-  >
-    GLabel
-  </label>
   <div
-    className="values"
+    className="form-field form-field--range "
   >
-    <span>
-      0
-    </span>
-    <span>
-      6600
-    </span>
-  </div>
-  <div
-    className="range__filter name"
-    id="nameRange"
-    max={6600}
-    max-value={6600}
-    min={0}
-    min-value={0}
-    step={100}
-  >
-    <div
-      className="range__filter--left"
+    <label
+      className=""
+      htmlFor="name"
     >
-      <span />
-    </div>
+      GLabel
+    </label>
     <div
-      className="range__filter--right"
+      className="values"
     >
-      <span />
+      <span>
+        0
+      </span>
+      <span>
+        6,600
+      </span>
     </div>
     <div
-      className="range__filter--line"
+      className="range__filter name"
+      id="nameRange"
+      max={6600}
+      max-value={6600}
+      min={0}
+      min-value={0}
+      step={100}
     >
-      <span />
+      <div
+        className="range__filter--left"
+      >
+        <span />
+      </div>
+      <div
+        className="range__filter--right"
+      >
+        <span />
+      </div>
+      <div
+        className="range__filter--line"
+      >
+        <span />
+      </div>
     </div>
   </div>
 </div>
@@ -49,46 +55,52 @@ exports[`Range component should match snapshot 1`] = `
 
 exports[`Range component should match snapshot large values formatted correctly 1`] = `
 <div
-  className="form-field form-field--range "
+  className="range-filter-wrapper"
+  style={Object {}}
 >
-  <label
-    className=""
-  >
-    GLabel
-  </label>
-  <div
-    className="values"
-  >
-    <span>
-      9999
-    </span>
-    <span>
-      10,000
-    </span>
-  </div>
   <div
-    className="range__filter name"
-    id="nameRange"
-    max={10000}
-    max-value={10000}
-    min={9995}
-    min-value={9999}
-    step={1}
+    className="form-field form-field--range "
   >
-    <div
-      className="range__filter--left"
+    <label
+      className=""
+      htmlFor="name"
     >
-      <span />
-    </div>
+      GLabel
+    </label>
     <div
-      className="range__filter--right"
+      className="values"
     >
-      <span />
+      <span>
+        9,999
+      </span>
+      <span>
+        10,000
+      </span>
     </div>
     <div
-      className="range__filter--line"
+      className="range__filter name"
+      id="nameRange"
+      max={10000}
+      max-value={10000}
+      min={9995}
+      min-value={9999}
+      step={1}
     >
-      <span />
+      <div
+        className="range__filter--left"
+      >
+        <span />
+      </div>
+      <div
+        className="range__filter--right"
+      >
+        <span />
+      </div>
+      <div
+        className="range__filter--line"
+      >
+        <span />
+      </div>
     </div>
   </div>
 </div>
@@ -96,46 +108,52 @@ exports[`Range component should match snapshot large values formatted correctly
 
 exports[`Range component should match snapshot with adjusted min & max values based on interval 1`] = `
 <div
-  className="form-field form-field--range "
+  className="range-filter-wrapper"
+  style={Object {}}
 >
-  <label
-    className=""
-  >
-    GLabel
-  </label>
-  <div
-    className="values"
-  >
-    <span>
-      7
-    </span>
-    <span>
-      8
-    </span>
-  </div>
   <div
-    className="range__filter name"
-    id="nameRange"
-    max={8}
-    max-value={8}
-    min={6}
-    min-value={7}
-    step={1}
+    className="form-field form-field--range "
   >
-    <div
-      className="range__filter--left"
+    <label
+      className=""
+      htmlFor="name"
     >
-      <span />
-    </div>
+      GLabel
+    </label>
     <div
-      className="range__filter--right"
+      className="values"
     >
-      <span />
+      <span>
+        7
+      </span>
+      <span>
+        8
+      </span>
     </div>
     <div
-      className="range__filter--line"
+      className="range__filter name"
+      id="nameRange"
+      max={8}
+      max-value={8}
+      min={6}
+      min-value={7}
+      step={1}
     >
-      <span />
+      <div
+        className="range__filter--left"
+      >
+        <span />
+      </div>
+      <div
+        className="range__filter--right"
+      >
+        <span />
+      </div>
+      <div
+        className="range__filter--line"
+      >
+        <span />
+      </div>
     </div>
   </div>
 </div>
@@ -143,46 +161,52 @@ exports[`Range component should match snapshot with adjusted min & max values ba
 
 exports[`Range component should match snapshot with interval 1`] = `
 <div
-  className="form-field form-field--range "
+  className="range-filter-wrapper"
+  style={Object {}}
 >
-  <label
-    className=""
-  >
-    GLabel
-  </label>
   <div
-    className="values"
+    className="form-field form-field--range "
   >
-    <span>
-      0
-    </span>
-    <span>
-      6600
-    </span>
-  </div>
-  <div
-    className="range__filter name"
-    id="nameRange"
-    max={6600}
-    max-value={6600}
-    min={0}
-    min-value={0}
-    step={100}
-  >
-    <div
-      className="range__filter--left"
+    <label
+      className=""
+      htmlFor="name"
     >
-      <span />
-    </div>
+      GLabel
+    </label>
     <div
-      className="range__filter--right"
+      className="values"
     >
-      <span />
+      <span>
+        0
+      </span>
+      <span>
+        6,600
+      </span>
     </div>
     <div
-      className="range__filter--line"
+      className="range__filter name"
+      id="nameRange"
+      max={6600}
+      max-value={6600}
+      min={0}
+      min-value={0}
+      step={100}
     >
-      <span />
+      <div
+        className="range__filter--left"
+      >
+        <span />
+      </div>
+      <div
+        className="range__filter--right"
+      >
+        <span />
+      </div>
+      <div
+        className="range__filter--line"
+      >
+        <span />
+      </div>
     </div>
   </div>
 </div>
@@ -190,46 +214,109 @@ exports[`Range component should match snapshot with interval 1`] = `
 
 exports[`Range component should match snapshot with interval and rounded min & max values 1`] = `
 <div
-  className="form-field form-field--range "
+  className="range-filter-wrapper"
+  style={Object {}}
 >
-  <label
-    className=""
-  >
-    GLabel
-  </label>
   <div
-    className="values"
+    className="form-field form-field--range "
   >
-    <span>
-      15.5
-    </span>
-    <span>
-      49.5
-    </span>
+    <label
+      className=""
+      htmlFor="name"
+    >
+      GLabel
+    </label>
+    <div
+      className="values"
+    >
+      <span>
+        15.5
+      </span>
+      <span>
+        49.5
+      </span>
+    </div>
+    <div
+      className="range__filter name"
+      id="nameRange"
+      max={50}
+      max-value={49.5}
+      min={15}
+      min-value={15.5}
+      step={1}
+    >
+      <div
+        className="range__filter--left"
+      >
+        <span />
+      </div>
+      <div
+        className="range__filter--right"
+      >
+        <span />
+      </div>
+      <div
+        className="range__filter--line"
+      >
+        <span />
+      </div>
+    </div>
   </div>
+</div>
+`;
+
+exports[`Range component should match snapshot with unit prop 1`] = `
+<div
+  className="range-filter-wrapper has-unit"
+  style={
+    Object {
+      "--unit": "\\"m\\"",
+    }
+  }
+>
   <div
-    className="range__filter name"
-    id="nameRange"
-    max={50}
-    max-value={49.5}
-    min={15}
-    min-value={15.5}
-    step={1}
+    className="form-field form-field--range "
   >
-    <div
-      className="range__filter--left"
+    <label
+      className=""
+      htmlFor="name"
     >
-      <span />
-    </div>
+      GLabel
+    </label>
     <div
-      className="range__filter--right"
+      className="values"
     >
-      <span />
+      <span>
+        0
+      </span>
+      <span>
+        6,600
+      </span>
     </div>
     <div
-      className="range__filter--line"
+      className="range__filter name"
+      id="nameRange"
+      max={6600}
+      max-value={6600}
+      min={0}
+      min-value={0}
+      step={100}
     >
-      <span />
+      <div
+        className="range__filter--left"
+      >
+        <span />
+      </div>
+      <div
+        className="range__filter--right"
+      >
+        <span />
+      </div>
+      <div
+        className="range__filter--line"
+      >
+        <span />
+      </div>
     </div>
   </div>
 </div>

package/tests/unit/src/components/SearchFilter/helpers/build-new-url.test.js

@@ -11,6 +11,10 @@ describe('buildNewUrl helper function', () => {
   const simpleExample = buildNewUrl(...mockedProps[0]);
   const withPropsUrl = buildNewUrl(...mockedProps[1]);
   const withHash = buildNewUrl(...mockedProps[3]);
+  const currentWithHash = buildNewUrl('urlFromProps#old-hash', '', 'q=1');
+  const preferNewHash = buildNewUrl('urlFromProps#old-hash', '', 'q=1', 'new-hash');
+  const noQuery = buildNewUrl('baseUrl', '', '');
+  const encodedQuery = buildNewUrl('baseUrl', '', 'q=hello world&name=John/Doe');
 
   it('should always return a string', () => {
     expect(typeof simpleExample).toBe('string');
@@ -28,4 +32,20 @@ describe('buildNewUrl helper function', () => {
   it('should return new url with hash if passed', () => {
     expect(withHash).toEqual('urlFromProps?another=query&withthis=value#this-is-content');
   });
+
+  it('should preserve existing hash when no new hash provided', () => {
+    expect(currentWithHash).toEqual('urlFromProps?q=1#old-hash');
+  });
+
+  it('should prefer new hash over existing url hash', () => {
+    expect(preferNewHash).toEqual('urlFromProps?q=1#new-hash');
+  });
+
+  it('should omit question mark when queryParams is empty', () => {
+    expect(noQuery).toEqual('baseUrl');
+  });
+
+  it('should URI-encode query params', () => {
+    expect(encodedQuery).toEqual('baseUrl?q=hello%20world&name=John/Doe');
+  });
 });

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`TextBlock component With wrapper flag should render with wrapper and legacy class and modifier 1`] = `
 <DocumentFragment>
@@ -14,9 +14,6 @@ exports[`TextBlock component With wrapper flag should render with wrapper and le
       <a
         aria-label="link"
         href="/"
-      />
-      <a
-        href="/"
       >
         link
       </a>
@@ -40,9 +37,6 @@ exports[`TextBlock component With wrapper flag should render with wrapper and le
       <a
         aria-label="link"
         href="/"
-      />
-      <a
-        href="/"
       >
         link
       </a>
@@ -66,9 +60,6 @@ exports[`TextBlock component should match snapshot 1`] = `
       <a
         aria-label="link"
         href="/"
-      />
-      <a
-        href="/"
       >
         link
       </a>
@@ -89,9 +80,6 @@ exports[`TextBlock component should not render wrapper if no modifier 1`] = `
     <a
       aria-label="link"
       href="/"
-    />
-    <a
-      href="/"
     >
       link
     </a>

package/tests/unit/src/helpers/__snapshots__/build-query-fields.test.js.snap

@@ -7,7 +7,7 @@ exports[`build query field should return a string with additional field if list
       name,category{name}
       __typename
       id
-      pageBuilderComponents
+     pageBuilderComponents: preparedPageBuilderComponents
     }
   },
   total
@@ -21,7 +21,7 @@ exports[`build query field should return a string with correct data 1`] = `
       name,category{name}
       __typename
       id
-      
+     
     }
   },
   total

package/tests/unit/src/helpers/__snapshots__/parse-textBlock.test.js.snap

@@ -1,3 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Parse textBlock it should match snapshot 1`] = `<DocumentFragment />`;
+exports[`Parse textBlock it should match snapshot 1`] = `
+<DocumentFragment>
+  <p>
+    lorem ipsum 
+    <a
+      aria-label="link"
+      href="/"
+    >
+      link
+    </a>
+  </p>
+</DocumentFragment>
+`;

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

@@ -3,7 +3,7 @@
  */
 import buildPropsQuery from '../../../../src/helpers/build-props-query';
 
-const CONTENT_INTERFACE = 'content/content';
+const CONTENT_INTERFACE = 'content/content-base';
 
 describe('get card render props', () => {
   const relations = [
@@ -60,7 +60,7 @@ describe('get card render props', () => {
     };
     const query = buildPropsQuery(_data, [], cardProps);
     expect(query).toEqual(
-      'id,name,url,sponsored,featured,category{name,listingPageId,listingPageEntity, id publishedListingPage{id, url}},image{id,url,data}'
+      'id,name,url,sponsored,featured,live,category{name,listingPageId,listingPageEntity, id publishedListingPage{id, url}},image{id,url,data}'
     );
   });
 
@@ -70,7 +70,7 @@ describe('get card render props', () => {
       displayThumbnail: false
     });
     expect(query).toEqual(
-      'id,name,alternativePreHeader{name},alternativeHeadline,url,sponsored,featured'
+      'id,name,alternativePreHeader{name},alternativeHeadline,url,sponsored,featured,live'
     );
   });
 
@@ -92,18 +92,20 @@ describe('get card render props', () => {
       displayThumbnail: false
     });
     expect(query).toEqual(
-      'id,name,alternativePreHeader{name},alternativeHeadline,url,sponsored,featured,category{name,listingPageId,listingPageEntity, id publishedListingPage{id, url}}'
+      'id,name,alternativePreHeader{name},alternativeHeadline,url,sponsored,featured,live,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{id,url,data}');
+    expect(query).toEqual('id,name,url,sponsored,featured,live,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{id,url,data},published{date,url}');
+    expect(query).toEqual(
+      'id,name,url,sponsored,featured,live,image{id,url,data},published{date,url}'
+    );
   });
 
   it('should return result as if isCard was false when isCard is not passed', () => {
@@ -113,7 +115,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{id,url,data}');
+    expect(query).toEqual('id,name,url,sponsored,featured,live,image{id,url,data}');
   });
 
   it('should return a string with respective props query when isCard is passed as true', () => {
@@ -136,7 +138,7 @@ describe('get card render props', () => {
 
   it('should not include category and image props if card options says not to', () => {
     const query = buildPropsQuery(data, [], { displayCategory: false, displayThumbnail: false });
-    expect(query).toEqual('id,name,url,sponsored,featured');
+    expect(query).toEqual('id,name,url,sponsored,featured,live');
   });
 
   it('should not fetch image if the schema does not have imageId property', () => {
@@ -153,7 +155,7 @@ describe('get card render props', () => {
     };
     const query = buildPropsQuery(_data, [], cardProps);
     expect(query).toEqual(
-      'id,name,url,sponsored,featured,category{name,listingPageId,listingPageEntity, id publishedListingPage{id, url}}'
+      'id,name,url,sponsored,featured,live,category{name,listingPageId,listingPageEntity, id publishedListingPage{id, url}}'
     );
   });
 
@@ -179,7 +181,7 @@ describe('get card render props', () => {
     };
     const query = buildPropsQuery(_data, ['address.country'], cardProps);
     expect(query).toEqual(
-      'id,name,url,sponsored,featured,category{name,listingPageId,listingPageEntity, id publishedListingPage{id, url}},address{country,id}'
+      'id,name,url,sponsored,featured,live,category{name,listingPageId,listingPageEntity, id publishedListingPage{id, url}},address{country,id}'
     );
   });
 
@@ -204,7 +206,7 @@ describe('get card render props', () => {
     const linkProps = ['nestedProperty.title', 'nestedDynamicProperty.title', 'address.title'];
     const query = buildPropsQuery(_data, linkProps, {}, linkProps);
     expect(query).toEqual(
-      'id,name,url,sponsored,featured,nestedProperty{title,url},nestedDynamicProperty{title,url},address{title,id,url}'
+      'id,name,url,sponsored,featured,live,nestedProperty{title,url},nestedDynamicProperty{title,url},address{title,id,url}'
     );
   });
 });