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