Skip to content

Commit

Permalink
saving work
Browse files Browse the repository at this point in the history
  • Loading branch information
@sigdestad
sigdestad committed Apr 19, 2024
1 parent 298aff8 commit b50f675
Show file tree
Hide file tree
Showing 6 changed files with 124 additions and 45 deletions.
48 changes: 43 additions & 5 deletions docs/client-side.adoc
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
= Client side
:sourcedir: ../

== Install Node modules
This chapter covers setting up and running client-side tests

[source, shell]
== Node modules

For this example, we're going to need some more modules.

[source, Terminal]
----
npm install --save-dev react react-dom react-test-renderer @types/react
----
Expand All @@ -14,7 +18,7 @@ npm install --save-dev react react-dom react-test-renderer @types/react

== Source code

Let's write a test for the following functional React component:
Here is the react component we will be testing:

.src/main/resources/assets/js/HelloWorld.tsx
[source, typescript]
Expand All @@ -24,14 +28,48 @@ include::{sourcedir}src/main/resources/assets/js/HelloWorld.tsx[]

== Test

Adding the following test will let us test the component:

.src/jest/client/HelloWorld.test.tsx
[source, typescript]
----
include::{sourcedir}src/jest/client/HelloWorld.test.tsx[]
----

== Output

Run the test, and see what happens:

npm test src/jest/client/HelloWorld.test.tsx

[source, Terminal]
----
> [email protected] test
> jest --no-cache --coverage src/jest/client/HelloWorld.test.tsx
PASS CLIENT src/jest/client/HelloWorld.test.tsx
HelloWorld
✓ should render (11 ms)
----------------|---------|----------|---------|---------|-------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
----------------|---------|----------|---------|---------|-------------------
All files | 100 | 100 | 100 | 100 |
HelloWorld.tsx | 100 | 100 | 100 | 100 |
----------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 2.1 s
Ran all test suites matching /src\/jest\/client\/HelloWorld.test.tsx/i.
----


== Summary

In this guide, we have learned how to write a test for a React component using Jest and React Test Renderer.
You have now seen how to write a test for a React component using Jest and React Test Renderer.

Now that we have some tests, it may be useful to store coverage reports in a tool that can show progress over time.
One such tool is Codecov.

Now that there exists some tests, it may be useful to store coverage reports in a tool that can show progress over time. One such tool is Codecov. The following tutorial will show you how to integrate link:coverage[Codecov] with your project.
The following chapter will show you how to integrate link:coverage[Codecov] with your project.
19 changes: 7 additions & 12 deletions docs/codecov.adoc
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
= Codecov
:toc: right

https://about.codecov.io/[Codecov,window=_blank,opts=nofollow] is a nice reporting tool that can be used to visualize your test coverage over time and across multiple projects. It integrates nicely with GitHub and other CI/CD tools.
Discover how to see test progress over time usig Codecov

== Intro

https://about.codecov.io/[Codecov^] is a nice reporting tool that can be used to visualize your test coverage over time and across multiple projects. It integrates nicely with GitHub and other CI/CD tools.

== Command line

To get a nice test coverage report when running tests, simply add the `--coverage` option:
To get a test coverage report when running tests, simply add the `--coverage` option:

[source, shell]
----
Expand All @@ -15,14 +18,7 @@ npx jest --coverage

== package.json

To get test coverage report every time you run
[source, shell]
----
npm test
----
just add the `--coverage` option in the `package.json` 's `scripts` section like this:
To get a coverage report every time you run `npm test`. Add the `--coverage` option in the `package.json` `scripts` section like this:

.package.json
[source, json]
Expand All @@ -37,7 +33,6 @@ just add the `--coverage` option in the `package.json` 's `scripts` section like
This also enables the `npm test` in the <<#github_action, Github action>> below to produce a coverage report for <<#codecov, Codecov>>.


== GitHub action

Here is an example of how to set up a GitHub action to automatically send your test coverage to Codecov:
Expand Down Expand Up @@ -81,4 +76,4 @@ jobs:

With the above setup, you will get a nice test coverage report every time you run `npm test` and also every time you push to GitHub. The report will be sent to Codecov where you can visualize it and track your progress over time.

The next tutorial will show how to link:colocate[colocate] tests with the source code they test.
The final chapter will demonstrate how to link:colocate[colocate] tests with the source code.
13 changes: 11 additions & 2 deletions docs/colocation.adoc
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
= Colocation

In this tutorial all tests have been placed under `src/jest`, separated away from the source code. It is possible to place the tests in the same directory as the source code, but it has some drawbacks:
Optionally place tests next to your source code file

== Intro

So far, all tests have been placed under `src/jest`, cleanly separated from the source code. It is possible to place the tests in the same directory as the source code, but it has some drawbacks and complexity.

We will cover it all in this chapter.

== Jest configuration

