Merge branch 'fix-failing-datetimepicker-hide-button' into 'master'

Fix datetimepicker hide button

See merge request gitlab-org/gitlab!39755

app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue

@@ -213,6 +213,7 @@ export default {
     class="d-inline-block"
   >
     <gl-deprecated-dropdown
+      ref="dropdown"
       :text="timeWindowText"
       v-bind="$attrs"
       class="date-time-picker w-100"
@@ -250,7 +251,9 @@ export default {
             />
           </div>
           <gl-form-group>
-            <gl-button @click="closeDropdown">{{ __('Cancel') }}</gl-button>
+            <gl-button data-testid="cancelButton" @click="closeDropdown">{{
+              __('Cancel')
+            }}</gl-button>
             <gl-button
               variant="success"
               category="primary"

changelogs/unreleased/fix-failing-datetimepicker-hide-button.yml

+---
+title: Fix broken date time picker hide button
+merge_request: 39755
+author:
+type: fixed

spec/frontend/vue_shared/components/date_time_picker/date_time_picker_spec.js

@@ -13,9 +13,9 @@ describe('DateTimePicker', () => {
 
   const dropdownToggle = () => wrapper.find('.dropdown-toggle');
   const dropdownMenu = () => wrapper.find('.dropdown-menu');
+  const cancelButton = () => wrapper.find('[data-testid="cancelButton"]');
   const applyButtonElement = () => wrapper.find('button.btn-success').element;
   const findQuickRangeItems = () => wrapper.findAll('.dropdown-item');
-  const cancelButtonElement = () => wrapper.find('button.btn-secondary').element;
 
   const createComponent = props => {
     wrapper = mount(DateTimePicker, {
@@ -260,7 +260,7 @@ describe('DateTimePicker', () => {
       dropdownToggle().trigger('click');
 
       return wrapper.vm.$nextTick(() => {
-        cancelButtonElement().click();
+        cancelButton().trigger('click');
 
         return wrapper.vm.$nextTick(() => {
           expect(dropdownMenu().classes('show')).toBe(false);