/todo-react-typescript-subsecond

Tiny Todo app in React and TypeScript demonstrating sub-second test feedback

Primary LanguageTypeScriptMIT LicenseMIT

todo-react-typescript-subsecond

Tiny Todo app in React and TypeScript demonstrating sub-second test feedback

Start the app

npm start

Run tests

npm test

Run tests in a particular assembly

# Look for possible values in features/support/TodoWorld.ts
ASSEMBLY=... ./cucumber

Run Cucumber-Electron interactively

ASSEMBLY=react ./cucumber -i

Keep each actor's DOM (omit cleaning up)

ASSEMBLY=react KEEP_DOM=1 ./cucumber -i

Run on CBT

Make sure you've built the client-side JavaScript:

npm run build

Define your CBT credentials:

export CBT_USERNAME=...
export CBT_AUTHKEY=...

Run with a specific browser:

ASSEMBLY=webdriver BROWSER=MicrosoftEdge CBT=1 CBT_VERSION=79 ./cucumber
ASSEMBLY=webdriver BROWSER=chrome CBT=1 CBT_VERSION=55 ./cucumber

Patterns

Test code

  • Step definitions only interact with an actor
    • No information about UI or technology "leaks" through its API
    • There are multiple implementations of IActor
  • Then steps are synchronous
    • It's previous steps' responsibility to ensure the system is in a "settled" state
    • The ReactActor and WebDriverActor implementation uses @cucumber/microdata to query the DOM
  • Optimisations
    • Run webpack before Webdriver (takes time to run webpack)
    • Reuse "heavy" resources between scenarios
      • The same WebDriver browser instance (takes time to launch a new browser)
      • The same CBT tunnel (takes time to connect)

Production code

  • The React app is completely decoupled from the network (HTTP)
    • React hooks for writing/reading data to/from the server - defined as custom types
    • Different implementations of these hooks - HTTP and direct in-memory access
    • The hook implementatins are injected into the React app during assembly