Expand Down Expand Up @@ -40,7 +46,7 @@ const serverSideConfig: Config.InitialProjectOptions = {

== Build system

In this tutorial tsup is used to build the sources. If the tests are placed in the same directories as the source code, the build system will process the tests as normal source code. This is not what we want. We want the build system to ignore the tests.
So far, we have been using Tsup to build the sources. If the tests are placed in the same directories as the source code, the build system will process the tests as source code. This is not what we want. We want the build system to ignore the tests.

This can be done by adding the test files as ignore patterns in the tsup configuration files.

Expand Down Expand Up @@ -223,3 +229,6 @@ import {
} from '@jest/globals';
----

== Summary

That wraps up this tutorial, we hope you enjoyed it - Visit https://developer.enonic.com/docs/tutorials[the turoials section^] on the developer portal for more.
2 changes: 1 addition & 1 deletion docs/index.adoc
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
= Testing XP apps with Jest
= Testing with Jest and Mock XP
:toc: right
:experimental:
:sourcedir: ../
Expand Down
63 changes: 45 additions & 18 deletions docs/mock-xp.adoc
View file
Original file line number Diff line number Diff line change
@@ -1,61 +1,88 @@
= Mock XP
:sourcedir: ../

In this chapter we introduce the Mock XP library.
In this chapter we introduce Mock XP

== Introduction

When it comes to mocking more complex things (such as interaction with Content and Node APIs) Enonic has a library called `@enonic/mock-xp` that can help you with some of the heavy lifting.
When it comes to mocking more complex things (such as interaction with Content and Node APIs) Enonic has an NPM module called `@enonic/mock-xp` that can help you with some of the heavy lifting.

== Install Mock XP

Run the following command to install it:

[source, shell]
----
npm install --save-dev @enonic/mock-xp
----

== Source code

Let's add a test for the following controller:
Let's use the following controller file:

.src/main/resources/controllers/preview.ts
[source, typescript]
[source, TypeScript]
----
include::{sourcedir}src/main/resources/controllers/preview.ts[]
----

== Tests

In this test `mock-xp` is used to set up a project repo, a person folder, a couple of images, and a couple content items (of type `person`) which reference the images.

In order for the test file to not become overly large, it's been split it into smaller parts:

=== Mock Portal Library
In addition, mock-xp's `Log` is used to get nice colorful logging. In order for `libPortal.getContent()` to work, `request` property is set on the `libPortal` object.

TODO: What does this do?
For the test file to not become overly large, it's been split it into smaller parts:

.src/jest/server/mockXP.ts
[source, typescript]
----
include::{sourcedir}src/jest/server/mockXP.ts[]
----

=== The test
.src/jest/server/preview.test.ts
[source, typescript]
----
include::{sourcedir}src/jest/server/preview.test.ts[]
----

In this test `mock-xp` is used to set up a project repo, a person folder, a couple of images, and a couple content items (of type `person`) which reference the images.
== Output

In addition, mock-xp's `Log` is used to get nice colorful logging.
Running the test produces the glorious result:

In order for `libPortal.getContent()` to work, `request` property is set on the `libPortal` object.
npm test src/jest/server/preview.test.ts

.src/jest/server/preview.test.ts
[source, typescript]
[source, Terminal]
----
include::{sourcedir}src/jest/server/preview.test.ts[]
> [email protected] test
> jest --no-cache --coverage src/jest/server/preview.test.ts
PASS SERVER src/jest/server/preview.test.ts
preview
✓ is able to render a page for Léa Seydoux (26 ms)
✓ is able to render a page for Jeffrey Wright
----------------------------|---------|----------|---------|---------|-------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
----------------------------|---------|----------|---------|---------|-------------------
All files | 100 | 54.54 | 100 | 100 |
jest/server | 100 | 100 | 100 | 100 |
mockXP.ts | 100 | 100 | 100 | 100 |
main/resources/controllers | 100 | 16.66 | 100 | 100 |
preview.ts | 100 | 16.66 | 100 | 100 | 16-34
----------------------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests: 2 passed, 2 total
Snapshots: 0 total
Time: 1.839 s
Ran all test suites matching /src\/jest\/server\/preview.test.ts/i.
----


== Summary

This guide, showed how to write tests for Enonic XP applications using Jest in combination with Mock XP.
This chapter demonstrated how to write tests using Jest in combination with Mock XP.

Mock XP was used to mock the Enonic XP *portal* API.
Mock XP was used to mock the Enonic https://developer.enonic.com/docs/xp/stable/api/lib-content[content^] and https://developer.enonic.com/docs/xp/stable/api/lib-portal[portal^] APIs.

The next tutorial will show how to write a link:client-side[client-side] test for an Enonic XP application.
Coming up, we demonstrate how to write a link:client-side[client-side] test.
24 changes: 17 additions & 7 deletions docs/setup.adoc
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,33 @@
= Setup
:sourcedir: ../

Setting up Jest in your Enonic project
This chapter covers setting up Jest for your Enonic app

== Sample project

You may follow the steps in this guide to configure Jest for an existing project. For simplicity, we will base this tutorial on the Enonic intro app.

To create a project for the tutorial, run the following command:

enonic project create com.example.tutorial.jest -r tutorial-intro -d jest-tutorial

This will create an app and place it in a folder called `jest-tutorial`.


== Node modules

In order to write tests in Typescript and run them using Jest, a bunch of node modules needs to be installed.
In order to write tests in TypeScript and run them using Jest, a bunch of node modules needs to be installed.

Run the following command at the root of your project:
Run the following command at the root of the Enonic project:

[source, shell]
[source, Terminal]
----
npm install --save-dev jest-environment-jsdom ts-node ts-jest
----

== Configuration

Next, you will need to add and tune a set of configuration files:

Next, you will need to add and tune a few configuration files:

=== jest.config.ts

Expand Down Expand Up @@ -51,7 +61,7 @@ include::{sourcedir}src/jest/server/tsconfig.json[]

== Execution

Finally, we wire the test commands to execute Jest
Finally, we wire the test command to execute Jest

=== package.json

Expand Down

0 comments on commit b50f675

Please sign in to comment.