react/packages/react/src/UnderlineNav/UnderlineNav.interactions.stories.tsx at 3a4e37c0096c9303526a90f007aac3ff5d4b4b6d · primer/react · 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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
import type {Meta} from '@storybook/react-vite'
import {within, userEvent, expect} from 'storybook/test'
import {OverflowTemplate} from './UnderlineNav.features.stories'

export default {
  title: 'Components/UnderlineNav/Interactions',
} as Meta

const SelectAMenuItem = () => {
  return <OverflowTemplate initialSelectedIndex={1} />
}

const KeyboardNavigation = () => {
  return <OverflowTemplate initialSelectedIndex={1} />
}

const delay = (ms = 500) => new Promise(resolve => setTimeout(resolve, ms))

KeyboardNavigation.storyName = 'Keyboard navigation'
KeyboardNavigation.play = async ({canvasElement}: {canvasElement: HTMLElement}) => {
  const canvas = within(canvasElement)
  canvasElement.style.width = '800px'

  await delay(1000)

  // Code
  const firstItem = canvas.getByRole('link', {name: 'Code'})
  firstItem.focus()

  // Issues
  await delay()
  userEvent.tab()
  expect(document.activeElement).toHaveTextContent('Issues')

  // Pull Requests
  await delay()
  userEvent.tab()
  expect(document.activeElement).toHaveTextContent('Pull Requests')

  // Discussions
  await delay()
  userEvent.tab()
  expect(document.activeElement).toHaveTextContent('Discussions')

  // Actions
  await delay()
  userEvent.tab()
  expect(document.activeElement).toHaveTextContent('Actions')

  // Projects
  await delay()
  userEvent.tab()
  expect(document.activeElement).toHaveTextContent('Projects')

  // More
  await delay()
  userEvent.tab()
  expect(document.activeElement).toHaveTextContent('More')

  // Click to open menu
  await delay()
  userEvent.click(document.activeElement as Element)

  // Insights
  await delay()
  userEvent.tab()
  expect(document.activeElement).toHaveTextContent('Insights')

  // Settings
  await delay()
  userEvent.tab()
  expect(document.activeElement).toHaveTextContent('Settings')

  // Click to navigate
  await delay()
  let menuItem = canvas.getByRole('link', {name: 'Settings (10)'})
  userEvent.click(menuItem)

  await delay()
  menuItem = canvas.getByRole('link', {name: 'Settings (10)'})

  const lastListItem = canvas.getByRole('list').children[5]
  const menuListItem = canvas.getByText('Settings').closest('li') as HTMLLIElement

  // expect Settings be the last element on the list.
  expect(lastListItem).toEqual(menuListItem)

  // Settings
  userEvent.tab({shift: true})

  // Actions
  await delay()
  userEvent.tab({shift: true})

  // Discussions
  await delay()
  userEvent.tab({shift: true})

  // Pull Requests
  await delay()
  userEvent.tab({shift: true})
  expect(document.activeElement).toHaveTextContent('Pull Requests')
}

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
SelectAMenuItem.play = async ({canvasElement}: {canvasElement: HTMLElement}) => {
  const canvas = within(canvasElement)
  canvasElement.style.width = '800px'

  await delay(1000)

  const moreBtn = canvas.getByRole('button', {name: 'More items'})
  userEvent.hover(moreBtn)

  await delay()
  userEvent.click(moreBtn)

  await delay()
  let menuItem = canvas.getByRole('link', {name: 'Settings (10)'})
  userEvent.click(menuItem)
  expect(moreBtn).toHaveFocus()

  await delay()
  menuItem = canvas.getByRole('link', {name: 'Settings (10)'})
  expect(menuItem).toHaveAttribute('aria-current', 'page')

  const lastListItem = canvas.getByRole('list').children[5]
  const menuListItem = canvas.getByText('Settings').closest('li') as HTMLLIElement
  // expect Settings be the last element on the list.
  expect(lastListItem).toEqual(menuListItem)
}

export {KeyboardNavigation, SelectAMenuItem}