2024-01-06 21:00:55 -06:00
|
|
|
---
|
|
|
|
title: Testing
|
2024-01-06 21:07:06 -06:00
|
|
|
description: Easily test your code across platforms.
|
2024-01-06 21:00:55 -06:00
|
|
|
---
|
|
|
|
|
|
|
|
# Testing
|
|
|
|
|
2024-01-07 15:33:35 -06:00
|
|
|
flecks uses Mocha and Chai to run your tests.
|
|
|
|
|
|
|
|
Let's create a small test application to illustrate how testing works in flecks:
|
|
|
|
|
|
|
|
```
|
|
|
|
npx @flecks/create-app testing
|
|
|
|
```
|
|
|
|
|
|
|
|
Move into your new project directory and create a fleck:
|
|
|
|
|
|
|
|
```
|
|
|
|
npx @flecks/create-fleck unit
|
|
|
|
```
|
|
|
|
|
|
|
|
You will notice a line in the output:
|
|
|
|
|
|
|
|
```
|
|
|
|
No fleck tests found.
|
|
|
|
```
|
|
|
|
|
|
|
|
flecks is trying to run the tests for the fleck, but none exist by default. Let's add some code
|
|
|
|
and then add some tests to verify that it works.
|
|
|
|
|
|
|
|
Edit `packages/unit/src/index.js` to add some code:
|
|
|
|
|
|
|
|
```javascript title="packages/unit/src/index.js"
|
|
|
|
export const add2 = (n) => n + 2;
|
|
|
|
|
|
|
|
export const add3 = (n) => n + 3;
|
|
|
|
```
|
|
|
|
|
|
|
|
Now create a `packages/unit/test` directory and add a source file `add2.js` inside:
|
|
|
|
|
|
|
|
```javascript title="packages/unit/test/add2.js"
|
|
|
|
import {expect} from 'chai';
|
|
|
|
|
|
|
|
const {add2} = require('@testing/unit');
|
|
|
|
|
|
|
|
it('can add two to a number', () => {
|
|
|
|
// highlight-next-line
|
|
|
|
expect(add2(2)).to.equal(5);
|
|
|
|
});
|
|
|
|
```
|
|
|
|
|
|
|
|
:::note
|
|
|
|
|
|
|
|
We intentionally made an error so we can see what a failed test looks like.
|
|
|
|
|
|
|
|
:::
|
|
|
|
|
|
|
|
Now run the following command **from within `packages/unit`**:
|
|
|
|
|
|
|
|
```bash
|
|
|
|
npm run test
|
|
|
|
```
|
|
|
|
|
|
|
|
You will see the following output:
|
|
|
|
|
|
|
|
```
|
|
|
|
1) can add two to a number
|
|
|
|
|
|
|
|
0 passing (11ms)
|
|
|
|
1 failing
|
|
|
|
|
|
|
|
1) can add two to a number:
|
|
|
|
|
|
|
|
AssertionError: expected 4 to equal 5
|
|
|
|
+ expected - actual
|
|
|
|
|
|
|
|
-4
|
|
|
|
+5
|
|
|
|
```
|
|
|
|
|
|
|
|
It caught the error! Let's fix it up:
|
|
|
|
|
|
|
|
```javascript title="packages/unit/test/add2.js"
|
|
|
|
import {expect} from 'chai';
|
|
|
|
|
|
|
|
const {add2} = require('@testing/unit');
|
|
|
|
|
|
|
|
it('can add two to a number', () => {
|
|
|
|
// highlight-next-line
|
|
|
|
expect(add2(2)).to.equal(4);
|
|
|
|
});
|
|
|
|
```
|
|
|
|
|
|
|
|
and try again:
|
|
|
|
|
|
|
|
```bash
|
|
|
|
npm run test
|
|
|
|
```
|
|
|
|
|
|
|
|
```
|
|
|
|
✓ can add two to a number
|
|
|
|
|
|
|
|
1 passing (4ms)
|
|
|
|
```
|
|
|
|
|
|
|
|
flecks also allows you to write tests that only target a specific platform. Let's add a webserver
|
|
|
|
and then write a test that only runs for the client:
|
|
|
|
|
|
|
|
:::warning
|
|
|
|
|
|
|
|
Make sure you run the following command in your **project directory**, not the `packages/unit`
|
|
|
|
directory.
|
|
|
|
|
|
|
|
:::
|
|
|
|
|
|
|
|
```bash
|
|
|
|
npx flecks add @flecks/web
|
|
|
|
```
|
|
|
|
|
|
|
|
Now, let's add a test. We add a client test by adding a `platforms/client` directory to our `test`
|
|
|
|
directory and putting tests there:
|
|
|
|
|
|
|
|
```javascript title="packages/unit/test/platforms/client/add3.js"
|
|
|
|
import {expect} from 'chai';
|
|
|
|
|
|
|
|
const {add3} = require('@testing/unit');
|
|
|
|
|
|
|
|
it('can add three to a number', () => {
|
|
|
|
// highlight-next-line
|
|
|
|
expect(add3(2)).to.equal(6);
|
|
|
|
});
|
|
|
|
```
|
|
|
|
|
|
|
|
:::note
|
|
|
|
|
|
|
|
We intentionally made a mistake again to show a test failure.
|
|
|
|
|
|
|
|
:::
|
|
|
|
|
|
|
|
Now start your application:
|
|
|
|
|
|
|
|
```bash
|
|
|
|
npm start
|
|
|
|
```
|
|
|
|
|
|
|
|
Visit your website in the browser and you will see:
|
|
|
|
|
|
|
|
![A screenshot of a browser showing the test runner page with our test failing](./flecks-test-client-failed.png)
|
|
|
|
|
|
|
|
The test is failing! That's what we expected.
|
|
|
|
|
|
|
|
Now, edit your client test to fix it:
|
|
|
|
|
|
|
|
```javascript title="packages/unit/test/platforms/client/add3.js"
|
|
|
|
import {expect} from 'chai';
|
|
|
|
|
|
|
|
const {add3} = require('@testing/unit');
|
|
|
|
|
|
|
|
it('can add three to a number', () => {
|
|
|
|
// highlight-next-line
|
|
|
|
expect(add3(2)).to.equal(5);
|
|
|
|
});
|
|
|
|
```
|
|
|
|
|
|
|
|
Save the file. If you still have your application running, go look at the page. You'll notice that
|
|
|
|
**it updated automatically** to look like:
|
|
|
|
|
|
|
|
![A screenshot of a browser showing the test runner page with our test passing](./flecks-test-client-passed.png)
|
|
|
|
|
|
|
|
Awesome, everything passes!
|
|
|
|
|
|
|
|
:::info[Sanity check]
|
|
|
|
|
|
|
|
If you run `npm run test` in your `packages/unit` directory, you will see that only one test was
|
|
|
|
run:
|
|
|
|
|
|
|
|
```
|
|
|
|
✓ can add two to a number
|
|
|
|
|
|
|
|
1 passing (3ms)
|
|
|
|
```
|
|
|
|
|
|
|
|
That's correct; we only run client tests on the client.
|