feat: dox++

website/docs/introduction.mdx

@@ -9,7 +9,7 @@ slug: /
 
 💸 Save time and money and don't duplicate effort. Instead, **lean on infrastructure that already exists** to solve your problems.
 
-💥 Ready for more? Use **advanced features** like [inter-node socket communication](./sockets#intercom).
+💥 Ready for more? Use **advanced features** like [running flecks on your toaster](#todo)
 
 🧐 Flecks is an **exceptionally-extensible fullstack application production system**. Its true purpose
 is to make application development a more joyful endeavor. Intelligent defaults combined with
@@ -22,22 +22,23 @@ flecks is built with supreme attention to the developer and end-user experience.
 
 - 🧩 **Small but pluggable**
   - The simplest application is two flecks, `core` and `server`: you don't pay for what you don't buy
-  - Endlessly configurable through built-in [hooks](./flecks/@flecks/dox/hooks) and then your own
-  - Less exposed wires (though you could always help by [submitting a pull request](https://github.com/cha0s/flecks/compare)).
-- 🛠️ **Ready to build maintainable and performant production applications**
-  - [Documentation website](./documentation) generation for your project with no fuss
+  - Endlessly configurable through built-in hooks and then your own
+- 🛠️ **Ready to build real applications**
+  - [Documentation website generator](./documentation)
   - [Write tests](./testing), run on server/in browser/...
   - [React](#todo) / [redux](#todo)
   - [Realtime sockets](./sockets) with lots of goodies like binary packing and packet dispatching
-  - [Databases](./database) using [Sequelize](https://sequelize.org/) to connect and [Docker](https://www.docker.com/) to easily persist
-  - [Electron](#todo)
-  - [Docker](#todo)
+  - [Database](./database)
+  - [electron](#todo)
+  - [docker](#todo)
   - [REPL](#todo)
   - babel + Webpack 5
 - 👷 **Developers, developers, developers**
-  - Easy to create a fleck; no need to publish packages or use voodoo
+  - 🪄 Easy to create a fleck; no need to publish packages or use voodoo
   - HMR (even on the server)
-  - Configured to get instantly up and running with a consistent path toward production
+  - [redux slices](https://redux-toolkit.js.org/api/createslice/) provided through hook!
+  - Easily spin up a database or redis server ([or...](/docs/flecks/@flecks/dox/hooks#flecksdockercontainers)) using [Docker](#todo) during development, and generate a `Dockerfile` and `docker-compose.yml` automatically for production
+  - Small hookable core means less exposed wires. You could always help by [submitting a pull request](https://github.com/cha0s/flecks/compare) though.
 
 Our shared goal—to help you quickly develop your application. We share our best practices to help you build your application right and well.
 

website/docs/testing.mdx

@@ -5,3 +5,179 @@ description: Easily test your code across platforms.
 
 # Testing
 
+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.