Adding Playwright To First Example

[ZackDeRose]

Hey folks - adding a PR here to introduce Playwright as a way of catching issues as they creep using the examples that already exist in the repo.

I'm not sure if this is something that y'all would want, so I'm just introducing it primarily with the first example that I encountered (examples/angular/basic).

The test script adds an automated test for the behavior that the example is meant to demonstrate:

• go to main page
• first time clicking a link causes a loading indicator to appear
• go back to main (without a browser refresh)
• click same link - this time no loading indicator

I also adjusted the pr.yml file so that this will run for affected projects whenever PRs are submitted.

Let me know if this is a welcome addition, I have some ways of adding more e2e tests easily (with Nx core) that shouldn't affect CI time (with Nx Cloud).

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
query	⬜️ Ignored (Inspect)	Visit Preview		Jan 3, 2024 0:58am

[nx-cloud[bot]]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 9e89dfcde11f5a56bc3ec613b1b6686acbb26c0f. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

⌛ The following target is in progress

• nx affected --targets=test:eslint,test:lib,test:types,test:build,build,test:example

---

Sent with 💌 from NxCloud.

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 9e89dfcde11f5a56bc3ec613b1b6686acbb26c0f:

Sandbox	Source
@tanstack/query-example-angular-basic	Configuration
@tanstack/query-example-react-basic-typescript	Configuration
@tanstack/query-example-solid-basic-typescript	Configuration
@tanstack/query-example-svelte-basic	Configuration
@tanstack/query-example-vue-basic	Configuration

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Comparison is base (e6cb6df) 41.73% compared to head (9e89dfc) 41.73%.

:exclamation: Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #6630   +/-   ##
=======================================
  Coverage   41.73%   41.73%           
=======================================
  Files         179      179           
  Lines        7009     7009           
  Branches     1419     1419           
=======================================
  Hits         2925     2925           
  Misses       3713     3713           
  Partials      371      371           

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[TkDodo]

it's an interesting approach, I just think the examples don't do a lot of fancy things, so we have all of these things covered with our existing tests.