PrintersPage.test.tsx 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384
  1. /**
  2. * Tests for the PrintersPage component.
  3. */
  4. import { describe, it, expect, beforeEach } from 'vitest';
  5. import { screen, waitFor } from '@testing-library/react';
  6. import { render } from '../utils';
  7. import { PrintersPage } from '../../pages/PrintersPage';
  8. import { http, HttpResponse } from 'msw';
  9. import { server } from '../mocks/server';
  10. const mockPrinters = [
  11. {
  12. id: 1,
  13. name: 'X1 Carbon',
  14. ip_address: '192.168.1.100',
  15. serial_number: '00M09A350100001',
  16. access_code: '12345678',
  17. model: 'X1C',
  18. enabled: true,
  19. nozzle_diameter: 0.4,
  20. nozzle_type: 'hardened_steel',
  21. location: 'Workshop',
  22. auto_archive: true,
  23. created_at: '2024-01-01T00:00:00Z',
  24. updated_at: '2024-01-01T00:00:00Z',
  25. },
  26. {
  27. id: 2,
  28. name: 'P1S Backup',
  29. ip_address: '192.168.1.101',
  30. serial_number: '00W00A123456789',
  31. access_code: '87654321',
  32. model: 'P1S',
  33. enabled: false,
  34. nozzle_diameter: 0.4,
  35. nozzle_type: 'stainless_steel',
  36. location: null,
  37. auto_archive: true,
  38. created_at: '2024-01-02T00:00:00Z',
  39. updated_at: '2024-01-02T00:00:00Z',
  40. },
  41. ];
  42. const mockPrinterStatus = {
  43. connected: true,
  44. state: 'IDLE',
  45. progress: 0,
  46. layer_num: 0,
  47. total_layers: 0,
  48. temperatures: {
  49. nozzle: 25,
  50. bed: 25,
  51. chamber: 25,
  52. },
  53. remaining_time: 0,
  54. filename: null,
  55. wifi_signal: -50,
  56. vt_tray: [],
  57. };
  58. describe('PrintersPage', () => {
  59. beforeEach(() => {
  60. server.use(
  61. http.get('/api/v1/printers/', () => {
  62. return HttpResponse.json(mockPrinters);
  63. }),
  64. http.get('/api/v1/printers/:id/status', () => {
  65. return HttpResponse.json(mockPrinterStatus);
  66. }),
  67. http.get('/api/v1/queue/', () => {
  68. return HttpResponse.json([]);
  69. })
  70. );
  71. });
  72. describe('rendering', () => {
  73. it('renders the page title', async () => {
  74. render(<PrintersPage />);
  75. await waitFor(() => {
  76. expect(screen.getByText('Printers')).toBeInTheDocument();
  77. });
  78. });
  79. it('shows printer cards', async () => {
  80. render(<PrintersPage />);
  81. await waitFor(() => {
  82. expect(screen.getByText('X1 Carbon')).toBeInTheDocument();
  83. expect(screen.getByText('P1S Backup')).toBeInTheDocument();
  84. });
  85. });
  86. it('shows printer models', async () => {
  87. render(<PrintersPage />);
  88. await waitFor(() => {
  89. expect(screen.getByText('X1C')).toBeInTheDocument();
  90. expect(screen.getByText('P1S')).toBeInTheDocument();
  91. });
  92. });
  93. it('shows printer status', async () => {
  94. render(<PrintersPage />);
  95. await waitFor(() => {
  96. // Status should be shown - may vary based on state
  97. expect(screen.getByText('X1 Carbon')).toBeInTheDocument();
  98. });
  99. });
  100. });
  101. describe('printer info', () => {
  102. it('shows IP address', async () => {
  103. render(<PrintersPage />);
  104. await waitFor(() => {
  105. expect(screen.getByText('192.168.1.100')).toBeInTheDocument();
  106. });
  107. });
  108. it('shows location when set', async () => {
  109. render(<PrintersPage />);
  110. await waitFor(() => {
  111. // Printers should render - location display may vary
  112. expect(screen.getByText('X1 Carbon')).toBeInTheDocument();
  113. });
  114. });
  115. });
  116. describe('temperature display', () => {
  117. it('shows nozzle temperature', async () => {
  118. render(<PrintersPage />);
  119. await waitFor(() => {
  120. // Temperatures are shown in the UI
  121. expect(screen.getAllByText(/25/)).toBeTruthy();
  122. });
  123. });
  124. });
  125. describe('empty state', () => {
  126. it('shows empty state when no printers', async () => {
  127. server.use(
  128. http.get('/api/v1/printers/', () => {
  129. return HttpResponse.json([]);
  130. })
  131. );
  132. render(<PrintersPage />);
  133. await waitFor(() => {
  134. expect(screen.getByText(/no printers/i)).toBeInTheDocument();
  135. });
  136. });
  137. });
  138. describe('printer actions', () => {
  139. it('has action buttons', async () => {
  140. render(<PrintersPage />);
  141. await waitFor(() => {
  142. expect(screen.getByText('X1 Carbon')).toBeInTheDocument();
  143. });
  144. // There should be some interactive elements for printer actions
  145. const buttons = screen.getAllByRole('button');
  146. expect(buttons.length).toBeGreaterThan(0);
  147. });
  148. });
  149. describe('disabled printer', () => {
  150. it('shows disabled state for disabled printers', async () => {
  151. render(<PrintersPage />);
  152. await waitFor(() => {
  153. expect(screen.getByText('P1S Backup')).toBeInTheDocument();
  154. });
  155. // Disabled printers have visual indication
  156. const disabledPrinter = screen.getByText('P1S Backup').closest('div');
  157. expect(disabledPrinter).toBeInTheDocument();
  158. });
  159. });
  160. describe('nozzle rack card', () => {
  161. const h2cStatus = {
  162. ...mockPrinterStatus,
  163. nozzle_rack: [
  164. { 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: '' },
  165. { 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: '' },
  166. { 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: '' },
  167. { 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: '' },
  168. { 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: '' },
  169. { id: 19, nozzle_type: '', nozzle_diameter: '', wear: null, stat: null, max_temp: 0, serial_number: '', filament_color: '', filament_id: '', filament_type: '' },
  170. { id: 20, nozzle_type: '', nozzle_diameter: '', wear: null, stat: null, max_temp: 0, serial_number: '', filament_color: '', filament_id: '', filament_type: '' },
  171. { id: 21, nozzle_type: '', nozzle_diameter: '', wear: null, stat: null, max_temp: 0, serial_number: '', filament_color: '', filament_id: '', filament_type: '' },
  172. ],
  173. };
  174. it('shows nozzle rack when H2C rack slots present', async () => {
  175. server.use(
  176. http.get('/api/v1/printers/:id/status', () => {
  177. return HttpResponse.json(h2cStatus);
  178. })
  179. );
  180. render(<PrintersPage />);
  181. await waitFor(() => {
  182. expect(screen.getAllByText('Nozzle Rack').length).toBeGreaterThan(0);
  183. });
  184. });
  185. it('shows 6 rack slot elements for H2C', async () => {
  186. server.use(
  187. http.get('/api/v1/printers/:id/status', () => {
  188. return HttpResponse.json(h2cStatus);
  189. })
  190. );
  191. render(<PrintersPage />);
  192. await waitFor(() => {
  193. expect(screen.getAllByText('Nozzle Rack').length).toBeGreaterThan(0);
  194. });
  195. // Rack shows diameters for occupied slots and dashes for empty ones
  196. const dashes = screen.getAllByText('—');
  197. expect(dashes.length).toBeGreaterThanOrEqual(3); // 3 empty rack positions (IDs 19,20,21)
  198. });
  199. it('hides nozzle rack when only L/R nozzles present (H2D)', async () => {
  200. const h2dStatus = {
  201. ...mockPrinterStatus,
  202. nozzle_rack: [
  203. { id: 0, nozzle_type: 'HS', nozzle_diameter: '0.4', wear: 5, stat: 1, max_temp: 300, serial_number: '', filament_color: '', filament_id: '', filament_type: '' },
  204. { id: 1, nozzle_type: 'HS', nozzle_diameter: '0.4', wear: 3, stat: 1, max_temp: 300, serial_number: '', filament_color: '', filament_id: '', filament_type: '' },
  205. ],
  206. };
  207. server.use(
  208. http.get('/api/v1/printers/:id/status', () => {
  209. return HttpResponse.json(h2dStatus);
  210. })
  211. );
  212. render(<PrintersPage />);
  213. await waitFor(() => {
  214. expect(screen.getByText('X1 Carbon')).toBeInTheDocument();
  215. });
  216. expect(screen.queryByText('Nozzle Rack')).not.toBeInTheDocument();
  217. });
  218. });
  219. describe('firmware version badge', () => {
  220. const firmwareUpToDate = {
  221. printer_id: 1,
  222. current_version: '01.09.00.00',
  223. latest_version: '01.09.00.00',
  224. update_available: false,
  225. download_url: null,
  226. release_notes: 'Bug fixes and improvements.',
  227. };
  228. const firmwareUpdateAvailable = {
  229. printer_id: 1,
  230. current_version: '01.08.00.00',
  231. latest_version: '01.09.00.00',
  232. update_available: true,
  233. download_url: 'https://example.com/firmware.bin',
  234. release_notes: 'New features added.',
  235. };
  236. it('shows green badge when firmware is up to date', async () => {
  237. server.use(
  238. http.get('/api/v1/firmware/updates/:id', () => {
  239. return HttpResponse.json(firmwareUpToDate);
  240. }),
  241. http.get('/api/v1/settings/', () => {
  242. return HttpResponse.json({
  243. check_printer_firmware: true,
  244. auto_archive: true,
  245. save_thumbnails: true,
  246. });
  247. })
  248. );
  249. render(<PrintersPage />);
  250. await waitFor(() => {
  251. expect(screen.getAllByText('01.09.00.00').length).toBeGreaterThan(0);
  252. });
  253. const badge = screen.getAllByText('01.09.00.00')[0].closest('button');
  254. expect(badge).toBeInTheDocument();
  255. expect(badge?.className).toContain('text-status-ok');
  256. });
  257. it('shows orange badge when firmware update is available', async () => {
  258. server.use(
  259. http.get('/api/v1/firmware/updates/:id', () => {
  260. return HttpResponse.json(firmwareUpdateAvailable);
  261. }),
  262. http.get('/api/v1/settings/', () => {
  263. return HttpResponse.json({
  264. check_printer_firmware: true,
  265. auto_archive: true,
  266. save_thumbnails: true,
  267. });
  268. })
  269. );
  270. render(<PrintersPage />);
  271. await waitFor(() => {
  272. expect(screen.getAllByText('01.08.00.00').length).toBeGreaterThan(0);
  273. });
  274. const badge = screen.getAllByText('01.08.00.00')[0].closest('button');
  275. expect(badge).toBeInTheDocument();
  276. expect(badge?.className).toContain('text-orange-400');
  277. });
  278. it('hides badge when firmware check is disabled', async () => {
  279. server.use(
  280. http.get('/api/v1/settings/', () => {
  281. return HttpResponse.json({
  282. check_printer_firmware: false,
  283. auto_archive: true,
  284. save_thumbnails: true,
  285. });
  286. })
  287. );
  288. render(<PrintersPage />);
  289. await waitFor(() => {
  290. expect(screen.getByText('X1 Carbon')).toBeInTheDocument();
  291. });
  292. // Version should not appear when firmware check is disabled
  293. expect(screen.queryByText('01.09.00.00')).not.toBeInTheDocument();
  294. expect(screen.queryByText('01.08.00.00')).not.toBeInTheDocument();
  295. });
  296. it('hides badge when API has no firmware data for the model', async () => {
  297. const firmwareNoData = {
  298. printer_id: 1,
  299. current_version: '01.01.03.00',
  300. latest_version: null,
  301. update_available: false,
  302. download_url: null,
  303. release_notes: null,
  304. };
  305. server.use(
  306. http.get('/api/v1/firmware/updates/:id', () => {
  307. return HttpResponse.json(firmwareNoData);
  308. }),
  309. http.get('/api/v1/settings/', () => {
  310. return HttpResponse.json({
  311. check_printer_firmware: true,
  312. auto_archive: true,
  313. save_thumbnails: true,
  314. });
  315. })
  316. );
  317. render(<PrintersPage />);
  318. await waitFor(() => {
  319. expect(screen.getByText('X1 Carbon')).toBeInTheDocument();
  320. });
  321. // Badge should not appear when API returns no latest_version
  322. expect(screen.queryByText('01.01.03.00')).not.toBeInTheDocument();
  323. });
  324. });
  325. });