@blaze-cms/react-page-builder 0.123.0-alpha.7 → 0.123.0

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

@@ -1,9 +1,77 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`SearchFilter component should render without throwing error and match snapshot 1`] = `
+<DocumentFragment>
+  <form
+    class="filter__form filter__form--initial filter__form--collapsible"
+    data-testid="filter-test-form"
+    id="filter-test-form"
+  >
+    <div
+      class="filter filter--search-refine"
+    >
+      <div
+        class="filter__reset"
+      >
+        <button
+          class="icon-button icon-button--reset"
+          data-testid="reset-icon"
+          title="reset--button"
+          type="button"
+        >
+          <i>
+            <svg
+              fill="currentColor"
+              height="1em"
+              stroke="currentColor"
+              stroke-width="0"
+              viewBox="0 0 512 512"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M256.455 8c66.269.119 126.437 26.233 170.859 68.685l35.715-35.715C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.75c-30.864-28.899-70.801-44.907-113.23-45.273-92.398-.798-170.283 73.977-169.484 169.442C88.764 348.009 162.184 424 256 424c41.127 0 79.997-14.678 110.629-41.556 4.743-4.161 11.906-3.908 16.368.553l39.662 39.662c4.872 4.872 4.631 12.815-.482 17.433C378.202 479.813 319.926 504 256 504 119.034 504 8.001 392.967 8 256.002 7.999 119.193 119.646 7.755 256.455 8z"
+              />
+            </svg>
+          </i>
+        </button>
+        <div
+          data-testid="reset-button"
+          role="button"
+        >
+          Reset all filters
+        </div>
+      </div>
+      <div
+        class="filter__wrapper filter__wrapper--search-refine"
+      >
+        <br />
+        <button
+          class="button button--full-width"
+          type="submit"
+        >
+          Search
+        </button>
+      </div>
+    </div>
+  </form>
+  <div
+    class="filter__refine filter__refine--mobile-close"
+    data-testid="refine-mobile"
+  >
+    <div
+      role="button"
+    >
+      Refine Search
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`SearchFilter component when groupAfterMobile = 0 and groupAfterDesktop > 0 should render without throwing error and match snapshot 1`] = `
 <DocumentFragment>
   <form
-    class=""
+    class="filter__form filter__form--initial filter__form--collapsible"
     data-testid="filter-test-form"
     id="filter-test-form"
   >
