Merge pull request #609 from systemli/dependabot/npm_and_yarn/mui-1ba…

…7fac3d1

Bump the mui group with 8 updates

package.json

@@ -12,15 +12,15 @@
   "dependencies": {
     "@emoji-mart/data": "^1.2.1",
     "@emoji-mart/react": "^1.1.1",
-    "@emotion/react": "^11.11.0",
-    "@emotion/styled": "^11.11.0",
-    "@fontsource/roboto": "^5.0.2",
-    "@fortawesome/fontawesome-svg-core": "^6.5.1",
-    "@fortawesome/free-brands-svg-icons": "^6.5.1",
-    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@fontsource/roboto": "^5.0.13",
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-brands-svg-icons": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@mui/icons-material": "^5.15.2",
-    "@mui/material": "^5.14.11",
+    "@mui/icons-material": "^5.15.15",
+    "@mui/material": "^5.15.15",
     "@tanstack/react-query": "^5.32.0",
     "@tanstack/react-query-devtools": "^5.32.0",
     "emoji-mart": "^5.6.0",

src/components/ticker/TickerUsersForm.test.tsx

@@ -1,9 +1,10 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { Ticker } from '../../api/Ticker'
 import { User } from '../../api/User'
-import { fireEvent, render, screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import TickerUsersForm from './TickerUsersForm'
 import { vi } from 'vitest'
+import userEvent from '@testing-library/user-event'
 
 describe('TickerUsersForm', () => {
   beforeEach(() => {
@@ -46,12 +47,13 @@ describe('TickerUsersForm', () => {
     const handleSubmit = vi.fn()
     setup([user], ticker, handleSubmit)
 
-    fireEvent.mouseDown(screen.getByRole('button'))
-    const listbox = await screen.findByRole('listbox')
-    expect(listbox).toBeInTheDocument()
-    const option = await screen.findByRole('option')
-    expect(option).toBeInTheDocument()
-    fireEvent.click(option)
-    expect(fetch).toHaveBeenCalledTimes(1)
+    expect(screen.getByRole('combobox')).toBeInTheDocument()
+
+    await userEvent.click(screen.getByRole('combobox'))
+
+    expect(screen.getByRole('option')).toBeInTheDocument()
+    expect(screen.getAllByText('user@systemli.org')).toHaveLength(2)
+
+    await userEvent.click(screen.getAllByText('user@systemli.org')[1])
   })
 })

src/components/ticker/TickersDropdown.test.tsx

@@ -1,8 +1,9 @@
-import { fireEvent, render, screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import TickersDropdown from './TickersDropdown'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { Ticker } from '../../api/Ticker'
 import { vi } from 'vitest'
+import userEvent from '@testing-library/user-event'
 
 describe('TickersDropdown', () => {
   beforeEach(() => {
@@ -40,14 +41,15 @@ describe('TickersDropdown', () => {
     const handleChange = vi.fn()
     setup([], handleChange)
 
-    fireEvent.mouseDown(screen.getByRole('button'))
-    const listbox = await screen.findByRole('listbox')
-    expect(listbox).toBeInTheDocument()
-    const option = await screen.findByRole('option')
-    expect(option).toBeInTheDocument()
-    fireEvent.click(option)
-    expect(handleChange).toHaveBeenCalledTimes(1)
+    expect(screen.getByRole('combobox')).toBeInTheDocument()
+
+    await userEvent.click(screen.getByRole('combobox'))
+
+    expect(screen.getByRole('option')).toBeInTheDocument()
+    expect(screen.getByText('Ticker 1')).toBeInTheDocument()
+
+    await userEvent.click(screen.getByText('Ticker 1'))
+
     expect(handleChange).toHaveBeenCalledWith([ticker])
-    expect(fetch).toHaveBeenCalledTimes(1)
   })
 })