"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@testing-library/react");
var _Image = require("../Image");
var _imageKit = require("@wix/image-kit");
require("@testing-library/jest-dom");
var _jsxFileName = "/home/builduser/work/5a10c7a05f300a84/packages/image/dist/cjs/__tests__/Image.spec.tsx";
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 = {}) {
  var _rendered$container;
  const rendered = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Image.Image, (0, _extends2.default)({
    id: compId
  }, defaultProps, overrides, {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 25,
      columnNumber: 5
    }
  })));
  return {
    comp: rendered,
    node: (_rendered$container = rendered.container) == null ? void 0 : _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
          }) => (0, _imageKit.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', () => {
        var _image$getAttribute, _srcset2$match;
        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 = image.getAttribute('srcset')) == null ? void 0 : _image$getAttribute.split(', ')) || [];
        const src2x = `${src == null ? void 0 : src.replace(/w_600/, 'w_1200').replace(/h_400/, 'h_800').replace(/q_\d+/, (srcset2 == null || (_srcset2$match = srcset2.match(/q_\d+/)) == null ? void 0 : _srcset2$match[0]) || '')}`;
        expect(src).toContain(defaultProps.uri);
        expect(src).not.toContain('blur');
        expect(srcset1 == null ? void 0 : srcset1.trim()).toEqual(`${src} 1x`);
        expect(srcset2 == null ? void 0 : 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');
        _react2.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');
        _react2.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