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

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

@@ -1,123 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-import React from 'react';
-import '@testing-library/jest-dom/extend-expect';
-import { MockedProvider } from '@apollo/client/testing';
-import { render, act, screen, waitFor } from '@testing-library/react';
-
-import { Router } from 'react-router-dom';
-import { createMemoryHistory } from 'history';
-import GlobalLightbox from '../../../../../../src/components/Image/GlobalLightbox/GlobalLightbox';
-import getMockedLightboxProps from './getMockedLightboxProps';
-import LIGHTBOX_MOCKS from './mocks';
-
-const [MOCK_WITH_DATA, MOCK_WITH_ERROR] = LIGHTBOX_MOCKS;
-
-const testId = 'globalLightboxImage';
-const credits = 'credits test';
-
-const mockProps = {
-  images: [
-    {
-      imageId: 'test-id',
-      url: 'www.url-test-prop.com',
-      areImageCreditsDisplayed: true,
-      isCaptionDisplayed: true,
-      credits
-    }
-  ]
-};
-
-const setup = async (props, mocks) => {
-  const history = createMemoryHistory();
-
-  return (
-    <Router history={history}>
-      <MockedProvider mocks={mocks}>
-        <GlobalLightbox {...props} />
-      </MockedProvider>
-    </Router>
-  );
-};
-
-const renderComponent = async component => {
-  let renderResults;
-
-  await act(async () => {
-    renderResults = render(component);
-  });
-
-  return {
-    ...renderResults
-  };
-};
-
-const setupTest = async () => {
-  const props = getMockedLightboxProps();
-  const componentMock = await setup(props, MOCK_WITH_DATA);
-  const renderResults = await renderComponent(componentMock);
-
-  return {
-    ...renderResults
-  };
-};
-
-describe('GlobalLightbox component', () => {
-  it('should be defined', () => {
-    expect(GlobalLightbox).toBeDefined();
-    expect(typeof GlobalLightbox).toEqual('function');
-  });
-
-  it('should match snapshot', async () => {
-    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();
-    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, 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 () => {
-    const props = getMockedLightboxProps(mockProps);
-
-    const componentMock = await setup(props, MOCK_WITH_DATA);
-    const { getByTestId } = await renderComponent(componentMock);
-    expect(getByTestId('image-details'));
-  });
-
-  it('should not render ImageDetails if shouldDisplayCredits & shouldDisplayCaptions are false', async () => {
-    const props = getMockedLightboxProps({
-      images: [
-        {
-          imageId: 'test-id',
-          url: 'www.url-test-prop.com',
-          areImageCreditsDisplayed: false,
-          isCaptionDisplayed: false,
-          credits
-        }
-      ]
-    });
-
-    const componentMock = await setup(props, MOCK_WITH_DATA);
-
-    await act(async () => {
-      render(componentMock);
-    });
-
-    const imageCredits = screen.queryByText('credits test');
-    expect(imageCredits).not.toBeInTheDocument();
-  });
-});

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

@@ -1,44 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-import React from 'react';
-import '@testing-library/jest-dom/extend-expect';
-import { render, screen, fireEvent } from '@testing-library/react';
-import NavButton from '../../../../../../src/components/Image/GlobalLightbox/NavButton';
-
-const handleAction = jest.fn();
-
-const getMockedProps = overrides => ({
-  modifier: 'next',
-  handleAction,
-  show: true,
-  ...overrides
-});
-
-const renderComponent = (Component, props, renderMethod = render) => {
-  const rendered = renderMethod(<Component {...props} />);
-  return { ...rendered };
-};
-
-describe('NavButton component', () => {
-  it('should render without throwing error and match snapshot', () => {
-    const { asFragment } = renderComponent(NavButton, getMockedProps());
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should call mocked function on click button', () => {
-    renderComponent(NavButton, getMockedProps());
-    const button = screen.getByRole('button');
-
-    fireEvent.click(button);
-    expect(handleAction).toHaveBeenCalled();
-  });
-
-  it('should render correct button', () => {
-    const { rerender, getByTestId } = renderComponent(NavButton, getMockedProps());
-    expect(getByTestId('navButton-next')).toHaveClass('arrow--right');
-
-    rerender(<NavButton {...getMockedProps({ modifier: 'previous' })} />);
-    expect(getByTestId('navButton-previous')).toHaveClass('arrow--left');
-  });
-});

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

@@ -1,101 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`GlobalLightbox component should match snapshot 1`] = `
-<DocumentFragment>
-  <div>
-    <div
-      class="overlay"
-    />
-    <div
-      class="modal modal--full-screen modal--gallery modal--show"
-    >
-      <header
-        class="modal__header modal__header--gallery"
-      >
-        <div
-          class="modal__title modal__title--gallery"
-        />
-        <div
-          aria-label="Close modal"
-          class="modal__close"
-          role="button"
-        >
-          <i>
-            <svg
-              fill="currentColor"
-              height="1em"
-              stroke="currentColor"
-              stroke-width="0"
-              viewBox="0 0 352 512"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-              />
-            </svg>
-          </i>
-        </div>
-      </header>
-      <div
-        class="modal__content modal__content--gallery"
-      >
-        <div
-          class="gallery"
-        >
-          <div
-            class="gallery__column gallery__column--slider"
-          >
-            <div
-              class="gallery__slider"
-            >
-              <div
-                class="slider__wrapper slider__wrapper--gallery open"
-              >
-                <div
-                  class="slider__header slider__header--gallery"
-                >
-                  <div
-                    class="slider__counter slider__counter--gallery"
-                    data-testid="image-counter"
-                  >
-                    1 / 1
-                  </div>
-                </div>
-                <div
-                  class="slider slider--gallery"
-                >
-                  <div
-                    class="slider__list slider__list--gallery"
-                  >
-                    <div
-                      class="slider__list-wrapper slider__list-wrapper--gallery"
-                    >
-                      <div
-                        class="slider__slide slider__slide--gallery"
-                      >
-                        <a
-                          aria-label="Open www.url-test-prop.com"
-                          href="http://www.url-test-prop.com"
-                          rel="noopener nofollow"
-                          target="_blank"
-                        >
-                          <img
-                            alt=""
-                            data-testid="globalLightboxImage"
-                            src="test-url"
-                          />
-                        </a>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;

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

@@ -1,15 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NavButton component should render without throwing error and match snapshot 1`] = `
-<DocumentFragment>
-  <div
-    class="slider__button slider__button--gallery slider__button--next"
-    role="button"
-  >
-    <div
-      class="arrow arrow--right"
-      data-testid="navButton-next"
-    />
-  </div>
-</DocumentFragment>
-`;

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

