Merge branch 'main' into APPS-3078_add-highlighted-state

src/stories/DateFilter.spec.js

@@ -1,8 +1,30 @@
 describe('DateFilter', () => {
-  it('Default', () => {
-    cy.visit('/iframe.html?id=datefilter--default')
-    cy.get('.date-filter').should('exist')
+  describe('Default', () => {
+    beforeEach(() => {
+      cy.visit('/iframe.html?id=datefilter--default')
+    })
 
-    cy.percySnapshot('Date Filter: Default')
+    it('renders the component', () => {
+      cy.get('.date-filter').should('exist')
+      cy.percySnapshot('Date Filter: Default')
+    })
+
+    it('emits new selected date on done click and not before', () => {
+      // check contents of data-test:selected-date before
+      cy.get('[data-test=selected-date]').should('contain', '')
+
+      // open date picker & select date
+      cy.get('input.dp__input').click()
+      cy.get('.dp__calendar_item').eq(5).click()
+      cy.get('.dp__calendar_item').eq(7).click()
+
+      // check that contents havent changed yet
+      cy.get('[data-test=selected-date]').should('contain', '')
+      // click done button
+      cy.get('.select-button').click()
+
+      // check contents of data-test:selected-date after
+      cy.get('[data-test=selected-date]').contains('{ "startDate":')
+    })
   })
 })

src/stories/DateFilter.stories.js

@@ -1,4 +1,4 @@
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import DateFilter from '@/lib-components/DateFilter'
 
 export default {
@@ -17,8 +17,17 @@ export function Default() {
         ...mock,
       }
     },
+    setup() {
+      // Provide a function to update the selected date, and a ref for it
+      // So that the parent page can display / react to the date outside of the component once its selected
+      const modelDate = ref(null)
+      const updateDate = (date) => {
+        modelDate.value = date
+      }
+      return { modelDate, updateDate }
+    },
     components: { DateFilter },
-    template: '<div style="height:509px"><date-filter :eventDates="eventDates" /></div>',
+    template: '<div style="height:509px">Sample Selected Date: <span data-test="selected-date">{{ modelDate }}</span><date-filter @input-selected="updateDate" :eventDates="eventDates" /></div>',
   }
 }
 /* hideInput prop is not currently used anywhere in the app,