import { shallowMount } from '@vue/test-utils';
import Shortcut from '~/behaviors/shortcuts/shortcut.vue';
describe('Shortcut Vue Component', () => {
const render = (shortcuts) => shallowMount(Shortcut, { propsData: { shortcuts } }).html();
afterEach(() => {
delete window.gl.client;
});
describe.each([true, false])('With browser env isMac: %p', (isMac) => {
beforeEach(() => {
window.gl = { client: { isMac } };
});
it.each([
['up', '↑'],
['down', '↓'],
['left', '←'],
['right', '→'],
['ctrl', 'Ctrl'],
['shift', 'Shift'],
['enter', 'Enter'],
['esc', 'Esc'],
// Some normal ascii letter
['a', 'a'],
// An umlaut letter
['ø', 'ø'],
// A number
['5', '5'],
])('renders platform agnostic key %p as: %p', (key, rendered) => {
expect(render([key])).toEqual(`
${rendered}
`);
});
it('renders keys combined with plus ("+") correctly', () => {
expect(render(['shift+a+b+c'])).toEqual(
`Shift + a + b + c
`,
);
});
it('renders keys combined with space (" ") correctly', () => {
expect(render(['shift a b c'])).toEqual(
`Shift then a then b then c
`,
);
});
it('renders multiple shortcuts correctly', () => {
expect(render(['shift+[', 'shift+k'])).toEqual(
`Shift + [ or
Shift + k
`,
);
expect(render(['[', 'k'])).toEqual(`[ or k
`);
});
});
describe('With browser env isMac: true', () => {
beforeEach(() => {
window.gl = { client: { isMac: true } };
});
it.each([
['mod', '⌘'],
['command', '⌘'],
['meta', '⌘'],
['option', '⌥'],
['alt', '⌥'],
])('renders platform specific key %p as: %p', (key, rendered) => {
expect(render([key])).toEqual(`${rendered}
`);
});
it('does render Mac specific shortcuts', () => {
expect(render(['command+[', 'ctrl+k'])).toEqual(
`⌘ + [ or
Ctrl + k
`,
);
});
});
describe('With browser env isMac: false', () => {
beforeEach(() => {
window.gl = { client: { isMac: false } };
});
it.each([
['mod', 'Ctrl'],
['command', ''],
['meta', ''],
['option', 'Alt'],
['alt', 'Alt'],
])('renders platform specific key %p as: %p', (key, rendered) => {
expect(render([key])).toEqual(`${rendered}
`);
});
it('does not render Mac specific shortcuts', () => {
expect(render(['command+[', 'ctrl+k'])).toEqual(`Ctrl + k
`);
});
});
});