@@ -160,13 +228,23 @@ exports[`SearchFilter component when groupAfterMobile = 0 and groupAfterDesktop
       </div>
     </div>
   </form>
+  <div
+    class="filter__refine filter__refine--mobile-close"
+    data-testid="refine-mobile"
+  >
+    <div
+      role="button"
+    >
+      Refine Search
+    </div>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`SearchFilter component when groupAfterMobile > 0 and groupAfterDesktop = 0 should render without throwing error and match snapshot 1`] = `
 <DocumentFragment>
   <form
-    class=""
+    class="filter__form filter__form--initial filter__form--collapsible"
     data-testid="filter-test-form"
     id="filter-test-form"
   >
@@ -323,13 +401,23 @@ exports[`SearchFilter component when groupAfterMobile > 0 and groupAfterDesktop
       </div>
     </div>
   </form>
+  <div
+    class="filter__refine filter__refine--mobile-close"
+    data-testid="refine-mobile"
+  >
+    <div
+      role="button"
+    >
+      Refine Search
+    </div>
+  </div>
 </DocumentFragment>
 `;
 
 exports[`SearchFilter component when groupAfterMobile > 0 and groupAfterDesktop > 0 should render without throwing error and match snapshot 1`] = `
 <DocumentFragment>
   <form
-    class=""
+    class="filter__form filter__form--initial filter__form--collapsible"
     data-testid="filter-test-form"
     id="filter-test-form"
   >
@@ -492,71 +580,23 @@ exports[`SearchFilter component when groupAfterMobile > 0 and groupAfterDesktop
       </div>
     </div>
   </form>
-</DocumentFragment>
-`;
-
-exports[`SearchFilter component when the device is desktop should render without throwing error and match snapshot 1`] = `
-<DocumentFragment>
-  <form
-    class=""
-    data-testid="filter-test-form"
-    id="filter-test-form"
+  <div
+    class="filter__refine filter__refine--mobile-close"
+    data-testid="refine-mobile"
   >
     <div
-      class="filter filter--search-refine"
+      role="button"
     >
-      <div
-        class="filter__reset"
-      >
-        <button
-          class="icon-button icon-button--reset"
-          data-testid="reset-icon"
-          title="reset--button"
-          type="button"
-        >
-          <i>
-            <svg
-              fill="currentColor"
-              height="1em"
-              stroke="currentColor"
-              stroke-width="0"
-              viewBox="0 0 512 512"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M256.455 8c66.269.119 126.437 26.233 170.859 68.685l35.715-35.715C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.75c-30.864-28.899-70.801-44.907-113.23-45.273-92.398-.798-170.283 73.977-169.484 169.442C88.764 348.009 162.184 424 256 424c41.127 0 79.997-14.678 110.629-41.556 4.743-4.161 11.906-3.908 16.368.553l39.662 39.662c4.872 4.872 4.631 12.815-.482 17.433C378.202 479.813 319.926 504 256 504 119.034 504 8.001 392.967 8 256.002 7.999 119.193 119.646 7.755 256.455 8z"
-              />
-            </svg>
-          </i>
-        </button>
-        <div
-          data-testid="reset-button"
-          role="button"
-        >
-          Reset all filters
-        </div>
-      </div>
-      <div
-        class="filter__wrapper filter__wrapper--search-refine"
-      >
-        <br />
-        <button
-          class="button button--full-width"
-          type="submit"
-        >
-          Search
-        </button>
-      </div>
+      Refine Search
     </div>
-  </form>
+  </div>
 </DocumentFragment>
 `;
 
-exports[`SearchFilter component when the device is mobile when isCollapsedOnResponsive = false, displaySearchFilter = false should render without throwing error and match snapshot 1`] = `
+exports[`SearchFilter component when isCollapsedOnResponsive = false, displaySearchFilter = false should render without throwing error and match snapshot 1`] = `
 <DocumentFragment>
   <form
-    class=""
+    class="filter__form filter__form--initial"
     data-testid="filter-test-form"
     id="filter-test-form"
   >
@@ -611,10 +651,10 @@ exports[`SearchFilter component when the device is mobile when isCollapsedOnResp
 </DocumentFragment>
 `;
 
-exports[`SearchFilter component when the device is mobile when isCollapsedOnResponsive = true, displaySearchFilter = true should render without throwing error and match snapshot 1`] = `
+exports[`SearchFilter component when isCollapsedOnResponsive = true, displaySearchFilter = true should render without throwing error and match snapshot 1`] = `
 <DocumentFragment>
   <form
-    class="filter__form filter__form--mobile"
+    class="filter__form filter__form--initial filter__form--mobile filter__form--collapsible"
     data-testid="filter-test-form"
     id="filter-test-form"
   >
@@ -649,6 +689,38 @@ exports[`SearchFilter component when the device is mobile when isCollapsedOnResp
     <div
       class="filter filter--search-refine"
     >
+      <div
+        class="filter__reset"
+      >
+        <button
+          class="icon-button icon-button--reset"
+          data-testid="reset-icon"
+          title="reset--button"
+          type="button"
+        >
+          <i>
+            <svg
+              fill="currentColor"
+              height="1em"
+              stroke="currentColor"
+              stroke-width="0"
+              viewBox="0 0 512 512"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M256.455 8c66.269.119 126.437 26.233 170.859 68.685l35.715-35.715C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.75c-30.864-28.899-70.801-44.907-113.23-45.273-92.398-.798-170.283 73.977-169.484 169.442C88.764 348.009 162.184 424 256 424c41.127 0 79.997-14.678 110.629-41.556 4.743-4.161 11.906-3.908 16.368.553l39.662 39.662c4.872 4.872 4.631 12.815-.482 17.433C378.202 479.813 319.926 504 256 504 119.034 504 8.001 392.967 8 256.002 7.999 119.193 119.646 7.755 256.455 8z"
+              />
+            </svg>
+          </i>
+        </button>
+        <div
+          data-testid="reset-button"
+          role="button"
+        >
+          Reset all filters
+        </div>
+      </div>
       <div
         class="filter__wrapper filter__wrapper--search-refine"
       >

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

@@ -1,23 +1,27 @@
 import { render } from '@blaze-cms/tools/test-helpers/test-functions';
-import { screen } from '@testing-library/react';
+import { screen, fireEvent, act } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import { SelectFilter } from '../../../../../../src/components/SearchFilter/components';
+import { DEFAULT_OPTION } from '../../../../../../src/components/SearchFilter/constants';
 
 jest.mock('next/router', () => ({
   useRouter: jest.fn(() => ({ asPath: 'test-url' }))
 }));
 
+const changeValue = 'name2';
+const testId = 'filter-name';
 const props = {
   data: {
     name: {
-      buckets: [{ key: 'name1' }, { key: 'name2' }]
+      buckets: [{ key: 'name1' }, { key: changeValue }]
     }
   },
   filterValues: {},
   updateFilterValues: jest.fn(),
   prop: 'name',
   buttonRef: {},
-  hasUrl: false
+  hasUrl: false,
+  shouldSearch: true
 };
 
 describe('Select component', () => {
@@ -26,10 +30,60 @@ describe('Select component', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  it('should  match snapshot with label', () => {
+  it('should match snapshot with label', () => {
     const label = 'Select name';
     const propsWithLabel = { ...props, label };
     render(SelectFilter, propsWithLabel);
     expect(screen.getByLabelText(label)).toBeInTheDocument();
   });
+
+  it('should pass on changed value', () => {
+    const { getByTestId } = render(SelectFilter, props);
+    act(() => {
+      fireEvent.change(getByTestId(testId), { target: { value: changeValue } });
+    });
+
+    expect(props.updateFilterValues).toHaveBeenCalledWith(
+      {
+        [props.prop]: changeValue
+      },
+      props.shouldSearch
+    );
+  });
+
+  it('should reset value if default option selected', () => {
+    const { getByTestId } = render(SelectFilter, props);
+    act(() => {
+      fireEvent.change(getByTestId(testId), { target: { value: DEFAULT_OPTION } });
+    });
+
+    expect(props.updateFilterValues).toHaveBeenCalledWith(
+      {
+        [props.prop]: ''
+      },
+      props.shouldSearch
+    );
+  });
+
+  it('should display label as placeholder with no label tag', () => {
+    const label = 'Placeholder label';
+    const { asFragment, getByTestId, queryByText } = render(SelectFilter, {
+      ...props,
+      label,
+      displayLabelAsPlaceholder: true
+    });
+    expect(asFragment()).toMatchSnapshot();
+    expect(queryByText(DEFAULT_OPTION)).toBeNull();
+
+    act(() => {
+      fireEvent.change(getByTestId(testId), { target: { value: label } });
+    });
+
+    expect(props.updateFilterValues).toHaveBeenCalledWith(
+      {
+        [props.prop]: ''
+      },
+      props.shouldSearch
+    );
+  });
 });

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

@@ -1,5 +1,32 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Select component should display label as placeholder with no label tag 1`] = `
+<DocumentFragment>
+  <div
+    class="form-field form-field--select"
+  >
+    <select
+      data-testid="filter-name"
+      id="name"
+    >
+      <option>
+        Placeholder label
+      </option>
+      <option
+        value="name1"
+      >
+        name1
+      </option>
+      <option
+        value="name2"
+      >
+        name2
+      </option>
+    </select>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Select component should render witout throwing an error and match snapshot 1`] = `
 <DocumentFragment>
   <div
@@ -12,14 +39,10 @@ exports[`Select component should render witout throwing an error and match snaps
       name
     </label>
     <select
+      data-testid="filter-name"
       id="name"
     >
       <option>
-        Please Choose...
-      </option>
-      <option
-        value="Any"
-      >
         Any
       </option>
       <option

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

@@ -6,6 +6,10 @@ Object {
     "$$typeof": Symbol(react.forward_ref),
     "render": [Function],
   },
+  "breadcrumb": Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "render": [Function],
+  },
   "button": Object {
     "$$typeof": Symbol(react.forward_ref),
     "render": [Function],