2 files changed, 126 insertions, 0 deletions
diff --git a/spec/frontend/behaviors/date_picker_spec.js b/spec/frontend/behaviors/date_picker_spec.js
new file mode 100644
index 00000000000..9f7701a0366
--- /dev/null
+++ b/spec/frontend/behaviors/date_picker_spec.js
@@ -0,0 +1,30 @@
+import * as Pikaday from 'pikaday';
+import initDatePickers from '~/behaviors/date_picker';
+import * as utils from '~/lib/utils/datetime_utility';
+
+jest.mock('pikaday');
+jest.mock('~/lib/utils/datetime_utility');
+
+describe('date_picker behavior', () => {
+  let pikadayMock;
+  let parseMock;
+
+  beforeEach(() => {
+    pikadayMock = jest.spyOn(Pikaday, 'default');
+    parseMock = jest.spyOn(utils, 'parsePikadayDate');
+    setFixtures(`
+      <div>
+        <input class="datepicker" value="2020-10-01" />
+      </div>
+      <div>
+        <input class="datepicker" value="" />
+      </div>`);
+  });
+
+  it('Instantiates Pickaday for every instance of a .datepicker class', () => {
+    initDatePickers();
+
+    expect(pikadayMock.mock.calls.length).toEqual(2);
+    expect(parseMock.mock.calls).toEqual([['2020-10-01'], ['']]);
+  });
+});
diff --git a/spec/frontend/behaviors/shortcuts/shortcut_spec.js b/spec/frontend/behaviors/shortcuts/shortcut_spec.js
new file mode 100644
index 00000000000..44bb74ce179
--- /dev/null
+++ b/spec/frontend/behaviors/shortcuts/shortcut_spec.js
@@ -0,0 +1,96 @@
+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', '<kbd>↑</kbd>'],
+      ['down', '<kbd>↓</kbd>'],
+      ['left', '<kbd>←</kbd>'],
+      ['right', '<kbd>→</kbd>'],
+      ['ctrl', '<kbd>Ctrl</kbd>'],
+      ['shift', '<kbd>Shift</kbd>'],
+      ['enter', '<kbd>Enter</kbd>'],
+      ['esc', '<kbd>Esc</kbd>'],
+      // Some normal ascii letter
+      ['a', '<kbd>a</kbd>'],
+      // An umlaut letter
+      ['ø', '<kbd>ø</kbd>'],
+      // A number
+      ['5', '<kbd>5</kbd>'],
+    ])('renders platform agnostic key %p as: %p', (key, rendered) => {
+      expect(render([key])).toEqual(`<div>${rendered}</div>`);
+    });
+
+    it('renders keys combined with plus ("+") correctly', () => {
+      expect(render(['shift+a+b+c'])).toEqual(
+        `<div><kbd>Shift</kbd> + <kbd>a</kbd> + <kbd>b</kbd> + <kbd>c</kbd></div>`,
+      );
+    });
+
+    it('renders keys combined with space (" ") correctly', () => {
+      expect(render(['shift a b c'])).toEqual(
+        `<div><kbd>Shift</kbd> then <kbd>a</kbd> then <kbd>b</kbd> then <kbd>c</kbd></div>`,
+      );
+    });
+
+    it('renders multiple shortcuts correctly', () => {
+      expect(render(['shift+[', 'shift+k'])).toEqual(
+        `<div><kbd>Shift</kbd> + <kbd>[</kbd> or <br><kbd>Shift</kbd> + <kbd>k</kbd></div>`,
+      );
+      expect(render(['[', 'k'])).toEqual(`<div><kbd>[</kbd> or <kbd>k</kbd></div>`);
+    });
+  });
+
+  describe('With browser env isMac: true', () => {
+    beforeEach(() => {
+      window.gl = { client: { isMac: true } };
+    });
+
+    it.each([
+      ['mod', '<kbd>⌘</kbd>'],
+      ['command', '<kbd>⌘</kbd>'],
+      ['meta', '<kbd>⌘</kbd>'],
+      ['option', '<kbd>⌥</kbd>'],
+      ['alt', '<kbd>⌥</kbd>'],
+    ])('renders platform specific key %p as: %p', (key, rendered) => {
+      expect(render([key])).toEqual(`<div>${rendered}</div>`);
+    });
+
+    it('does render Mac specific shortcuts', () => {
+      expect(render(['command+[', 'ctrl+k'])).toEqual(
+        `<div><kbd>⌘</kbd> + <kbd>[</kbd> or <br><kbd>Ctrl</kbd> + <kbd>k</kbd></div>`,
+      );
+    });
+  });
+
+  describe('With browser env isMac: false', () => {
+    beforeEach(() => {
+      window.gl = { client: { isMac: false } };
+    });
+
+    it.each([
+      ['mod', '<kbd>Ctrl</kbd>'],
+      ['command', ''],
+      ['meta', ''],
+      ['option', '<kbd>Alt</kbd>'],
+      ['alt', '<kbd>Alt</kbd>'],
+    ])('renders platform specific key %p as: %p', (key, rendered) => {
+      expect(render([key])).toEqual(`<div>${rendered}</div>`);
+    });
+
+    it('does not render Mac specific shortcuts', () => {
+      expect(render(['command+[', 'ctrl+k'])).toEqual(`<div><kbd>Ctrl</kbd> + <kbd>k</kbd></div>`);
+    });
+  });
+});