Merge pull request #13029 from mkllnk/flaky-order-cycle-spec

Add timepicker helper with added expectation to reduce flakiness

spec/support/features/datepicker_helper.rb

@@ -15,6 +15,17 @@ def select_dates_from_daterangepicker(from, to)
       select_date_from_datepicker(to)
     end
 
+    def select_datetime_from(element, datetime)
+      datetime = Time.zone.parse(datetime) if datetime.is_a? String
+
+      # Wait for timepicker element to be loaded:
+      expect(page).to have_css "#{element}.datetimepicker"
+
+      find(element).click
+      select_datetime_from_datepicker(datetime)
+      close_datepicker
+    end
+
     def select_date_from_datepicker(date)
       within ".flatpickr-calendar.open" do
         # Unfortunately, flatpickr doesn't notice a change of year when we do
@@ -31,11 +42,17 @@ def select_date_from_datepicker(date)
     end
 
     def select_datetime_from_datepicker(datetime)
-      ## First of all select date
       select_date_from_datepicker(datetime)
-      # Then select time
-      find(".flatpickr-calendar.open .flatpickr-hour").set datetime.strftime("%H").to_s.strip
-      find(".flatpickr-calendar.open .flatpickr-minute").set datetime.strftime("%M").to_s.strip
+      fill_in "Hour", with: datetime.strftime("%H")
+      fill_in "Minute", with: datetime.strftime("%M")
+
+      # Flatpickr needs time to update the time.
+      # Otherwise submitting the form may not work.
+      # CI experimentation: 10ms ->   7% success
+      #                     50ms ->  87% success
+      #                    100ms -> 100% success in 112 runs
+      # Let's double that to reduce flakiness even further.
+      sleep 0.2
     end
 
     def pick_datetime(calendar_selector, datetime_selector)

spec/system/admin/order_cycles/edit_spec.rb

@@ -39,10 +39,7 @@
         expect(page).to have_field 'order_cycle_name', with: "Order cycle name updated"
         expect(page).to have_content('Your order cycle has been updated.')
 
-        # change date range field value
-        find('#order_cycle_orders_close_at').click
-        select_datetime_from_datepicker Time.zone.parse("2024-03-30 00:00")
-        close_datepicker
+        select_datetime_from "#order_cycle_orders_close_at", "2024-03-30 00:00"
         expect(page).to have_content('You have unsaved changes')
 
         # click save to open warning modal
@@ -61,10 +58,7 @@
         login_as_admin
         visit edit_admin_order_cycle_path(order_cycle)
 
-        # change date range field value
-        find('#order_cycle_orders_close_at').click
-        select_datetime_from_datepicker Time.zone.parse("2024-03-30 00:00")
-        close_datepicker
+        select_datetime_from "#order_cycle_orders_open_at", "2024-03-30 00:00"
 
         # click save to open warning modal
         click_button('Save')
@@ -80,29 +74,28 @@
       end
     end
 
-    context 'with no attached order' do
-      it "does not show warning modal", retry: 3 do
+    context "with no attached order" do
+      it "does not show warning modal" do
         login_as_admin
         visit edit_admin_order_cycle_path(order_cycle)
 
         # change non-date range field value
-        fill_in 'order_cycle_name', with: "OC1 name updated"
-        expect(page).to have_content('You have unsaved changes')
+        fill_in "order_cycle_name", with: "OC1 name updated"
+        expect(page).to have_content "You have unsaved changes"
 
         # click save
-        click_button('Save')
-        expect(page).to have_field 'order_cycle_name', with: 'OC1 name updated'
-        expect(page).to have_content('Your order cycle has been updated.')
-
-        # Now change date range field value
-        find('#order_cycle_orders_close_at').click
-        select_datetime_from_datepicker Time.zone.parse("2024-03-30 00:00")
-        close_datepicker
-        expect(page).to have_content('You have unsaved changes')
-
-        click_button('Save')
-        expect(page).to have_field 'order_cycle_orders_close_at', with: '2024-03-30 00:00'
-        expect(page).to have_content('Your order cycle has been updated.')
+        click_button "Save"
+        expect(page).not_to have_content "You have unsaved changes"
+        expect(page).to have_content "Your order cycle has been updated."
+        expect(page).to have_field "order_cycle_name", with: "OC1 name updated"
+
+        select_datetime_from "#order_cycle_orders_close_at", "2024-03-30 01:20"
+        expect(page).to have_content "You have unsaved changes"
+
+        click_button "Save"
+        expect(page).not_to have_content "You have unsaved changes"
+        expect(page).to have_content "Your order cycle has been updated."
+        expect(page).to have_field "order_cycle_orders_close_at", with: "2024-03-30 01:20"
       end
     end
   end
@@ -126,10 +119,7 @@
         expect(page).to have_content('Your order cycle has been updated.')
         expect(page).to have_field 'order_cycle_name', with: "Order cycle name updated"
 
-        # change date range field value
-        find('#order_cycle_orders_close_at').click
-        select_datetime_from_datepicker Time.zone.parse("2024-03-30 00:00")
-        close_datepicker
+        select_datetime_from "#order_cycle_orders_close_at", "2024-03-30 00:00"
 
         expect(page).to have_content('You have unsaved changes')
 
@@ -147,7 +137,7 @@
     end
 
     context 'with no attached orders' do
-      it "does not show warning modal", retry: 3 do
+      it "does not show warning modal" do
         login_as_admin
         visit edit_admin_order_cycle_path(order_cycle)
 
@@ -161,10 +151,7 @@
         expect(page).to have_content('Your order cycle has been updated.')
         expect(page.find('#order_cycle_name').value).to eq 'OC1 name updated'
 
-        # Now change date range field value
-        find('#order_cycle_orders_close_at').click
-        select_datetime_from_datepicker Time.zone.parse("2024-03-30 00:00")
-        close_datepicker
+        select_datetime_from "#order_cycle_orders_close_at", "2024-03-30 00:00"
         expect(page).to have_content('You have unsaved changes')
         sleep(2)