Skip to content

Commit

Permalink
docs(gitbook): updates via GitHub Sync (#347)
Browse files Browse the repository at this point in the history
* docs(gitbook): Add E2E Testing guide to table of contents

* docs(gitbook): Fix broken links and annotations in E2E Testing guide

* docs(gitbook): Remove "References" section from E2E Testing guide
  • Loading branch information
drichar authored Feb 13, 2025
1 parent 1926e3d commit e7b71ee
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 10 deletions.
1 change: 1 addition & 0 deletions docs/SUMMARY.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,4 +22,5 @@
* [⚡ React Quick Start](guides/react-quick-start.md)
* [⚡ Vue Quick Start](guides/vue-quick-start.md)
* [⚡ Solid.js Quick Start](guides/solid.js-quick-start.md)
* [🎯 End-to-End Testing](guides/end-to-end-testing.md)
* [🚣 Migrating from v2.x](guides/migrating-from-v2.x.md)
19 changes: 9 additions & 10 deletions docs/guides/end-to-end-testing.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@ description: Guide for end-to-end testing

# 🎯 End-to-End Testing

End-to-end (E2E) testing consists of creating and running automated tests that simulate the user going through various usage scenarios of the software from start (one end) to finish (the other end).[^1] E2E testing is also known as "system testing" because the tests are intended to test the system (software) as a whole.[^2] It does not replace unit testing, integration testing or manual testing. Instead, E2E testing should complement other types of testing.
End-to-end (E2E) testing consists of creating and running automated tests that simulate the user going through various usage scenarios of the software from start (one end) to finish (the other end) \[source][^1]. E2E testing is also known as "system testing" because the tests are intended to test the system (software) as a whole \[source][^2]. It does not replace unit testing, integration testing or manual testing. Instead, E2E testing should complement other types of testing.

In web development, an E2E test framework controls a web browser to test the web application. [Selenium WebDriver](https://www.selenium.dev/documentation/webdriver/), [Playwright](https://playwright.dev/) and [Cypress](https://www.cypress.io/) are common E2E test frameworks for web development. The best way of using an E2E test framework depends on the software requirements, code structure, and what other development tools are used.

## Wallet for E2E Testing

Most wallet applications, such as [Defly](../fundamentals/supported-wallets.md#defly) or [Pera](../fundamentals/supported-wallets.md#pera), do not allow for automated testing of decentralized apps (dApps) because they designed to require interaction from the human user. Requiring interaction from the human user is a critical part of the security of those wallet applications provide for users. However, this security is not needed for testing.

Fortunately, the [Mnemonic wallet provider](../fundamentals/supported-wallets.md#mnemonic) solves this problem, but at a heavy cost to the security of the accounts used. The Memonic wallet provider allows for an account's mnemonic ("seed phrase") to be entered directly. To automate the interaction with the Mnemonic wallet, a mnemonic **used only for testing** is often placed within the test _in plain text_.
Fortunately, the [Mnemonic wallet provider](../fundamentals/supported-wallets.md#mnemonic) solves this problem, but at a heavy cost to the security of the accounts used. The Mnemonic wallet provider allows for an account's mnemonic ("seed phrase") to be entered directly. To automate the interaction with the Mnemonic wallet, a mnemonic **used only for testing** is often placed within the test _in plain text_.

### Setting Up Mnemonic Wallet

Expand Down Expand Up @@ -77,13 +77,13 @@ const walletManager = new WalletManager({

### Setting Up Playwright

To install Playwright, follow the instructions in Playwright's documentation: <https://playwright.dev/docs/intro#installing-playwright>
To install Playwright, follow the instructions in Playwright's documentation: [https://playwright.dev/docs/intro#installing-playwright](https://playwright.dev/docs/intro#installing-playwright)

After installing Playwright, you can tweak its configuration for your project. There is an example `playwright.config.ts` file for each use-wallet example (in the [`examples/`](https://github.com/TxnLab/use-wallet/tree/main/examples) folder). For more information about how to configure Playwright, refer to its documentation: <https://playwright.dev/docs/test-configuration>
After installing Playwright, you can tweak its configuration for your project. There is an example `playwright.config.ts` file for each use-wallet example (in the [`examples/`](https://github.com/TxnLab/use-wallet/tree/main/examples) folder). For more information about how to configure Playwright, refer to its documentation: [https://playwright.dev/docs/test-configuration](https://playwright.dev/docs/test-configuration)

### Writing and Running Playwright Tests

Writing and running Playwright tests is the same for any web app, with or without use-wallet. Learn how to write and run tests in Playwright's documentation: <https://playwright.dev/docs/intro>.
Writing and running Playwright tests is the same for any web app, with or without use-wallet. Learn how to write and run tests in Playwright's documentation: [https://playwright.dev/docs/intro](https://playwright.dev/docs/intro).

There is an example Playwright E2E test in the [`examples/e2e-tests/` folder](https://github.com/TxnLab/use-wallet/tree/main/examples/e2e-tests). This single test can be run for any of the examples. To run the E2E test for an example, go to the chosen example folder (`vanilla-ts`, `react-ts`, etc.) and run `pnpm test`. For example, to run the E2E test for the vanilla TypeScript example, do the following:

Expand All @@ -94,10 +94,9 @@ pnpm test:e2e

### Best Practices for Testing with Playwright

- For more consistent and predictable tests, mock the responses of API requests. Mocking also prevents overwhelming the API provider (like [Nodely](https://nodely.io/)) with test requests. An example of mocking responses to Algorand node (Algod) API requests is in the [`examples/e2e-tests/` folder](https://github.com/TxnLab/use-wallet/tree/main/examples/e2e-tests).
- More best practices: <https://playwright.dev/docs/best-practices>
* For more consistent and predictable tests, mock the responses of API requests. Mocking also prevents overwhelming the API provider (like [Nodely](https://nodely.io/)) with test requests. An example of mocking responses to Algorand node (Algod) API requests is in the [`examples/e2e-tests/` folder](https://github.com/TxnLab/use-wallet/tree/main/examples/e2e-tests).
* More best practices: [https://playwright.dev/docs/best-practices](https://playwright.dev/docs/best-practices)

## References
[^1]: [End To End Testing: Tools, Types & Best Practices (BrowserStack)](https://www.browserstack.com/guide/end-to-end-testing)

[^1]: <https://www.browserstack.com/guide/end-to-end-testing>
[^2]: <https://en.wikipedia.org/wiki/System_testing>
[^2]: [System testing (Wikipedia)](https://en.wikipedia.org/wiki/System_testing)

0 comments on commit e7b71ee

Please sign in to comment.