Add tests

src/components/ticker/SignalGroupAdminForm.test.tsx

@@ -0,0 +1,99 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import sign from 'jwt-encode'
+import { MemoryRouter } from 'react-router'
+import { Ticker } from '../../api/Ticker'
+import { AuthProvider } from '../../contexts/AuthContext'
+import { NotificationProvider } from '../../contexts/NotificationContext'
+import SignalGroupAdminForm from './SignalGroupAdminForm'
+
+const token = sign({ id: 1, email: 'user@example.org', roles: ['user'], exp: new Date().getTime() / 1000 + 600 }, 'secret')
+
+describe('SignalGroupForm', () => {
+  beforeAll(() => {
+    localStorage.setItem('token', token)
+  })
+
+  const ticker = ({ active, connected }: { active: boolean; connected: boolean }) => {
+    return {
+      id: 1,
+      signalGroup: {
+        active: active,
+        connected: connected,
+      },
+    } as Ticker
+  }
+
+  const callback = vi.fn()
+  const setSubmitting = vi.fn()
+
+  beforeEach(() => {
+    fetchMock.resetMocks()
+  })
+
+  function setup(ticker: Ticker) {
+    const client = new QueryClient({
+      defaultOptions: {
+        queries: {
+          retry: false,
+        },
+      },
+    })
+    return render(
+      <QueryClientProvider client={client}>
+        <MemoryRouter>
+          <AuthProvider>
+            <NotificationProvider>
+              <div>
+                <SignalGroupAdminForm callback={callback} ticker={ticker} setSubmitting={setSubmitting} />
+                <input name="Submit" type="submit" value="Submit" form="configureSignalGroupAdmin" />
+              </div>
+            </NotificationProvider>
+          </AuthProvider>
+        </MemoryRouter>
+      </QueryClientProvider>
+    )
+  }
+
+  it('should render the component', async () => {
+    setup(ticker({ active: false, connected: false }))
+
+    expect(screen.getByText('Only do this if extra members with write access are needed.')).toBeInTheDocument()
+    expect(screen.getByRole('textbox', { name: 'Phone number' })).toBeInTheDocument()
+
+    await userEvent.type(screen.getByRole('textbox', { name: 'Phone number' }), '+49123456789')
+
+    fetchMock.mockResponseOnce(JSON.stringify({ status: 'success' }))
+
+    await userEvent.click(screen.getByRole('button', { name: 'Submit' }))
+
+    expect(setSubmitting).toHaveBeenCalledTimes(2)
+    expect(callback).toHaveBeenCalledTimes(1)
+    expect(fetchMock).toHaveBeenCalledTimes(1)
+    expect(fetchMock).toHaveBeenCalledWith('http://localhost:8080/v1/admin/tickers/1/signal_group/admin', {
+      body: '{"number":"+49123456789"}',
+      headers: {
+        Accept: 'application/json',
+        Authorization: `Bearer ${token}`,
+        'Content-Type': 'application/json',
+      },
+      method: 'put',
+    })
+  })
+
+  it('should render the error message', async () => {
+    setup(ticker({ active: false, connected: false }))
+
+    expect(screen.getByText('Only do this if extra members with write access are needed.')).toBeInTheDocument()
+    expect(screen.getByRole('textbox', { name: 'Phone number' })).toBeInTheDocument()
+
+    await userEvent.type(screen.getByRole('textbox', { name: 'Phone number' }), '+49123456789')
+
+    fetchMock.mockResponseOnce(JSON.stringify({ status: 'error' }), { status: 400 })
+
+    await userEvent.click(screen.getByRole('button', { name: 'Submit' }))
+
+    expect(screen.getByText('Failed to add number to Signal group')).toBeInTheDocument()
+  })
+})

src/components/ticker/SignalGroupCard.test.tsx

@@ -0,0 +1,102 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import sign from 'jwt-encode'
+import { MemoryRouter } from 'react-router'
+import { Ticker } from '../../api/Ticker'
+import { AuthProvider } from '../../contexts/AuthContext'
+import { NotificationProvider } from '../../contexts/NotificationContext'
+import SignalGroupCard from './SignalGroupCard'
+
+const token = sign({ id: 1, email: 'user@example.org', roles: ['user'], exp: new Date().getTime() / 1000 + 600 }, 'secret')
+
+describe('SignalGroupCard', () => {
+  beforeAll(() => {
+    localStorage.setItem('token', token)
+  })
+
+  const ticker = ({ active, connected }: { active: boolean; connected: boolean }) => {
+    return {
+      id: 1,
+      signalGroup: {
+        active: active,
+        connected: connected,
+      },
+    } as Ticker
+  }
+
+  beforeEach(() => {
+    fetchMock.resetMocks()
+  })
+
+  function setup(ticker: Ticker) {
+    const client = new QueryClient({
+      defaultOptions: {
+        queries: {
+          retry: false,
+        },
+      },
+    })
+    return render(
+      <QueryClientProvider client={client}>
+        <MemoryRouter>
+          <AuthProvider>
+            <NotificationProvider>
+              <SignalGroupCard ticker={ticker} />
+            </NotificationProvider>
+          </AuthProvider>
+        </MemoryRouter>
+      </QueryClientProvider>
+    )
+  }
+
+  it('should render the component', () => {
+    setup(ticker({ active: false, connected: false }))
+
+    expect(screen.getByText('Signal Group')).toBeInTheDocument()
+    expect(screen.getByText("You don't have a Signal group connected.")).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Configure' })).toBeInTheDocument()
+  })
+
+  it('should render the component when connected and active', async () => {
+    setup(ticker({ active: true, connected: true }))
+
+    expect(screen.getByText('Signal Group')).toBeInTheDocument()
+    expect(screen.getByText('You have a Signal group connected.')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Delete' })).toBeInTheDocument()
+
+    fetchMock.mockResponseOnce(JSON.stringify({ status: 'success' }))
+
+    await userEvent.click(screen.getByRole('button', { name: 'Pause' }))
+
+    expect(fetchMock).toHaveBeenCalledTimes(1)
+    expect(fetchMock).toHaveBeenCalledWith('http://localhost:8080/v1/admin/tickers/1/signal_group', {
+      body: JSON.stringify({ active: false }),
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+        Authorization: 'Bearer ' + token,
+      },
+      method: 'put',
+    })
+
+    fetchMock.mockResponseOnce(JSON.stringify({ status: 'success' }))
+
+    await userEvent.click(screen.getByRole('button', { name: 'Delete' }))
+
+    expect(screen.getByRole('dialog')).toBeInTheDocument()
+    expect(screen.getByTestId('dialog-delete')).toBeInTheDocument()
+
+    await userEvent.click(screen.getByTestId('dialog-delete'))
+
+    expect(fetchMock).toHaveBeenCalledTimes(2)
+    expect(fetchMock).toHaveBeenCalledWith('http://localhost:8080/v1/admin/tickers/1/signal_group', {
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+        Authorization: 'Bearer ' + token,
+      },
+      method: 'delete',
+    })
+  })
+})

