PrintersPage.test.tsx 57 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611
  1. /**
  2. * Tests for the PrintersPage component.
  3. */
  4. import { describe, it, expect, beforeEach } from 'vitest';
  5. import { screen, waitFor, fireEvent, within } from '@testing-library/react';
  6. import userEvent from '@testing-library/user-event';
  7. import { render } from '../utils';
  8. import { PrintersPage } from '../../pages/PrintersPage';
  9. import { http, HttpResponse } from 'msw';
  10. import { server } from '../mocks/server';
  11. const mockPrinters = [
  12. {
  13. id: 1,
  14. name: 'X1 Carbon',
  15. ip_address: '192.168.1.100',
  16. serial_number: '00M09A350100001',
  17. access_code: '12345678',
  18. model: 'X1C',
  19. enabled: true,
  20. is_active: true,
  21. nozzle_diameter: 0.4,
  22. nozzle_type: 'hardened_steel',
  23. location: 'Workshop',
  24. auto_archive: true,
  25. created_at: '2024-01-01T00:00:00Z',
  26. updated_at: '2024-01-01T00:00:00Z',
  27. },
  28. {
  29. id: 2,
  30. name: 'P1S Backup',
  31. ip_address: '192.168.1.101',
  32. serial_number: '00W00A123456789',
  33. access_code: '87654321',
  34. model: 'P1S',
  35. enabled: false,
  36. is_active: true,
  37. nozzle_diameter: 0.4,
  38. nozzle_type: 'stainless_steel',
  39. location: null,
  40. auto_archive: true,
  41. created_at: '2024-01-02T00:00:00Z',
  42. updated_at: '2024-01-02T00:00:00Z',
  43. },
  44. ];
  45. const mockPrinterStatus = {
  46. connected: true,
  47. state: 'IDLE',
  48. awaiting_plate_clear: false,
  49. progress: 0,
  50. layer_num: 0,
  51. total_layers: 0,
  52. temperatures: {
  53. nozzle: 25,
  54. bed: 25,
  55. chamber: 25,
  56. },
  57. remaining_time: 0,
  58. filename: null,
  59. wifi_signal: -50,
  60. vt_tray: [],
  61. };
  62. const selectToolbarDropdownOption = async (triggerName: RegExp, optionName: RegExp) => {
  63. const user = userEvent.setup();
  64. await user.click(screen.getByRole('button', { name: triggerName }));
  65. await user.click(await screen.findByRole('button', { name: optionName }));
  66. };
  67. describe('PrintersPage', () => {
  68. beforeEach(() => {
  69. localStorage.removeItem('printerCardSize');
  70. server.use(
  71. http.get('/api/v1/printers/', () => {
  72. return HttpResponse.json(mockPrinters);
  73. }),
  74. http.get('/api/v1/printers/:id/status', () => {
  75. return HttpResponse.json(mockPrinterStatus);
  76. }),
  77. http.post('/api/v1/printers/:id/clear-plate', () => {
  78. return HttpResponse.json({ success: true, message: 'Plate cleared' });
  79. }),
  80. http.get('/api/v1/settings/', () => {
  81. return HttpResponse.json({
  82. auto_archive: true,
  83. save_thumbnails: true,
  84. capture_finish_photo: true,
  85. default_filament_cost: 25.0,
  86. currency: 'USD',
  87. ams_humidity_good: 40,
  88. ams_humidity_fair: 60,
  89. ams_temp_good: 30,
  90. ams_temp_fair: 35,
  91. require_plate_clear: true,
  92. });
  93. }),
  94. // PrintersPage now reads UI rendering fields from the public ui-preferences
  95. // endpoint instead of /settings (#1293) — admin pages still hit /settings.
  96. http.get('/api/v1/settings/ui-preferences', () => {
  97. return HttpResponse.json({
  98. ams_humidity_good: 40,
  99. ams_humidity_fair: 60,
  100. ams_temp_good: 30,
  101. ams_temp_fair: 35,
  102. require_plate_clear: true,
  103. });
  104. }),
  105. http.get('/api/v1/queue/', () => {
  106. return HttpResponse.json([]);
  107. })
  108. );
  109. });
  110. describe('rendering', () => {
  111. it('renders the page title', async () => {
  112. render(<PrintersPage />);
  113. await waitFor(() => {
  114. expect(screen.getByText('Printers')).toBeInTheDocument();
  115. });
  116. });
  117. it('shows printer cards', async () => {
  118. render(<PrintersPage />);
  119. await waitFor(() => {
  120. expect(screen.getByText('X1 Carbon')).toBeInTheDocument();
  121. expect(screen.getByText('P1S Backup')).toBeInTheDocument();
  122. });
  123. });
  124. it('shows printer models', async () => {
  125. render(<PrintersPage />);
  126. await waitFor(() => {
  127. expect(screen.getByText('X1C')).toBeInTheDocument();
  128. expect(screen.getByText('P1S')).toBeInTheDocument();
  129. });
  130. });
  131. it('shows printer status', async () => {
  132. render(<PrintersPage />);
  133. await waitFor(() => {
  134. // Status should be shown - may vary based on state
  135. expect(screen.getByText('X1 Carbon')).toBeInTheDocument();
  136. });
  137. });
  138. });
  139. describe('printer info', () => {
  140. it('shows IP address in printer info modal', async () => {
  141. render(<PrintersPage />);
  142. await waitFor(() => {
  143. expect(screen.getByText('X1 Carbon')).toBeInTheDocument();
  144. });
  145. // IP address is shown in the PrinterInfoModal (accessed via 3-dot menu),
  146. // not directly on the card. Verify the printer data loaded correctly.
  147. expect(screen.getByText('X1 Carbon')).toBeInTheDocument();
  148. });
  149. it('shows location when set', async () => {
  150. render(<PrintersPage />);
  151. await waitFor(() => {
  152. // Printers should render - location display may vary
  153. expect(screen.getByText('X1 Carbon')).toBeInTheDocument();
  154. });
  155. });
  156. });
  157. describe('temperature display', () => {
  158. it('shows nozzle temperature', async () => {
  159. render(<PrintersPage />);
  160. await waitFor(() => {
  161. // Temperatures are shown in the UI
  162. expect(screen.getAllByText(/25/)).toBeTruthy();
  163. });
  164. });
  165. it('sets left and right nozzle temperatures from the nozzle selector', async () => {
  166. localStorage.setItem('printerCardSize', '2');
  167. const temperatureRequests: Array<{ target: string | null; nozzle: string | null }> = [];
  168. const dualNozzlePrinter = { ...mockPrinters[0], model: 'H2D', nozzle_count: 2 };
  169. const dualNozzleStatus = {
  170. ...mockPrinterStatus,
  171. active_extruder: 0,
  172. temperatures: {
  173. ...mockPrinterStatus.temperatures,
  174. nozzle: 31,
  175. nozzle_target: 0,
  176. nozzle_2: 32,
  177. nozzle_2_target: 0,
  178. },
  179. nozzle_rack: [
  180. { id: 0, nozzle_type: 'HS', nozzle_diameter: '0.4', wear: 5, stat: 1, max_temp: 300, serial_number: '', filament_color: '', filament_id: '', filament_type: '' },
  181. { id: 1, nozzle_type: 'HS', nozzle_diameter: '0.4', wear: 3, stat: 1, max_temp: 300, serial_number: '', filament_color: '', filament_id: '', filament_type: '' },
  182. ],
  183. };
  184. server.use(
  185. http.get('/api/v1/printers/', () => HttpResponse.json([dualNozzlePrinter])),
  186. http.get('/api/v1/printers/:id/status', () => HttpResponse.json(dualNozzleStatus)),
  187. http.post('/api/v1/printers/:id/temperature/nozzle', ({ request }) => {
  188. const url = new URL(request.url);
  189. temperatureRequests.push({
  190. target: url.searchParams.get('target'),
  191. nozzle: url.searchParams.get('nozzle'),
  192. });
  193. return HttpResponse.json({ success: true, message: 'Nozzle temperature set' });
  194. })
  195. );
  196. render(<PrintersPage />);
  197. await waitFor(() => {
  198. expect(screen.getByText('L / R')).toBeInTheDocument();
  199. });
  200. // Dual-nozzle temps live on the L/R temperature card, not the nozzle-select card.
  201. fireEvent.click(screen.getByText('L / R').parentElement!);
  202. const leftTempBox = screen.getByText('Left Temp').parentElement!.parentElement!;
  203. fireEvent.click(within(leftTempBox).getByRole('button', { name: '220 C' }));
  204. await waitFor(() => {
  205. expect(temperatureRequests).toContainEqual({ target: '220', nozzle: '1' });
  206. });
  207. fireEvent.click(screen.getByText('L / R').parentElement!);
  208. const rightTempBox = screen.getByText('Right Temp').parentElement!.parentElement!;
  209. fireEvent.click(within(rightTempBox).getByRole('button', { name: '260 C' }));
  210. await waitFor(() => {
  211. expect(temperatureRequests).toContainEqual({ target: '260', nozzle: '0' });
  212. });
  213. });
  214. });
  215. describe('fan badges', () => {
  216. // Chamber fan only exists on enclosed Bambu models. Open-frame printers
  217. // (A1, A1 Mini, A2L, P1P) have no chamber fan — the firmware reports
  218. // big_fan2_speed as 0 there and the widget would be dead UI.
  219. const statusWithFans = {
  220. ...mockPrinterStatus,
  221. cooling_fan_speed: 53,
  222. big_fan1_speed: 53,
  223. big_fan2_speed: 53,
  224. };
  225. const renderWithPrinter = (printer: typeof mockPrinters[number]) => {
  226. server.use(
  227. http.get('/api/v1/printers/', () => HttpResponse.json([printer])),
  228. http.get('/api/v1/printers/:id/status', () => HttpResponse.json(statusWithFans)),
  229. );
  230. render(<PrintersPage />);
  231. };
  232. it('hides chamber fan badge on A1 Mini (open-frame, no chamber fan)', async () => {
  233. renderWithPrinter({ ...mockPrinters[0], model: 'A1 Mini' });
  234. await waitFor(() => {
  235. // Part-cooling badge confirms the fan row rendered.
  236. expect(screen.getByTitle('Part Cooling Fan')).toBeInTheDocument();
  237. });
  238. expect(screen.getByTitle('Auxiliary Fan')).toBeInTheDocument();
  239. expect(screen.queryByTitle('Chamber Fan')).not.toBeInTheDocument();
  240. });
  241. it('hides chamber fan badge on A1 (open-frame)', async () => {
  242. renderWithPrinter({ ...mockPrinters[0], model: 'A1' });
  243. await waitFor(() => {
  244. expect(screen.getByTitle('Part Cooling Fan')).toBeInTheDocument();
  245. });
  246. expect(screen.queryByTitle('Chamber Fan')).not.toBeInTheDocument();
  247. });
  248. it('hides chamber fan badge on P1P (open-frame)', async () => {
  249. renderWithPrinter({ ...mockPrinters[0], model: 'P1P' });
  250. await waitFor(() => {
  251. expect(screen.getByTitle('Part Cooling Fan')).toBeInTheDocument();
  252. });
  253. expect(screen.queryByTitle('Chamber Fan')).not.toBeInTheDocument();
  254. });
  255. it('shows chamber fan badge on X1C (enclosed)', async () => {
  256. renderWithPrinter({ ...mockPrinters[0], model: 'X1C' });
  257. await waitFor(() => {
  258. expect(screen.getByTitle('Chamber Fan')).toBeInTheDocument();
  259. });
  260. expect(screen.getByTitle('Part Cooling Fan')).toBeInTheDocument();
  261. expect(screen.getByTitle('Auxiliary Fan')).toBeInTheDocument();
  262. });
  263. it('shows chamber fan badge on P1S (enclosed)', async () => {
  264. renderWithPrinter({ ...mockPrinters[0], model: 'P1S' });
  265. await waitFor(() => {
  266. expect(screen.getByTitle('Chamber Fan')).toBeInTheDocument();
  267. });
  268. });
  269. // P2S/X2D left auxiliary part cooling fan (airduct part id 10) — optional
  270. // hardware, so the badge must only appear when the firmware reports it.
  271. const renderWithStatus = (
  272. printer: typeof mockPrinters[number],
  273. status: Record<string, unknown>,
  274. ) => {
  275. server.use(
  276. http.get('/api/v1/printers/', () => HttpResponse.json([printer])),
  277. http.get('/api/v1/printers/:id/status', () => HttpResponse.json(status)),
  278. );
  279. render(<PrintersPage />);
  280. };
  281. it('shows the exhaust tile labeled "Exhaust" on P2S when the kit is present', async () => {
  282. // Exhaust fan is an add-on kit; the tile appears only when the printer
  283. // reports it (airduct part id 3 -> exhaust_fan_present).
  284. renderWithStatus(
  285. { ...mockPrinters[0], model: 'P2S' },
  286. { ...statusWithFans, exhaust_fan_present: true },
  287. );
  288. await waitFor(() => {
  289. expect(screen.getByTitle('Part Cooling Fan')).toBeInTheDocument();
  290. });
  291. expect(screen.getByTitle('Exhaust')).toBeInTheDocument();
  292. expect(screen.queryByTitle('Chamber Fan')).not.toBeInTheDocument();
  293. });
  294. it('hides the exhaust tile on a base P2S without the kit', async () => {
  295. renderWithStatus(
  296. { ...mockPrinters[0], model: 'P2S' },
  297. { ...statusWithFans, exhaust_fan_present: false },
  298. );
  299. await waitFor(() => {
  300. expect(screen.getByTitle('Part Cooling Fan')).toBeInTheDocument();
  301. });
  302. expect(screen.queryByTitle('Exhaust')).not.toBeInTheDocument();
  303. expect(screen.queryByTitle('Chamber Fan')).not.toBeInTheDocument();
  304. });
  305. it('keeps the always-on "Chamber Fan" tile on X1C regardless of exhaust_fan_present', async () => {
  306. renderWithStatus(
  307. { ...mockPrinters[0], model: 'X1C' },
  308. { ...statusWithFans, exhaust_fan_present: false },
  309. );
  310. await waitFor(() => {
  311. expect(screen.getByTitle('Chamber Fan')).toBeInTheDocument();
  312. });
  313. expect(screen.queryByTitle('Exhaust')).not.toBeInTheDocument();
  314. });
  315. it('hides the left aux badge when the accessory is not reported', async () => {
  316. renderWithStatus({ ...mockPrinters[0], model: 'P2S' }, statusWithFans);
  317. await waitFor(() => {
  318. expect(screen.getByTitle('Part Cooling Fan')).toBeInTheDocument();
  319. });
  320. expect(screen.queryByTitle('Left Auxiliary Fan')).not.toBeInTheDocument();
  321. });
  322. it('orders the fan badges left-to-right: part, left aux, aux, exhaust', async () => {
  323. // The two aux badges should read in the same order as the physical
  324. // hardware, so the left fan sits before the right one.
  325. renderWithStatus(
  326. { ...mockPrinters[0], model: 'P2S' },
  327. { ...statusWithFans, left_aux_fan_speed: 80, exhaust_fan_present: true },
  328. );
  329. await waitFor(() => {
  330. expect(screen.getByTitle('Left Auxiliary Fan')).toBeInTheDocument();
  331. });
  332. const order = ['Part Cooling Fan', 'Left Auxiliary Fan', 'Auxiliary Fan', 'Exhaust'].map(
  333. (title) => screen.getByTitle(title),
  334. );
  335. for (let i = 1; i < order.length; i++) {
  336. // Node.compareDocumentPosition returns FOLLOWING (4) when the argument
  337. // comes after the reference node in document order.
  338. expect(order[i - 1].compareDocumentPosition(order[i])).toBe(Node.DOCUMENT_POSITION_FOLLOWING);
  339. }
  340. });
  341. it('shows left aux fan badge when the accessory is installed (P2S)', async () => {
  342. renderWithStatus(
  343. { ...mockPrinters[0], model: 'P2S' },
  344. { ...statusWithFans, left_aux_fan_speed: 80 },
  345. );
  346. await waitFor(() => {
  347. expect(screen.getByTitle('Left Auxiliary Fan')).toBeInTheDocument();
  348. });
  349. });
  350. it('shows left aux fan badge even at 0% while installed', async () => {
  351. renderWithStatus(
  352. { ...mockPrinters[0], model: 'P2S' },
  353. { ...statusWithFans, left_aux_fan_speed: 0 },
  354. );
  355. await waitFor(() => {
  356. expect(screen.getByTitle('Left Auxiliary Fan')).toBeInTheDocument();
  357. });
  358. });
  359. });
  360. describe('empty state', () => {
  361. it('shows empty state when no printers', async () => {
  362. server.use(
  363. http.get('/api/v1/printers/', () => {
  364. return HttpResponse.json([]);
  365. })
  366. );
  367. render(<PrintersPage />);
  368. await waitFor(() => {
  369. expect(screen.getByText(/no printers/i)).toBeInTheDocument();
  370. });
  371. });
  372. });
  373. describe('printer actions', () => {
  374. it('has action buttons', async () => {
  375. render(<PrintersPage />);
  376. await waitFor(() => {
  377. expect(screen.getByText('X1 Carbon')).toBeInTheDocument();
  378. });
  379. // There should be some interactive elements for printer actions
  380. const buttons = screen.getAllByRole('button');
  381. expect(buttons.length).toBeGreaterThan(0);
  382. });
  383. it('shows plate clear status and action on finished printers when not cleared', async () => {
  384. server.use(
  385. http.get('/api/v1/printers/:id/status', () => {
  386. return HttpResponse.json({ ...mockPrinterStatus, state: 'FINISH', awaiting_plate_clear: true });
  387. })
  388. );
  389. render(<PrintersPage />);
  390. await waitFor(() => {
  391. expect(screen.getAllByText('Plate not Clear').length).toBeGreaterThan(0);
  392. });
  393. expect(screen.getAllByRole('button', { name: 'Mark plate as cleared' }).length).toBeGreaterThan(0);
  394. });
  395. it('shows plate clear status and action on failed printers when not cleared', async () => {
  396. server.use(
  397. http.get('/api/v1/printers/:id/status', () => {
  398. return HttpResponse.json({ ...mockPrinterStatus, state: 'FAILED', awaiting_plate_clear: true });
  399. })
  400. );
  401. render(<PrintersPage />);
  402. await waitFor(() => {
  403. expect(screen.getAllByText('Plate not Clear').length).toBeGreaterThan(0);
  404. });
  405. expect(screen.getAllByRole('button', { name: 'Mark plate as cleared' }).length).toBeGreaterThan(0);
  406. });
  407. it('keeps the clear action available when an idle printer is still awaiting acknowledgment', async () => {
  408. server.use(
  409. http.get('/api/v1/printers/:id/status', () => {
  410. return HttpResponse.json({ ...mockPrinterStatus, state: 'IDLE', awaiting_plate_clear: true });
  411. })
  412. );
  413. render(<PrintersPage />);
  414. await waitFor(() => {
  415. expect(screen.getAllByText('Plate not Clear').length).toBeGreaterThan(0);
  416. });
  417. expect(screen.getAllByRole('button', { name: 'Mark plate as cleared' }).length).toBeGreaterThan(0);
  418. });
  419. it('updates the plate clear status after using the printer card action', async () => {
  420. let awaitingPlateClear = true;
  421. server.use(
  422. http.get('/api/v1/printers/', () => {
  423. return HttpResponse.json([mockPrinters[0]]);
  424. }),
  425. http.get('/api/v1/printers/:id/status', () => {
  426. return HttpResponse.json({ ...mockPrinterStatus, state: 'FINISH', awaiting_plate_clear: awaitingPlateClear });
  427. }),
  428. http.post('/api/v1/printers/:id/clear-plate', () => {
  429. awaitingPlateClear = false;
  430. return HttpResponse.json({ success: true, message: 'Plate cleared' });
  431. })
  432. );
  433. render(<PrintersPage />);
  434. await waitFor(() => {
  435. expect(screen.getAllByText('Plate not Clear').length).toBeGreaterThan(0);
  436. });
  437. fireEvent.click(screen.getAllByRole('button', { name: 'Mark plate as cleared' })[0]);
  438. await waitFor(() => {
  439. expect(screen.queryByText('Plate not Clear')).not.toBeInTheDocument();
  440. });
  441. expect(screen.getAllByText('Plate Clear').length).toBeGreaterThan(0);
  442. });
  443. it('shows an icon-only plate clear action in small card view', async () => {
  444. let awaitingPlateClear = true;
  445. server.use(
  446. http.get('/api/v1/printers/', () => {
  447. return HttpResponse.json([mockPrinters[0]]);
  448. }),
  449. http.get('/api/v1/printers/:id/status', () => {
  450. return HttpResponse.json({ ...mockPrinterStatus, state: 'FINISH', awaiting_plate_clear: awaitingPlateClear });
  451. }),
  452. http.post('/api/v1/printers/:id/clear-plate', () => {
  453. awaitingPlateClear = false;
  454. return HttpResponse.json({ success: true, message: 'Plate cleared' });
  455. })
  456. );
  457. render(<PrintersPage />);
  458. await waitFor(() => {
  459. expect(screen.getByText('X1 Carbon')).toBeInTheDocument();
  460. });
  461. fireEvent.click(screen.getByRole('button', { name: 'S' }));
  462. await waitFor(() => {
  463. expect(screen.queryByText('Mark plate as cleared')).not.toBeInTheDocument();
  464. });
  465. const clearButton = screen.getByRole('button', { name: 'Mark plate as cleared' });
  466. fireEvent.click(clearButton);
  467. await waitFor(() => {
  468. expect(screen.queryByRole('button', { name: 'Mark plate as cleared' })).not.toBeInTheDocument();
  469. });
  470. });
  471. it('shows plate clear status but no action while idle', async () => {
  472. render(<PrintersPage />);
  473. await waitFor(() => {
  474. expect(screen.getAllByText('Plate Clear').length).toBeGreaterThan(0);
  475. });
  476. expect(screen.queryByRole('button', { name: 'Mark plate as cleared' })).not.toBeInTheDocument();
  477. });
  478. it('shows plate in use status while printing and hides the clear action', async () => {
  479. server.use(
  480. http.get('/api/v1/printers/:id/status', () => {
  481. return HttpResponse.json({ ...mockPrinterStatus, state: 'RUNNING', awaiting_plate_clear: false });
  482. })
  483. );
  484. render(<PrintersPage />);
  485. await waitFor(() => {
  486. expect(screen.getAllByText('Plate in Use').length).toBeGreaterThan(0);
  487. });
  488. expect(screen.queryByRole('button', { name: 'Mark plate as cleared' })).not.toBeInTheDocument();
  489. });
  490. it('hides plate status and action when plate-clear confirmation is disabled', async () => {
  491. server.use(
  492. http.get('/api/v1/settings/', () => {
  493. return HttpResponse.json({
  494. auto_archive: true,
  495. save_thumbnails: true,
  496. capture_finish_photo: true,
  497. default_filament_cost: 25.0,
  498. currency: 'USD',
  499. ams_humidity_good: 40,
  500. ams_humidity_fair: 60,
  501. ams_temp_good: 30,
  502. ams_temp_fair: 35,
  503. require_plate_clear: false,
  504. });
  505. }),
  506. http.get('/api/v1/settings/ui-preferences', () => {
  507. return HttpResponse.json({
  508. ams_humidity_good: 40,
  509. ams_humidity_fair: 60,
  510. ams_temp_good: 30,
  511. ams_temp_fair: 35,
  512. require_plate_clear: false,
  513. });
  514. }),
  515. http.get('/api/v1/printers/:id/status', () => {
  516. return HttpResponse.json({ ...mockPrinterStatus, state: 'FINISH', awaiting_plate_clear: true });
  517. })
  518. );
  519. render(<PrintersPage />);
  520. await waitFor(() => {
  521. expect(screen.getByText('X1 Carbon')).toBeInTheDocument();
  522. });
  523. expect(screen.queryByText('Plate not Clear')).not.toBeInTheDocument();
  524. expect(screen.queryByText('Plate Clear')).not.toBeInTheDocument();
  525. expect(screen.queryByText('Plate in Use')).not.toBeInTheDocument();
  526. expect(screen.queryByRole('button', { name: 'Mark plate as cleared' })).not.toBeInTheDocument();
  527. });
  528. });
  529. describe('disabled printer', () => {
  530. it('shows disabled state for disabled printers', async () => {
  531. render(<PrintersPage />);
  532. await waitFor(() => {
  533. expect(screen.getByText('P1S Backup')).toBeInTheDocument();
  534. });
  535. // Disabled printers have visual indication
  536. const disabledPrinter = screen.getByText('P1S Backup').closest('div');
  537. expect(disabledPrinter).toBeInTheDocument();
  538. });
  539. });
  540. describe('maintenance mode (#1476)', () => {
  541. // Wraps the backend is_active flag — already gates MQTT, queue dispatch,
  542. // scheduler, metrics, picker. These tests pin the UI surface: status
  543. // panel swap, pill swap, and the PATCH on toggle.
  544. const inMaintenancePrinter = { ...mockPrinters[0], is_active: false };
  545. it('shows the maintenance status panel instead of the print container', async () => {
  546. server.use(
  547. http.get('/api/v1/printers/', () => HttpResponse.json([inMaintenancePrinter])),
  548. http.get('/api/v1/printers/:id/status', () =>
  549. HttpResponse.json({ ...mockPrinterStatus, connected: false }),
  550. ),
  551. );
  552. render(<PrintersPage />);
  553. await waitFor(() => {
  554. expect(screen.getByText('In Maintenance')).toBeInTheDocument();
  555. });
  556. // Exit button rendered
  557. expect(screen.getByRole('button', { name: /exit maintenance/i })).toBeInTheDocument();
  558. // The "No active job" / "Ready to print" copy from the normal status
  559. // panel must NOT be present — confirms the swap, not a stacked render.
  560. expect(screen.queryByText(/no active job/i)).not.toBeInTheDocument();
  561. expect(screen.queryByText(/ready to print/i)).not.toBeInTheDocument();
  562. });
  563. it('shows the amber Maintenance pill in the header (no Connected/Offline)', async () => {
  564. server.use(
  565. http.get('/api/v1/printers/', () => HttpResponse.json([inMaintenancePrinter])),
  566. http.get('/api/v1/printers/:id/status', () =>
  567. HttpResponse.json({ ...mockPrinterStatus, connected: false }),
  568. ),
  569. );
  570. render(<PrintersPage />);
  571. // The header pill row contains "Maintenance" exactly once.
  572. await waitFor(() => {
  573. expect(screen.getAllByText('Maintenance').length).toBeGreaterThan(0);
  574. });
  575. // No connection diagnostic CTA (that's reserved for involuntary offline).
  576. expect(screen.queryByRole('button', { name: /run.*diagnostic/i })).not.toBeInTheDocument();
  577. });
  578. it('PATCHes is_active=true when the Exit button is clicked', async () => {
  579. const patchedBodies: unknown[] = [];
  580. server.use(
  581. http.get('/api/v1/printers/', () => HttpResponse.json([inMaintenancePrinter])),
  582. http.get('/api/v1/printers/:id/status', () =>
  583. HttpResponse.json({ ...mockPrinterStatus, connected: false }),
  584. ),
  585. http.patch('/api/v1/printers/:id', async ({ request }) => {
  586. const body = await request.json();
  587. patchedBodies.push(body);
  588. return HttpResponse.json({ ...inMaintenancePrinter, is_active: true });
  589. }),
  590. );
  591. render(<PrintersPage />);
  592. const exit = await screen.findByRole('button', { name: /exit maintenance/i });
  593. fireEvent.click(exit);
  594. await waitFor(() => {
  595. expect(patchedBodies.length).toBeGreaterThan(0);
  596. });
  597. expect(patchedBodies[0]).toEqual(expect.objectContaining({ is_active: true }));
  598. });
  599. it('renders the regular status panel when is_active=true', async () => {
  600. server.use(
  601. http.get('/api/v1/printers/', () => HttpResponse.json([{ ...mockPrinters[0], is_active: true }])),
  602. http.get('/api/v1/printers/:id/status', () => HttpResponse.json(mockPrinterStatus)),
  603. );
  604. render(<PrintersPage />);
  605. await waitFor(() => {
  606. expect(screen.getByText('X1 Carbon')).toBeInTheDocument();
  607. });
  608. // Active printer never shows the maintenance panel.
  609. expect(screen.queryByText('In Maintenance')).not.toBeInTheDocument();
  610. expect(screen.queryByRole('button', { name: /exit maintenance/i })).not.toBeInTheDocument();
  611. });
  612. });
  613. describe('nozzle rack card', () => {
  614. const h2cStatus = {
  615. ...mockPrinterStatus,
  616. nozzle_rack: [
  617. { 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: '' },
  618. { 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: '' },
  619. { 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: '' },
  620. { 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: '' },
  621. { 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: '' },
  622. { id: 19, nozzle_type: '', nozzle_diameter: '', wear: null, stat: null, max_temp: 0, serial_number: '', filament_color: '', filament_id: '', filament_type: '' },
  623. { id: 20, nozzle_type: '', nozzle_diameter: '', wear: null, stat: null, max_temp: 0, serial_number: '', filament_color: '', filament_id: '', filament_type: '' },
  624. { id: 21, nozzle_type: '', nozzle_diameter: '', wear: null, stat: null, max_temp: 0, serial_number: '', filament_color: '', filament_id: '', filament_type: '' },
  625. ],
  626. };
  627. it('shows nozzle rack when H2C rack slots present', async () => {
  628. server.use(
  629. http.get('/api/v1/printers/:id/status', () => {
  630. return HttpResponse.json(h2cStatus);
  631. })
  632. );
  633. render(<PrintersPage />);
  634. await waitFor(() => {
  635. expect(screen.getAllByText('Nozzle Rack').length).toBeGreaterThan(0);
  636. });
  637. });
  638. it('shows 6 rack slot elements for H2C', async () => {
  639. server.use(
  640. http.get('/api/v1/printers/:id/status', () => {
  641. return HttpResponse.json(h2cStatus);
  642. })
  643. );
  644. render(<PrintersPage />);
  645. await waitFor(() => {
  646. expect(screen.getAllByText('Nozzle Rack').length).toBeGreaterThan(0);
  647. });
  648. // Rack shows diameters for occupied slots and dashes for empty ones
  649. const dashes = screen.getAllByText('—');
  650. expect(dashes.length).toBeGreaterThanOrEqual(3); // 3 empty rack positions (IDs 19,20,21)
  651. });
  652. it('keeps empty slot anchored to physical position when its nozzle is mounted (#943)', async () => {
  653. // H2C with rack slot 16 picked up into the hotend — firmware omits ID 16
  654. // entirely from nozzle.info. Each rack diameter is unique so we can assert
  655. // the ordering by tooltip lookup.
  656. const h2cSlot16Mounted = {
  657. ...mockPrinterStatus,
  658. nozzle_rack: [
  659. { 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: '' },
  660. { 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: '' },
  661. // ID 16 missing — currently in hotend
  662. { id: 17, nozzle_type: 'HS', nozzle_diameter: '0.2', wear: 0, stat: 0, max_temp: 300, serial_number: 'SN-17', filament_color: '', filament_id: '', filament_type: '' },
  663. { id: 18, nozzle_type: 'HS', nozzle_diameter: '0.6', wear: 0, stat: 0, max_temp: 300, serial_number: 'SN-18', filament_color: '', filament_id: '', filament_type: '' },
  664. { id: 19, nozzle_type: 'HS', nozzle_diameter: '0.8', wear: 0, stat: 0, max_temp: 300, serial_number: 'SN-19', filament_color: '', filament_id: '', filament_type: '' },
  665. { id: 20, nozzle_type: 'HH01', nozzle_diameter: '1.0', wear: 0, stat: 0, max_temp: 300, serial_number: 'SN-20', filament_color: '', filament_id: '', filament_type: '' },
  666. { id: 21, nozzle_type: 'HH01', nozzle_diameter: '1.2', wear: 0, stat: 0, max_temp: 300, serial_number: 'SN-21', filament_color: '', filament_id: '', filament_type: '' },
  667. ],
  668. };
  669. server.use(
  670. http.get('/api/v1/printers/:id/status', () => {
  671. return HttpResponse.json(h2cSlot16Mounted);
  672. })
  673. );
  674. render(<PrintersPage />);
  675. await waitFor(() => {
  676. expect(screen.getAllByText('Nozzle Rack').length).toBeGreaterThan(0);
  677. });
  678. // Slot 1 (leftmost, ID 16) should be the empty dash; slots 2..6 should
  679. // hold the 5 remaining nozzles in order 17, 18, 19, 20, 21.
  680. const rackLabel = screen.getAllByText('Nozzle Rack')[0];
  681. const rackCard = rackLabel.parentElement!;
  682. const slotRow = rackCard.querySelectorAll('div.flex')[0];
  683. const slotTexts = Array.from(slotRow.querySelectorAll('span')).map(s => s.textContent);
  684. expect(slotTexts).toEqual(['—', '0.2', '0.6', '0.8', '1.0', '1.2']);
  685. });
  686. it('hides nozzle rack when only L/R nozzles present (H2D)', async () => {
  687. const h2dStatus = {
  688. ...mockPrinterStatus,
  689. nozzle_rack: [
  690. { id: 0, nozzle_type: 'HS', nozzle_diameter: '0.4', wear: 5, stat: 1, max_temp: 300, serial_number: '', filament_color: '', filament_id: '', filament_type: '' },
  691. { id: 1, nozzle_type: 'HS', nozzle_diameter: '0.4', wear: 3, stat: 1, max_temp: 300, serial_number: '', filament_color: '', filament_id: '', filament_type: '' },
  692. ],
  693. };
  694. server.use(
  695. http.get('/api/v1/printers/:id/status', () => {
  696. return HttpResponse.json(h2dStatus);
  697. })
  698. );
  699. render(<PrintersPage />);
  700. await waitFor(() => {
  701. expect(screen.getByText('X1 Carbon')).toBeInTheDocument();
  702. });
  703. expect(screen.queryByText('Nozzle Rack')).not.toBeInTheDocument();
  704. });
  705. });
  706. describe('firmware version badge', () => {
  707. const firmwareUpToDate = {
  708. printer_id: 1,
  709. current_version: '01.09.00.00',
  710. latest_version: '01.09.00.00',
  711. update_available: false,
  712. download_url: null,
  713. release_notes: 'Bug fixes and improvements.',
  714. };
  715. const firmwareUpdateAvailable = {
  716. printer_id: 1,
  717. current_version: '01.08.00.00',
  718. latest_version: '01.09.00.00',
  719. update_available: true,
  720. download_url: 'https://example.com/firmware.bin',
  721. release_notes: 'New features added.',
  722. };
  723. it('shows green badge when firmware is up to date', async () => {
  724. server.use(
  725. http.get('/api/v1/firmware/updates/:id', () => {
  726. return HttpResponse.json(firmwareUpToDate);
  727. }),
  728. http.get('/api/v1/settings/', () => {
  729. return HttpResponse.json({
  730. check_printer_firmware: true,
  731. auto_archive: true,
  732. save_thumbnails: true,
  733. });
  734. })
  735. );
  736. render(<PrintersPage />);
  737. await waitFor(() => {
  738. expect(screen.getAllByText('01.09.00.00').length).toBeGreaterThan(0);
  739. });
  740. const badge = screen.getAllByText('01.09.00.00')[0].closest('button');
  741. expect(badge).toBeInTheDocument();
  742. expect(badge?.className).toContain('text-status-ok');
  743. });
  744. it('shows orange badge when firmware update is available', async () => {
  745. server.use(
  746. http.get('/api/v1/firmware/updates/:id', () => {
  747. return HttpResponse.json(firmwareUpdateAvailable);
  748. }),
  749. http.get('/api/v1/settings/', () => {
  750. return HttpResponse.json({
  751. check_printer_firmware: true,
  752. auto_archive: true,
  753. save_thumbnails: true,
  754. });
  755. })
  756. );
  757. render(<PrintersPage />);
  758. await waitFor(() => {
  759. expect(screen.getAllByText('01.08.00.00').length).toBeGreaterThan(0);
  760. });
  761. const badge = screen.getAllByText('01.08.00.00')[0].closest('button');
  762. expect(badge).toBeInTheDocument();
  763. expect(badge?.className).toContain('text-orange-400');
  764. });
  765. it('hides badge when firmware check is disabled', async () => {
  766. server.use(
  767. http.get('/api/v1/settings/', () => {
  768. return HttpResponse.json({
  769. check_printer_firmware: false,
  770. auto_archive: true,
  771. save_thumbnails: true,
  772. });
  773. })
  774. );
  775. render(<PrintersPage />);
  776. await waitFor(() => {
  777. expect(screen.getByText('X1 Carbon')).toBeInTheDocument();
  778. });
  779. // Version should not appear when firmware check is disabled
  780. expect(screen.queryByText('01.09.00.00')).not.toBeInTheDocument();
  781. expect(screen.queryByText('01.08.00.00')).not.toBeInTheDocument();
  782. });
  783. it('hides badge when API has no firmware data for the model', async () => {
  784. const firmwareNoData = {
  785. printer_id: 1,
  786. current_version: '01.01.03.00',
  787. latest_version: null,
  788. update_available: false,
  789. download_url: null,
  790. release_notes: null,
  791. };
  792. server.use(
  793. http.get('/api/v1/firmware/updates/:id', () => {
  794. return HttpResponse.json(firmwareNoData);
  795. }),
  796. http.get('/api/v1/settings/', () => {
  797. return HttpResponse.json({
  798. check_printer_firmware: true,
  799. auto_archive: true,
  800. save_thumbnails: true,
  801. });
  802. })
  803. );
  804. render(<PrintersPage />);
  805. await waitFor(() => {
  806. expect(screen.getByText('X1 Carbon')).toBeInTheDocument();
  807. });
  808. // Badge should not appear when API returns no latest_version
  809. expect(screen.queryByText('01.01.03.00')).not.toBeInTheDocument();
  810. });
  811. });
  812. describe('bulk selection', () => {
  813. it('shows select button in toolbar', async () => {
  814. render(<PrintersPage />);
  815. await waitFor(() => {
  816. expect(screen.getByText('X1 Carbon')).toBeInTheDocument();
  817. });
  818. // The Select button should be in the toolbar (title attribute)
  819. const selectButton = screen.getByTitle('Select');
  820. expect(selectButton).toBeInTheDocument();
  821. });
  822. it('shows selection toolbar after clicking select button', async () => {
  823. render(<PrintersPage />);
  824. await waitFor(() => {
  825. expect(screen.getByText('X1 Carbon')).toBeInTheDocument();
  826. });
  827. // Click the Select button to enter selection mode
  828. fireEvent.click(screen.getByTitle('Select'));
  829. // The floating toolbar should appear with Select All
  830. await waitFor(() => {
  831. expect(screen.getByText('Select All')).toBeInTheDocument();
  832. });
  833. });
  834. it('shows selection count when printers are selected', async () => {
  835. render(<PrintersPage />);
  836. await waitFor(() => {
  837. expect(screen.getByText('X1 Carbon')).toBeInTheDocument();
  838. });
  839. // Enter selection mode
  840. fireEvent.click(screen.getByTitle('Select'));
  841. await waitFor(() => {
  842. expect(screen.getByText('Select All')).toBeInTheDocument();
  843. });
  844. // Click Select All to select both printers
  845. fireEvent.click(screen.getByText('Select All'));
  846. // Should show "2 selected"
  847. await waitFor(() => {
  848. expect(screen.getByText('2 selected')).toBeInTheDocument();
  849. });
  850. });
  851. it('shows select by state dropdown', async () => {
  852. render(<PrintersPage />);
  853. await waitFor(() => {
  854. expect(screen.getByText('X1 Carbon')).toBeInTheDocument();
  855. });
  856. // Enter selection mode
  857. fireEvent.click(screen.getByTitle('Select'));
  858. await waitFor(() => {
  859. expect(screen.getByText('Select by State')).toBeInTheDocument();
  860. });
  861. });
  862. it('exits selection mode on close button', async () => {
  863. render(<PrintersPage />);
  864. await waitFor(() => {
  865. expect(screen.getByText('X1 Carbon')).toBeInTheDocument();
  866. });
  867. // Enter selection mode
  868. fireEvent.click(screen.getByTitle('Select'));
  869. await waitFor(() => {
  870. expect(screen.getByText('Select All')).toBeInTheDocument();
  871. });
  872. // Click the Select button again to exit (it toggles)
  873. fireEvent.click(screen.getByTitle('Select'));
  874. // Floating toolbar should disappear
  875. await waitFor(() => {
  876. expect(screen.queryByText('Select All')).not.toBeInTheDocument();
  877. });
  878. });
  879. });
  880. describe('search and filter', () => {
  881. beforeEach(() => {
  882. server.use(
  883. http.get('/api/v1/printers/', () => HttpResponse.json(mockPrinters)),
  884. http.get('/api/v1/printers/:id/status', () => HttpResponse.json(mockPrinterStatus)),
  885. http.get('/api/v1/queue/', () => HttpResponse.json([]))
  886. );
  887. });
  888. it('filters by name (case-insensitive)', async () => {
  889. render(<PrintersPage />);
  890. await waitFor(() => expect(screen.getByText('X1 Carbon')).toBeInTheDocument());
  891. fireEvent.change(screen.getByPlaceholderText('Search printers...'), { target: { value: 'x1 carbon' } });
  892. await waitFor(() => {
  893. expect(screen.getByText('X1 Carbon')).toBeInTheDocument();
  894. expect(screen.queryByText('P1S Backup')).not.toBeInTheDocument();
  895. });
  896. });
  897. it('trims leading and trailing whitespace from search', async () => {
  898. render(<PrintersPage />);
  899. await waitFor(() => expect(screen.getByText('X1 Carbon')).toBeInTheDocument());
  900. // " X1 Carbon " with surrounding spaces must still match
  901. fireEvent.change(screen.getByPlaceholderText('Search printers...'), { target: { value: ' X1 Carbon ' } });
  902. await waitFor(() => {
  903. expect(screen.getByText('X1 Carbon')).toBeInTheDocument();
  904. expect(screen.queryByText('P1S Backup')).not.toBeInTheDocument();
  905. });
  906. });
  907. it('filters by model', async () => {
  908. render(<PrintersPage />);
  909. await waitFor(() => expect(screen.getByText('X1 Carbon')).toBeInTheDocument());
  910. fireEvent.change(screen.getByPlaceholderText('Search printers...'), { target: { value: 'P1S' } });
  911. await waitFor(() => {
  912. expect(screen.queryByText('X1 Carbon')).not.toBeInTheDocument();
  913. expect(screen.getByText('P1S Backup')).toBeInTheDocument();
  914. });
  915. });
  916. it('filters by serial number', async () => {
  917. render(<PrintersPage />);
  918. await waitFor(() => expect(screen.getByText('X1 Carbon')).toBeInTheDocument());
  919. fireEvent.change(screen.getByPlaceholderText('Search printers...'), { target: { value: '00M09A' } });
  920. await waitFor(() => {
  921. expect(screen.getByText('X1 Carbon')).toBeInTheDocument();
  922. expect(screen.queryByText('P1S Backup')).not.toBeInTheDocument();
  923. });
  924. });
  925. it('shows empty state when no printers match search', async () => {
  926. render(<PrintersPage />);
  927. await waitFor(() => expect(screen.getByText('X1 Carbon')).toBeInTheDocument());
  928. fireEvent.change(screen.getByPlaceholderText('Search printers...'), { target: { value: 'ZZZ_NO_MATCH' } });
  929. await waitFor(() => {
  930. expect(screen.getByText('No printers match your search or filters')).toBeInTheDocument();
  931. });
  932. });
  933. it('clear button resets search and shows all printers', async () => {
  934. render(<PrintersPage />);
  935. await waitFor(() => expect(screen.getByText('X1 Carbon')).toBeInTheDocument());
  936. fireEvent.change(screen.getByPlaceholderText('Search printers...'), { target: { value: 'X1 Carbon' } });
  937. await waitFor(() => expect(screen.queryByText('P1S Backup')).not.toBeInTheDocument());
  938. // Click the accessible clear button
  939. fireEvent.click(screen.getByRole('button', { name: 'Clear' }));
  940. await waitFor(() => {
  941. expect(screen.getByText('X1 Carbon')).toBeInTheDocument();
  942. expect(screen.getByText('P1S Backup')).toBeInTheDocument();
  943. });
  944. });
  945. it('filters by status (offline) via dropdown', async () => {
  946. // Override: printer 1 online, printer 2 offline
  947. server.use(
  948. http.get('/api/v1/printers/:id/status', ({ params }) => {
  949. if (Number(params.id) === 2) {
  950. return HttpResponse.json({ ...mockPrinterStatus, connected: false });
  951. }
  952. return HttpResponse.json(mockPrinterStatus);
  953. })
  954. );
  955. render(<PrintersPage />);
  956. await waitFor(() => expect(screen.getByText('X1 Carbon')).toBeInTheDocument());
  957. await selectToolbarDropdownOption(/all statuses/i, /^offline$/i);
  958. await waitFor(() => {
  959. expect(screen.queryByText('X1 Carbon')).not.toBeInTheDocument();
  960. expect(screen.getByText('P1S Backup')).toBeInTheDocument();
  961. });
  962. });
  963. it('shows empty state when status filter matches nothing', async () => {
  964. render(<PrintersPage />);
  965. await waitFor(() => expect(screen.getByText('X1 Carbon')).toBeInTheDocument());
  966. // Both printers are IDLE; filtering by "printing" should yield no results
  967. await selectToolbarDropdownOption(/all statuses/i, /^printing$/i);
  968. await waitFor(() => {
  969. expect(screen.getByText('No printers match your search or filters')).toBeInTheDocument();
  970. });
  971. });
  972. it('combines search and status filter', async () => {
  973. // Printer 1 = RUNNING (printing), printer 2 = IDLE
  974. server.use(
  975. http.get('/api/v1/printers/:id/status', ({ params }) => {
  976. if (Number(params.id) === 1) {
  977. return HttpResponse.json({ ...mockPrinterStatus, state: 'RUNNING' });
  978. }
  979. return HttpResponse.json(mockPrinterStatus);
  980. })
  981. );
  982. render(<PrintersPage />);
  983. await waitFor(() => expect(screen.getByText('X1 Carbon')).toBeInTheDocument());
  984. // Filter to only "printing" printers
  985. await selectToolbarDropdownOption(/all statuses/i, /^printing$/i);
  986. // Then also search for a term that only matches printer 1
  987. fireEvent.change(screen.getByPlaceholderText('Search printers...'), { target: { value: 'X1' } });
  988. await waitFor(() => {
  989. expect(screen.getByText('X1 Carbon')).toBeInTheDocument();
  990. expect(screen.queryByText('P1S Backup')).not.toBeInTheDocument();
  991. });
  992. });
  993. it('filters by location via dropdown', async () => {
  994. // Override: give printer 2 its own location so the dropdown has two options
  995. // and we can verify the filter picks the right one. Printer 1 stays at 'Workshop'.
  996. server.use(
  997. http.get('/api/v1/printers/', () =>
  998. HttpResponse.json([
  999. mockPrinters[0],
  1000. { ...mockPrinters[1], location: 'Office' },
  1001. ])
  1002. )
  1003. );
  1004. render(<PrintersPage />);
  1005. await waitFor(() => {
  1006. expect(screen.getByText('X1 Carbon')).toBeInTheDocument();
  1007. expect(screen.getByText('P1S Backup')).toBeInTheDocument();
  1008. });
  1009. await selectToolbarDropdownOption(/all locations/i, /^workshop$/i);
  1010. await waitFor(() => {
  1011. expect(screen.getByText('X1 Carbon')).toBeInTheDocument();
  1012. expect(screen.queryByText('P1S Backup')).not.toBeInTheDocument();
  1013. });
  1014. await selectToolbarDropdownOption(/^workshop$/i, /^office$/i);
  1015. await waitFor(() => {
  1016. expect(screen.queryByText('X1 Carbon')).not.toBeInTheDocument();
  1017. expect(screen.getByText('P1S Backup')).toBeInTheDocument();
  1018. });
  1019. });
  1020. it('hides location filter when no printers have a location', async () => {
  1021. // Both printers have null location — dropdown should not render at all
  1022. server.use(
  1023. http.get('/api/v1/printers/', () =>
  1024. HttpResponse.json([
  1025. { ...mockPrinters[0], location: null },
  1026. { ...mockPrinters[1], location: null },
  1027. ])
  1028. )
  1029. );
  1030. render(<PrintersPage />);
  1031. await waitFor(() => expect(screen.getByText('X1 Carbon')).toBeInTheDocument());
  1032. // Status filter is still there, but the location filter should be absent.
  1033. expect(screen.getByRole('button', { name: /all statuses/i })).toBeInTheDocument();
  1034. expect(screen.queryByRole('button', { name: /all locations/i })).not.toBeInTheDocument();
  1035. });
  1036. });
  1037. describe('Spoolman loading guard', () => {
  1038. it('does not show Assign Spool button while Spoolman queries are loading', async () => {
  1039. // Spoolman enabled but inventory and slot-assignment queries never resolve
  1040. server.use(
  1041. http.get('/api/v1/spoolman/status', () =>
  1042. HttpResponse.json({ enabled: true, connected: true })
  1043. ),
  1044. http.get('/api/v1/spoolman/inventory/spools', () =>
  1045. new Promise(() => {}) // never resolves
  1046. ),
  1047. http.get('/api/v1/spoolman/inventory/slot-assignments/all', () =>
  1048. new Promise(() => {}) // never resolves
  1049. )
  1050. );
  1051. render(<PrintersPage />);
  1052. // Wait for the page to render (printers should be visible)
  1053. await waitFor(() => expect(screen.getByText('X1 Carbon')).toBeInTheDocument());
  1054. // While Spoolman queries are still loading, the "Assign Spool" button must
  1055. // not appear (inventory prop is undefined → {inventory && ...} guard fires)
  1056. expect(screen.queryByText('Assign Spool')).not.toBeInTheDocument();
  1057. });
  1058. });
  1059. });
  1060. /**
  1061. * Phase 13 P13-1 (PrintersPage EmptySlotHoverCard onAssignSpool gate removal)
  1062. *
  1063. * Pre-Phase-13 each of the three EmptySlotHoverCard call-sites in PrintersPage
  1064. * gated `onAssignSpool` on `spoolmanEnabled ? (...) : undefined`, so empty
  1065. * slots in local-Inventory mode never showed an Assign action. Maintainer
  1066. * Foto 7 confirmed users expect the button regardless of mode.
  1067. *
  1068. * To assert wiring without going through hover-card animations, we mock the
  1069. * EmptySlotHoverCard component at module level and capture every props
  1070. * payload. The same mock is active in both modes; tests differ only in the
  1071. * spoolman-settings mock. The mock module covers BOTH FilamentHoverCard exports
  1072. * so tests outside this `describe` aren't affected (we re-export the real
  1073. * FilamentHoverCard).
  1074. */
  1075. const phase13EmptySlotProps: Array<Record<string, unknown>> = [];
  1076. const phase14HoverCardProps: Array<Record<string, unknown>> = [];
  1077. vi.mock('../../components/FilamentHoverCard', async (importOriginal) => {
  1078. const actual = await importOriginal<typeof import('../../components/FilamentHoverCard')>();
  1079. return {
  1080. ...actual,
  1081. EmptySlotHoverCard: (props: Record<string, unknown>) => {
  1082. phase13EmptySlotProps.push({ ...props });
  1083. return null;
  1084. },
  1085. FilamentHoverCard: (props: Record<string, unknown>) => {
  1086. phase14HoverCardProps.push({ ...props });
  1087. return null;
  1088. },
  1089. };
  1090. });
  1091. describe('PrintersPage Phase 13 — EmptySlotHoverCard onAssignSpool wiring', () => {
  1092. beforeEach(() => {
  1093. phase13EmptySlotProps.length = 0;
  1094. localStorage.removeItem('printerCardSize');
  1095. server.use(
  1096. http.get('/api/v1/printers/', () => HttpResponse.json(mockPrinters)),
  1097. // Status response includes an empty AMS slot so EmptySlotHoverCard renders.
  1098. http.get('/api/v1/printers/:id/status', () => HttpResponse.json({
  1099. ...mockPrinterStatus,
  1100. ams: [{
  1101. id: 0,
  1102. tray: [{ id: 0, tray_type: '' }],
  1103. }],
  1104. })),
  1105. http.get('/api/v1/settings/', () => HttpResponse.json({
  1106. auto_archive: true, save_thumbnails: true, capture_finish_photo: true,
  1107. default_filament_cost: 25.0, currency: 'USD',
  1108. ams_humidity_good: 40, ams_humidity_fair: 60,
  1109. ams_temp_good: 30, ams_temp_fair: 35,
  1110. })),
  1111. http.get('/api/v1/queue/', () => HttpResponse.json([])),
  1112. );
  1113. });
  1114. it('P13-1 (local mode): EmptySlotHoverCard receives onAssignSpool callback', async () => {
  1115. server.use(
  1116. http.get('/api/v1/spoolman/settings', () => HttpResponse.json({
  1117. spoolman_enabled: 'false', spoolman_url: '',
  1118. })),
  1119. );
  1120. render(<PrintersPage />);
  1121. // Wait for printer status to load and at least one EmptySlotHoverCard
  1122. // to mount with an onAssignSpool callback. Pre-Phase-13 this would have
  1123. // been undefined in local mode (the gate filtered it out).
  1124. await waitFor(() => {
  1125. const withCallback = phase13EmptySlotProps.filter(p => typeof p.onAssignSpool === 'function');
  1126. expect(withCallback.length).toBeGreaterThan(0);
  1127. }, { timeout: 3000 });
  1128. });
  1129. it('#1322: empty slot kind is "physical" when state=9 and "reset" otherwise', async () => {
  1130. // Bambuddy now distinguishes a firmware-confirmed empty slot (state=9
  1131. // via tray_exist_bits) from a slot the user reset but where the
  1132. // firmware still has a spool registered. The kind prop drives both
  1133. // the inline label ("Empty" vs "Reset") and the hover card label.
  1134. server.use(
  1135. http.get('/api/v1/spoolman/settings', () => HttpResponse.json({
  1136. spoolman_enabled: 'false', spoolman_url: '',
  1137. })),
  1138. http.get('/api/v1/printers/:id/status', () => HttpResponse.json({
  1139. ...mockPrinterStatus,
  1140. ams: [{
  1141. id: 0,
  1142. tray: [
  1143. { id: 0, tray_type: '', state: 9 }, // physically empty
  1144. { id: 1, tray_type: '', state: 3 }, // reset / unloading
  1145. { id: 2, tray_type: '', state: null }, // unknown empty
  1146. { id: 3, tray_type: 'PLA', state: 11 }, // loaded — no card here
  1147. ],
  1148. }],
  1149. })),
  1150. );
  1151. render(<PrintersPage />);
  1152. await waitFor(() => {
  1153. expect(phase13EmptySlotProps.filter(p => p.kind === 'physical').length).toBeGreaterThan(0);
  1154. }, { timeout: 3000 });
  1155. const physical = phase13EmptySlotProps.filter(p => p.kind === 'physical');
  1156. const reset = phase13EmptySlotProps.filter(p => p.kind === 'reset');
  1157. expect(physical.length).toBeGreaterThan(0);
  1158. expect(reset.length).toBeGreaterThan(0);
  1159. // state=null falls back to 'reset' too — the helper only returns
  1160. // 'physical' for the canonical 9/10 firmware codes.
  1161. });
  1162. it('P13-1 (spoolman mode): EmptySlotHoverCard still receives onAssignSpool callback', async () => {
  1163. server.use(
  1164. http.get('/api/v1/spoolman/settings', () => HttpResponse.json({
  1165. spoolman_enabled: 'true', spoolman_url: 'http://x:7912',
  1166. })),
  1167. http.get('/api/v1/spoolman/spools/inventory*', () => HttpResponse.json([])),
  1168. http.get('/api/v1/spoolman/inventory/spools', () => HttpResponse.json([])),
  1169. http.get('/api/v1/spoolman/inventory/slot-assignments/all', () => HttpResponse.json([])),
  1170. );
  1171. render(<PrintersPage />);
  1172. await waitFor(() => {
  1173. const withCallback = phase13EmptySlotProps.filter(p => typeof p.onAssignSpool === 'function');
  1174. expect(withCallback.length).toBeGreaterThan(0);
  1175. }, { timeout: 3000 });
  1176. });
  1177. });
  1178. /**
  1179. * Phase 14 — Local-Branch BL-detection symmetry.
  1180. *
  1181. * The Spoolman branch of every IIFE in PrintersPage already passes
  1182. * isAssigned: !!slotAssignment || isBambuLabSpool(tray)
  1183. * onUnassignSpool: (spoolmanSpool && !isBambuLabSpool(tray)) ? ... : undefined
  1184. *
  1185. * The local branch was missing both. As a result a BL-RFID-tagged slot in
  1186. * local-Inventory mode showed an "Assign Spool" button (because no manual
  1187. * SpoolAssignment exists), and a manually-assigned BL-RFID slot showed
  1188. * "Unassign" — which would be overwritten on the next RFID re-read.
  1189. *
  1190. * The same FilamentHoverCard mock from the Phase 13 block above captures
  1191. * inventory props on every render so we can inspect them after setup.
  1192. */
  1193. describe('PrintersPage Phase 14 — Local-Branch BL-detection symmetry', () => {
  1194. beforeEach(() => {
  1195. phase14HoverCardProps.length = 0;
  1196. localStorage.removeItem('printerCardSize');
  1197. server.use(
  1198. http.get('/api/v1/printers/', () => HttpResponse.json(mockPrinters)),
  1199. http.get('/api/v1/settings/', () => HttpResponse.json({
  1200. auto_archive: true, save_thumbnails: true, capture_finish_photo: true,
  1201. default_filament_cost: 25.0, currency: 'USD',
  1202. ams_humidity_good: 40, ams_humidity_fair: 60,
  1203. ams_temp_good: 30, ams_temp_fair: 35,
  1204. })),
  1205. http.get('/api/v1/queue/', () => HttpResponse.json([])),
  1206. http.get('/api/v1/spoolman/settings', () => HttpResponse.json({
  1207. spoolman_enabled: 'false', spoolman_url: '',
  1208. })),
  1209. );
  1210. });
  1211. it('P14-1a (local + BL-RFID + no assignment): inventory.isAssigned=true', async () => {
  1212. server.use(
  1213. http.get('/api/v1/printers/:id/status', () => HttpResponse.json({
  1214. ...mockPrinterStatus,
  1215. ams: [{
  1216. id: 0,
  1217. tray: [{
  1218. id: 0,
  1219. tray_type: 'PLA',
  1220. tray_uuid: '11223344556677880011223344556677',
  1221. tag_uid: '0000000000000000',
  1222. tray_color: 'FF0000FF',
  1223. tray_sub_brands: 'Bambu PLA Basic',
  1224. }],
  1225. }],
  1226. })),
  1227. http.get('/api/v1/inventory/assignments', () => HttpResponse.json([])),
  1228. );
  1229. render(<PrintersPage />);
  1230. await waitFor(() => {
  1231. const matches = phase14HoverCardProps.filter(
  1232. p => (p.inventory as { isAssigned?: boolean } | undefined)?.isAssigned === true
  1233. );
  1234. expect(matches.length).toBeGreaterThan(0);
  1235. }, { timeout: 3000 });
  1236. });
  1237. it('P14-1b (local + non-BL + no assignment): inventory.isAssigned is falsy', async () => {
  1238. server.use(
  1239. http.get('/api/v1/printers/:id/status', () => HttpResponse.json({
  1240. ...mockPrinterStatus,
  1241. ams: [{
  1242. id: 0,
  1243. tray: [{
  1244. id: 0,
  1245. tray_type: 'PLA',
  1246. tray_uuid: '00000000000000000000000000000000',
  1247. tag_uid: '0000000000000000',
  1248. tray_color: 'FF0000FF',
  1249. tray_sub_brands: 'Generic PLA',
  1250. }],
  1251. }],
  1252. })),
  1253. http.get('/api/v1/inventory/assignments', () => HttpResponse.json([])),
  1254. );
  1255. render(<PrintersPage />);
  1256. // Wait for FilamentHoverCard to render at least once.
  1257. await waitFor(() => {
  1258. expect(phase14HoverCardProps.length).toBeGreaterThan(0);
  1259. }, { timeout: 3000 });
  1260. // No render should ever set isAssigned=true for this slot.
  1261. const truthyMatches = phase14HoverCardProps.filter(
  1262. p => (p.inventory as { isAssigned?: boolean } | undefined)?.isAssigned === true
  1263. );
  1264. expect(truthyMatches.length).toBe(0);
  1265. });
  1266. it('P14-1c (local + manual assignment): inventory.isAssigned=true', async () => {
  1267. server.use(
  1268. http.get('/api/v1/printers/:id/status', () => HttpResponse.json({
  1269. ...mockPrinterStatus,
  1270. ams: [{
  1271. id: 0,
  1272. tray: [{
  1273. id: 0,
  1274. tray_type: 'PLA',
  1275. tray_uuid: '00000000000000000000000000000000',
  1276. tag_uid: '0000000000000000',
  1277. tray_color: 'FF0000FF',
  1278. tray_sub_brands: 'Generic PLA',
  1279. }],
  1280. }],
  1281. })),
  1282. http.get('/api/v1/inventory/assignments', () => HttpResponse.json([
  1283. {
  1284. id: 1,
  1285. spool_id: 42,
  1286. printer_id: 1,
  1287. ams_id: 0,
  1288. tray_id: 0,
  1289. printer_name: 'X1 Carbon',
  1290. ams_label: null,
  1291. spool: {
  1292. id: 42,
  1293. material: 'PLA',
  1294. brand: 'Generic',
  1295. color_name: 'Red',
  1296. label_weight: 1000,
  1297. weight_used: 0,
  1298. rgba: 'FF0000FF',
  1299. },
  1300. },
  1301. ])),
  1302. );
  1303. render(<PrintersPage />);
  1304. await waitFor(() => {
  1305. const matches = phase14HoverCardProps.filter(
  1306. p => (p.inventory as { isAssigned?: boolean } | undefined)?.isAssigned === true
  1307. );
  1308. expect(matches.length).toBeGreaterThan(0);
  1309. }, { timeout: 3000 });
  1310. });
  1311. it('P14-2 (local + BL-RFID + manual assignment): onUnassignSpool=undefined', async () => {
  1312. server.use(
  1313. http.get('/api/v1/printers/:id/status', () => HttpResponse.json({
  1314. ...mockPrinterStatus,
  1315. ams: [{
  1316. id: 0,
  1317. tray: [{
  1318. id: 0,
  1319. tray_type: 'PLA',
  1320. tray_uuid: '11223344556677880011223344556677',
  1321. tag_uid: '0000000000000000',
  1322. tray_color: 'FF0000FF',
  1323. tray_sub_brands: 'Bambu PLA Basic',
  1324. }],
  1325. }],
  1326. })),
  1327. http.get('/api/v1/inventory/assignments', () => HttpResponse.json([
  1328. {
  1329. id: 1,
  1330. spool_id: 42,
  1331. printer_id: 1,
  1332. ams_id: 0,
  1333. tray_id: 0,
  1334. printer_name: 'X1 Carbon',
  1335. ams_label: null,
  1336. spool: {
  1337. id: 42,
  1338. material: 'PLA',
  1339. brand: 'Bambu Lab',
  1340. color_name: 'Red',
  1341. label_weight: 1000,
  1342. weight_used: 0,
  1343. rgba: 'FF0000FF',
  1344. },
  1345. },
  1346. ])),
  1347. );
  1348. render(<PrintersPage />);
  1349. // Wait for FilamentHoverCard renders to settle.
  1350. await waitFor(() => {
  1351. expect(phase14HoverCardProps.length).toBeGreaterThan(0);
  1352. }, { timeout: 3000 });
  1353. // For BL-detected slots in local mode, onUnassignSpool must always be
  1354. // undefined — even when a manual assignment exists. Otherwise the user
  1355. // could unassign a BL-RFID slot that the printer would re-assign on the
  1356. // next re-read, surprising them with phantom ghost-assignments.
  1357. const definedUnassign = phase14HoverCardProps.filter(
  1358. p => typeof (p.inventory as { onUnassignSpool?: () => void } | undefined)?.onUnassignSpool === 'function'
  1359. );
  1360. expect(definedUnassign.length).toBe(0);
  1361. });
  1362. });