command-pal/acceptance.test.js at main · digital-taco/command-pal · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
//////////////////////////////////////////////////////////////////////////////////////////////////////////
// JEST SETUP
//////////////////////////////////////////////////////////////////////////////////////////////////////////

const { getBrowser, closeOpenBrowsers } = require('./chromium-controller')

jest.setTimeout(60000) // because we need to boot up an actual browser
afterAll(closeOpenBrowsers);

//////////////////////////////////////////////////////////////////////////////////////////////////////////
// HELPER FUNCTIONS
//////////////////////////////////////////////////////////////////////////////////////////////////////////

const wait = (time = 0) => new Promise(r => setTimeout(r, time))

const openPalette = async (page) => {
  await wait(2000) // for page to have become idle

  // SHIFT+CTRL+SPACE
  await page.evaluate(() => document.dispatchEvent(
    new KeyboardEvent("keyup", {
      bubbles: true,
      cancelable: true,
      code: "Space",
      composed: true,
      ctrlKey: true,
      key: " ",
      keyCode: 32,
      metaKey: false,
      shiftKey: true,
      type: "keydown",
      which: 32,
  })))

  await wait(1000) // for tool to open
}

//////////////////////////////////////////////////////////////////////////////////////////////////////////
// RUN TESTS
//////////////////////////////////////////////////////////////////////////////////////////////////////////

test(`Should open when user SHIFT+CTRL+SPACE`, async () => {
  const { page } = await getBrowser()

  let classList;

  classList = await page.evaluate(() => document.querySelector('#--command-palette-container--').classList.value)
  expect(classList).toEqual("__palette-container __palette-closed") // closed

  await openPalette(page)

  classList = await page.evaluate(() => document.querySelector('#--command-palette-container--').classList.value)
  expect(classList).toEqual("__palette-container") // open
});


test(`Should autofocus input and allow the user to filter options`, async () => {
  const { page } = await getBrowser()

  await openPalette(page) // this part should trigger the auto focus so we can type below

  const { options } = await page.evaluate(async () => {
    const input = document.querySelector('#--command-palette-input--');
    input.value = "zoom"
    input.dispatchEvent(new InputEvent('input')) // kick off the input event to simulate typing

    await new Promise(r => setTimeout(r, 500)) // wait for DOM to update
    return { options: document.querySelector('#--command-palette-container-- ul').innerText }
  })

  expect(options).toEqual("Zoom In\nZoom Out")
});