@zohodesk/dot/es/DotProvider/__tests__/DotProvider.spec.js

In this Library, we Provide Some Basic Components to Build Your Application

import React from 'react';
import { render, waitFor } from '@testing-library/react';
import DotProvider from "../DotProvider"; // snapshot test cases

describe('DotProvider Snapshot', () => {
  const THEME_APPEARANCE = ['light', 'dark', 'pureDark'];
  const THEME_COLOR = ['blue', 'green', 'orange', 'red', 'yellow'];
  const BASE_ZOOM_UNIT = ['0.5', '0.8', '1', '1.2'];
  const BASE_FONT_UNIT = ['1px', '1rem', '1em', '1'];
  test('rendering the default props', async () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(DotProvider, null, "This is a DotProvider component")); // wait for the data attributes and styles to be applied

    await waitFor(() => {}); // take the snapshot after the attributes and styles are applied

    expect(asFragment()).toMatchSnapshot();
  });
  test('rendering the default attributes, styles and modified the tag props', async () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(DotProvider, {
      tag: "span"
    }, "This is a DotProvider component"));
    await waitFor(() => {});
    expect(asFragment()).toMatchSnapshot();
  });
  test('rendering the default attributes, styles and modifying the tag prop to React.Fragment', async () => {
    render( /*#__PURE__*/React.createElement(DotProvider, {
      tag: React.Fragment
    }, "This is a DotProvider component"));
    await waitFor(() => {});
    expect(document.documentElement).toMatchSnapshot();
  });
  test('rendering the providerRef props', async () => {
    const mockProviderRef = jest.fn();
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(DotProvider, {
      providerRef: mockProviderRef
    }, "This is a DotProvider component"));
    await waitFor(() => {});
    expect(asFragment()).toMatchSnapshot();
  });
  test('rendering the additional ...rest props', async () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(DotProvider, {
      className: "testClass",
      "data-id": "test-id"
    }, "This is a DotProvider component"));
    await waitFor(() => {});
    expect(asFragment()).toMatchSnapshot();
  });
  test('rendering the wrong themeAppearance and themeColor', async () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(DotProvider, {
      themeAppearance: "ligt",
      themeColor: "gren"
    }, "This is a DotProvider component"));
    await waitFor(() => {});
    expect(asFragment()).toMatchSnapshot();
  });
  THEME_APPEARANCE.map(appearance => {
    test.each(THEME_COLOR)(`rendering the theme-appearance of ${appearance} along with theme-color of %s`, async theme => {
      const {
        asFragment
      } = render( /*#__PURE__*/React.createElement(DotProvider, {
        themeAppearance: appearance,
        themeColor: theme
      }));
      await waitFor(() => {});
      expect(asFragment()).toMatchSnapshot();
    });
  });
  THEME_APPEARANCE.map(appearance => {
    test.each(THEME_COLOR)(`rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of ${appearance} along with theme-color of %s`, async theme => {
      const {
        asFragment
      } = render( /*#__PURE__*/React.createElement(DotProvider, {
        themeAppearance: appearance,
        themeColor: theme,
        themeAppearanceAttr: "data-desk-mode",
        themeColorAttr: "data-desk-theme"
      }));
      await waitFor(() => {});
      expect(asFragment()).toMatchSnapshot();
    });
  });
  test.each(BASE_ZOOM_UNIT)(`rendering the baseZoomUnit props of %s`, async zoom => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(DotProvider, {
      baseZoomUnit: zoom
    }));
    await waitFor(() => {});
    expect(asFragment()).toMatchSnapshot();
  });
  test.each(BASE_FONT_UNIT)(`rendering the baseFontUnit props of %s`, async font => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(DotProvider, {
      baseFontUnit: font
    }));
    await waitFor(() => {});
    expect(asFragment()).toMatchSnapshot();
  });
  test('rendering the zoomUnitVariable prop along with baseZoomUnit props', async () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(DotProvider, {
      baseZoomUnit: "1.1",
      zoomUnitVariable: "--gc_baseUnit"
    }, "This is a DotProvider component"));
    await waitFor(() => {});
    expect(asFragment()).toMatchSnapshot();
  });
  test('rendering the fontUnitVariable prop along with baseFontUnit props', async () => {
    const {
      asFragment
    } = render( /*#__PURE__*/React.createElement(DotProvider, {
      baseFontUnit: "14px",
      fontUnitVariable: "--gc_baseFontUnit"
    }, "This is a DotProvider component"));
    await waitFor(() => {});
    expect(asFragment()).toMatchSnapshot();
  });
}); // unit test cases

describe('DotProvider Unit-Test', () => {
  test('rendering the ref function type props', async () => {
    const mockFunctionRef = jest.fn();
    render( /*#__PURE__*/React.createElement(DotProvider, {
      id: "dot-provider",
      ref: mockFunctionRef
    }, "This is a DotProvider component"));
    await waitFor(() => {});
    const dotProviderElement = document.getElementById('dot-provider');
    expect(mockFunctionRef).toHaveBeenCalledWith(dotProviderElement);
  });
  test('rendering the ref object type props', async () => {
    const mockObjectRef = /*#__PURE__*/React.createRef();
    render( /*#__PURE__*/React.createElement(DotProvider, {
      id: "dot-provider",
      ref: mockObjectRef
    }, "This is a DotProvider component"));
    await waitFor(() => {});
    const dotProviderElement = document.getElementById('dot-provider');
    expect(mockObjectRef.current).toBe(dotProviderElement);
  });
  test('rendering the onAssetsDownloadSuccess props', async () => {
    const mockFunc = jest.fn();
    render( /*#__PURE__*/React.createElement(DotProvider, {
      onAssetsDownloadSuccess: mockFunc
    }, "This is a DotProvider component"));
    await waitFor(() => {});
    expect(mockFunc).toHaveBeenCalled();
  });
  test('rendering the getAssetsPromises props', async () => {
    const mockFunc = jest.fn();
    render( /*#__PURE__*/React.createElement(DotProvider, {
      getAssetsPromises: mockFunc
    }, "This is a DotProvider component"));
    await waitFor(() => {});
    expect(mockFunc).toHaveBeenCalledWith(expect.objectContaining({
      fontSizePromise: expect.any(Promise),
      themeAppearancePromise: expect.arrayContaining([expect.any(Promise)]),
      themeColorPromise: expect.arrayContaining([expect.any(Promise)]),
      zoomSizePromise: expect.any(Promise)
    }));
  });
}); // need to check error handling cases
// onAssetsDownloadSuccess not called verification