test: [M3-8226] - Cypress integration tests for account "Maintenance" tab #10694
Conversation
|
Coverage Report: ✅ |
|
observing a timeout issue during integration test. So remove "ready for review" and checking now |
|
Ready for review |
packages/manager/cypress/e2e/core/account/account-maintenance.spec.ts
Outdated
Show resolved
Hide resolved
| }); | ||
| }); | ||
|
|
||
| // Confirm download buttons work |
There was a problem hiding this comment.
Ideally we would like to check the contents of the CSV files but looks like the file is empty after downloading. I think it is because we are mocking responses but not actually have those maintenance messages.
Just a quick note that we might unable to confirm the contents of the CSV match an expected string or similar that was mentioned in the ticket.
There was a problem hiding this comment.
@AzureLatte I'm puzzled by this one! I’m observing the empty CSVs being downloaded when the test runs, but if I click either of the "Download CSV" buttons myself inside the Cypress debugger, the file that gets downloaded has the expected mock data:
"Entity Label","Entity Type","Entity ID","Date","Type","Status","Reason"
"linode-1","linode","1","2023-04-17T03:16:20.148Z","live_migration","pending","We must replace faulty RAM in your Linode's host."
"linode-2","linode","2","2023-10-24T20:57:33.195Z","cold_migration","started","There is an issue with the power supply of your Linode's host."
Very strange!
Tomorrow I'll take a closer look at how Cloud handles this to see if it gives us any hints what's happening here. In the meantime, this is all looking really great! If we can't figure out what's going on with the CSV files, we can talk about spinning it off into a separate task so that all of this other work doesn't get held up!
There was a problem hiding this comment.
but if I click either of the "Download CSV" buttons myself inside the Cypress debugger, the file that gets downloaded has the expected mock data:
Did you config something special before? I am asking because on my side, the downloaded file is also empty even if I clicked the button manually.
There was a problem hiding this comment.
Even weirder! Nothing specific that I can think of, but I may have been using it.only(...) on the test while I was looking at it -- not that that should make any difference, though 🤔
There was a problem hiding this comment.
I tried several times again manually and noticed that every time when I click the button the first time, it downloads an empty CSV file while all the following clicks result in correct file with expected mock data.
There was a problem hiding this comment.
@AzureLatte You're right, seeing the same behavior on my end! Taking a look right now!
There was a problem hiding this comment.
@AzureLatte I'm about 90% sure that this is actually a Cloud Manager bug and not a test/mock issue.
Got a bit distracted by another issue and about to step away for lunch, but I'll follow up here with more info soon! If there's an easy fix it might be nice to just take care of it in this PR, but there's a good chance we'll spin this off into a bug ticket!
There was a problem hiding this comment.
@AzureLatte Ok, definitely a bug, and pretty easy to reproduce outside of Cypress:
- Build and serve Cloud via
yarn dev - Using the dev tools in the bottom left, enable Mock Service Worker
- Navigate to the Maintenance page at
/account/maintenance - Click "Download CSV" for either table, observe empty CSV data (besides column headers)
- Click "Download CSV" again, observe CSV is populated with data
Not the strongest with React, but my understanding of what's going on in MaintenanceTable.tsx is that the CSV data is not automatically fetched when the MaintenanceTable component mounts (that's what the false value on line 94 does). That makes sense because this could potentially fetch a lot of data, and doing it automatically wouldn't make sense since it's only used when customers click the "Download CSV" button.
Instead, it fetches the data when the user clicks the download button, but because the CSV data gets passed to the DownloadCSV component as a prop, it doesn't actually take effect, so to speak, until after the next re-render which presumably happens after the CSV file is downloaded.
I don't know what the proper fix for this would be, so I wrote a pair of tickets:
- M3-8392 for the bug itself
- M3-8393 to test CSV download functionality (it may be helpful to have a test before M3-8392 is worked on so that whoever does the development for that has a test case they can use to confirm their work, but not crucial since this is pretty reproducible)
There was a problem hiding this comment.
Thank you, I will add a TODO comment in this PR.
There was a problem hiding this comment.
Nice work @AzureLatte! Approved pending some kind of handling of the Download CSV stuff:
- Remove or comment out what's here and re-add it for M3-8393
- Leave it the way it is and just add the content assertions for M3-8393 (probably the approach that makes the most sense)
Thanks again for all this work! The tests are great and they helped catch a bug! 🐛
Description 📝
Add Cypress integration tests using mock API data to ensure the Cloud Manager "Maintenance" tab on the Account page (/account/maintenance) works as expected.
Changes 🔄
How to test 🧪
As an Author I have considered 🤔
Check all that apply