Skip to content

Commit

Permalink
chore: fix cypress tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@BRaimbault
BRaimbault committed Dec 20, 2024
1 parent aff5044 commit c0d7028
Show file tree
Hide file tree
Showing 6 changed files with 191 additions and 53 deletions.
15 changes: 7 additions & 8 deletions cypress/elements/layer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export class Layer {
.contains(level)
.find('input')
.check()
cy.get('body').click() // Close the modal menu
cy.get('body').click()

return this
}
Expand All @@ -59,27 +59,26 @@ export class Layer {
.find('input')
.uncheck()

cy.get('body').click() // Close the modal menu
cy.get('body').click()

return this
}

typeStartDate(dateString) {
cy.get('label')
.contains('Start date')
.next()
cy.getByDataTest('start-date-input-content')
.find('input')
.type(dateString)
cy.get('body').click(0, 0)

return this
}

typeEndDate(dateString) {
cy.get('label')
.contains('End date')
.next()
cy.getByDataTest('end-date-input-content')
.find('input')
.type(dateString)
cy.get('body').click(0, 0)

return this
}

Expand Down
45 changes: 42 additions & 3 deletions cypress/elements/thematic_layer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,9 +55,48 @@ export class ThematicLayer extends Layer {
return this
}

selectPeriodType(periodType) {
cy.get('[data-test="periodtypeselect"]').click()
cy.contains(periodType).click()
selectPeriodType(periodType, periodDimension = 'fixed', n = 'last') {
cy.getByDataTest(
`period-dimension-${periodDimension}-periods-button`
).click()
cy.getByDataTest(
`period-dimension-${periodDimension}-period-filter${
periodDimension === 'fixed' ? '-period-type' : ''
}-content`
).click()
cy.get(`[data-value="${periodType}"]`).then(($el) => {
if ($el.hasClass('active')) {
cy.get('body').click('topLeft')
} else {
cy.wrap($el).click()
}
})
if (n === 'last') {
cy.getByDataTest(
'period-dimension-transfer-actions-removeall'
).click()
cy.getByDataTest('period-dimension-transfer-option-content')
.last()
.dblclick()
} else {
cy.getByDataTest(
'period-dimension-transfer-actions-removeall'
).click()
cy.getByDataTest('period-dimension-transfer-option-content')
.eq(n)
.dblclick()
}

return this
}

selectPresets() {
cy.contains('Choose from presets').click()

return this
}
selectStartEndDates() {
cy.contains('Define start - end dates').click()

return this
}
Expand Down
14 changes: 6 additions & 8 deletions cypress/integration/layers/thematiclayer.cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ context('Thematic Layers', () => {
.selectIndicatorGroup('HIV')
.selectIndicator(INDICATOR_NAME)
.selectTab('Period')
.selectPeriodType('Yearly')
.selectPeriodType('YEARLY')
.selectTab('Org Units')
.selectOu('Sierra Leone')
.addToMap()
Expand All @@ -66,7 +66,7 @@ context('Thematic Layers', () => {
.selectIndicatorGroup('HIV')
.selectIndicator(INDICATOR_NAME)
.selectTab('Period')
.selectPeriodType('Yearly')
.selectPeriodType('YEARLY')
.selectTab('Org Units')
.selectOu('Bombali')
.selectOu('Bo')
Expand All @@ -83,7 +83,7 @@ context('Thematic Layers', () => {
.selectIndicatorGroup('HIV')
.selectIndicator(INDICATOR_NAME)
.selectTab('Period')
.selectPeriodType('Start/end dates')
.selectStartEndDates()
.typeStartDate(`${CURRENT_YEAR}-02-01`)
.typeEndDate(`${CURRENT_YEAR}-11-30`)
.selectTab('Org Units')
Expand All @@ -104,7 +104,7 @@ context('Thematic Layers', () => {
.selectIndicatorGroup('Stock')
.selectIndicator('BCG Stock PHU')
.selectTab('Period')
.selectPeriodType('Start/end dates')
.selectStartEndDates()
.typeStartDate(`${CURRENT_YEAR}-11-01`)
.typeEndDate(`${CURRENT_YEAR}-11-30`)
.selectTab('Style')
Expand Down Expand Up @@ -175,9 +175,7 @@ context('Thematic Layers', () => {
.selectTab('Org Units')
.selectOu('Sierra Leone')
.selectTab('Period')

cy.getByDataTest('relative-period-select-content').click()
cy.contains('Last 3 months').click()
.selectPeriodType('MONTHLY', 'relative', 2)

cy.get('[type="radio"]').should('have.length', 3)
cy.get('[type="radio"]').check('SPLIT_BY_PERIOD')
Expand Down Expand Up @@ -307,7 +305,7 @@ context('Thematic Layers', () => {
.selectIndicatorGroup('HIV')
.selectIndicator(INDICATOR_NAME)
.selectTab('Period')
.selectPeriodType('Yearly')
.selectPeriodType('YEARLY')
.selectTab('Org Units')
.selectOu('Bo')
.unselectOuLevel('District')
Expand Down
16 changes: 10 additions & 6 deletions cypress/integration/systemsettings.cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,14 +34,16 @@ describe('systemSettings', () => {

Layer.openDialog('Thematic').selectTab('Period')

cy.getByDataTest('periodtypeselect-content').click()
cy.getByDataTest(
'period-dimension-relative-period-filter-content'
).click()

cy.getByDataTest('dhis2-uicore-select-menu-menuwrapper')
.contains('Bi-weekly')
.contains('Bi-weeks')
.should('be.visible')

cy.getByDataTest('dhis2-uicore-select-menu-menuwrapper')
.contains('Weekly')
.contains('Weeks')
.should('not.exist')
})

Expand All @@ -52,14 +54,16 @@ describe('systemSettings', () => {

Layer.openDialog('Thematic').selectTab('Period')

cy.getByDataTest('periodtypeselect-content').click()
cy.getByDataTest(
'period-dimension-relative-period-filter-content'
).click()

cy.getByDataTest('dhis2-uicore-select-menu-menuwrapper')
.contains('Bi-weekly')
.contains('Bi-weeks')
.should('be.visible')

cy.getByDataTest('dhis2-uicore-select-menu-menuwrapper')
.contains('Weekly')
.contains('Weeks')
.should('be.visible')
})

Expand Down
141 changes: 120 additions & 21 deletions src/components/periods/StartEndDate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,81 @@ import PropTypes from 'prop-types'
import React, { useState } from 'react'
import { connect } from 'react-redux'
import { setStartDate, setEndDate } from '../../actions/layerEdit.js'
import useKeyDown from '../../hooks/useKeyDown.js'
import styles from './styles/StartEndDate.module.css'

const formatDate = (date, calendar = 'iso8601') => {
if (calendar === 'iso8601') {
return formatDateIso8601(date)
}
return formatDateDefault(date)
}
const formatDateDefault = (date) => {
if (!date) {
return ''
}
return date
}
const formatDateIso8601 = (date) => {
if (!date) {
return ''
}

const numericDate = date.replace(/\D/g, '')

if (numericDate.length < 5) {
return numericDate
}

const year = numericDate.slice(0, 4)
const month = numericDate.slice(4, 6)
const day = numericDate.slice(6, 8)

if (numericDate.length < 7) {
return `${year}-${month}`
}
if (numericDate.length < 8) {
return `${year}-${month}-${day}`
}

const formattedYear = year === '0000' ? '2000' : year
let formattedMonth = month === '00' ? '01' : month
formattedMonth = formattedMonth > 12 ? '12' : formattedMonth

let formattedDay = day === '00' ? '01' : day

const maxDaysInMonth = getMaxDaysInMonth(formattedYear, formattedMonth)
formattedDay = formattedDay > maxDaysInMonth ? maxDaysInMonth : formattedDay

return `${formattedYear}-${formattedMonth}-${formattedDay}`
}

const getMaxDaysInMonth = (year, month) => {
const monthDays = {
'02': 28,
'04': 30,
'06': 30,
'09': 30,
11: 30,
}

if (month === '02') {
return isLeapYear(year) ? 29 : 28
}

return monthDays[month] || 31
}

const isLeapYear = (year) => {
return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0
}

const createBoundHandler = (localSetter, reduxSetter, calendar) => (value) => {
const formattedDate = formatDate(value, calendar)
localSetter(formattedDate)
reduxSetter(formattedDate)
}

const StartEndDate = (props) => {
const {
startDate = '',
Expand All @@ -15,21 +88,38 @@ const StartEndDate = (props) => {
errorText,
periodsSettings,
} = props
const [startDateInput, setStartDateInput] = useState(
formatDate(startDate, periodsSettings?.calendar)
)
const [endDateInput, setEndDateInput] = useState(
formatDate(endDate, periodsSettings?.calendar)
)

const onStartDateChange = createBoundHandler(
setStartDateInput,
setStartDate,
periodsSettings?.calendar
)
const onEndDateChange = createBoundHandler(
setEndDateInput,
setEndDate,
periodsSettings?.calendar
)

const [start, setStart] = useState(startDate.slice(0, 10))
const [end, setEnd] = useState(endDate.slice(0, 10))
// Forces calendar to close when using Tab/Enter navigation
useKeyDown(['Tab', 'Enter'], () => {
const backdropElement = document.querySelectorAll('.backdrop')
if (backdropElement?.length === 3) {
backdropElement[2].click()
}
})

const hasDate = startDate !== undefined && endDate !== undefined

const onStartDateChange = ({ calendarDateString: value }) => {
setStart(value.slice(0, 10))
setStartDate(value.slice(0, 10))
if (!hasDate) {
return null
}
const onEndDateChange = ({ calendarDateString: value }) => {
setEnd(value.slice(0, 10))
setEndDate(value.slice(0, 10))
}
return hasDate ? (

return (
<Field
helpText={i18n.t(
'Start and end dates are inclusive and will be included in the outputs.'
Expand All @@ -38,24 +128,30 @@ const StartEndDate = (props) => {
<div className={styles.row}>
<CalendarInput
label={i18n.t('Start date')}
calendar={periodsSettings.calendar}
locale={periodsSettings.locale}
date={start.slice(0, 10)}
onDateSelect={onStartDateChange}
calendar={periodsSettings?.calendar}
locale={periodsSettings?.locale}
date={startDateInput}
onDateSelect={(e) =>
onStartDateChange(e?.calendarDateString)
}
onChange={(e) => onStartDateChange(e?.value)}
placeholder="YYYY-MM-DD"
dataTest="start-date-input"
strictValidation={true}
/>
<div className={styles.icon}>
<IconArrowRight16 color={colors.grey500} />
</div>
<CalendarInput
label={i18n.t('End date')}
calendar={periodsSettings.calendar}
locale={periodsSettings.locale}
date={end.slice(0, 10)}
onDateSelect={onEndDateChange}
calendar={periodsSettings?.calendar}
locale={periodsSettings?.locale}
date={endDateInput}
onDateSelect={(e) => onEndDateChange(e?.calendarDateString)}
onChange={(e) => onEndDateChange(e?.value)}
placeholder="YYYY-MM-DD"
dataTest="end-date-input"
strictValidation={true}
/>
</div>
{errorText && (
Expand All @@ -64,14 +160,17 @@ const StartEndDate = (props) => {
</div>
)}
</Field>
) : null
)
}
StartEndDate.propTypes = {
setEndDate: PropTypes.func.isRequired,
setStartDate: PropTypes.func.isRequired,
endDate: PropTypes.string,
errorText: PropTypes.string,
periodsSettings: PropTypes.object,
periodsSettings: PropTypes.shape({
calendar: PropTypes.string,
locale: PropTypes.string,
}),
startDate: PropTypes.string,
}

Expand Down
Loading

0 comments on commit c0d7028

Please sign in to comment.