Testing

Testing

First you need to start the supertokens-core (See Contributing guidelines).

cd ../supertokens-core
./startTestingEnv --wait

Then run

npm run test

Test Architecture

.
├── end-to-end // End to end tests relying on the "react-test-app" with the "server"
│   ├── resetpasswordusingtoken.test.js
│   ├── routing.test.js
│   ├── signin.test.js
│   └── signup.test.js
├── react-test-app // Used for development and for testing
│   ├── node_modules
│   ├── src
│   └── package.json
├── server // Base NodeJS server that connects to the "core"
│   ├── node_modules
│   ├── index.js
├── unit // Unit tests
├── constants.js
├── helpers.js // Contains a bunch of Puppeteer helpers to interact with the test application.
└── startTestApp.sh // Script to start the tests (after running the test app and the server)

Here is what happens when running the npm run test command:

• Run ./test/startTestApp.sh --test script.
  1. Kill all servers running on 3031 or 8080 if any.
  2. Run node server in background.
  3. Start by renaming some node_modules while the front end application spins up to avoid library clashes (See Development Wiki > Conflicting Libraries)
  4. Run the startTests method in background. 4.1 Wait for the front end application to be up (Wait on 5. to be complete) 4.2 Now that the front end application is up
     Move back clashing node_module so that unit tests can run properly 4.3. Run mocha tests 4.4. Clean up (kill 3031 and 8080 ports) 4.5. Return test status (for CI/CD)
  5. Run the front end application (Hide all related logs) 5.1 Start 5.2. Trigger 4.2

Helpers

Any interaction with DOM elements in the tests are extracted to a test/helpers.js file. This file contains Puppeteer abstractions to interact with supertokens-auth-react elements:

Example methods:

• submitForm
• getForgotPasswordLink
• getFieldErrors
• setInputValues
• getSubmitFormButtonLabel
• ...

Any time you need to interact with DOM elements in end to end testing, it is good practice to create a helper. That makes tests easier to read and implement.

Testing callback props

In order to test callback props, tests are interacting with the /custom/auth/** routes defined in the react-test-app. All the callbacks are used in the two feature widgets SignInAndUp and ResetPasswordUsingToken. A front end lightweight implementation of authentication was made and anytime we call one of those callback, a console.log line is added starting with ST_CALLBACKS. This is what the tests assert to make sure that the callbacks where called properly.