Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add tests for the AOI feature specification #1216

Merged
merged 5 commits into from
Nov 4, 2024
Merged

Conversation

AliceR
Copy link
Member

@AliceR AliceR commented Oct 24, 2024

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-testid properties 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!

Copy link

netlify bot commented Oct 24, 2024

Deploy Preview for veda-ui ready!

Name Link
🔨 Latest commit 80ea196
🔍 Latest deploy log https://app.netlify.com/sites/veda-ui/deploys/6723643b66754e00081374ec
😎 Deploy Preview https://deploy-preview-1216--veda-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@AliceR
Copy link
Member Author

AliceR commented Oct 24, 2024

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');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can update the explorePage.ts to use this better locator

Copy link
Contributor

@stephenkilbourn stephenkilbourn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't have any issues with using the test id. What exactly is the problem that you are seeing?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Screenshot 2024-10-29 at 9 22 25 AM

the select has the id, but no data-testid.
Screenshot 2024-10-29 at 9 23 33 AM

This is the test run with yarn playwright test exploreAoi.spec.ts

traceAOI.zip

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screenshot 2024-10-31 at 11 44 12 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...

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I ran the whole test suite locally including running this test individually, and it always passes with a ✅ in my case.

Screenshot 2024-10-31 at 12 12 33

@AliceR AliceR marked this pull request as ready for review November 4, 2024 10:36
@AliceR
Copy link
Member Author

AliceR commented Nov 4, 2024

I’d like to go ahead and merge this PR now, if it works for you @stephenkilbourn.
I think it makes sense to get this integrated so we can focus on bug fixing and adding new features. There are definitely more issues around AOI that we need to tackle, and we can add more tests later as we work through them.
Merging now will help us keep things moving forward and allow us to build on this test suite as we go.
I’m also curious to see if the CI pipeline will pass with this change!

@AliceR AliceR merged commit 973aadd into main Nov 4, 2024
14 checks passed
@AliceR AliceR deleted the 1207-aoi-feature-spec branch November 4, 2024 14:45
@AliceR AliceR mentioned this pull request Nov 11, 2024
AliceR added a commit that referenced this pull request Nov 12, 2024
## 🎉 Features
* Card image/description independent of hero image/description by
@dzole0311 in #1244

## 🚀 Improvements
* Cookie consent code cleanup by @snmln in
#1199 , and @hanbyul-here in
#1240 , and @hanbyul-here in
#1241
* Add ADR about design system change by @j08lue in
#890
* Update condition to run playwright tests on release branches by
@dzole0311 in #1228
* Update STYLE_GUIDE.md by @AliceR in
#1227
* Fix lint configuration by @AliceR in
#1219
* Add tests for the AOI feature specification by @AliceR in
#1216
* Set data catalog filters to be closed by default by @vgeorge in
#1243
* Update tsconfig and make nav interfaces exposable for consumption by
@sandrahoang686 in #1223

## 🐛 Fixes
* Hotfix to hide the external link badge from cards by @dzole0311 in
#1231

## New Contributors
* @vgeorge made their first contribution in
#1243

**Full Changelog**:
v5.9.0...v5.10.0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants