import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import { Image } from '../Image';
import { getPlaceholder } from '@wix/image-kit';
import '@testing-library/jest-dom';
const compId = 'image0';
const defaultProps = {
    containerId: 'container0',
    uri: '11062b_9c53b59db1dc4bd4ad7a47340f0594b4~mv2.jpg',
    alt: 'Paints and Brush',
    name: 'Paints and Brush',
    width: 5000,
    height: 2763,
    displayMode: 'fill',
};
function getImage(overrides = {}) {
    const rendered = render(React.createElement(Image, { id: compId, ...defaultProps, ...overrides }));
    return {
        comp: rendered,
        node: rendered.container?.firstElementChild,
    };
}
describe('Image', () => {
    describe('props', () => {
        describe('id', () => {
            test('should render id according to given prop', () => {
                const { node } = getImage();
                expect(node.getAttribute('id')).toEqual(compId);
            });
        });
        describe('className', () => {
            test('should render className according to given prop', () => {
                const className = 'class-a';
                const { node } = getImage({ className });
                expect(node.classList.contains(className)).toBe(true);
            });
        });
        describe('uri', () => {
            test('should render uri according to given prop', () => {
                const { node } = getImage({
                    getPlaceholder: ({ fittingType, src, target, }) => getPlaceholder(fittingType, src, target),
                });
                const src = node.querySelector('img').getAttribute('src');
                expect(src).toContain(defaultProps.uri);
                expect(src).toContain('blur');
                expect(node.dataset.hasSsrSrc).toEqual('true');
            });
            test('should render uri when shouldUseLQIP=true', () => {
                const { node } = getImage({ shouldUseLQIP: true });
                const src = node.querySelector('img').getAttribute('src');
                expect(src).toContain(defaultProps.uri);
                expect(src).toContain('blur');
                expect(node.dataset.hasSsrSrc).toEqual('true');
            });
        });
        describe('alt', () => {
            test('should render alt according to prop', () => {
                const { node } = getImage();
                expect(node.querySelector('img').getAttribute('alt')).toEqual(defaultProps.alt);
            });
        });
        describe('role', () => {
            test('should render role according to prop', () => {
                const role = 'playing';
                const { node } = getImage({ role });
                expect(node.querySelector('img').getAttribute('role')).toEqual(role);
            });
        });
        describe('imageStyles', () => {
            test('should render role according to prop', () => {
                const imageStyles = { transform: 'translate(30px)' };
                const { node } = getImage({ imageStyles });
                expect(node.querySelector('img')).toHaveStyle(imageStyles);
            });
        });
        describe('image info', () => {
            test('should render data-image-info according to props', () => {
                const { node } = getImage();
                expect(JSON.parse(node.dataset.imageInfo)).toEqual({
                    containerId: defaultProps.containerId,
                    displayMode: defaultProps.displayMode,
                    imageData: {
                        width: defaultProps.width,
                        height: defaultProps.height,
                        uri: defaultProps.uri,
                        name: defaultProps.name,
                        displayMode: defaultProps.displayMode,
                    },
                });
            });
        });
        describe('inInFirstFold', () => {
            test('should render HQ image when true', () => {
                const target = {
                    width: 600,
                    height: 400,
                };
                const { node } = getImage({
                    isInFirstFold: true,
                    shouldUseLQIP: true,
                    containerWidth: target.width,
                    containerHeight: target.height,
                });
                const image = node.querySelector('img');
                const src = image.getAttribute('src');
                const [srcset1, srcset2] = image.getAttribute('srcset')?.split(', ') || [];
                const src2x = `${src
                    ?.replace(/w_600/, 'w_1200')
                    .replace(/h_400/, 'h_800')
                    .replace(/q_\d+/, srcset2?.match(/q_\d+/)?.[0] || '')}`;
                expect(src).toContain(defaultProps.uri);
                expect(src).not.toContain('blur');
                expect(srcset1?.trim()).toEqual(`${src} 1x`);
                expect(srcset2?.trim()).toEqual(`${src2x} 2x`);
            });
        });
        describe('isSEOBot', () => {
            test('should render HQ image when true', () => {
                const { node } = getImage({
                    isSEOBot: true,
                    shouldUseLQIP: true,
                });
                const src = node.querySelector('img').getAttribute('src');
                expect(src).toContain(defaultProps.uri);
                expect(src).not.toContain('blur');
            });
        });
        describe('onError', () => {
            test('should trigger `onError` callback', () => {
                const onError = jest.fn();
                const { node } = getImage({ onError });
                const image = node.querySelector('img');
                fireEvent.error(image);
                expect(onError).toHaveBeenCalledTimes(1);
            });
        });
        describe('onLoad', () => {
            test('should trigger `onLoad` callback', () => {
                const onLoad = jest.fn();
                const { node } = getImage({ onLoad });
                const image = node.querySelector('img');
                fireEvent.load(image);
                expect(onLoad).toHaveBeenCalled();
            });
        });
        describe('passing neither getPlaceholder, shouldUseLQIP, isInFirstFold or isSEOBot', () => {
            test('src should be empty', () => {
                const { node } = getImage({});
                const src = node.querySelector('img').getAttribute('src');
                expect(src).toBeNull();
            });
        });
        describe('lazy loading', () => {
            test('should not set loading="lazy" by default', () => {
                const { node } = getImage();
                const image = node.querySelector('img');
                expect(image.getAttribute('loading')).not.toEqual('lazy');
            });
            test('should set loading="lazy" if not in first fold', () => {
                const { node } = getImage({ isInFirstFold: false });
                const image = node.querySelector('img');
                expect(image.getAttribute('loading')).toEqual('lazy');
            });
            test('should not set loading="lazy" if in first fold', () => {
                const { node } = getImage({ isInFirstFold: true });
                const image = node.querySelector('img');
                expect(image.getAttribute('loading')).not.toEqual('lazy');
            });
        });
        describe('isFluidLayout', () => {
            it('should set data-is-responsive="true" when isFluidLayout=true', () => {
                const { node } = getImage({ isFluidLayout: true });
                expect(node.dataset.isResponsive).toBe('true');
            });
        });
    });
});
//# sourceMappingURL=Image.spec.js.map