test: [DI-22618] - E2E Cypress Automation of Custom Date Time Range Picker #11626
Conversation
agorthi-akamai
requested review from
dmcintyr-akamai,
bnussman-akamai and
bill-akamai
and removed request for
a team
|
I am moving this PR to Draft because the test cases are passing locally but failing on Jenkins. I need to investigate the discrepancies further. |
bnussman-akamai
changed the title
…-picker-linode
There was a problem hiding this comment.
@agorthi-akamai see my comments on date-utils, that might help put you in the right direction
There was a problem hiding this comment.
A couple things with this file:
- This doesn't belong in
support/constants-- it'd be better off renamedsupport/util/datetime.tsor something like that. However... - Utils are meant to be reusable, but these look very specific to this group of tests. Would these functions be better off defined in
timerange-verification.spec.tsor is there an opportunity to make them more usable? - Tying these utils to a specific timezone is a big part of the reason why these utils can't be reused, and is also probably a cause of the test failures in CI
|
I'm transitioning the draft to an open state since the test cases are now working fine. I can successfully interact with the date picker and perform the necessary actions |
|
Coverage Report: ✅ |
|
@jdamore-linode Could you please review and approve it if all the feedbacks are addressed. |
There was a problem hiding this comment.
Thanks @agorthi-akamai. Posted a few nits/clean up suggestions that I'd like to see addressed where applicable but otherwise looks good
| /** | ||
| * Generates a date in Indian Standard Time (IST) based on a specified number of days offset, | ||
| * hour, and minute. The function also provides individual date components such as day, hour, | ||
| * minute, month, and AM/PM. | ||
| * | ||
| * @param {number} daysOffset - The number of days to adjust from the current date. Positive | ||
| * values give a future date, negative values give a past date. | ||
| * @param {number} hour - The hour to set for the resulting date (0-23). | ||
| * @param {number} [minute=0] - The minute to set for the resulting date (0-59). Defaults to 0. | ||
| * | ||
| * @returns {Object} - Returns an object containing: | ||
| * - `actualDate`: The formatted date and time in IST (YYYY-MM-DD HH:mm). | ||
| * - `day`: The day of the month as a number. | ||
| * - `hour`: The hour in the 24-hour format as a number. | ||
| * - `minute`: The minute of the hour as a number. | ||
| * - `month`: The month of the year as a number. | ||
| */ | ||
| const getDateRangeInGMT = ( | ||
| daysOffset: number, | ||
| hour: number, | ||
| minute: number = 0 | ||
| ) => { | ||
| const now = DateTime.now().setZone('GMT'); // Set the timezone to GMT | ||
| const targetDate = now | ||
| .startOf('month') | ||
| .plus({ days: daysOffset }) | ||
| .set({ hour, minute }); | ||
|
|
||
| const actualDate = targetDate.toFormat('yyyy-LL-dd HH:mm'); // Format in GMT | ||
| return { | ||
| actualDate, | ||
| day: targetDate.day, | ||
| hour: targetDate.hour, | ||
| minute: targetDate.minute, | ||
| month: targetDate.month, | ||
| }; | ||
| }; |
There was a problem hiding this comment.
Mind moving this to the top with the other functions?
| cy.get('[aria-label="Select hours"]') | ||
| .scrollIntoView({ easing: 'linear' }) | ||
| .within(() => { | ||
| cy.get(`[aria-label="${startHour} hours"]`).click({ force: true }); |
There was a problem hiding this comment.
Why are we performing all these clicks with forced: true? I'm not seeing anything special about the UI at a glance that would require it, were you running into some roadblock without it?
| // Clicks the button closest to the Clock Icon, bypassing any visible state with `force: true`. | ||
| cy.get('[data-testid="ClockIcon"]') | ||
| .closest('button') | ||
| .click({ force: true }); |
There was a problem hiding this comment.
| // Clicks the button closest to the Clock Icon, bypassing any visible state with `force: true`. | |
| cy.get('[data-testid="ClockIcon"]') | |
| .closest('button') | |
| .click({ force: true }); | |
| cy.findByLabelText('Choose time, selected time is', { exact: false }) | |
| .should('be.visible') | |
| .click(); |
It'd be better to find the button using its label if we can avoid cy.get -- you could alternatively pass a regex to avoid needing { exact: false } if you want.
|
|
||
| // Selects the start hour, minute, and meridiem (AM/PM) in the time picker. | ||
|
|
||
| cy.get('[aria-label="Select hours"]') |
There was a problem hiding this comment.
| cy.get('[aria-label="Select hours"]') | |
| cy.findByLabelText('Select hours') |
Everywhere where we're calling cy.get('[aria-label="..."]') can be replaced with cy.findByLabelText('...')
| }); | ||
|
|
||
| // Click the "Apply" button to confirm the start date and time | ||
| cy.findByRole('button', { name: 'Apply' }).should('be.visible').click(); |
There was a problem hiding this comment.
Any reason not to use ui.button.findByTitle() when interacting with this button?
| cy.findByPlaceholderText('Select Start Date') | ||
| .scrollIntoView({ easing: 'linear' }) | ||
| .should('be.visible') | ||
| .invoke('val') // Get the current value | ||
| .then(cleanText) // Clean the value | ||
| .should('equal', `${startActualDate} PM`); |
There was a problem hiding this comment.
Nit, just an easier way to do this
| cy.findByPlaceholderText('Select Start Date') | |
| .scrollIntoView({ easing: 'linear' }) | |
| .should('be.visible') | |
| .invoke('val') // Get the current value | |
| .then(cleanText) // Clean the value | |
| .should('equal', `${startActualDate} PM`); | |
| cy.findByPlaceholderText('Select Start Date') | |
| .scrollIntoView({ easing: 'linear' }) | |
| .should('be.visible') | |
| .should('have.value', `${cleanText(startActualDate)} PM`) |
I think there are a few places this could be applied
| }); | ||
|
|
||
| // Click on the "Presets" button | ||
| cy.findByRole('button', { name: 'Presets' }).should('be.visible').click(); |
There was a problem hiding this comment.
Similar to the question about the Apply button before. If there isn't a specific reason we're selecting the button this way, we should prefer ui.button.findByTitle('Presets') instead
|
I have addressed the review comments and made the necessary changes |
…-picker-linode
Cloud Manager UI test results🎉 520 passing tests on test run #31 ↗︎
|
|
Merging this since joe's comments are also addressed, jobs pass, UT's pass and cypress pass. |
Cloud Manager E2E
|
||||||||||||||||||||||||||||
| Project |
Cloud Manager E2E
|
| Branch Review |
develop
|
| Run status |
|
| Run duration | 30m 24s |
| Commit |
|
| Committer | agorthi-akamai |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
Failures
|
0
|
Flaky
|
5
|
Pending
|
3
|
Skipped
|
0
|
Passing
|
521
|
| View all changes introduced in this branch ↗︎ | |
Description 📝
This integration test suite validates the Dashboard in CloudPulse, focusing on custom date-time selection and preset time ranges. It ensures that the time picker correctly applies selected values, API requests contain the expected start and end times in GMT+5:30 (IST), and metrics update accordingly. The tests cover custom date selection, various preset time ranges (Last 30 Days, Last Month, etc.), and API request validation to ensure accurate data retrieval.
Preview:
Target release date 🗓️ 10/02/2025
How to test 🧪
yarn cy:run -s "cypress/e2e/core/cloudpulse/timerange-verification.spec.ts" --browser chrome
As an Author, to speed up the review process, I considered 🤔
👀 Doing a self review
❔ Our contribution guidelines
🤏 Splitting feature into small PRs
➕ Adding a changeset
🧪 Providing/improving test coverage
🔐 Removing all sensitive information from the code and PR description
🚩 Using a feature flag to protect the release
👣 Providing comprehensive reproduction steps
📑 Providing or updating our documentation
🕛 Scheduling a pair reviewing session
📱 Providing mobile support
♿ Providing accessibility support
As an Author, before moving this PR from Draft to Open, I confirmed ✅