Fix periodic scanner form
This commit is contained in:
parent
d92747cee7
commit
3caa3dab7d
|
@ -0,0 +1,67 @@
|
||||||
|
import { MockedProvider } from '@apollo/client/testing'
|
||||||
|
import { fireEvent, render, screen, waitFor } from '@testing-library/react'
|
||||||
|
import React from 'react'
|
||||||
|
import PeriodicScanner, {
|
||||||
|
SCAN_INTERVAL_MUTATION,
|
||||||
|
SCAN_INTERVAL_QUERY,
|
||||||
|
} from './PeriodicScanner'
|
||||||
|
|
||||||
|
test('Enable periodic scanner', async () => {
|
||||||
|
const graphqlMocks = [
|
||||||
|
{
|
||||||
|
request: {
|
||||||
|
query: SCAN_INTERVAL_QUERY,
|
||||||
|
},
|
||||||
|
result: {
|
||||||
|
data: {
|
||||||
|
siteInfo: { periodicScanInterval: 7380, __typename: 'SiteInfo' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
request: {
|
||||||
|
query: SCAN_INTERVAL_MUTATION,
|
||||||
|
variables: { interval: 0 },
|
||||||
|
},
|
||||||
|
result: { data: { setPeriodicScanInterval: 0 } },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
request: {
|
||||||
|
query: SCAN_INTERVAL_MUTATION,
|
||||||
|
variables: { interval: 123 * 60 },
|
||||||
|
},
|
||||||
|
result: { data: { setPeriodicScanInterval: 123 * 60 } },
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
render(
|
||||||
|
<MockedProvider mocks={graphqlMocks} addTypename={true}>
|
||||||
|
<PeriodicScanner />
|
||||||
|
</MockedProvider>
|
||||||
|
)
|
||||||
|
|
||||||
|
const enableCheckbox = screen.getByLabelText('Enable periodic scanner')
|
||||||
|
const inputField = screen.getByLabelText('Interval value')
|
||||||
|
const unitDropdown = screen.getByLabelText('Interval unit')
|
||||||
|
|
||||||
|
expect(inputField).toBeDisabled()
|
||||||
|
expect(unitDropdown).toBeDisabled()
|
||||||
|
|
||||||
|
fireEvent.click(enableCheckbox)
|
||||||
|
|
||||||
|
expect(inputField).toBeEnabled()
|
||||||
|
expect(unitDropdown).toBeEnabled()
|
||||||
|
|
||||||
|
fireEvent.change(unitDropdown, { target: { value: 'minute' } })
|
||||||
|
fireEvent.change(inputField, { target: { value: '123' } })
|
||||||
|
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(screen.queryByText('Loading...')).not.toBeInTheDocument()
|
||||||
|
})
|
||||||
|
|
||||||
|
fireEvent.keyUp(inputField, { key: 'Enter' })
|
||||||
|
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(screen.queryByText('Loading...')).not.toBeInTheDocument()
|
||||||
|
})
|
||||||
|
})
|
|
@ -1,7 +1,7 @@
|
||||||
import { gql } from '@apollo/client'
|
import { gql } from '@apollo/client'
|
||||||
import React, { useRef, useState } from 'react'
|
import React, { useRef, useState } from 'react'
|
||||||
import { useMutation, useQuery } from '@apollo/client'
|
import { useMutation, useQuery } from '@apollo/client'
|
||||||
import { InputLabelDescription } from './SettingsPage'
|
import { InputLabelDescription, InputLabelTitle } from './SettingsPage'
|
||||||
import { useTranslation } from 'react-i18next'
|
import { useTranslation } from 'react-i18next'
|
||||||
import { scanIntervalQuery } from './__generated__/scanIntervalQuery'
|
import { scanIntervalQuery } from './__generated__/scanIntervalQuery'
|
||||||
import {
|
import {
|
||||||
|
@ -13,7 +13,7 @@ import { TextField } from '../../primitives/form/Input'
|
||||||
import Dropdown, { DropdownItem } from '../../primitives/form/Dropdown'
|
import Dropdown, { DropdownItem } from '../../primitives/form/Dropdown'
|
||||||
import Loader from '../../primitives/Loader'
|
import Loader from '../../primitives/Loader'
|
||||||
|
|
||||||
const SCAN_INTERVAL_QUERY = gql`
|
export const SCAN_INTERVAL_QUERY = gql`
|
||||||
query scanIntervalQuery {
|
query scanIntervalQuery {
|
||||||
siteInfo {
|
siteInfo {
|
||||||
periodicScanInterval
|
periodicScanInterval
|
||||||
|
@ -21,7 +21,7 @@ const SCAN_INTERVAL_QUERY = gql`
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
const SCAN_INTERVAL_MUTATION = gql`
|
export const SCAN_INTERVAL_MUTATION = gql`
|
||||||
mutation changeScanIntervalMutation($interval: Int!) {
|
mutation changeScanIntervalMutation($interval: Int!) {
|
||||||
setPeriodicScanInterval(interval: $interval)
|
setPeriodicScanInterval(interval: $interval)
|
||||||
}
|
}
|
||||||
|
@ -100,8 +100,8 @@ const PeriodicScanner = () => {
|
||||||
|
|
||||||
const [enablePeriodicScanner, setEnablePeriodicScanner] = useState(false)
|
const [enablePeriodicScanner, setEnablePeriodicScanner] = useState(false)
|
||||||
const [scanInterval, setScanInterval] = useState<TimeValue>({
|
const [scanInterval, setScanInterval] = useState<TimeValue>({
|
||||||
value: 4,
|
value: 0,
|
||||||
unit: TimeUnit.Minute,
|
unit: TimeUnit.Second,
|
||||||
})
|
})
|
||||||
|
|
||||||
const scanIntervalServerValue = useRef<number | null>(null)
|
const scanIntervalServerValue = useRef<number | null>(null)
|
||||||
|
@ -148,7 +148,7 @@ const PeriodicScanner = () => {
|
||||||
if (scanIntervalServerValue.current != seconds) {
|
if (scanIntervalServerValue.current != seconds) {
|
||||||
setScanIntervalMutation({
|
setScanIntervalMutation({
|
||||||
variables: {
|
variables: {
|
||||||
interval: convertToSeconds(scanInterval),
|
interval: seconds,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
scanIntervalServerValue.current = seconds
|
scanIntervalServerValue.current = seconds
|
||||||
|
@ -198,12 +198,12 @@ const PeriodicScanner = () => {
|
||||||
|
|
||||||
<div className="mt-4">
|
<div className="mt-4">
|
||||||
<label htmlFor="periodic_scan_field">
|
<label htmlFor="periodic_scan_field">
|
||||||
<h4 className="font-semibold">
|
<InputLabelTitle>
|
||||||
{t(
|
{t(
|
||||||
'settings.periodic_scanner.field.label',
|
'settings.periodic_scanner.field.label',
|
||||||
'Periodic scan interval'
|
'Periodic scan interval'
|
||||||
)}
|
)}
|
||||||
</h4>
|
</InputLabelTitle>
|
||||||
<InputLabelDescription>
|
<InputLabelDescription>
|
||||||
{t(
|
{t(
|
||||||
'settings.periodic_scanner.field.description',
|
'settings.periodic_scanner.field.description',
|
||||||
|
@ -214,9 +214,21 @@ const PeriodicScanner = () => {
|
||||||
<div className="flex gap-2">
|
<div className="flex gap-2">
|
||||||
<TextField
|
<TextField
|
||||||
id="periodic_scan_field"
|
id="periodic_scan_field"
|
||||||
|
aria-label="Interval value"
|
||||||
disabled={!enablePeriodicScanner}
|
disabled={!enablePeriodicScanner}
|
||||||
|
value={scanInterval.value}
|
||||||
|
onChange={e => {
|
||||||
|
setScanInterval(x => ({
|
||||||
|
value: Number(e.target.value),
|
||||||
|
unit: x.unit,
|
||||||
|
}))
|
||||||
|
}}
|
||||||
|
action={() => {
|
||||||
|
onScanIntervalUpdate(scanInterval)
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
<Dropdown
|
<Dropdown
|
||||||
|
aria-label="Interval unit"
|
||||||
disabled={!enablePeriodicScanner}
|
disabled={!enablePeriodicScanner}
|
||||||
items={scanIntervalUnits}
|
items={scanIntervalUnits}
|
||||||
selected={scanInterval.unit}
|
selected={scanInterval.unit}
|
||||||
|
|
|
@ -28,7 +28,7 @@ export const SectionTitle = ({ children, nospace }: SectionTitleProps) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
export const InputLabelTitle = styled.h3.attrs({
|
export const InputLabelTitle = styled.h3.attrs({
|
||||||
className: 'font-semibold',
|
className: 'font-semibold mt-4',
|
||||||
})``
|
})``
|
||||||
|
|
||||||
export const InputLabelDescription = styled.p.attrs({
|
export const InputLabelDescription = styled.p.attrs({
|
||||||
|
|
Loading…
Reference in New Issue