@blaze-cms/react-page-builder 0.141.0-alpha.0 → 0.141.0-alpha.2

package/tests/unit/src/components/List/components/Pagination/__snapshots__/ListPagination.test.js.snap

@@ -12,24 +12,28 @@ exports[`ListPagination component should render pagination items based on curren
     class="pagination"
   >
     <a
+      aria-label="Previous page"
       class="pagination_page-previous"
       href="?pb%5Blist%5D%5Bpage%5D=3"
     >
-      Previous
+      Previous page
     </a>
     <a
+      aria-label="Page 1"
       class="pagination_page-item"
       href="?pb%5Blist%5D%5Bpage%5D=1"
     >
       1
     </a>
     <a
+      aria-label="Page 2"
       class="pagination_page-item"
       href="?pb%5Blist%5D%5Bpage%5D=2"
     >
       2
     </a>
     <a
+      aria-label="Page 3"
       class="pagination_page-item"
       href="?pb%5Blist%5D%5Bpage%5D=3"
     >

package/tests/unit/src/components/List/components/Pagination/__snapshots__/LoadMore.test.js.snap

@@ -3,9 +3,9 @@
 exports[`LoadMore pagination component should render based on props passed 1`] = `
 <DocumentFragment>
   <a
+    aria-label="Load More"
     class="pagination_load-more"
     href="some-page-url?pb%5Blist-4%5D%5Bpage%5D=2"
-    role="button"
   >
     Load More
   </a>

package/tests/unit/src/components/List/helpers/__snapshots__/build-pagination-items.test.js.snap

@@ -3,6 +3,7 @@
 exports[`buildPaginationItems helper function should render four pages second selected with onclick passed 1`] = `
 Array [
   <BlazeLink
+    ariaLabel="Page 1"
     as=""
     className="pagination_page-item"
     gtmId=""
@@ -21,6 +22,7 @@ Array [
     2
   </span>,
   <BlazeLink
+    ariaLabel="Page 3"
     as=""
     className="pagination_page-item"
     gtmId=""
@@ -34,6 +36,7 @@ Array [
     3
   </BlazeLink>,
   <BlazeLink
+    ariaLabel="Page 4"
     as=""
     className="pagination_page-item"
     gtmId=""
@@ -52,6 +55,7 @@ Array [
 exports[`buildPaginationItems helper function should render ten page fith selected 1`] = `
 Array [
   <BlazeLink
+    ariaLabel="Page 1"
     as=""
     className="pagination_page-item"
     gtmId=""
@@ -65,6 +69,7 @@ Array [
     1
   </BlazeLink>,
   <BlazeLink
+    ariaLabel="Page 2"
     as=""
     className="pagination_page-item"
     gtmId=""
@@ -78,6 +83,7 @@ Array [
     2
   </BlazeLink>,
   <BlazeLink
+    ariaLabel="Page 3"
     as=""
     className="pagination_page-item"
     gtmId=""
@@ -91,6 +97,7 @@ Array [
     3
   </BlazeLink>,
   <BlazeLink
+    ariaLabel="Page 4"
     as=""
     className="pagination_page-item"
     gtmId=""
@@ -109,6 +116,7 @@ Array [
     5
   </span>,
   <BlazeLink
+    ariaLabel="Page 6"
     as=""
     className="pagination_page-item"
     gtmId=""
@@ -122,6 +130,7 @@ Array [
     6
   </BlazeLink>,
   <BlazeLink
+    ariaLabel="Page 7"
     as=""
     className="pagination_page-item"
     gtmId=""
@@ -135,6 +144,7 @@ Array [
     7
   </BlazeLink>,
   <BlazeLink
+    ariaLabel="Page 8"
     as=""
     className="pagination_page-item"
     gtmId=""
@@ -148,6 +158,7 @@ Array [
     8
   </BlazeLink>,
   <BlazeLink
+    ariaLabel="Page 9"
     as=""
     className="pagination_page-item"
     gtmId=""
@@ -161,6 +172,7 @@ Array [
     9
   </BlazeLink>,
   <BlazeLink
+    ariaLabel="Page 10"
     as=""
     className="pagination_page-item"
     gtmId=""
@@ -179,6 +191,7 @@ Array [
 exports[`buildPaginationItems helper function should rrender twenty pages either selected 1`] = `
 Array [
   <BlazeLink
+    ariaLabel="Page 4"
     as=""
     className="pagination_page-item"
     gtmId=""
@@ -192,6 +205,7 @@ Array [
     4
   </BlazeLink>,
   <BlazeLink
+    ariaLabel="Page 5"
     as=""
     className="pagination_page-item"
     gtmId=""
@@ -205,6 +219,7 @@ Array [
     5
   </BlazeLink>,
   <BlazeLink
+    ariaLabel="Page 6"
     as=""
     className="pagination_page-item"
     gtmId=""
@@ -218,6 +233,7 @@ Array [
     6
   </BlazeLink>,
   <BlazeLink
+    ariaLabel="Page 7"
     as=""
     className="pagination_page-item"
     gtmId=""
@@ -236,6 +252,7 @@ Array [
     8
   </span>,
   <BlazeLink
+    ariaLabel="Page 9"
     as=""
     className="pagination_page-item"
     gtmId=""
@@ -249,6 +266,7 @@ Array [
     9
   </BlazeLink>,
   <BlazeLink
+    ariaLabel="Page 10"
     as=""
     className="pagination_page-item"
     gtmId=""
@@ -262,6 +280,7 @@ Array [
     10
   </BlazeLink>,
   <BlazeLink
+    ariaLabel="Page 11"
     as=""
     className="pagination_page-item"
     gtmId=""
@@ -275,6 +294,7 @@ Array [
     11
   </BlazeLink>,
   <BlazeLink
+    ariaLabel="Page 12"
     as=""
     className="pagination_page-item"
     gtmId=""
@@ -288,6 +308,7 @@ Array [
     12
   </BlazeLink>,
   <BlazeLink
+    ariaLabel="Page 13"
     as=""
     className="pagination_page-item"
     gtmId=""

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

@@ -10,6 +10,7 @@ exports[`MenuItem component should render link if url is passed 1`] = `
       class="menu--item--link"
     >
       <a
+        aria-label="Item 1"
         href="/somewhere"
       >
         Item 1

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

@@ -7,7 +7,8 @@ exports[`Select component should display label as placeholder with no label tag
   >
     <select
       data-testid="filter-name"
-      id="name"
+      id="select-filter-name"
+      name="filter-name"
     >
       <option>
         Placeholder label
@@ -36,13 +37,14 @@ exports[`Select component should render witout throwing an error and match snaps
   >
     <label
       class=""
-      for="name"
+      for="select-filter-name"
     >
       name
     </label>
     <select
       data-testid="filter-name"
-      id="name"
+      id="select-filter-name"
+      name="filter-name"
     >
       <option>
         Any

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

@@ -9,7 +9,8 @@ exports[`SearchFilterSort component should render without throwing an error and
       class="form-field form-field--select"
     >
       <select
-        id="123456"
+        id="select-sortby"
+        name="sortby"
       >
         <option>
           Sort by

package/tests/unit/src/components/SocialFollow/__snapshots__/SFItem.test.js.snap

@@ -6,11 +6,11 @@ exports[`SFItem component should match snapshot and render without throwing an e
     class="social__list-item social__list-item--follow"
   >
     <a
+      aria-label="Facebook"
       class="facebook"
-      href="www.facebook.com"
+      href="http://www.facebook.com"
       rel="noopener nofollow"
       target="_blank"
-      title="Facebook"
     >
       <i>
         <svg

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

@@ -12,11 +12,9 @@ exports[`SocialFollow component should render without throwing an error and matc
         class="social__list-item social__list-item--follow"
       >
         <a
+          aria-label="Facebook"
           class="facebook"
           href="facebook value"
-          rel="noopener nofollow"
-          target="_blank"
-          title="Facebook"
         >
           <i>
             <svg
@@ -44,11 +42,9 @@ exports[`SocialFollow component should render without throwing an error and matc
         class="social__list-item social__list-item--follow"
       >
         <a
+          aria-label="Twitter"
           class="twitter"
           href="twitter value"
-          rel="noopener nofollow"
-          target="_blank"
-          title="Twitter"
         >
           <i>
             <svg

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

@@ -12,6 +12,7 @@ exports[`TextBlock component With wrapper flag should render with wrapper and le
       </h1>
        
       <a
+        aria-label="link"
         href="/"
       >
         link
@@ -34,6 +35,7 @@ exports[`TextBlock component With wrapper flag should render with wrapper and le
       </h1>
        
       <a
+        aria-label="link"
         href="/"
       >
         link
@@ -56,6 +58,7 @@ exports[`TextBlock component should match snapshot 1`] = `
       </h1>
        
       <a
+        aria-label="link"
         href="/"
       >
         link
@@ -75,6 +78,7 @@ exports[`TextBlock component should not render wrapper if no modifier 1`] = `
     </h1>
      
     <a
+      aria-label="link"
       href="/"
     >
       link

package/tests/unit/src/components/Video/providers/__snapshots__/Default.test.js.snap

@@ -3,159 +3,162 @@
 exports[`Default provider component should render without throwing error and match snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="video-react-controls-enabled video-react-paused video-react-fluid video-react-user-active video-react-workinghover video-react mocked-modifier"
-    role="region"
-    style="padding-top: 56.25%;"
-    tabindex="-1"
+    class="video__wrapper"
   >
-    <video
-      class="video-react-video"
-      preload="none"
-      tabindex="-1"
-    >
-      <source
-        src="http://media.w3.org/2010/05/bunny/movie.mp4"
-        type="video/mp4"
-      />
-    </video>
     <div
-      class="video-react-loading-spinner"
-    />
-    <button
-      aria-live="polite"
-      class="video-react-big-play-button video-react-big-play-button-left big-play-button-hide"
-      tabindex="0"
-      type="button"
+      class="video-react-controls-enabled video-react-paused video-react-fluid video-react-user-active video-react-workinghover video-react mocked-modifier"
+      role="region"
+      style="padding-top: 56.25%;"
+      tabindex="-1"
     >
-      <span
-        class="video-react-control-text"
+      <video
+        class="video-react-video"
+        preload="none"
+        tabindex="-1"
       >
-        Play Video
-      </span>
-    </button>
-    <div
-      class="video-react-control-bar video-react-control-bar-auto-hide"
-    >
+        <source
+          src="http://media.w3.org/2010/05/bunny/movie.mp4"
+        />
+      </video>
+      <div
+        class="video-react-loading-spinner"
+      />
       <button
-        class="video-react-play-control video-react-control video-react-button video-react-paused"
+        aria-live="polite"
+        class="video-react-big-play-button video-react-big-play-button-left big-play-button-hide"
         tabindex="0"
         type="button"
       >
         <span
           class="video-react-control-text"
         >
-          Play
+          Play Video
         </span>
       </button>
       <div
-        class="video-react-volume-menu-button-horizontal video-react-vol-3 video-react-volume-menu-button video-react-menu-button-inline video-react-control video-react-button video-react-menu-button"
-        role="button"
-        tabindex="0"
+        class="video-react-control-bar video-react-control-bar-auto-hide"
       >
+        <button
+          class="video-react-play-control video-react-control video-react-button video-react-paused"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="video-react-control-text"
+          >
+            Play
+          </span>
+        </button>
         <div
-          class="video-react-menu"
+          class="video-react-volume-menu-button-horizontal video-react-vol-3 video-react-volume-menu-button video-react-menu-button-inline video-react-control video-react-button video-react-menu-button"
+          role="button"
+          tabindex="0"
         >
           <div
-            class="video-react-menu-content"
+            class="video-react-menu"
           >
             <div
-              aria-label="volume level"
-              aria-valuemax="100"
-              aria-valuemin="0"
-              aria-valuenow="100.00"
-              aria-valuetext="100.00%"
-              class="video-react-volume-bar video-react-slider-bar video-react-slider-horizontal video-react-slider"
-              role="slider"
-              tabindex="0"
+              class="video-react-menu-content"
             >
               <div
-                class="video-react-volume-level"
-                style="width: 100.00%;"
+                aria-label="volume level"
+                aria-valuemax="100"
+                aria-valuemin="0"
+                aria-valuenow="100.00"
+                aria-valuetext="100.00%"
+                class="video-react-volume-bar video-react-slider-bar video-react-slider-horizontal video-react-slider"
+                role="slider"
+                tabindex="0"
               >
-                <span
-                  class="video-react-control-text"
-                />
+                <div
+                  class="video-react-volume-level"
+                  style="width: 100.00%;"
+                >
+                  <span
+                    class="video-react-control-text"
+                  />
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-      <div
-        class="video-react-current-time video-react-time-control video-react-control"
-      >
         <div
-          aria-live="off"
-          class="video-react-current-time-display"
+          class="video-react-current-time video-react-time-control video-react-control"
         >
-          <span
-            class="video-react-control-text"
+          <div
+            aria-live="off"
+            class="video-react-current-time-display"
           >
-            Current Time 
-          </span>
-          0:00
-        </div>
-      </div>
-      <div
-        class="video-react-time-control video-react-time-divider"
-        dir="ltr"
-      >
-        <div>
-          <span>
-            /
-          </span>
+            <span
+              class="video-react-control-text"
+            >
+              Current Time 
+            </span>
+            0:00
+          </div>
         </div>
-      </div>
-      <div
-        class="video-react-duration video-react-time-control video-react-control"
-      >
         <div
-          aria-live="off"
-          class="video-react-duration-display"
+          class="video-react-time-control video-react-time-divider"
+          dir="ltr"
         >
-          <span
-            class="video-react-control-text"
-          >
-            Duration Time 
-          </span>
-          0:00
+          <div>
+            <span>
+              /
+            </span>
+          </div>
         </div>
-      </div>
-      <div
-        class="video-react-progress-control video-react-control"
-      >
         <div
-          aria-label="video progress bar"
-          aria-valuemax="100"
-          aria-valuemin="0"
-          aria-valuenow="NaN"
-          aria-valuetext="0:00"
-          class="video-react-progress-holder video-react-slider-horizontal video-react-slider"
-          role="slider"
-          tabindex="0"
+          class="video-react-duration video-react-time-control video-react-control"
         >
           <div
-            class="video-react-play-progress video-react-slider-bar"
-            data-current-time="0:00"
+            aria-live="off"
+            class="video-react-duration-display"
           >
             <span
               class="video-react-control-text"
             >
-              Progress: NaN%
+              Duration Time 
             </span>
+            0:00
           </div>
         </div>
-      </div>
-      <button
-        class="video-react-icon-fullscreen video-react-fullscreen-control video-react-control video-react-button video-react-icon"
-        tabindex="0"
-        type="button"
-      >
-        <span
-          class="video-react-control-text"
+        <div
+          class="video-react-progress-control video-react-control"
         >
-          Non-Fullscreen
-        </span>
-      </button>
+          <div
+            aria-label="video progress bar"
+            aria-valuemax="100"
+            aria-valuemin="0"
+            aria-valuenow="NaN"
+            aria-valuetext="0:00"
+            class="video-react-progress-holder video-react-slider-horizontal video-react-slider"
+            role="slider"
+            tabindex="0"
+          >
+            <div
+              class="video-react-play-progress video-react-slider-bar"
+              data-current-time="0:00"
+            >
+              <span
+                class="video-react-control-text"
+              >
+                Progress: NaN%
+              </span>
+            </div>
+          </div>
+        </div>
+        <button
+          class="video-react-icon-fullscreen video-react-fullscreen-control video-react-control video-react-button video-react-icon"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="video-react-control-text"
+          >
+            Non-Fullscreen
+          </span>
+        </button>
+      </div>
     </div>
   </div>
 </DocumentFragment>

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

@@ -3,9 +3,9 @@
 exports[`BlazeLink component should render without throwing an error and match snapshot 1`] = `
 <DocumentFragment>
   <a
+    aria-label="test-name"
     class="test-class"
     href="/test-href"
-    name="test-name"
   >
     <div>
       child div

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

@@ -3,6 +3,7 @@
 exports[`Button component should render without throwing an error and match snapshot 1`] = `
 <DocumentFragment>
   <a
+    aria-label="test"
     class="icon-button"
     href="http://google.com"
     rel="noopener nofollow"

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

@@ -5,6 +5,7 @@ exports[`Parse textBlock it should match snapshot 1`] = `
   <p>
     lorem ipsum 
     <a
+      aria-label="link"
       href="/"
     >
       link

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

@@ -24,6 +24,8 @@ describe('Parse textBlock', () => {
 
   test('it should include a link tag', () => {
     const { container } = render(expectedMarkup);
-    expect(container).toContainHTML("<a href='/'>link</a>");
+    expect(container).toContainHTML(
+      '<div><p>lorem ipsum <a aria-label="link" href="/">link</a></p></div>'
+    );
   });
 });

package/tests/unit/src/utils/variant-handler.test.js

@@ -33,9 +33,14 @@ describe('variantHandler function', () => {
     expect(entries.length).toEqual(2);
   });
 
-  it('should throw error if we try to add an object that has already been added', () => {
-    expect(() => variantHandler.add('RandomVariant', () => <div />)).toThrow(
-      'Variant already exist'
-    );
+  it('should call console.warn error if we try to add an object that has already been added', () => {
+    const { warn } = console;
+    // eslint-disable-next-line no-console
+    console.warn = jest.fn();
+    variantHandler.add('RandomVariant', () => <div />);
+    // eslint-disable-next-line no-console
+    expect(console.warn).toHaveBeenCalledWith('Variant already exists: RandomVariant');
+    // eslint-disable-next-line no-console
+    console.warn = warn;
   });
 });