|
1 | 1 | import { describe, it, expect, vi } from 'vitest'; |
2 | | -import { screen } from '@testing-library/react'; |
| 2 | +import { screen, fireEvent, waitFor } from '@testing-library/react'; |
3 | 3 | import { render } from '../test-utils'; |
4 | 4 | import { OutputConfigModal } from '../../components/outputTransformations/OutputConfigModal'; |
5 | 5 |
|
6 | | -const mockOutputOption = { |
7 | | - type: 'quality', |
8 | | - name: 'Quality Optimization', |
9 | | - description: 'Optimize image quality' |
| 6 | +const mockQualityOutputOption = { |
| 7 | + id: 'quality', |
| 8 | + title: 'Quality Optimization', |
| 9 | + description: 'Optimize image quality based on device pixel ratio' |
| 10 | +}; |
| 11 | + |
| 12 | +const mockFormatOutputOption = { |
| 13 | + id: 'format', |
| 14 | + title: 'Format Optimization', |
| 15 | + description: 'Optimize image format' |
10 | 16 | }; |
11 | 17 |
|
12 | 18 | describe('OutputConfigModal', () => { |
| 19 | + const defaultProps = { |
| 20 | + visible: true, |
| 21 | + onDismiss: vi.fn(), |
| 22 | + onBack: vi.fn(), |
| 23 | + onAdd: vi.fn(), |
| 24 | + output: null, |
| 25 | + editingOutput: undefined |
| 26 | + }; |
| 27 | + |
| 28 | + beforeEach(() => { |
| 29 | + vi.clearAllMocks(); |
| 30 | + }); |
| 31 | + |
13 | 32 | it('should not render when not visible', () => { |
14 | 33 | render( |
15 | 34 | <OutputConfigModal |
| 35 | + {...defaultProps} |
16 | 36 | visible={false} |
17 | | - outputOption={mockOutputOption} |
18 | | - onDismiss={vi.fn()} |
19 | | - onSave={vi.fn()} |
| 37 | + output={mockQualityOutputOption} |
20 | 38 | /> |
21 | 39 | ); |
22 | 40 |
|
23 | | - expect(screen.queryByText(/Configure/)).not.toBeInTheDocument(); |
| 41 | + // Check that modal dialog has hidden class when visible=false |
| 42 | + const dialog = screen.queryByRole('dialog'); |
| 43 | + expect(dialog?.className).toMatch(/awsui_hidden/); |
24 | 44 | }); |
25 | 45 |
|
26 | 46 | it('should render basic modal structure when visible', () => { |
27 | 47 | render( |
28 | 48 | <OutputConfigModal |
29 | | - visible={true} |
30 | | - outputOption={mockOutputOption} |
31 | | - onDismiss={vi.fn()} |
32 | | - onSave={vi.fn()} |
| 49 | + {...defaultProps} |
| 50 | + output={mockQualityOutputOption} |
33 | 51 | /> |
34 | 52 | ); |
35 | 53 |
|
36 | | - // Just check that something renders when visible |
37 | | - expect(document.body).toBeInTheDocument(); |
| 54 | + expect(screen.getByText(/Add Output - Step 2 of 2/)).toBeInTheDocument(); |
| 55 | + expect(screen.getByText('Quality Optimization')).toBeInTheDocument(); |
| 56 | + }); |
| 57 | + |
| 58 | + describe('Quality Integer Fix Tests', () => { |
| 59 | + it('should generate quality config with integer values for DPR rules', async () => { |
| 60 | + const mockOnAdd = vi.fn(); |
| 61 | + render(<OutputConfigModal {...defaultProps} output={mockQualityOutputOption} onAdd={mockOnAdd} />); |
| 62 | + |
| 63 | + fireEvent.change(screen.getByLabelText(/Default Quality/), { target: { value: '80' } }); |
| 64 | + |
| 65 | + fireEvent.click(screen.getByText('Add DPR Rule')); |
| 66 | + fireEvent.change(screen.getAllByLabelText(/DPR Range/)[0], { target: { value: '1-1.5' } }); |
| 67 | + fireEvent.change(screen.getAllByLabelText(/Quality/)[1], { target: { value: '60' } }); |
| 68 | + |
| 69 | + fireEvent.click(screen.getByText('Add DPR Rule')); |
| 70 | + fireEvent.change(screen.getAllByLabelText(/DPR Range/)[1], { target: { value: '2+' } }); |
| 71 | + fireEvent.change(screen.getAllByLabelText(/Quality/)[2], { target: { value: '90' } }); |
| 72 | + |
| 73 | + fireEvent.click(screen.getByText('Add to Policy')); |
| 74 | + |
| 75 | + await waitFor(() => { |
| 76 | + expect(mockOnAdd).toHaveBeenCalledWith({ |
| 77 | + type: 'quality', |
| 78 | + value: [80, [1, 1.5, 60], [2, 999, 90]] |
| 79 | + }); |
| 80 | + }); |
| 81 | + }); |
| 82 | + |
| 83 | + it('should validate quality values are within 1-100 range', async () => { |
| 84 | + render(<OutputConfigModal {...defaultProps} output={mockQualityOutputOption} />); |
| 85 | + |
| 86 | + fireEvent.click(screen.getByText('Add DPR Rule')); |
| 87 | + const qualityInput = screen.getAllByLabelText(/Quality/)[1]; |
| 88 | + fireEvent.change(qualityInput, { target: { value: '150' } }); |
| 89 | + fireEvent.blur(qualityInput); |
| 90 | + |
| 91 | + await waitFor(() => { |
| 92 | + expect(screen.getByText(/Quality must be between 1 and 100/)).toBeInTheDocument(); |
| 93 | + }); |
| 94 | + }); |
| 95 | + }); |
| 96 | + |
| 97 | + describe('Other Output Types', () => { |
| 98 | + it('should handle format output configuration', () => { |
| 99 | + render( |
| 100 | + <OutputConfigModal |
| 101 | + {...defaultProps} |
| 102 | + output={mockFormatOutputOption} |
| 103 | + /> |
| 104 | + ); |
| 105 | + |
| 106 | + expect(screen.getByText('Format Optimization')).toBeInTheDocument(); |
| 107 | + expect(screen.getByText(/Format Selection/)).toBeInTheDocument(); |
| 108 | + }); |
38 | 109 | }); |
39 | 110 | }); |
0 commit comments