navidrome/ui/src/plugin/SchemaConfigEditor.test.jsx
Deluan Quintão f1e75c40dc
feat(plugins): add JSONForms-based plugin configuration UI (#4911)
* feat(plugins): add JSONForms schema for plugin configuration

Signed-off-by: Deluan <deluan@navidrome.org>

* feat: enhance error handling by formatting validation errors with field names

Signed-off-by: Deluan <deluan@navidrome.org>

* feat: enforce required fields in config validation and improve error handling

Signed-off-by: Deluan <deluan@navidrome.org>

* format JS code

Signed-off-by: Deluan <deluan@navidrome.org>

* feat: add config schema validation and enhance manifest structure

Signed-off-by: Deluan <deluan@navidrome.org>

* feat: refactor plugin config parsing and add unit tests

Signed-off-by: Deluan <deluan@navidrome.org>

* feat: add config validation error message in Portuguese

* feat: enhance AlwaysExpandedArrayLayout with description support and improve array control testing

Signed-off-by: Deluan <deluan@navidrome.org>

* feat: update Discord Rust plugin configuration to use JSONForm for user tokens and enhance schema validation

Signed-off-by: Deluan <deluan@navidrome.org>

* fix: resolve React Hooks linting issues in plugin UI components

* Apply suggestions from code review

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

* format code

Signed-off-by: Deluan <deluan@navidrome.org>

* feat: migrate schema validation to use santhosh-tekuri/jsonschema and improve error formatting

Signed-off-by: Deluan <deluan@navidrome.org>

* address PR comments

Signed-off-by: Deluan <deluan@navidrome.org>

* fix flaky test

Signed-off-by: Deluan <deluan@navidrome.org>

* feat: enhance array layout and configuration handling with AJV defaults

Signed-off-by: Deluan <deluan@navidrome.org>

* feat: implement custom tester to exclude enum arrays from AlwaysExpandedArrayLayout

Signed-off-by: Deluan <deluan@navidrome.org>

* feat: add error boundary for schema rendering and improve error messages

Signed-off-by: Deluan <deluan@navidrome.org>

* feat: refine non-enum array control logic by utilizing JSONForms schema resolution

Signed-off-by: Deluan <deluan@navidrome.org>

* feat: add error styling to ToggleEnabledSwitch for disabled state

Signed-off-by: Deluan <deluan@navidrome.org>

* feat: adjust label positioning and styling in SchemaConfigEditor for improved layout

Signed-off-by: Deluan <deluan@navidrome.org>

* feat: implement outlined input controls renderers to replace custom fragile CSS

Signed-off-by: Deluan <deluan@navidrome.org>

* feat: remove margin from last form control inside array items for better spacing

Signed-off-by: Deluan <deluan@navidrome.org>

* feat: enhance AJV error handling to transform required errors for field-level validation

Signed-off-by: Deluan <deluan@navidrome.org>

* feat: set default value for User Tokens in manifest.json to improve user experience

Signed-off-by: Deluan <deluan@navidrome.org>

* format

Signed-off-by: Deluan <deluan@navidrome.org>

* feat: add margin to outlined input controls for improved spacing

Signed-off-by: Deluan <deluan@navidrome.org>

* feat: remove redundant margin rule for last form control in array items

Signed-off-by: Deluan <deluan@navidrome.org>

* feat: adjust font size of label elements in SchemaConfigEditor for improved readability

Signed-off-by: Deluan <deluan@navidrome.org>

---------

Signed-off-by: Deluan <deluan@navidrome.org>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
2026-01-19 20:51:00 -05:00

86 lines
2.3 KiB
JavaScript

import React from 'react'
import { describe, it, expect, vi } from 'vitest'
import { render } from '@testing-library/react'
import { ThemeProvider, createTheme } from '@material-ui/core/styles'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import { SchemaConfigEditor } from './SchemaConfigEditor'
const theme = createTheme()
// JSONForms requires Redux
const mockStore = createStore(() => ({}))
const renderWithProviders = (component) => {
return render(
<Provider store={mockStore}>
<ThemeProvider theme={theme}>{component}</ThemeProvider>
</Provider>,
)
}
describe('SchemaConfigEditor', () => {
const basicSchema = {
type: 'object',
properties: {
name: {
type: 'string',
title: 'Name',
},
enabled: {
type: 'boolean',
title: 'Enabled',
},
},
}
it('renders nothing when schema is null', () => {
const { container } = renderWithProviders(
<SchemaConfigEditor schema={null} data={{}} onChange={vi.fn()} />,
)
expect(container.firstChild).toBeNull()
})
it('renders the component wrapper with valid schema', () => {
const { container } = renderWithProviders(
<SchemaConfigEditor schema={basicSchema} data={{}} onChange={vi.fn()} />,
)
// Check that the wrapper div is rendered (class name is generated)
expect(
container.querySelector('[class*="NDSchemaConfigEditor-root"]'),
).toBeTruthy()
})
it('calls onChange on initial render', () => {
const onChange = vi.fn()
renderWithProviders(
<SchemaConfigEditor
schema={basicSchema}
data={{ name: 'Test' }}
onChange={onChange}
/>,
)
// JSONForms calls onChange on initial render with initial state
expect(onChange).toHaveBeenCalled()
})
it('passes data and errors to onChange callback', () => {
const onChange = vi.fn()
const initialData = { name: 'Test Value' }
renderWithProviders(
<SchemaConfigEditor
schema={basicSchema}
data={initialData}
onChange={onChange}
/>,
)
// Check that onChange was called with data and errors
expect(onChange).toHaveBeenCalledWith(
expect.objectContaining({ name: 'Test Value' }),
expect.any(Array),
)
})
})