@@ -1,15 +0,0 @@
-function getMockedLightboxProps(overrides) {
-  return {
-    images: [
-      {
-        imageId: 'test-id',
-        url: 'www.url-test-prop.com'
-      }
-    ],
-    selectedImage: 0,
-    onClose: jest.fn(),
-    ...overrides
-  };
-}
-
-export default getMockedLightboxProps;

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

@@ -1,39 +0,0 @@
-import { getFileById } from '../../../../../../src/application/query';
-
-const LIGHTBOX_MOCKS = [
-  [
-    {
-      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'
-          }
-        }
-      }
-    }
-  ],
-  [
-    {
-      request: {
-        query: getFileById,
-        variables: {
-          id: 'error'
-        }
-      },
-      error: new Error('this is an error')
-    }
-  ]
-];
-
-export default LIGHTBOX_MOCKS;

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

@@ -1,213 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-import React from 'react';
-import '@testing-library/jest-dom/extend-expect';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import Image from '../../../../../src/components/Image/Image';
-
-jest.mock('../../../../../src/components/Image/ImageRender', () =>
-  jest.fn(({ alt, imageUrl, sizeKey }) => <img alt={alt} src={imageUrl} data-testid={sizeKey} />)
-);
-
-jest.mock('@blaze-react/utils/lib/customHooks', () => ({
-  useInView: jest.fn(() => [true, null])
-}));
-
-const renderComponent = props => {
-  const _render = render(<Image {...props} />);
-  return { ..._render };
-};
-
-const mockedProps = {
-  imageUrl: 'https://blazecms.app/image.jpg',
-  imageId: 'test-id',
-  url: 'www.url-test-prop.com',
-  style: {},
-  enableLightbox: false,
-  type: 'image'
-};
-
-describe('Image component', () => {
-  it('should render loading state initially', async () => {
-    const { container } = await renderComponent(mockedProps);
-
-    expect(container.innerHTML).toContain('image__wrapper');
-  });
-
-  it('should render image', async () => {
-    const { asFragment } = await renderComponent(mockedProps);
-
-    await waitFor(() => expect(asFragment()).toBeDefined());
-
-    await waitFor(() => expect(asFragment()).toMatchSnapshot());
-  });
-
-  it('should render image with parallax setting', async () => {
-    const { asFragment } = await renderComponent({ ...mockedProps, parallax: true });
-
-    await waitFor(() => expect(asFragment()).toBeDefined());
-
-    await waitFor(() => expect(asFragment()).toMatchSnapshot());
-  });
-
-  it('should renderimage with children', async () => {
-    const { asFragment, getByTestId } = await renderComponent({
-      ...mockedProps,
-      children: <div data-testid="image-child" />
-    });
-
-    await waitFor(() => expect(asFragment()).toBeDefined());
-
-    await waitFor(() => expect(asFragment()).toMatchSnapshot());
-
-    expect(getByTestId('image-child')).toBeDefined();
-  });
-
-  it('should render a div wrapper if no imageUrl or imageUrl and enableLightbox is true', async () => {
-    const { container } = renderComponent({ ...mockedProps, enableLightbox: true });
-    expect(container.innerHTML).toContain('image__wrapper');
-  });
-
-  it('should render caption if image has it & isCaptionDisplayed is true', async () => {
-    const imageData = {
-      caption: 'test-caption'
-    };
-    const { container } = renderComponent({ ...mockedProps, imageData, isCaptionDisplayed: true });
-
-    expect(container.innerHTML).toContain('test-caption');
-  });
-
-  it('should render credits if image has & if shouldDisplayCredits is true', async () => {
-    const imageData = {
-      credits: 'test-credits',
-      imageCredits: 'test-imageCredits'
-    };
-    const { container } = renderComponent({
-      ...mockedProps,
-      ...imageData,
-      areImageCreditsDisplayed: true
-    });
-
-    expect(container.innerHTML).toContain('test-credits');
-  });
-
-  it('should render imageCredits if credits is not defined', async () => {
-    const imageData = {
-      imageCredits: 'test-imageCredits'
-    };
-    const { container } = renderComponent({
-      ...mockedProps,
-      ...imageData,
-      areImageCreditsDisplayed: true
-    });
-
-    expect(container.innerHTML).toContain('test-imageCredits');
-  });
-
-  it('should render 1 image button if display count is true and there is one lightbox image', () => {
-    const extraProps = {
-      enableLightbox: true,
-      displayCount: true,
-      lightboxImages: [{}],
-      images: [{}],
-      handleSelectedImage: () => {},
-      toggleModal: () => {}
-    };
-    const { container } = renderComponent({
-      ...mockedProps,
-      ...extraProps
-    });
-
-    expect(container.innerHTML).toContain('1 image');
-  });
-
-  it('should render n images button if display count is true and there is more than one lightbox image', async () => {
-    const extraProps = {
-      enableLightbox: true,
-      displayCount: true,
-      lightboxImages: [{}, {}, {}],
-      images: [{}, {}, {}],
-      handleSelectedImage: () => {},
-      toggleModal: () => {}
-    };
-    const { container } = renderComponent({
-      ...mockedProps,
-      ...extraProps
-    });
-
-    expect(container.innerHTML).toContain('3 images');
-  });
-
-  it('should not render more images button if display count is false', async () => {
-    const extraProps = {
-      enableLightbox: true,
-      displayCount: false,
-      lightboxImages: [{}, {}, {}],
-      images: [{}, {}, {}],
-      handleSelectedImage: () => {},
-      toggleModal: () => {}
-    };
-    const { container } = renderComponent({
-      ...mockedProps,
-      ...extraProps
-    });
-
-    expect(container.innerHTML).not.toContain('3 images');
-  });
-
-  it('should call display lightbox function when display count button is clicked', async () => {
-    const handleSelectedImage = jest.fn();
-    const toggleModal = jest.fn();
-    const extraProps = {
-      enableLightbox: true,
-      displayCount: true,
-      lightboxImages: [{}, {}],
-      images: [{}, {}],
-      handleSelectedImage,
-      toggleModal
-    };
-    renderComponent({
-      ...mockedProps,
-      ...extraProps
-    });
-
-    const lightboxButton = screen.getByText('2 images');
-    fireEvent.click(lightboxButton);
-
-    expect(toggleModal).toHaveBeenCalled();
-  });
-
-  it('should find image child with hero style based on isHero', async () => {
-    const { container, getByTestId } = renderComponent({
-      ...mockedProps,
-      isHero: true
-    });
-
-    expect(container.innerHTML).toContain('hero__wrapper');
-    expect(getByTestId('image:hero')).toBeDefined();
-  });
-
-  it('should add modifier to wrapper and sizeKey', async () => {
-    const { getByTestId } = renderComponent({
-      ...mockedProps,
-      modifier: 'testmod'
-    });
-    expect(getByTestId('image:testmod')).toBeDefined();
-  });
-
-  it('should combine hero and modifier for sizeKey', async () => {
-    const { getByTestId } = renderComponent({
-      ...mockedProps,
-      isHero: true,
-      modifier: 'testmod'
-    });
-    expect(getByTestId('image:hero:testmod')).toBeDefined();
-  });
-
-  it('should not render ImageDetails if shouldDisplayCredits & shouldDisplayCaptions are false', async () => {
-    const { container } = renderComponent(mockedProps);
-
-    expect(container.innerHTML).not.toContain('image__details');
-  });
-});

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

@@ -1,41 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-import { render } from '@blaze-cms/tools/test-helpers/test-functions';
-import { screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-import ImageDetails from '../../../../../src/components/Image/ImageDetails';
-
-const props = {
-  caption: 'caption-test',
-  credits: 'credits-test',
-  shouldDisplayCaption: false,
-  shouldDisplayCredits: false
-};
-
-describe('ImageDetails component', () => {
-  it('should be defined', () => {
-    expect(ImageDetails).toBeDefined();
-  });
-
-  it('should be a function', () => {
-    expect(typeof ImageDetails).toEqual('function');
-  });
-
-  it('should render without throwing an error and match snapshot', () => {
-    const { asFragment } = render(ImageDetails, props);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should render caption if shouldDisplayCaption is true', () => {
-    const propsWithCaption = { ...props, shouldDisplayCaption: true };
-    render(ImageDetails, propsWithCaption);
-    expect(screen.getByText('caption-test')).toBeInTheDocument();
-  });
-
-  it('should render credits if shouldDisplayCredits is true', () => {
-    const propsWithCredits = { ...props, shouldDisplayCredits: true };
-    render(ImageDetails, propsWithCredits);
-    expect(screen.getByText('credits-test')).toBeInTheDocument();
-  });
-});