Add tests for the AOI feature specification #1216
Conversation
on how to run the tests
✅ Deploy Preview for veda-ui ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
Hi @stephenkilbourn 👋 Thanks for setting up playwright and the basic functionality to test the explore page! It was very useful! |
|
|
||
| test('User selects a pre-defined AOI', async ({ page }) => { | ||
| // When I select the "Analyze an area" tool (Dropdown menu) | ||
| const toolbar = page.getByTestId('preset-selector'); |
There was a problem hiding this comment.
I think we can update the explorePage.ts to use this better locator
app/scripts/components/exploration/components/map/analysis-message-control.tsx
Show resolved
Hide resolved
There was a problem hiding this comment.
Great @AliceR ! I'm happy that they are proving useful and you're brave enough to be the first one to take this on.
I added a few suggestions. I got it passing locally with getting the testid rendering in the analysis message and tweaking the assertion. If anything is confusing, let me know and I can chat via slack.
make steps appear in report, use better locators and validators, add expectations verbose, ...
| @@ -14,7 +14,7 @@ export default class ExplorePage { | |||
| this.mapboxCanvas = this.page.getByLabel('Map', { exact: true }); | |||
| this.firstDatasetItem = this.page.getByRole('article'); | |||
| this.closeFeatureTourButton = this.page.getByRole('button', { name: 'Close feature tour' }); | |||
| this.presetSelector = this.page.locator('#preset-selector'); | |||
| this.presetSelector = this.page.getByTestId('preset-selector'); | |||
There was a problem hiding this comment.
I was having to set this to get the parent for it to run.
const toolbar = page.locator('#preset-selector');
otherwise, the test would fail for me. I'd prefer to use your test Id if it is working for you, though.
There was a problem hiding this comment.
I don't have any issues with using the test id. What exactly is the problem that you are seeing?
There was a problem hiding this comment.
The tests always fails unless I switch to locating by ID. I've attached the trace from what I see after syncing with origin and deleting and re-installing node_modules to try minimizing a chance of mismatch.
the only data-testid I see is on the analysis message
the select has the id, but no data-testid.
This is the test run with yarn playwright test exploreAoi.spec.ts
There was a problem hiding this comment.
This is very strange, the data-testid does show up as expected for me. Can you try to run the whole test suite, instead of only the exploreAoi.spec.ts? Also, I assume you did re-start the local server with `yarn serve` at some point? Maybe somehow the local build isn't updating as it should? Wonder what else it could be that is different for me...
There was a problem hiding this comment.
I ran the whole test suite locally including running this test individually, and it always passes with a ✅ in my case.
|
I’d like to go ahead and merge this PR now, if it works for you @stephenkilbourn. |
Related Ticket: #1207
Description of Changes
So far, added a first test for the scenario "User selects a pre-defined AOI". I'm adding some
data-testidproperties to relevant dom elements in order to select them in the test.Also, added some documentation on how to run the tests. @hanbyul-here if you want to try that on your machine, and let me know if it works?
Notes & Questions About Changes
more tests to be added
Validation / Testing
Follow the instructions added to the SETUP.md guide to run the tests locally. See if they pass!