* Add deep dive documentation for `tests/web.rs` of the `wasm-pack-template` * Add docs for testing a project in addition to building * Touch up other documentation int he deep dive and setup * Fix a few dead links and moved pages and suchmaster
parent
15974fec17
commit
688c9b19a1
@ -1,24 +0,0 @@ |
||||
# Building your package |
||||
|
||||
We've written our code so now we need to package it all up. |
||||
|
||||
We are writing a package that should be used in the browser, so we run this in our terminal: |
||||
|
||||
```bash |
||||
$ wasm-pack build --scope MYSCOPE |
||||
``` |
||||
|
||||
If you were writing a package that should be used in Node.js (with CommonJS modules, e.g. `require`), |
||||
you would run this in your terminal: |
||||
|
||||
```bash |
||||
$ wasm-pack build --scope MYSCOPE --target nodejs |
||||
``` |
||||
|
||||
where `MYSCOPE` is your npm username. Normally you could just type `wasm-pack init` but since |
||||
other people are doing this tutorial as well we don't want conflicts with the `wasm-add` package |
||||
name! This command when run does a few things: |
||||
|
||||
1. It'll compile your code to wasm if you haven't already |
||||
2. It'll generate a pkg folder with the wasm file, a JS wrapper file around the wasm, your README, |
||||
and a `package.json` file. |
@ -0,0 +1,23 @@ |
||||
# Building your project |
||||
|
||||
We've written our code so now we need to build it. |
||||
|
||||
We are writing a crate that should be used in the browser, so we run this in |
||||
our terminal: |
||||
|
||||
```bash |
||||
$ wasm-pack build |
||||
``` |
||||
|
||||
If you were writing a package that should be used in Node.js (with CommonJS |
||||
modules, e.g. `require`), you would run this in your terminal: |
||||
|
||||
```bash |
||||
$ wasm-pack build --target nodejs |
||||
``` |
||||
|
||||
This command when run does a few things: |
||||
|
||||
1. It'll compile your code to wasm if you haven't already |
||||
2. It'll generate a `pkg` folder with the wasm file, a JS wrapper file around |
||||
the wasm, your README, and a `package.json` file. |
@ -1,10 +0,0 @@ |
||||
# Project Setup |
||||
|
||||
In this section, how to setup a `wasm-pack` project. |
||||
|
||||
There are a few things you need to do to setup a project for `wasm-pack`. |
||||
We strongly recommending [using a template], but you can also set the project |
||||
up [manually]. |
||||
|
||||
[using a template]: ./using-a-template.html |
||||
[manually]: ./manual-setup.html |
@ -1,21 +0,0 @@ |
||||
# Using a Template |
||||
|
||||
You can create a new Rust-WebAssembly project by using the [rustwasm wasm-pack-template]. |
||||
|
||||
To so do, you'll need the `cargo-generate` tool. To install `cargo-generate`: |
||||
|
||||
``` |
||||
cargo install cargo-generate |
||||
``` |
||||
|
||||
Then run: |
||||
|
||||
``` |
||||
cargo generate --git https://github.com/rustwasm/wasm-pack-template |
||||
``` |
||||
|
||||
You will be prompted to give your project a name. Once you do, you will have a directory |
||||
with a new project, ready to go. We'll talk about what's been included in this template |
||||
further in this guide. |
||||
|
||||
[rustwasm wasm-pack-template]: https://github.com/rustwasm/wasm-pack-template |
@ -1 +0,0 @@ |
||||
# Template Deep Dive |
@ -0,0 +1,74 @@ |
||||
# tests/web.rs |
||||
|
||||
`web.rs` is an integration test [defined with Cargo][cargo-tests] that is |
||||
intended to be run in a headless web browser via the `wasm-pack test` command. |
||||
|
||||
[cargo-tests]: https://doc.rust-lang.org/cargo/guide/tests.html |
||||
|
||||
It contains three key parts: |
||||
|
||||
1. [`#[wasm_bindgen_test] functions`](#a1-wasm_bindgen_test-functions) |
||||
2. [Crate Configuration](#a2-crate-configuration) |
||||
3. [`#![cfg]` directives](#a3-cfg-directives) |
||||
|
||||
--- |
||||
|
||||
## 1. `#[wasm_bindgen_test]` functions |
||||
|
||||
The `#[wasm_bindgen_test]` is like the [normal Rust `#[test]` |
||||
attribute][rust-test], except it defines a test accessible to WebAssembly and |
||||
headless web browser testing. |
||||
|
||||
> **Note**: Eventually `#[test]` will work with WebAssembly as well! Currently |
||||
> though [custom test frameworks][ctf] are not stable. |
||||
|
||||
[rust-test]: https://doc.rust-lang.org/book/ch11-01-writing-tests.html |
||||
[ctf]: https://github.com/rust-lang/rust/issues/50297 |
||||
|
||||
```rust |
||||
#[wasm_bindgen_test] |
||||
fn pass() { |
||||
assert_eq!(1 + 1, 2); |
||||
} |
||||
``` |
||||
|
||||
Here the `pass` function is a unit test which asserts that arithmetic works in |
||||
WebAssembly like we'd expect everywhere else. If the test panics (such as the |
||||
`assert_eq!` being false) then the test will fail, otherwise the test will |
||||
succeed. |
||||
|
||||
The [reference documentation for `#[wasm_bindgen_test]`][wbg-test] should have |
||||
more information about defining these tests. |
||||
|
||||
[wbg-test]: https://rustwasm.github.io/docs/wasm-bindgen/wasm-bindgen-test/index.html |
||||
|
||||
## 2. Crate Configuration |
||||
|
||||
Other than the test in this module, we'll also see: |
||||
|
||||
```rust |
||||
use wasm_bindgen_test::*; |
||||
|
||||
wasm_bindgen_test_configure!(run_in_browser); |
||||
``` |
||||
|
||||
Like we saw earlier in `src/lib.rs` the `*` import pulls in everything from |
||||
`wasm_bindgen_test`, notably the `wasm_bindgen_test_configure` macro and the |
||||
`wasm_bindgen_test` attribute. |
||||
|
||||
The `wasm_bindgen_test_configure` macro (denoted by ending in `!`) is used to |
||||
indicate that the test is intended to execute in a web browser as opposed to |
||||
Node.js, which is the default. |
||||
|
||||
## 3. `#![cfg]` directives |
||||
|
||||
The last part we'll notice about this crate is this statement at the top: |
||||
|
||||
```rust |
||||
#![cfg(target_arch = "wasm32")] |
||||
``` |
||||
|
||||
This statement means that the test is only intended for the `wasm32` |
||||
architecture, or the `wasm32-unknown-unknown` target. This enables `cargo test` |
||||
to work in your project if the library is also being developed for other |
||||
platforms by ensuring that these tests only execute in a web browser. |
@ -0,0 +1,45 @@ |
||||
# Testing your project |
||||
|
||||
Now after writing and building code, let's actually execute it! You can execute |
||||
tests with: |
||||
|
||||
```bash |
||||
$ wasm-pack test --firefox |
||||
[INFO]: Checking for the Wasm target... |
||||
Finished dev [unoptimized + debuginfo] target(s) in 0.02s |
||||
Running target/wasm32-unknown-unknown/debug/deps/web-9e7d380f8600b08e.wasm |
||||
Interactive browsers tests are now available at http://127.0.0.1:8000 |
||||
|
||||
Note that interactive mode is enabled because `NO_HEADLESS` |
||||
is specified in the environment of this process. Once you're |
||||
done with testing you'll need to kill this server with |
||||
Ctrl-C. |
||||
``` |
||||
|
||||
The console won't finish just yet, but as indicated you can visit |
||||
http://127.0.0.1:8000 in your web browser to see the test output: |
||||
|
||||
``` |
||||
running 1 test |
||||
|
||||
test web::pass ... ok |
||||
|
||||
test result: ok. 1 passed; 0 failed; 0 ignored |
||||
``` |
||||
|
||||
and we've now executed our first tests in a web browser! |
||||
|
||||
If you'd like to execute tests in a headless web browser (you don't need to |
||||
manually visit a page) you can do: |
||||
|
||||
```bash |
||||
$ wasm-pack test --headless --firefox |
||||
``` |
||||
|
||||
and similarly if you're developing a project for Node.js you can also execute |
||||
`wasm-pack test --nodejs` to run tests in Node. |
||||
|
||||
Be sure to see the [testing reference documentation][testing-reference] for |
||||
other supported features as well! |
||||
|
||||
[testing-reference]: https://rustwasm.github.io/docs/wasm-bindgen/wasm-bindgen-test/index.html |
Loading…
Reference in new issue