gitlab-org--gitlab-foss/spec/frontend/vue_shared/components/expand_button_spec.js

194 lines
4.6 KiB
JavaScript

import Vue from 'vue';
import { mount } from '@vue/test-utils';
import ExpandButton from '~/vue_shared/components/expand_button.vue';
const text = {
expanded: 'Expanded!',
short: 'Short',
};
describe('Expand button', () => {
let wrapper;
const expanderPrependEl = () => wrapper.find('.js-text-expander-prepend');
const expanderAppendEl = () => wrapper.find('.js-text-expander-append');
const factory = (options = {}) => {
wrapper = mount(ExpandButton, {
...options,
});
};
beforeEach(() => {
factory({
slots: {
expanded: `<p>${text.expanded}</p>`,
},
});
});
afterEach(() => {
wrapper.destroy();
});
it('renders the prepended collapse button', () => {
expect(expanderPrependEl().isVisible()).toBe(true);
expect(expanderAppendEl().isVisible()).toBe(false);
});
it('renders no text when short text is not provided', () => {
expect(wrapper.find(ExpandButton).text()).toBe('');
});
it('does not render expanded text', () => {
expect(
wrapper
.find(ExpandButton)
.text()
.trim(),
).not.toBe(text.short);
});
describe('when short text is provided', () => {
beforeEach(() => {
factory({
slots: {
expanded: `<p>${text.expanded}</p>`,
short: `<p>${text.short}</p>`,
},
});
});
it('renders short text', () => {
expect(
wrapper
.find(ExpandButton)
.text()
.trim(),
).toBe(text.short);
});
it('renders button before text', () => {
expect(expanderPrependEl().isVisible()).toBe(true);
expect(expanderAppendEl().isVisible()).toBe(false);
expect(wrapper.find(ExpandButton).element).toMatchSnapshot();
});
});
describe('on click', () => {
beforeEach(done => {
expanderPrependEl().trigger('click');
Vue.nextTick(done);
});
afterEach(() => {
expanderAppendEl().trigger('click');
});
it('renders only the append collapse button', () => {
expect(expanderAppendEl().isVisible()).toBe(true);
expect(expanderPrependEl().isVisible()).toBe(false);
});
it('renders the expanded text', () => {
expect(wrapper.find(ExpandButton).text()).toContain(text.expanded);
});
describe('when short text is provided', () => {
beforeEach(done => {
factory({
slots: {
expanded: `<p>${text.expanded}</p>`,
short: `<p>${text.short}</p>`,
},
});
expanderPrependEl().trigger('click');
Vue.nextTick(done);
});
it('only renders expanded text', () => {
expect(
wrapper
.find(ExpandButton)
.text()
.trim(),
).toBe(text.expanded);
});
it('renders button after text', () => {
expect(expanderPrependEl().isVisible()).toBe(false);
expect(expanderAppendEl().isVisible()).toBe(true);
expect(wrapper.find(ExpandButton).element).toMatchSnapshot();
});
});
});
describe('append button', () => {
beforeEach(done => {
expanderPrependEl().trigger('click');
Vue.nextTick(done);
});
it('clicking hides itself and shows prepend', () => {
expect(expanderAppendEl().isVisible()).toBe(true);
expanderAppendEl().trigger('click');
return wrapper.vm.$nextTick().then(() => {
expect(expanderPrependEl().isVisible()).toBe(true);
});
});
it('clicking hides expanded text', () => {
expect(
wrapper
.find(ExpandButton)
.text()
.trim(),
).toBe(text.expanded);
expanderAppendEl().trigger('click');
return wrapper.vm.$nextTick().then(() => {
expect(
wrapper
.find(ExpandButton)
.text()
.trim(),
).not.toBe(text.expanded);
});
});
describe('when short text is provided', () => {
beforeEach(done => {
factory({
slots: {
expanded: `<p>${text.expanded}</p>`,
short: `<p>${text.short}</p>`,
},
});
expanderPrependEl().trigger('click');
Vue.nextTick(done);
});
it('clicking reveals short text', () => {
expect(
wrapper
.find(ExpandButton)
.text()
.trim(),
).toBe(text.expanded);
expanderAppendEl().trigger('click');
return wrapper.vm.$nextTick().then(() => {
expect(
wrapper
.find(ExpandButton)
.text()
.trim(),
).toBe(text.short);
});
});
});
});
});