Fix lifecycle modal datepicker spec not displaying the expected date.

spec/support/components/datepicker/datepicker.rb

@@ -180,6 +180,7 @@ module Components
     ##
     # Expect the given date to be visible and a non-working day
     def expect_non_working(date)
+      ensure_date_is_displayed(date) unless displays_date?(date)
       label = date.strftime("%B %-d, %Y")
       expect(page).to have_css(".flatpickr-day.flatpickr-non-working-day[aria-label='#{label}']")
     end
@@ -187,6 +188,7 @@ module Components
     ##
     # Expect the given date to be visible and a working day
     def expect_working(date)
+      ensure_date_is_displayed(date) unless displays_date?(date)
       label = date.strftime("%B %-d, %Y")
       expect(page).to have_css(".flatpickr-day:not(.flatpickr-non-working-day)[aria-label='#{label}']")
     end
@@ -194,6 +196,7 @@ module Components
     ##
     # Expect the given date to be visible and disabled
     def expect_disabled(date)
+      ensure_date_is_displayed(date) unless displays_date?(date)
       label = date.strftime("%B %-d, %Y")
       expect(page).to have_css(".flatpickr-day.flatpickr-disabled[aria-label='#{label}']," \
                                ".flatpickr-day.flatpickr-non-working-day[aria-label='#{label}']")
@@ -202,6 +205,7 @@ module Components
     ##
     # Expect the given date to be visible and enabled
     def expect_not_disabled(date)
+      ensure_date_is_displayed(date) unless displays_date?(date)
       label = date.strftime("%B %-d, %Y")
       expect(page).to have_css(".flatpickr-day:not(.flatpickr-disabled):not(.flatpickr-non-working-day)[aria-label='#{label}']")
     end
@@ -215,6 +219,11 @@ module Components
       page.has_css?(".flatpickr-prev-month")
     end
 
+    def ensure_date_is_displayed(date)
+      select_year(date.year)
+      select_month(date.month)
+    end
+
     protected
 
     def save_button_label

spec/support/components/datepicker/datepicker_modal.rb

@@ -18,5 +18,46 @@ module Components
     def has_day_selected?(value)
       flatpickr_container.has_css?(".flatpickr-day.selected", text: value, wait: 1)
     end
+
+    ##
+    # Select month from datepicker
+    def select_month(month)
+      month = Date::MONTHNAMES.index(month) if month.is_a?(String)
+      retry_block do
+        current_month = current_month_index
+
+        if current_month < month
+          month_difference = month - current_month
+          month_difference.times { flatpickr_container.find(".flatpickr-next-month").click }
+        elsif current_month > month
+          month_difference = current_month - month
+          month_difference.times { flatpickr_container.find(".flatpickr-prev-month").click }
+        end
+        current_month_index
+      end
+    end
+
+    # Returns the index of the current month.
+    #
+    # 1 for January, 2 for February, etc.
+    #
+    # When multiple months are displayed, it returns the value for the first one
+    # displayed.
+    def current_month_index
+      # ensure flatpicker month is displayed
+      flatpickr_container.first(".flatpickr-month")
+
+      # Checking if showing multiple months or using `monthSelectorType: "static"`,
+      # in which case the month is simply some static text in a span instead of a
+      # `<select>` dropdown input.
+      if flatpickr_container.all(".cur-month", wait: 0).any?
+        # Get value from month name and convert to index
+        current_month_element = flatpickr_container.first(".cur-month")
+        Date::MONTHNAMES.index(current_month_element.text)
+      else
+        # get value from select dropdown value
+        flatpickr_container.first(".flatpickr-monthDropdown-months").value.to_i + 1
+      end
+    end
   end
 end