75 lines
1.9 KiB
JavaScript
75 lines
1.9 KiB
JavaScript
import { mount } from '@vue/test-utils';
|
|
import { AVAILABILITY_STATUS } from '~/set_status_modal/utils';
|
|
import UserNameWithStatus from '~/sidebar/components/assignees/user_name_with_status.vue';
|
|
|
|
const name = 'Administrator';
|
|
const containerClasses = 'gl-cool-class gl-over-9000';
|
|
|
|
describe('UserNameWithStatus', () => {
|
|
let wrapper;
|
|
|
|
function createComponent(props = {}) {
|
|
wrapper = mount(UserNameWithStatus, {
|
|
propsData: { name, containerClasses, ...props },
|
|
});
|
|
}
|
|
|
|
beforeEach(() => {
|
|
createComponent();
|
|
});
|
|
|
|
afterEach(() => {
|
|
wrapper.destroy();
|
|
});
|
|
|
|
it('will render the users name', () => {
|
|
expect(wrapper.html()).toContain(name);
|
|
});
|
|
|
|
it('will not render "Busy"', () => {
|
|
expect(wrapper.html()).not.toContain('Busy');
|
|
});
|
|
|
|
it('will render all relevant containerClasses', () => {
|
|
const classes = wrapper.find('span').classes().join(' ');
|
|
expect(classes).toBe(containerClasses);
|
|
});
|
|
|
|
describe(`with availability="${AVAILABILITY_STATUS.BUSY}"`, () => {
|
|
beforeEach(() => {
|
|
createComponent({ availability: AVAILABILITY_STATUS.BUSY });
|
|
});
|
|
|
|
it('will render "Busy"', () => {
|
|
expect(wrapper.text()).toContain('(Busy)');
|
|
});
|
|
});
|
|
|
|
describe('when user has pronouns set', () => {
|
|
const pronouns = 'they/them';
|
|
|
|
beforeEach(() => {
|
|
createComponent({ pronouns });
|
|
});
|
|
|
|
it("renders user's name with pronouns", () => {
|
|
expect(wrapper.text()).toMatchInterpolatedText(`${name} (${pronouns})`);
|
|
});
|
|
});
|
|
|
|
describe('when user does not have pronouns set', () => {
|
|
describe.each`
|
|
pronouns
|
|
${undefined}
|
|
${null}
|
|
${''}
|
|
${' '}
|
|
`('when `pronouns` prop is $pronouns', ({ pronouns }) => {
|
|
it("renders only the user's name", () => {
|
|
createComponent({ pronouns });
|
|
|
|
expect(wrapper.text()).toMatchInterpolatedText(name);
|
|
});
|
|
});
|
|
});
|
|
});
|