@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, cleanup } from '@testing-library/react';
import { setGlobalId } from '@zohodesk/components/es/Provider/IdProvider';
import DotProvider from "../DotProvider";
beforeEach(() => {
  setGlobalId(0);
});
afterEach(() => {
  cleanup();
}); // 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(() => {
      const el = document.body.querySelector('[data-mode]');
      expect(el?.getAttribute('data-mode')).toBe('light');
      const el2 = document.body.querySelector('[data-theme]');
      expect(el2?.getAttribute('data-theme')).toBe('blue');
    }); // 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.forEach(appearance => {
    describe(`Theme appearance: ${appearance}`, () => {
      test.each(THEME_COLOR)(`should render with themeAppearance = ${appearance} and themeColor = %s `, async theme => {
        const {
          asFragment
        } = render( /*#__PURE__*/React.createElement(DotProvider, {
          themeAppearance: appearance,
          themeColor: theme
        }));
        await waitFor(() => {
          const el = document.body.querySelector('[data-mode]');
          expect(el?.getAttribute('data-mode')).toBe(appearance);
          const el2 = document.body.querySelector('[data-theme]');
          expect(el2?.getAttribute('data-theme')).toBe(theme);
        });
        expect(asFragment()).toMatchSnapshot();
      });
    });
  });
  THEME_APPEARANCE.forEach(appearance => {
    describe(`Theme appearance: ${appearance}`, () => {
      test.each(THEME_COLOR)(`should render with themeAppearance = ${appearance} and themeColor = %s with custom attributes`, async theme => {
        const {
          asFragment
        } = render( /*#__PURE__*/React.createElement(DotProvider, {
          themeAppearance: appearance,
          themeColor: theme,
          themeAppearanceAttr: "data-desk-mode",
          themeColorAttr: "data-desk-theme"
        }));
        await waitFor(() => {
          const el = document.body.querySelector('[data-desk-mode]');
          expect(el?.getAttribute('data-desk-mode')).toBe(appearance);
          const el2 = document.body.querySelector('[data-desk-theme]');
          expect(el2?.getAttribute('data-desk-theme')).toBe(theme);
        });
        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