debian-mirror-gitlab/spec/frontend/design_management/components/image_spec.js
2022-04-04 11:22:00 +05:30

131 lines
3.3 KiB
JavaScript

import { GlIcon } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import { nextTick } from 'vue';
import DesignImage from '~/design_management/components/image.vue';
describe('Design management large image component', () => {
let wrapper;
function createComponent(propsData, data = {}) {
wrapper = shallowMount(DesignImage, {
propsData,
});
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
wrapper.setData(data);
}
afterEach(() => {
wrapper.destroy();
});
it('renders loading state', () => {
createComponent({
isLoading: true,
});
expect(wrapper.element).toMatchSnapshot();
});
it('renders image', () => {
createComponent({
isLoading: false,
image: 'test.jpg',
name: 'test',
});
expect(wrapper.element).toMatchSnapshot();
});
it('sets correct classes and styles if imageStyle is set', async () => {
createComponent(
{
isLoading: false,
image: 'test.jpg',
name: 'test',
},
{
imageStyle: {
width: '100px',
height: '100px',
},
},
);
await nextTick();
expect(wrapper.element).toMatchSnapshot();
});
it('renders media broken icon on error', async () => {
createComponent({
isLoading: false,
image: 'test.jpg',
name: 'test',
});
const image = wrapper.find('img');
image.trigger('error');
await nextTick();
expect(image.isVisible()).toBe(false);
expect(wrapper.find(GlIcon).element).toMatchSnapshot();
});
describe('zoom', () => {
const baseImageWidth = 100;
const baseImageHeight = 100;
beforeEach(() => {
createComponent(
{
isLoading: false,
image: 'test.jpg',
name: 'test',
},
{
imageStyle: {
width: `${baseImageWidth}px`,
height: `${baseImageHeight}px`,
},
baseImageSize: {
width: baseImageWidth,
height: baseImageHeight,
},
},
);
jest.spyOn(wrapper.vm.$refs.contentImg, 'offsetWidth', 'get').mockReturnValue(baseImageWidth);
jest
.spyOn(wrapper.vm.$refs.contentImg, 'offsetHeight', 'get')
.mockReturnValue(baseImageHeight);
});
it('emits @resize event on zoom', async () => {
const zoomAmount = 2;
wrapper.vm.zoom(zoomAmount);
await nextTick();
expect(wrapper.emitted('resize')).toEqual([
[{ width: baseImageWidth * zoomAmount, height: baseImageHeight * zoomAmount }],
]);
});
it('emits @resize event with base image size when scale=1', async () => {
wrapper.vm.zoom(1);
await nextTick();
expect(wrapper.emitted('resize')).toEqual([
[{ width: baseImageWidth, height: baseImageHeight }],
]);
});
it('sets image style when zoomed', async () => {
const zoomAmount = 2;
wrapper.vm.zoom(zoomAmount);
expect(wrapper.vm.imageStyle).toEqual({
width: `${baseImageWidth * zoomAmount}px`,
height: `${baseImageHeight * zoomAmount}px`,
});
await nextTick();
expect(wrapper.element).toMatchSnapshot();
});
});
});