@zohodesk/dot
Version:
In this Library, we Provide Some Basic Components to Build Your Application
306 lines (302 loc) • 12 kB
JavaScript
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)
}));
});
test('should not set zoom CSS variable when zoom is excluded', async () => {
const {
container
} = render( /*#__PURE__*/React.createElement(DotProvider, {
id: "dot-provider",
excludeFeatures: ['zoom'],
baseZoomUnit: "2px"
}, "This is a DotProvider component"));
await waitFor(() => {});
const el = container.querySelector('#dot-provider');
expect(el.style.getPropertyValue('--zd_baseUnit')).toBe('');
});
test('should still set font CSS variable when zoom is excluded', async () => {
const {
container
} = render( /*#__PURE__*/React.createElement(DotProvider, {
id: "dot-provider",
excludeFeatures: ['zoom'],
baseFontUnit: "18px"
}, "This is a DotProvider component"));
await waitFor(() => {
const el = container.querySelector('#dot-provider');
expect(el.style.getPropertyValue('--zd_baseFontUnit')).toBe('18px');
});
});
test('should not set font CSS variable when font is excluded', async () => {
const {
container
} = render( /*#__PURE__*/React.createElement(DotProvider, {
id: "dot-provider",
excludeFeatures: ['font'],
baseFontUnit: "18px"
}, "This is a DotProvider component"));
await waitFor(() => {});
const el = container.querySelector('#dot-provider');
expect(el.style.getPropertyValue('--zd_baseFontUnit')).toBe('');
});
test('should still set zoom CSS variable when font is excluded', async () => {
const {
container
} = render( /*#__PURE__*/React.createElement(DotProvider, {
id: "dot-provider",
excludeFeatures: ['font'],
baseZoomUnit: "2px"
}, "This is a DotProvider component"));
await waitFor(() => {
const el = container.querySelector('#dot-provider');
expect(el.style.getPropertyValue('--zd_baseUnit')).toBe('2px');
});
});
test('should not set zoom or font CSS variables when both are excluded', async () => {
const {
container
} = render( /*#__PURE__*/React.createElement(DotProvider, {
id: "dot-provider",
excludeFeatures: ['font', 'zoom'],
baseZoomUnit: "2px",
baseFontUnit: "18px"
}, "This is a DotProvider component"));
await waitFor(() => {});
const el = container.querySelector('#dot-provider');
expect(el.style.getPropertyValue('--zd_baseUnit')).toBe('');
expect(el.style.getPropertyValue('--zd_baseFontUnit')).toBe('');
});
test('getAssetsPromises should expose resolved promises when features are excluded', async () => {
const mockFunc = jest.fn();
render( /*#__PURE__*/React.createElement(DotProvider, {
excludeFeatures: ['font', 'zoom'],
getAssetsPromises: mockFunc
}, "This is a DotProvider component"));
await waitFor(() => {});
expect(mockFunc).toHaveBeenCalledWith(expect.objectContaining({
zoomSizePromise: expect.any(Promise),
fontSizePromise: expect.any(Promise)
}));
const {
zoomSizePromise,
fontSizePromise
} = mockFunc.mock.calls[0][0];
await expect(zoomSizePromise).resolves.toBeUndefined();
await expect(fontSizePromise).resolves.toBeUndefined();
});
test('onAssetsDownloadSuccess should still fire when font and zoom are excluded', async () => {
const mockFunc = jest.fn();
render( /*#__PURE__*/React.createElement(DotProvider, {
excludeFeatures: ['font', 'zoom'],
onAssetsDownloadSuccess: mockFunc
}, "This is a DotProvider component"));
await waitFor(() => {
expect(mockFunc).toHaveBeenCalled();
});
});
test('should not set theme attributes when theme is excluded', async () => {
const {
container
} = render( /*#__PURE__*/React.createElement(DotProvider, {
id: "dot-provider",
excludeFeatures: ['theme'],
themeAppearance: "dark",
themeColor: "orange"
}, "This is a DotProvider component"));
await waitFor(() => {});
const el = container.querySelector('#dot-provider');
expect(el.getAttribute('data-mode')).toBeNull();
expect(el.getAttribute('data-theme')).toBeNull();
});
}); // need to check error handling cases
// onAssetsDownloadSuccess not called verification