Reusable proptypes #1189
Reusable proptypes #1189
Conversation
client/tests/e2e/util/index.js
Outdated
| * @param {number} [timeout=500] - Timeout in milliseconds to wait for errors | ||
| * @returns {Promise<string[]>} - Array of error messages, if any | ||
| */ | ||
| async function checkConsoleErrors(page, action, timeout = 500) { |
There was a problem hiding this comment.
This is super useful! This definitely gives a lot of confidence!
| page, | ||
| introductionHeadingSelector | ||
| ); | ||
| const errors = await checkConsoleErrors(page, async () => { |
There was a problem hiding this comment.
This is great but I think it has a chance to miss errors on certain element checks or with how the page element is being loaded. In this instance, errors could happen after the "Introduction" text has loaded which is what I'm guessing is happening in the following screenshot. There is a prop error not being caught on the DataManagement page:
I'm thinking the page.on('console') listener could be done in getPage and passed into the callback the same way the browser and baseUrl and checked in that way
| @@ -0,0 +1,322 @@ | |||
| import PropTypes from 'prop-types'; | |||
There was a problem hiding this comment.
Wow, huge plus for putting this together and making all those changes. No more having to figure out how to account for certain structures :).
Also appreciate the care taken for identifying what should be required per prop type.
|
Thanks for the suggestion on how to handle the error tracking in e2e. It worked like a charm and is much cleaner! Interestingly it also uncovered an error that comes up on the reports page, "Failed to load resource: the server responded with a status of 404 (Not Found)". This only happens on CI. This likely existed previously but wasn't being checked. I can try to figure out what resource it is referring to tomorrow. |
I ended up adding a tag for a placeholder favicon so that the browser doesn't try to find a favicon by default. Used this solution. |
| @@ -5,6 +5,7 @@ | |||
| <meta name="google" content="notranslate"> | |||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |||
| <link rel="stylesheet" href="/index.css"> | |||
| <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon" /> | |||
This PR introduces reusable PropTypes. The proptypes are largely a mirror of the existing GraphQL query fragments. A few additional proptypes were added for situations with relatively complex
PropType.shapes.To ensure that the PropTypes are honored and that no additional console errors are introduced by changes, I added a console error checker to the first load of pages during e2e testing.