/**
* Tests for the PrintersPage component.
*/
import { describe, it, expect, beforeEach } from 'vitest';
import { screen, waitFor } from '@testing-library/react';
import { render } from '../utils';
import { PrintersPage } from '../../pages/PrintersPage';
import { http, HttpResponse } from 'msw';
import { server } from '../mocks/server';
const mockPrinters = [
{
id: 1,
name: 'X1 Carbon',
ip_address: '192.168.1.100',
serial_number: '00M09A350100001',
access_code: '12345678',
model: 'X1C',
enabled: true,
nozzle_diameter: 0.4,
nozzle_type: 'hardened_steel',
location: 'Workshop',
auto_archive: true,
created_at: '2024-01-01T00:00:00Z',
updated_at: '2024-01-01T00:00:00Z',
},
{
id: 2,
name: 'P1S Backup',
ip_address: '192.168.1.101',
serial_number: '00W00A123456789',
access_code: '87654321',
model: 'P1S',
enabled: false,
nozzle_diameter: 0.4,
nozzle_type: 'stainless_steel',
location: null,
auto_archive: true,
created_at: '2024-01-02T00:00:00Z',
updated_at: '2024-01-02T00:00:00Z',
},
];
const mockPrinterStatus = {
connected: true,
state: 'IDLE',
progress: 0,
layer_num: 0,
total_layers: 0,
temperatures: {
nozzle: 25,
bed: 25,
chamber: 25,
},
remaining_time: 0,
filename: null,
wifi_signal: -50,
vt_tray: [],
};
describe('PrintersPage', () => {
beforeEach(() => {
server.use(
http.get('/api/v1/printers/', () => {
return HttpResponse.json(mockPrinters);
}),
http.get('/api/v1/printers/:id/status', () => {
return HttpResponse.json(mockPrinterStatus);
}),
http.get('/api/v1/queue/', () => {
return HttpResponse.json([]);
})
);
});
describe('rendering', () => {
it('renders the page title', async () => {
render();
await waitFor(() => {
expect(screen.getByText('Printers')).toBeInTheDocument();
});
});
it('shows printer cards', async () => {
render();
await waitFor(() => {
expect(screen.getByText('X1 Carbon')).toBeInTheDocument();
expect(screen.getByText('P1S Backup')).toBeInTheDocument();
});
});
it('shows printer models', async () => {
render();
await waitFor(() => {
expect(screen.getByText('X1C')).toBeInTheDocument();
expect(screen.getByText('P1S')).toBeInTheDocument();
});
});
it('shows printer status', async () => {
render();
await waitFor(() => {
// Status should be shown - may vary based on state
expect(screen.getByText('X1 Carbon')).toBeInTheDocument();
});
});
});
describe('printer info', () => {
it('shows IP address', async () => {
render();
await waitFor(() => {
expect(screen.getByText('192.168.1.100')).toBeInTheDocument();
});
});
it('shows location when set', async () => {
render();
await waitFor(() => {
// Printers should render - location display may vary
expect(screen.getByText('X1 Carbon')).toBeInTheDocument();
});
});
});
describe('temperature display', () => {
it('shows nozzle temperature', async () => {
render();
await waitFor(() => {
// Temperatures are shown in the UI
expect(screen.getAllByText(/25/)).toBeTruthy();
});
});
});
describe('empty state', () => {
it('shows empty state when no printers', async () => {
server.use(
http.get('/api/v1/printers/', () => {
return HttpResponse.json([]);
})
);
render();
await waitFor(() => {
expect(screen.getByText(/no printers/i)).toBeInTheDocument();
});
});
});
describe('printer actions', () => {
it('has action buttons', async () => {
render();
await waitFor(() => {
expect(screen.getByText('X1 Carbon')).toBeInTheDocument();
});
// There should be some interactive elements for printer actions
const buttons = screen.getAllByRole('button');
expect(buttons.length).toBeGreaterThan(0);
});
});
describe('disabled printer', () => {
it('shows disabled state for disabled printers', async () => {
render();
await waitFor(() => {
expect(screen.getByText('P1S Backup')).toBeInTheDocument();
});
// Disabled printers have visual indication
const disabledPrinter = screen.getByText('P1S Backup').closest('div');
expect(disabledPrinter).toBeInTheDocument();
});
});
describe('nozzle rack card', () => {
const h2cStatus = {
...mockPrinterStatus,
nozzle_rack: [
{ id: 0, nozzle_type: 'HS', nozzle_diameter: '0.4', wear: 5, stat: 1, max_temp: 300, serial_number: 'SN-L', filament_color: '', filament_id: '', filament_type: '' },
{ id: 1, nozzle_type: 'HS', nozzle_diameter: '0.4', wear: 3, stat: 0, max_temp: 300, serial_number: 'SN-R', filament_color: '', filament_id: '', filament_type: '' },
{ id: 16, nozzle_type: 'HS', nozzle_diameter: '0.4', wear: 10, stat: 0, max_temp: 300, serial_number: 'SN-16', filament_color: '', filament_id: '', filament_type: '' },
{ id: 17, nozzle_type: 'HH01', nozzle_diameter: '0.6', wear: 0, stat: 0, max_temp: 300, serial_number: 'SN-17', filament_color: '', filament_id: '', filament_type: '' },
{ id: 18, nozzle_type: 'HS', nozzle_diameter: '0.4', wear: 2, stat: 0, max_temp: 300, serial_number: 'SN-18', filament_color: '', filament_id: '', filament_type: '' },
{ id: 19, nozzle_type: '', nozzle_diameter: '', wear: null, stat: null, max_temp: 0, serial_number: '', filament_color: '', filament_id: '', filament_type: '' },
{ id: 20, nozzle_type: '', nozzle_diameter: '', wear: null, stat: null, max_temp: 0, serial_number: '', filament_color: '', filament_id: '', filament_type: '' },
{ id: 21, nozzle_type: '', nozzle_diameter: '', wear: null, stat: null, max_temp: 0, serial_number: '', filament_color: '', filament_id: '', filament_type: '' },
],
};
it('shows nozzle rack when H2C rack slots present', async () => {
server.use(
http.get('/api/v1/printers/:id/status', () => {
return HttpResponse.json(h2cStatus);
})
);
render();
await waitFor(() => {
expect(screen.getAllByText('Nozzle Rack').length).toBeGreaterThan(0);
});
});
it('shows 6 rack slot elements for H2C', async () => {
server.use(
http.get('/api/v1/printers/:id/status', () => {
return HttpResponse.json(h2cStatus);
})
);
render();
await waitFor(() => {
expect(screen.getAllByText('Nozzle Rack').length).toBeGreaterThan(0);
});
// Rack shows diameters for occupied slots and dashes for empty ones
const dashes = screen.getAllByText('—');
expect(dashes.length).toBeGreaterThanOrEqual(3); // 3 empty rack positions (IDs 19,20,21)
});
it('hides nozzle rack when only L/R nozzles present (H2D)', async () => {
const h2dStatus = {
...mockPrinterStatus,
nozzle_rack: [
{ id: 0, nozzle_type: 'HS', nozzle_diameter: '0.4', wear: 5, stat: 1, max_temp: 300, serial_number: '', filament_color: '', filament_id: '', filament_type: '' },
{ id: 1, nozzle_type: 'HS', nozzle_diameter: '0.4', wear: 3, stat: 1, max_temp: 300, serial_number: '', filament_color: '', filament_id: '', filament_type: '' },
],
};
server.use(
http.get('/api/v1/printers/:id/status', () => {
return HttpResponse.json(h2dStatus);
})
);
render();
await waitFor(() => {
expect(screen.getByText('X1 Carbon')).toBeInTheDocument();
});
expect(screen.queryByText('Nozzle Rack')).not.toBeInTheDocument();
});
});
describe('firmware version badge', () => {
const firmwareUpToDate = {
printer_id: 1,
current_version: '01.09.00.00',
latest_version: '01.09.00.00',
update_available: false,
download_url: null,
release_notes: 'Bug fixes and improvements.',
};
const firmwareUpdateAvailable = {
printer_id: 1,
current_version: '01.08.00.00',
latest_version: '01.09.00.00',
update_available: true,
download_url: 'https://example.com/firmware.bin',
release_notes: 'New features added.',
};
it('shows green badge when firmware is up to date', async () => {
server.use(
http.get('/api/v1/firmware/updates/:id', () => {
return HttpResponse.json(firmwareUpToDate);
}),
http.get('/api/v1/settings/', () => {
return HttpResponse.json({
check_printer_firmware: true,
auto_archive: true,
save_thumbnails: true,
});
})
);
render();
await waitFor(() => {
expect(screen.getAllByText('01.09.00.00').length).toBeGreaterThan(0);
});
const badge = screen.getAllByText('01.09.00.00')[0].closest('button');
expect(badge).toBeInTheDocument();
expect(badge?.className).toContain('text-status-ok');
});
it('shows orange badge when firmware update is available', async () => {
server.use(
http.get('/api/v1/firmware/updates/:id', () => {
return HttpResponse.json(firmwareUpdateAvailable);
}),
http.get('/api/v1/settings/', () => {
return HttpResponse.json({
check_printer_firmware: true,
auto_archive: true,
save_thumbnails: true,
});
})
);
render();
await waitFor(() => {
expect(screen.getAllByText('01.08.00.00').length).toBeGreaterThan(0);
});
const badge = screen.getAllByText('01.08.00.00')[0].closest('button');
expect(badge).toBeInTheDocument();
expect(badge?.className).toContain('text-orange-400');
});
it('hides badge when firmware check is disabled', async () => {
server.use(
http.get('/api/v1/settings/', () => {
return HttpResponse.json({
check_printer_firmware: false,
auto_archive: true,
save_thumbnails: true,
});
})
);
render();
await waitFor(() => {
expect(screen.getByText('X1 Carbon')).toBeInTheDocument();
});
// Version should not appear when firmware check is disabled
expect(screen.queryByText('01.09.00.00')).not.toBeInTheDocument();
expect(screen.queryByText('01.08.00.00')).not.toBeInTheDocument();
});
it('hides badge when API has no firmware data for the model', async () => {
const firmwareNoData = {
printer_id: 1,
current_version: '01.01.03.00',
latest_version: null,
update_available: false,
download_url: null,
release_notes: null,
};
server.use(
http.get('/api/v1/firmware/updates/:id', () => {
return HttpResponse.json(firmwareNoData);
}),
http.get('/api/v1/settings/', () => {
return HttpResponse.json({
check_printer_firmware: true,
auto_archive: true,
save_thumbnails: true,
});
})
);
render();
await waitFor(() => {
expect(screen.getByText('X1 Carbon')).toBeInTheDocument();
});
// Badge should not appear when API returns no latest_version
expect(screen.queryByText('01.01.03.00')).not.toBeInTheDocument();
});
});
});