Improve bucket upload ui tests #2117
Conversation
asnaith
added
the
Type: Maintenance
|
Your Render PR Server URL is https://chainsafe-components-stage-pr-2117.onrender.com. Follow its progress at https://dashboard.render.com/static/srv-c9oudu10gd0fd2daup2g. |
|
Your Render PR Server URL is https://files-ui-stage-pr-2117.onrender.com. Follow its progress at https://dashboard.render.com/static/srv-c9oudv10gd0fd2daup70. |
|
Your Render PR Server URL is https://storage-ui-stage-pr-2117.onrender.com. Follow its progress at https://dashboard.render.com/static/srv-c9oue010gd0fd2daupog. |
| @@ -1,4 +1,5 @@ | |||
| export const bucketName = "test bucket" | |||
| export const chainSafeBucketName = `cs bucket ${Date.now()}` | |||
| export const ipfsBucketName = `ipfs bucket ${Date.now()}` | |||
There was a problem hiding this comment.
We remove the bucket from the UI instantly and don't wait for any confirmation so to avoid issues I'm using unique names here.
| ...basePage, | ||
|
|
||
| // bucket content browser elements | ||
| bucketHeaderLabel: () => cy.get("[data-cy=header-bucket]", { timeout: 20000 }), |
There was a problem hiding this comment.
this timeout is because this type of web elements take longer to load than usual, right?
There was a problem hiding this comment.
Actually...this was unnecessary 😄. It was left there by accident. I have pushed a commit to remove it and some others which aren't needed.
The default is 6 seconds and that will be ok.
| @@ -136,7 +136,7 @@ const UploadFileModal = ({ modalOpen, close }: IUploadFileModuleProps) => { | |||
| /> | |||
| <footer className={classes.footer}> | |||
| <Button | |||
| data-cy="upload-cancel-button" | |||
| testId="cancel-upload" | |||
There was a problem hiding this comment.
why testId and not data-cy? this modal es reusable?
There was a problem hiding this comment.
@juans-chainsafe In this example specifically, the button component already has a testId prop so I'm just passing something through to that, as opposed to writing a custom attribute directly on the element. It's a little cleaner / more readable ("testId" is instantly obvious to all reading the code what it's for).
For buttons, either type of locator will work, but there are instances with other components where this is not the case:
-
Due to the manner in which we are setting up the element in code (maybe using the default component without further customizations) it's sometimes hard to add a custom data-cy attribute to it (off the top of my head I think toasts in Files is a good example).
-
I've also seen instances where even though we have set up a data-cy tag Cypress hasn't been able to find it but by setting up a testId on the component and passing something through to it does work (saw this recently with radio buttons).
I am certain you will encounter this too at some point. Hopefully, this explanation makes sense but we can also discuss it further if you want :)
…nSafe/files-ui into mnt/expand-bucket-upload-tests-2085
closes #2085
Our automation tests in this area were pretty basic, only creating and deleting the default bucket. If bucket uploading was broken for a specific file system type then we couldn't detect it.
These updated tests now provide more robust coverage for the bucket create, upload, and delete flow and utilize both file system types, ChainSafe and IPFS.