import React from 'react';
import Watermark from '..';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
import { render, waitFakeTimer } from '../../../tests/utils';
import Drawer from '../../drawer';
import Modal from '../../modal';
describe('Watermark', () => {
mountTest(Watermark);
rtlTest(Watermark);
const mockSrcSet = jest.spyOn(Image.prototype, 'src', 'set');
beforeAll(() => {
mockSrcSet.mockImplementation(function fn() {
// @ts-ignore
this.onload?.();
});
});
beforeEach(() => {
jest.useFakeTimers();
});
afterAll(() => {
mockSrcSet.mockRestore();
});
afterEach(() => {
jest.useRealTimers();
});
it('The watermark should render successfully', () => {
const { container } = render();
expect(container.querySelector('.watermark div')).toBeTruthy();
expect(container).toMatchSnapshot();
});
it('The offset should be correct', () => {
const { container } = render(
,
);
const target = container.querySelector('.watermark div');
expect(target?.style.left).toBe('150px');
expect(target?.style.top).toBe('150px');
expect(target?.style.width).toBe('calc(100% - 150px)');
expect(target?.style.height).toBe('calc(100% - 150px)');
expect(container).toMatchSnapshot();
});
it('Interleaved watermark backgroundSize is correct', () => {
const { container } = render(
,
);
const target = container.querySelector('.watermark div');
expect(target?.style.backgroundSize).toBe('720px');
expect(container).toMatchSnapshot();
});
it('Image watermark snapshot', () => {
const { container } = render(
,
);
expect(container).toMatchSnapshot();
});
it('Invalid image watermark', () => {
mockSrcSet.mockImplementation(function fn() {
// @ts-ignore
this.onerror?.();
});
const { container } = render(
,
);
expect(container.querySelector('.watermark div')).toBeTruthy();
expect(container).toMatchSnapshot();
});
it('MutationObserver should work properly', async () => {
const { container } = render();
const target = container.querySelector('.watermark div');
await waitFakeTimer();
target?.remove();
await waitFakeTimer();
expect(container).toMatchSnapshot();
});
it('Observe the modification of style', async () => {
const { container } = render(
,
);
const target = container.querySelector('.watermark div');
await waitFakeTimer();
target?.setAttribute('style', '');
await waitFakeTimer();
expect(container).toMatchSnapshot();
});
describe('nest component', () => {
function test(name: string, children: React.ReactNode, getWatermarkElement: () => Node) {
it(name, async () => {
const { rerender } = render({children});
await waitFakeTimer();
const watermark = getWatermarkElement();
expect(watermark).toHaveStyle({ zIndex: '9' });
// Not crash when children removed
rerender();
});
}
test(
'Modal',
,
() => document.body.querySelector('.ant-modal-content')!.lastChild!,
);
test(
'Drawer',
,
() => document.body.querySelector('.ant-drawer-content')!.lastChild!,
);
it('inherit = false', async () => {
render(
,
);
await waitFakeTimer();
expect(document.body.querySelector('.ant-drawer-content')!.lastChild).toHaveClass(
'ant-drawer-body',
);
});
});
it('should not crash if content is empty string', async () => {
const spy = jest.spyOn(CanvasRenderingContext2D.prototype, 'drawImage');
render();
await waitFakeTimer();
expect(spy).not.toHaveBeenCalledWith(expect.anything(), 0, 0);
expect(spy).not.toHaveBeenCalledWith(expect.anything(), -0, 0);
expect(spy).not.toHaveBeenCalledWith(expect.anything(), -0, -0);
expect(spy).not.toHaveBeenCalledWith(expect.anything(), 0, -0);
spy.mockRestore();
});
});