"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const dom_1 = require("@quilted/react-testing/dom");
const faker_1 = __importDefault(require("faker"));
const View_1 = require("../View");
const Image_1 = require("./Image");
describe('<Image />', () => {
    const source = faker_1.default.image.imageUrl();
    describe('sources', () => {
        it('renders a picture element with sources with an img fallback', () => {
            const description = faker_1.default.random.words();
            const image = dom_1.mount(<Image_1.Image source={source} sources={{ base: source }} description={description} loading="lazy"/>);
            expect(image).toContainReactComponent('picture');
            expect(image).toContainReactComponent('source', {
                srcSet: source,
            });
            expect(image).toContainReactComponent('img', {
                src: source,
                alt: description,
                loading: 'lazy',
            });
        });
        it('reduces multiple sources with the same breakpoint into a single srcSet', () => {
            const image = dom_1.mount(<Image_1.Image source={source} sources={{
                small: [
                    { source, resolution: 1 },
                    { source, resolution: 2 },
                ],
            }} loading="lazy"/>);
            expect(image).toContainReactComponent('source', {
                srcSet: `${source} 1x, ${source} 2x`,
                media: Image_1.MEDIA_MAP.get('small'),
            });
        });
        it('renders an img element only when no sources are provided', () => {
            const image = dom_1.mount(<Image_1.Image source={source}/>);
            expect(image).not.toContainReactComponent('picture');
            expect(image).not.toContainReactComponent('source');
            expect(image).toContainReactComponent('img', {
                src: source,
            });
        });
        it('renders sources in descending breakpoint width order', () => {
            const image = dom_1.mount(<Image_1.Image source={source} sources={{
                small: [{ source }, { source, resolution: 2 }],
                large: [{ source }, { source, resolution: 2 }],
                medium: source,
            }}/>);
            const [largeSource, mediumSource, smallSource] = image.findAll('source');
            expect(largeSource.prop('media')).toBe(Image_1.MEDIA_MAP.get('large'));
            expect(mediumSource.prop('media')).toBe(Image_1.MEDIA_MAP.get('medium'));
            expect(smallSource.prop('media')).toBe(Image_1.MEDIA_MAP.get('small'));
        });
        it('accepts different types of sources', () => {
            const sourceArray = faker_1.default.image.imageUrl();
            const sourceString = faker_1.default.image.imageUrl();
            const sourceObject = faker_1.default.image.imageUrl();
            const image = dom_1.mount(<Image_1.Image source={source} sources={{
                base: [{ source: sourceArray, resolution: 1 }],
                small: sourceString,
                medium: { source: sourceObject },
            }}/>);
            expect(image).toContainReactComponent('source', {
                srcSet: `${sourceArray} 1x`,
                media: Image_1.MEDIA_MAP.get('base'),
            });
            expect(image).toContainReactComponent('source', {
                srcSet: sourceString,
                media: Image_1.MEDIA_MAP.get('small'),
            });
            expect(image).toContainReactComponent('source', {
                srcSet: sourceObject,
                media: Image_1.MEDIA_MAP.get('medium'),
            });
        });
    });
    describe('decorative', () => {
        it('wraps the image with <View accessibilityVisibility="hidden" />', () => {
            const image = dom_1.mount(<Image_1.Image source={source} decorative/>);
            expect(image).toContainReactComponent(View_1.View, {
                accessibilityVisibility: 'hidden',
            });
        });
        it('by default the image is not wrapped with <View accessibilityVisibility="hidden" />', () => {
            const image = dom_1.mount(<Image_1.Image source={source}/>);
            expect(image).not.toContainReactComponent(View_1.View, {
                accessibilityVisibility: 'hidden',
            });
        });
    });
    describe('aspectRatio', () => {
        it('wraps the image with placeholder container', () => {
            const image = dom_1.mount(<Image_1.Image source={source} aspectRatio={16 / 9}/>);
            expect(image).toContainReactComponent('div', {
                style: { paddingBottom: `calc(100% / ${16 / 9})` },
            });
        });
        it('by default the image does not have any container', () => {
            const image = dom_1.mount(<Image_1.Image source={source}/>);
            expect(image).not.toContainReactComponent('div');
        });
    });
});