Bug 39916

Summary: The 'Place booking' modal should have cypress tests
Product: Koha Reporter: Martin Renvoize (ashimema) <martin.renvoize>
Component: CirculationAssignee: Martin Renvoize (ashimema) <martin.renvoize>
Status: Signed Off --- QA Contact: Nick Clemens (kidclamp) <nick>
Severity: normal    
Priority: P5 - low CC: andrew, david, gmcharlt, kyle, m.de.rooy
Version: unspecified   
Hardware: All   
OS: All   
See Also: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=39584
GIT URL: Initiative type: ---
Sponsorship status: --- Comma delimited list of Sponsors:
Crowdfunding goal: 0 Patch complexity: Trivial patch
Documentation contact: Documentation submission:
Text to go in the release notes:
Version(s) released in:
Circulation function: Bookings
Bug Depends on: 35248    
Bug Blocks: 40134    
Attachments: Bug 39916: Add select2 helpers to cypress
Bug 39916: WIP Cypress tests for the bookings modal
Bug 39916: Add select2 helpers to cypress
Bug 39916: WIP Cypress tests for the bookings modal
Bug 39916: Add select2 helpers to cypress
Bug 39916: Add cypress helpers for flatpickr
Bug 39916: WIP Cypress tests for the bookings modal
Bug 39916: Add select2 helpers to cypress
Bug 39916: Add flatpickr helpers to cypress
Bug 39916: WIP Cypress tests for the bookings modal
Bug 39916: Add select2 helpers to cypress
Bug 39916: Add flatpickr helpers to cypress
Bug 39916: Cypress tests for the bookings modal
Bug 39916: Fix booking modal redraw issue
Bug 39916: Fix race condition in booking modal edit mode
Bug 39916: Add select2 helpers to cypress
Bug 39916: Add flatpickr helpers to cypress
Bug 39916: Cypress tests for the bookings modal
Bug 39916: Fix booking modal race conditions and redraw issues

Description Martin Renvoize (ashimema) 2025-05-16 10:33:34 UTC
The bookings modal is one of the more complex modal forms we have, with a lot of logic involved.

We should add cypress tests to ensure we don't see regressions here.
Comment 1 Martin Renvoize (ashimema) 2025-05-16 10:37:22 UTC Comment hidden (obsolete)
Comment 2 Martin Renvoize (ashimema) 2025-05-16 10:37:27 UTC Comment hidden (obsolete)
Comment 3 Martin Renvoize (ashimema) 2025-05-16 16:08:54 UTC Comment hidden (obsolete)
Comment 4 Martin Renvoize (ashimema) 2025-05-16 16:08:57 UTC Comment hidden (obsolete)
Comment 5 Martin Renvoize (ashimema) 2025-05-19 18:06:25 UTC Comment hidden (obsolete)
Comment 6 Martin Renvoize (ashimema) 2025-05-19 18:06:28 UTC Comment hidden (obsolete)
Comment 7 Martin Renvoize (ashimema) 2025-05-19 18:06:31 UTC Comment hidden (obsolete)
Comment 8 Martin Renvoize (ashimema) 2025-05-23 15:31:23 UTC
Created attachment 182771 [details] [review]
Bug 39916: Add select2 helpers to cypress

This patch adds some helper methods for testing with select2 selects.
Comment 9 Martin Renvoize (ashimema) 2025-05-23 15:31:26 UTC
Created attachment 182772 [details] [review]
Bug 39916: Add flatpickr helpers to cypress
Comment 10 Martin Renvoize (ashimema) 2025-05-23 15:31:29 UTC
Created attachment 182773 [details] [review]
Bug 39916: WIP Cypress tests for the bookings modal

Lots of passing tests :)
Comment 11 Marcel de Rooy 2025-06-06 06:58:37 UTC
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.
Comment 12 Martin Renvoize (ashimema) 2025-06-12 14:51:43 UTC
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.
Comment 13 Martin Renvoize (ashimema) 2025-06-12 14:51:45 UTC
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.
Comment 14 Martin Renvoize (ashimema) 2025-06-12 14:51:47 UTC
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.
Comment 15 Martin Renvoize (ashimema) 2025-06-12 14:51:49 UTC
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.
Comment 16 Martin Renvoize (ashimema) 2025-06-12 14:51:51 UTC
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.
Comment 17 Martin Renvoize (ashimema) 2025-06-12 14:59:15 UTC
(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
Comment 18 David Nind 2025-06-13 06:46:29 UTC
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)
Comment 19 Martin Renvoize (ashimema) 2025-12-31 12:19:51 UTC
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.
Comment 20 Martin Renvoize (ashimema) 2025-12-31 12:19:53 UTC
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.
Comment 21 Martin Renvoize (ashimema) 2025-12-31 12:19:55 UTC
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
Comment 22 Martin Renvoize (ashimema) 2025-12-31 12:19:56 UTC
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