|
Description
Martin Renvoize (ashimema)
2025-05-16 10:33:34 UTC
Created attachment 182515 [details] [review] Bug 39916: Add select2 helpers to cypress This patch adds some helper methods for testing with select2 selects. Created attachment 182516 [details] [review] Bug 39916: WIP Cypress tests for the bookings modal Created attachment 182545 [details] [review] Bug 39916: Add select2 helpers to cypress This patch adds some helper methods for testing with select2 selects. Created attachment 182546 [details] [review] Bug 39916: WIP Cypress tests for the bookings modal Lots of passing tests :) Created attachment 182635 [details] [review] Bug 39916: Add select2 helpers to cypress This patch adds some helper methods for testing with select2 selects. Created attachment 182636 [details] [review] Bug 39916: Add cypress helpers for flatpickr Created attachment 182637 [details] [review] Bug 39916: WIP Cypress tests for the bookings modal Lots of passing tests :) Created attachment 182771 [details] [review] Bug 39916: Add select2 helpers to cypress This patch adds some helper methods for testing with select2 selects. Created attachment 182772 [details] [review] Bug 39916: Add flatpickr helpers to cypress Created attachment 182773 [details] [review] Bug 39916: WIP Cypress tests for the bookings modal Lots of passing tests :) Just curious why we have patches here and an ASSIGNED status still. Note that this is a dependency for a bug in SO queue too. Created attachment 183206 [details] [review] Bug 39916: Add select2 helpers to cypress This adds helper methods for cypress to work with select2 dropdowns: - selectFromSelect2ByIndex() - select by option index - selectFromSelect2() - select by text value - clearSelect2() - clear selection These helpers handle the complexities of interacting with Select2 components which cannot be selected using standard Cypress commands. Created attachment 183207 [details] [review] Bug 39916: Add flatpickr helpers to cypress This adds helper methods for cypress to work with flatpickr date pickers: - openFlatpickr() - open the calendar - selectFlatpickrDate() - select a single date - selectFlatpickrDateRange() - select date range - clearFlatpickr() - clear the selected dates - getFlatpickrDate() - get specific date element - navigateToFlatpickrMonth() - navigate calendar These helpers simplify date picker testing when using flatpickr. Created attachment 183208 [details] [review] Bug 39916: Cypress tests for the bookings modal This adds comprehensive end-to-end tests for the booking modal functionality: - Modal loading and field validation - Form field enabling sequence - Item type and item selection dependencies - Date picker validation and restrictions - Booking conflict detection - Lead/trail period handling - Form submission (create and edit) - Error handling and form reset Tests use optimized shared mock data generation with cy.task() for realistic test data while minimizing memory usage. Tests cover both positive and negative scenarios. Created attachment 183209 [details] [review] Bug 39916: Fix booking modal redraw issue Fixes an issue where the booking modal's date picker and form fields were not properly updating when switching between different booking scenarios or after form submissions. The fix ensures proper redraw and state management of the flatpickr component and associated form elements. Created attachment 183210 [details] [review] Bug 39916: Fix race condition in booking modal edit mode When editing an existing booking, the item type field was not being populated because setFormValues() was triggering the wrong Select2 event. The fix ensures both 'change' and 'select2:select' events are triggered with proper data structure, allowing the item type to be automatically populated based on the selected item's effective_item_type_id. A small timeout prevents race conditions during DOM initialization. (In reply to Marcel de Rooy from comment #11) > Just curious why we have patches here and an ASSIGNED status still. Note > that this is a dependency for a bug in SO queue too. Because I was still working on tests and I didn't want those subsequent bugs to go in without any. As for why the other one got signed off.. just a matter of people testing things in real life.. there's not a hard code dependency here, so the patches applied without this bug and they tested them in the UI and they're were good there. Anyway.. I think we're in a good place now.. I'm about to revisit the other bug and add tests for it that add to the one's here at which point we'll be covered well One test is failing for me - 1) should edit an existing booking successfully.
Testing notes (using KTD):
1, Apply the patches.
2. Restart everything.
3. Run the tests, they should all pass:
yarn cypress run --spec t/cypress/integration/Biblio/bookingsModal_spec.ts
Test results:
Booking Modal Tests
✓ should load the booking modal correctly (3924ms)
✓ should enable fields in proper sequence (3490ms)
✓ should handle item type and item dependencies correctly (4836ms)
✓ should disable dates before today and between today and selected start date (4575ms)
✓ should disable dates with existing bookings for same item (4978ms)
✓ should handle lead and trail period hover highlighting (3642ms)
✓ should disable click when lead/trail periods overlap with disabled dates (3439ms)
✓ should show event dots for dates with existing bookings (3456ms)
✓ should show only the correct bold dates for issue and renewal periods (3797ms)
✓ should set correct max date based on circulation rules (3952ms)
✓ should handle visible and hidden fields on date selection (3763ms)
✓ should submit a new booking successfully (3378ms)
1) should edit an existing booking successfully
✓ should handle booking failure gracefully (3357ms)
✓ should reset form when modal is closed (3421ms)
14 passing (1m)
1 failing
1) Booking Modal Tests
should edit an existing booking successfully:
Timed out retrying after 10000ms
+ expected - actual
-'19'
+'456'
at Context.eval (webpack://koha/./t/cypress/integration/Biblio/bookingsModal_spec.ts:1212:37)
Created attachment 190789 [details] [review] Bug 39916: Add select2 helpers to cypress This adds helper methods for cypress to work with select2 dropdowns: - selectFromSelect2ByIndex() - select by option index - selectFromSelect2() - select by text value - clearSelect2() - clear selection These helpers handle the complexities of interacting with Select2 components which cannot be selected using standard Cypress commands. Created attachment 190790 [details] [review] Bug 39916: Add flatpickr helpers to cypress This adds helper methods for cypress to work with flatpickr date pickers: - openFlatpickr() - open the calendar - selectFlatpickrDate() - select a single date - selectFlatpickrDateRange() - select date range - clearFlatpickr() - clear the selected dates - getFlatpickrDate() - get specific date element - getFlapickrSelectedDates() - get flatpickr selected dates array - navigateToFlatpickrMonth() - navigate calendar These helpers simplify date picker testing when using flatpickr. Created attachment 190791 [details] [review] Bug 39916: Cypress tests for the bookings modal This patch adds comprehensive Cypress end-to-end tests for the booking modal, covering all critical functionality to prevent regressions. Test coverage includes: - Basic modal functionality (bookingsModalBasic_spec.ts): * Modal loading and initial state * Progressive field enabling based on user selections * Item type and item dependencies * Form validation * Booking submission (create and update) * Form interactions and field visibility * Edit mode functionality * Error handling - Date picker functionality (bookingsModalDatePicker_spec.ts): * Flatpickr initialization with future-date constraints * Date disabling for existing bookings * Date range validation * Circulation rules date calculations and visual feedback * Lead and trail period functionality * Event dots for dates with existing bookings These tests ensure the booking modal works correctly across all scenarios and helps maintain code quality during future development. Test plan: 1. Run the tests inside KTD container: docker exec --user kohadev-koha --workdir /kohadevbox/koha -i kohadev-koha-1 \ bash -c 'npx cypress run --spec "t/cypress/integration/Circulation/bookings*.ts"' 2. Verify all 15 tests pass (9 basic + 6 datepicker) 3. Confirm test coverage is comprehensive for the booking modal Created attachment 190792 [details] [review] Bug 39916: Fix booking modal race conditions and redraw issues This patch addresses two critical issues in the booking modal: 1. Race condition in edit mode: When editing a booking, the item selection would sometimes fail to properly initialize because the item options weren't fully loaded with their data attributes. This caused the itemtype field to not auto-populate correctly. Fixed by moving the item pre-selection to occur after a brief delay and ensuring the select2:select event is triggered with proper data parameters including the element reference. 2. Flatpickr redraw issue: The datepicker would lose its disabled dates after certain operations because the disable configuration wasn't being reapplied during redraws. Fixed by explicitly setting the disable configuration before calling redraw() to ensure disabled dates are properly maintained. Additionally fixes a scope issue with the booking loop variable. Test plan: 1. Create a booking with specific dates 2. Edit the booking - verify the item and itemtype are correctly selected 3. Change selections in the modal - verify disabled dates remain correct 4. Create new bookings - verify date restrictions work properly Created attachment 190816 [details] [review] Bug 39916: Add select2 helpers to cypress This adds helper methods for cypress to work with select2 dropdowns: - selectFromSelect2ByIndex() - select by option index - selectFromSelect2() - select by text value - clearSelect2() - clear selection These helpers handle the complexities of interacting with Select2 components which cannot be selected using standard Cypress commands. Created attachment 190817 [details] [review] Bug 39916: Add flatpickr helpers to cypress This adds helper methods for cypress to work with flatpickr date pickers: - openFlatpickr() - open the calendar - selectFlatpickrDate() - select a single date - selectFlatpickrDateRange() - select date range - clearFlatpickr() - clear the selected dates - getFlatpickrDate() - get specific date element - getFlapickrSelectedDates() - get flatpickr selected dates array - navigateToFlatpickrMonth() - navigate calendar These helpers simplify date picker testing when using flatpickr. Created attachment 190818 [details] [review] Bug 39916: Cypress tests for the bookings modal This patch adds comprehensive Cypress end-to-end tests for the booking modal, covering all critical functionality to prevent regressions. Test coverage includes: - Basic modal functionality (bookingsModalBasic_spec.ts): * Modal loading and initial state * Progressive field enabling based on user selections * Item type and item dependencies * Form validation * Booking submission (create and update) * Form interactions and field visibility * Edit mode functionality * Error handling - Date picker functionality (bookingsModalDatePicker_spec.ts): * Flatpickr initialization with future-date constraints * Date disabling for existing bookings * Date range validation * Circulation rules date calculations and visual feedback * Lead and trail period functionality * Event dots for dates with existing bookings These tests ensure the booking modal works correctly across all scenarios and helps maintain code quality during future development. Test plan: 1. Run the tests inside KTD container: docker exec --user kohadev-koha --workdir /kohadevbox/koha -i kohadev-koha-1 \ bash -c 'npx cypress run --spec "t/cypress/integration/Circulation/bookings*.ts"' 2. Verify all 15 tests pass (9 basic + 6 datepicker) 3. Confirm test coverage is comprehensive for the booking modal Created attachment 190819 [details] [review] Bug 39916: Fix booking modal race conditions and redraw issues This patch addresses two critical issues in the booking modal: 1. Race condition in edit mode: When editing a booking, the item selection would sometimes fail to properly initialize because the item options weren't fully loaded with their data attributes. This caused the itemtype field to not auto-populate correctly. Fixed by moving the item pre-selection to occur after a brief delay and ensuring the select2:select event is triggered with proper data parameters including the element reference. 2. Flatpickr redraw issue: The datepicker would lose its disabled dates after certain operations because the disable configuration wasn't being reapplied during redraws. Fixed by explicitly setting the disable configuration before calling redraw() to ensure disabled dates are properly maintained. Additionally fixes a scope issue with the booking loop variable. Test plan: 1. Create a booking with specific dates 2. Edit the booking - verify the item and itemtype are correctly selected 3. Change selections in the modal - verify disabled dates remain correct 4. Create new bookings - verify date restrictions work properly Just a minor rebase to keep it applying for QA Created attachment 191710 [details] [review] Bug 39916: Add select2 helpers to cypress This adds helper methods for cypress to work with select2 dropdowns: - selectFromSelect2ByIndex() - select by option index - selectFromSelect2() - select by text value - clearSelect2() - clear selection These helpers handle the complexities of interacting with Select2 components which cannot be selected using standard Cypress commands. Signed-off-by: Kristi Krueger <kkrueger@cuyahogalibrary.org> Signed-off-by: Andrew Fuerste Henry <andrew@bywatersolutions.com> Created attachment 191711 [details] [review] Bug 39916: Add flatpickr helpers to cypress This adds helper methods for cypress to work with flatpickr date pickers: - openFlatpickr() - open the calendar - selectFlatpickrDate() - select a single date - selectFlatpickrDateRange() - select date range - clearFlatpickr() - clear the selected dates - getFlatpickrDate() - get specific date element - getFlapickrSelectedDates() - get flatpickr selected dates array - navigateToFlatpickrMonth() - navigate calendar These helpers simplify date picker testing when using flatpickr. Signed-off-by: Kristi Krueger <kkrueger@cuyahogalibrary.org> Signed-off-by: Andrew Fuerste Henry <andrew@bywatersolutions.com> Created attachment 191712 [details] [review] Bug 39916: Cypress tests for the bookings modal This patch adds comprehensive Cypress end-to-end tests for the booking modal, covering all critical functionality to prevent regressions. Test coverage includes: - Basic modal functionality (bookingsModalBasic_spec.ts): * Modal loading and initial state * Progressive field enabling based on user selections * Item type and item dependencies * Form validation * Booking submission (create and update) * Form interactions and field visibility * Edit mode functionality * Error handling - Date picker functionality (bookingsModalDatePicker_spec.ts): * Flatpickr initialization with future-date constraints * Date disabling for existing bookings * Date range validation * Circulation rules date calculations and visual feedback * Lead and trail period functionality * Event dots for dates with existing bookings These tests ensure the booking modal works correctly across all scenarios and helps maintain code quality during future development. Test plan: 1. Run the tests inside KTD container: docker exec --user kohadev-koha --workdir /kohadevbox/koha -i kohadev-koha-1 \ bash -c 'npx cypress run --spec "t/cypress/integration/Circulation/bookings*.ts"' 2. Verify all 15 tests pass (9 basic + 6 datepicker) 3. Confirm test coverage is comprehensive for the booking modal Signed-off-by: Kristi Krueger <kkrueger@cuyahogalibrary.org> Signed-off-by: Andrew Fuerste Henry <andrew@bywatersolutions.com> Created attachment 191713 [details] [review] Bug 39916: Fix booking modal race conditions and redraw issues This patch addresses two critical issues in the booking modal: 1. Race condition in edit mode: When editing a booking, the item selection would sometimes fail to properly initialize because the item options weren't fully loaded with their data attributes. This caused the itemtype field to not auto-populate correctly. Fixed by moving the item pre-selection to occur after a brief delay and ensuring the select2:select event is triggered with proper data parameters including the element reference. 2. Flatpickr redraw issue: The datepicker would lose its disabled dates after certain operations because the disable configuration wasn't being reapplied during redraws. Fixed by explicitly setting the disable configuration before calling redraw() to ensure disabled dates are properly maintained. Additionally fixes a scope issue with the booking loop variable. Test plan: 1. Create a booking with specific dates 2. Edit the booking - verify the item and itemtype are correctly selected 3. Change selections in the modal - verify disabled dates remain correct 4. Create new bookings - verify date restrictions work properly Signed-off-by: Kristi Krueger <kkrueger@cuyahogalibrary.org> Signed-off-by: Andrew Fuerste Henry <andrew@bywatersolutions.com> Created attachment 191770 [details] [review] Bug 39916: Add select2 helpers to cypress This adds helper methods for cypress to work with select2 dropdowns: - selectFromSelect2ByIndex() - select by option index - selectFromSelect2() - select by text value - clearSelect2() - clear selection These helpers handle the complexities of interacting with Select2 components which cannot be selected using standard Cypress commands. Signed-off-by: Kristi Krueger <kkrueger@cuyahogalibrary.org> Signed-off-by: Andrew Fuerste Henry <andrew@bywatersolutions.com> Signed-off-by: Paul Derscheid <paul.derscheid@lmscloud.de> Created attachment 191771 [details] [review] Bug 39916: Add flatpickr helpers to cypress This adds helper methods for cypress to work with flatpickr date pickers: - openFlatpickr() - open the calendar - selectFlatpickrDate() - select a single date - selectFlatpickrDateRange() - select date range - clearFlatpickr() - clear the selected dates - getFlatpickrDate() - get specific date element - getFlapickrSelectedDates() - get flatpickr selected dates array - navigateToFlatpickrMonth() - navigate calendar These helpers simplify date picker testing when using flatpickr. Signed-off-by: Kristi Krueger <kkrueger@cuyahogalibrary.org> Signed-off-by: Andrew Fuerste Henry <andrew@bywatersolutions.com> Signed-off-by: Paul Derscheid <paul.derscheid@lmscloud.de> Created attachment 191772 [details] [review] Bug 39916: Cypress tests for the bookings modal This patch adds comprehensive Cypress end-to-end tests for the booking modal, covering all critical functionality to prevent regressions. Test coverage includes: - Basic modal functionality (bookingsModalBasic_spec.ts): * Modal loading and initial state * Progressive field enabling based on user selections * Item type and item dependencies * Form validation * Booking submission (create and update) * Form interactions and field visibility * Edit mode functionality * Error handling - Date picker functionality (bookingsModalDatePicker_spec.ts): * Flatpickr initialization with future-date constraints * Date disabling for existing bookings * Date range validation * Circulation rules date calculations and visual feedback * Lead and trail period functionality * Event dots for dates with existing bookings These tests ensure the booking modal works correctly across all scenarios and helps maintain code quality during future development. Test plan: 1. Run the tests inside KTD container: docker exec --user kohadev-koha --workdir /kohadevbox/koha -i kohadev-koha-1 \ bash -c 'npx cypress run --spec "t/cypress/integration/Circulation/bookings*.ts"' 2. Verify all 15 tests pass (9 basic + 6 datepicker) 3. Confirm test coverage is comprehensive for the booking modal Signed-off-by: Kristi Krueger <kkrueger@cuyahogalibrary.org> Signed-off-by: Andrew Fuerste Henry <andrew@bywatersolutions.com> Signed-off-by: Paul Derscheid <paul.derscheid@lmscloud.de> Created attachment 191773 [details] [review] Bug 39916: Fix booking modal race conditions and redraw issues This patch addresses two critical issues in the booking modal: 1. Race condition in edit mode: When editing a booking, the item selection would sometimes fail to properly initialize because the item options weren't fully loaded with their data attributes. This caused the itemtype field to not auto-populate correctly. Fixed by moving the item pre-selection to occur after a brief delay and ensuring the select2:select event is triggered with proper data parameters including the element reference. 2. Flatpickr redraw issue: The datepicker would lose its disabled dates after certain operations because the disable configuration wasn't being reapplied during redraws. Fixed by explicitly setting the disable configuration before calling redraw() to ensure disabled dates are properly maintained. Additionally fixes a scope issue with the booking loop variable. Test plan: 1. Create a booking with specific dates 2. Edit the booking - verify the item and itemtype are correctly selected 3. Change selections in the modal - verify disabled dates remain correct 4. Create new bookings - verify date restrictions work properly Signed-off-by: Kristi Krueger <kkrueger@cuyahogalibrary.org> Signed-off-by: Andrew Fuerste Henry <andrew@bywatersolutions.com> Signed-off-by: Paul Derscheid <paul.derscheid@lmscloud.de> Created attachment 191774 [details] [review] Bug 39916: (QA follow-up) Fix typo in test comment Signed-off-by: Paul Derscheid <paul.derscheid@lmscloud.de> Nice work everyone! Pushed to main for 26.05 There are some failing tests now:
✓ should disable dates with existing bookings for same item (17332ms)
1) should handle date range validation correctly
✓ should handle circulation rules date calculations and visual feedback (17208ms)
✓ should show event dots for dates with existing bookings (14381ms)
4 passing (1m)
1 failing
1) Booking Modal Date Picker Tests
should handle date range validation correctly:
AssertionError: Timed out retrying after 10000ms: expected '<span.flatpickr-day.selected.title>' to have class 'startRange'
at cy.get.should.timeout (webpack://koha/./t/cypress/support/flatpickr.js:338:58)
I think this has do to with how Flatpickr navigates to a new month:
it("should handle date range validation correctly", () => {
setupModalForDateTesting();
// Test valid date range
const startDate = dayjs().add(2, "day");
const endDate = dayjs().add(5, "day");
Its failing today, January 30, when we add 2 days because that crosses into February.
Looking.. Created attachment 192265 [details] [review] Bug 39916: (QA follow-up) Fix startRange class lost on month navigation When selecting a booking start date that triggers month navigation (e.g., selecting Feb 1 while viewing January), the flatpickr calendar would lose the 'startRange' CSS class on the selected date. This occurred because setting maxDate in the onChange handler triggered a calendar redraw, and flatpickr only applies startRange during the initial click event, not during redraws. This caused the Cypress test "should handle date range validation correctly" to fail on dates near month boundaries (e.g., January 30). The fix re-applies the startRange class after the maxDate is set, using setTimeout to ensure it runs after the redraw completes. A guard ensures this only happens when exactly one date is selected, preventing interference with end date selection. To test: - Apply patch - Open a biblio detail page with bookable items - Click "Place booking" - Select a patron, pickup location, and item - In the date picker, click a date that's in the next month (visible in the "next month" area of the calendar) - Verify the selected date shows the startRange styling (highlighted as the range start) - Select an end date - Verify the range is properly selected and the form can be submitted - Run Cypress tests: yarn cypress run --spec t/cypress/integration/Circulation/bookingsModalDatePicker_spec.ts - Verify all tests pass That was much more involved than I thought, but tests pass locally again. Created attachment 192315 [details] [review] Bug 39916: (QA follow-up) Fix startRange class lost on month navigation When selecting a booking start date that triggers month navigation (e.g., selecting Feb 1 while viewing January), the flatpickr calendar would lose the 'startRange' CSS class on the selected date. This occurred because setting maxDate in the onChange handler triggered a calendar redraw, and flatpickr only applies startRange during the initial click event, not during redraws. This caused the Cypress test "should handle date range validation correctly" to fail on dates near month boundaries (e.g., January 30). The fix re-applies the startRange class after the maxDate is set, using setTimeout to ensure it runs after the redraw completes. A guard ensures this only happens when exactly one date is selected, preventing interference with end date selection. To test: - Apply patch - Open a biblio detail page with bookable items - Click "Place booking" - Select a patron, pickup location, and item - In the date picker, click a date that's in the next month (visible in the "next month" area of the calendar) - Verify the selected date shows the startRange styling (highlighted as the range start) - Select an end date - Verify the range is properly selected and the form can be submitted - Run Cypress tests: yarn cypress run --spec t/cypress/integration/Circulation/bookingsModalDatePicker_spec.ts - Verify all tests pass Signed-off-by: Martin Renvoize <martin.renvoize@openfifth.co.uk> Thanks for the fix Paul, you beat me to it :) Interestingly, I'm pretty sure this is already corrected in the downstream bugs, but it's good to have it in here too. follow-up pushed to main More is needed here:
Error Details
Unexpected bold date: March 29, 2026: expected false to be true
Stack Trace
AssertionError: Unexpected bold date: March 29, 2026: expected false to be true
at Context.eval (webpack://koha/./t/cypress/integration/Circulation/bookingsModalDatePicker_spec.ts:618:75)
+ expected - actual: failed to generate Mocha diff
I think I just fixed that in a QA follow-up on Bug 37707: From ed454828ff3e9fe94c93c79ad0857add80a078f6 Mon Sep 17 00:00:00 2001 From: Paul Derscheid <paul.derscheid@lmscloud.de> Date: Mon, 9 Feb 2026 15:25:34 +0100 Subject: [PATCH] Bug 37707: (QA follow-up) Fix incorrect bold date expectations in Cypress test - The test for circulation rules date calculations did not account for the start date being bold, only the period endpoint dates - place_booking.js explicitly adds the selected start date to boldDates (boldDates = [new Date(startDate)]), giving it the "title" class - The verification loop checking for unexpected bold dates then failed when it encountered the start date, which was bold but not expected - Add clearZoneStart to expectedBoldDates to match actual behavior To test: - yarn cypress run --spec t/cypress/integration/Circulation/bookingsModalDatePicker_spec.ts - Verify that the "should handle circulation rules date calculations and visual feedback" test now passes Signed-off-by: Paul Derscheid <paul.derscheid@lmscloud.de> |