src/components/ticker/SignalGroupCard.tsx

@@ -125,7 +125,7 @@ const SignalGroupCard: FC<Props> = ({ ticker }) => {
         <DialogActions>
           <Button onClick={() => setDialogDeleteOpen(false)}>Cancel</Button>
           <Box sx={{ display: 'inline', position: 'relative' }}>
-            <Button onClick={handleDelete} color="error" disabled={submitting}>
+            <Button onClick={handleDelete} color="error" disabled={submitting} data-testid="dialog-delete">
               Delete
             </Button>
             {submitting && (

src/components/ticker/SignalGroupForm.test.tsx

@@ -0,0 +1,89 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import sign from 'jwt-encode'
+import { MemoryRouter } from 'react-router'
+import { Ticker } from '../../api/Ticker'
+import { AuthProvider } from '../../contexts/AuthContext'
+import { NotificationProvider } from '../../contexts/NotificationContext'
+import SignalGroupForm from './SignalGroupForm'
+
+const token = sign({ id: 1, email: 'user@example.org', roles: ['user'], exp: new Date().getTime() / 1000 + 600 }, 'secret')
+
+describe('SignalGroupForm', () => {
+  beforeAll(() => {
+    localStorage.setItem('token', token)
+  })
+
+  const ticker = ({ active, connected }: { active: boolean; connected: boolean }) => {
+    return {
+      id: 1,
+      signalGroup: {
+        active: active,
+        connected: connected,
+      },
+    } as Ticker
+  }
+
+  const callback = vi.fn()
+  const setSubmitting = vi.fn()
+
+  beforeEach(() => {
+    fetchMock.resetMocks()
+  })
+
+  function setup(ticker: Ticker) {
+    const client = new QueryClient({
+      defaultOptions: {
+        queries: {
+          retry: false,
+        },
+      },
+    })
+    return render(
+      <QueryClientProvider client={client}>
+        <MemoryRouter>
+          <AuthProvider>
+            <NotificationProvider>
+              <div>
+                <SignalGroupForm callback={callback} ticker={ticker} setSubmitting={setSubmitting} />
+                <input name="Submit" type="submit" value="Submit" form="configureSignalGroup" />
+              </div>
+            </NotificationProvider>
+          </AuthProvider>
+        </MemoryRouter>
+      </QueryClientProvider>
+    )
+  }
+
+  it('should render the component', async () => {
+    setup(ticker({ active: false, connected: false }))
+
+    expect(screen.getByText('A new Signal group will be created with these settings.')).toBeInTheDocument()
+    expect(screen.getByRole('checkbox', { name: 'Active' })).toBeInTheDocument()
+    expect(screen.getByRole('textbox', { name: 'Group name' })).toBeInTheDocument()
+    expect(screen.getByRole('textbox', { name: 'Group description' })).toBeInTheDocument()
+
+    await userEvent.click(screen.getByRole('checkbox', { name: 'Active' }))
+    await userEvent.type(screen.getByRole('textbox', { name: 'Group name' }), 'group name')
+    await userEvent.type(screen.getByRole('textbox', { name: 'Group description' }), 'group description')
+
+    fetchMock.mockResponseOnce(JSON.stringify({ status: 'success' }))
+
+    await userEvent.click(screen.getByRole('button', { name: 'Submit' }))
+
+    expect(callback).toHaveBeenCalledTimes(1)
+    expect(setSubmitting).toHaveBeenNthCalledWith(1, true)
+    expect(fetchMock).toHaveBeenCalledTimes(1)
+    expect(fetchMock).toHaveBeenCalledWith('http://localhost:8080/v1/admin/tickers/1/signal_group', {
+      body: '{"active":true,"groupName":"group name","groupDescription":"group description"}',
+      headers: {
+        Accept: 'application/json',
+        Authorization: `Bearer ${token}`,
+        'Content-Type': 'application/json',
+      },
+      method: 'put',
+    })
+    expect(setSubmitting).toHaveBeenNthCalledWith(2, false)
+  })
+})