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

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();
-  });
-});

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

@@ -1,121 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-import React from 'react';
-import '@testing-library/jest-dom/extend-expect';
-import { render, act, waitFor } from '@testing-library/react';
-import { MockedRoot } from '@blaze-cms/tools/test-helpers/test-functions';
-import ImageFactory from '../../../../../src/components/Image/ImageFactory';
-import {
-  MOCK_BASIC,
-  MOCK_HANDLEBAR_IMG_SRC,
-  MOCK_NO_URL,
-  MOCK_WITH_ERR,
-  MOCK_RELATION
-} from './mocks';
-
-jest.mock('@blaze-react/utils/lib/customHooks', () => ({
-  useInView: jest.fn(() => [true, null])
-}));
-
-const setup = async (props, mocks) => (
-  <MockedRoot mocks={mocks}>
-    <ImageFactory {...props} />
-  </MockedRoot>
-);
-
-const renderComponent = async component => {
-  let renderResults;
-
-  await act(async () => {
-    renderResults = render(component);
-  });
-
-  return {
-    ...renderResults
-  };
-};
-
-const setupTest = async (props = {}, mocks = {}) => {
-  const mockProps = {
-    parent: {
-      itemId: 'parentId',
-      getAction: 'getPublishedPage',
-      itemEntity: 'page'
-    },
-    imageId: 'test-id',
-    url: 'www.url-test-prop.com',
-    style: {},
-    enableLightbox: false,
-    imageRelation: ['publishedPage.otherImageIds'],
-    ...props
-  };
-
-  const componentMock = await setup(mockProps, mocks);
-
-  const renderResults = await renderComponent(componentMock);
-
-  return {
-    ...renderResults
-  };
-};
-
-const options = {
-  interval: 500,
-  timeout: 8000
-};
-
-describe('ImageFactory component', () => {
-  it('should render loading state initially', async () => {
-    const { container } = await setupTest({}, MOCK_BASIC);
-
-    await waitFor(() => expect(container).toBeDefined(), options);
-  });
-
-  it('should render image', async () => {
-    const { asFragment, container } = await setupTest({ imageId: 'test-id' }, MOCK_BASIC);
-    await waitFor(() => {
-      expect(container.childNodes.length).toBe(1);
-    });
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should render image with handlebar compiled value if imgSrc is present and returns a value', async () => {
-    const { asFragment } = await setupTest(
-      { imgSrc: '{{currentParent.image.url}}' },
-      MOCK_HANDLEBAR_IMG_SRC
-    );
-
-    await waitFor(() => expect(asFragment()).toBeDefined(), options);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should render image fetching data from relation', async () => {
-    const entity = 'page';
-    const { asFragment, container } = await setupTest(
-      { imageId: null, entity, fetchFromRelation: true },
-      MOCK_RELATION
-    );
-
-    await waitFor(() => {
-      expect(container.childNodes.length).toBeGreaterThan(1);
-    });
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('if no imageUrl is present, component shouldnt render an image', async () => {
-    const { container } = await setupTest({ imageId: 'test-no-url' }, MOCK_NO_URL);
-
-    await waitFor(() => {
-      expect(container).toBeDefined();
-    });
-
-    expect(container.innerHTML).toBe('');
-  });
-
-  it('should return error message if error', async () => {
-    const { container } = await setupTest({ imageId: 'error' }, MOCK_WITH_ERR);
-
-    await waitFor(() => expect(container.innerHTML).toContain('error'));
-  });
-});

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

@@ -1,54 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-import React from 'react';
-import '@testing-library/jest-dom/extend-expect';
-import { render } from '@testing-library/react';
-import ImageRender from '../../../../../src/components/Image/ImageRender';
-
-jest.mock('../../../../../src/components/Image/Lightbox/Lightbox', () =>
-  jest.fn(() => <div data-testid="lightbox" />)
-);
-
-const mockedProps = {
-  imageUrl: 'https://blazecms.app/image.jpg',
-  style: {},
-  isIntersecting: true,
-  displayLightbox: false,
-  enableLightbox: false,
-  handleEnableLightbox: jest.fn(),
-  toggleLightbox: jest.fn(),
-  lightboxImgProps: {}
-};
-
-describe('Image Render component', () => {
-  it('should render image', () => {
-    const { container, asFragment } = render(<ImageRender {...mockedProps} />);
-    expect(container.childNodes[0].nodeName).toEqual('IMG');
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should render image and lightbox', () => {
-    const { asFragment, getByTestId } = render(<ImageRender {...mockedProps} displayLightbox />);
-    expect(getByTestId('lightbox')).toBeDefined();
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should set cursor style when lightbox enabled', () => {
-    const { container, asFragment } = render(<ImageRender {...mockedProps} enableLightbox />);
-    expect(container.childNodes[0]).toHaveStyle({ cursor: 'pointer' });
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should render plain img tag if imgSrc is present', () => {
-    const { asFragment } = render(
-      <ImageRender
-        {...mockedProps}
-        shouldRenderImgTag
-        imageUrl="some-external-image-url"
-        alt="image-alt"
-      />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

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

@@ -1,64 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-import React from 'react';
-import '@testing-library/jest-dom/extend-expect';
-import { render, act, waitFor } from '@testing-library/react';
-import LightBox from '../../../../../../src/components/Image/Lightbox';
-
-jest.mock('../../../../../../src/components/Banner', () =>
-  jest.fn().mockImplementation(() => <span>Banner</span>)
-);
-
-jest.mock('../../../../../../src/components/ModalAdapter', () =>
-  jest.fn().mockImplementation(({ children }) => children)
-);
-
-const mockProps = {
-  imageUrl: 'some-url',
-  altTxt: 'atl text',
-  closeModal: () => {},
-  caption: 'image caption',
-  hasBanner: true,
-  banner: {
-    router: { asPath: 'somePath' },
-    adunit: 'adunit',
-    sizes: 'large',
-    targetings: 'targeto',
-    interval: 3,
-    repeat: false
-  },
-  parent: {
-    itemId: 'someid',
-    itemEntity: 'published_page',
-    category: null,
-    tags: []
-  },
-  imgWrapperProps: { href: 'img href', title: 'title' }
-};
-
-const setup = async props => {
-  let renderResult;
-
-  const mockComponent = <LightBox {...props} />;
-
-  await act(async () => {
-    renderResult = render(mockComponent);
-  });
-
-  return {
-    ...renderResult
-  };
-};
-
-describe('LightBox component', () => {
-  it('should render without throwing an error and match snapshot', async () => {
-    const { asFragment } = await setup(mockProps);
-
-    waitFor(() => {
-      expect(asFragment()).toBeDefined();
-    });
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

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

@@ -1,17 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`LightBox component should render without throwing an error and match snapshot 1`] = `
-<DocumentFragment>
-  <div
-    class="row row--display-row"
-  >
-    <div
-      class="column column--two-thirds"
-    >
-      <div
-        class="image"
-      />
-    </div>
-  </div>
-</DocumentFragment>
-`;

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

@@ -1,21 +0,0 @@
-export const mock = {
-  imageUrl: 'some-url',
-  altTxt: 'atl text',
-  closeModal: () => {},
-  caption: 'image caption',
-  hasBanner: true,
-  banner: {
-    adunit: 'adunit',
-    sizes: 'large',
-    targetings: 'targeto',
-    interval: 3,
-    repeat: false
-  },
-  parent: {
-    itemId: 'someid',
-    itemEntity: 'published_page',
-    category: null,
-    tags: []
-  },
-  imgWrapperProps: { href: 'img href', title: 'title' }
-};

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

@@ -1,74 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Image component should render image 1`] = `
-<DocumentFragment>
-  <div
-    class="image "
-  >
-    <a
-      aria-label="Open www.url-test-prop.com"
-      class="image__wrapper"
-      href="http://www.url-test-prop.com"
-      rel="noopener nofollow"
-      target="_blank"
-    >
-      <img
-        alt=""
-        data-testid="image"
-        src="https://blazecms.app/image.jpg"
-      />
-    </a>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Image component should render image with parallax setting 1`] = `
-<DocumentFragment>
-  <div
-    class="image image--parallax"
-  >
-    <a
-      aria-label="Open www.url-test-prop.com"
-      class="image__wrapper"
-      href="http://www.url-test-prop.com"
-      rel="noopener nofollow"
-      target="_blank"
-    >
-      <img
-        alt=""
-        data-testid="image"
-        src="https://blazecms.app/image.jpg"
-      />
-    </a>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Image component should renderimage with children 1`] = `
-<DocumentFragment>
-  <div
-    class="image "
-  >
-    <a
-      aria-label="Open www.url-test-prop.com"
-      class="image__wrapper"
-      href="http://www.url-test-prop.com"
-      rel="noopener nofollow"
-      target="_blank"
-    >
-      <img
-        alt=""
-        data-testid="image"
-        src="https://blazecms.app/image.jpg"
-      />
-      <div
-        class="image__children"
-      >
-        <div
-          data-testid="image-child"
-        />
-      </div>
-    </a>
-  </div>
-</DocumentFragment>
-`;

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

@@ -1,10 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ImageDetails component should render without throwing an error and match snapshot 1`] = `
-<DocumentFragment>
-  <div
-    class="image__details"
-    data-testid="image-details"
-  />
-</DocumentFragment>
-`;