esmevane

import { render } from '@testing-library/react';
import userEvents from '@testing-library/user-event';
import { useState } from 'react';

function usePassword() {
  const [password, setPassword] = useState('');
  const [show, setShow] = useState(false);

  const toggle = () => setShow((previousShowValue) => !previousShowValue);
  const update = (event: React.ChangeEvent<HTMLInputElement>) =>

esmevane

type GetKeypaths<
  GivenType,
  Filter extends string = '___!!!PLACEHOLDER!!!___'
> = GivenType extends object
  ? keyof GivenType extends string
    ? keyof GivenType extends Filter
      ? GetKeypaths<GivenType[keyof GivenType], Filter>
      :
          | keyof GivenType
          | `${keyof GivenType}.${GetKeypaths<

esmevane

App
  Checking Credentials
    Identity Present -> Home Page
    Identity Absent -> Registration
  Registration
    Check for Identity Info
      Identity Info Present -> Registration Credentials Form
      Identity Info Absent -> Identity Info Form
    Identity Info Form
      Input Identity Info -> Validating Identity Info        

esmevane

/* eslint-disable @typescript-eslint/require-await */
import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { createContext, useContext, useReducer } from 'react';

type Events = { type: 'toggle' } | { type: 'reset' };
interface EventMap {
  toggle: () => void;
  reset: () => void;
}

esmevane

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

esmevane

Touchpoint Dashboard
  Loading
    Success -> Authenticating
    Failure -> Unable to Load
  Unable to Load
    Retry -> Loading
  Authenticating
    Checking Credentials
      No Credentials -> Login
      Credentials Exist -> Verify Credentials

esmevane

Touchpoint Dashboard
  Loading*
    Success -> Authenticating
    Failure -> Unable to Load
  Unable to Load
    Retry -> Loading
  Authenticating
    Checking Credentials?
      No Credentials -> Login
      Credentials Exist -> Authenticate

esmevane

Widget&
  Async
    Pending
      Fetch -> Fetching
    Fetching
      Resolved -> Success
      Rejected -> Failure
    Success
      Fetch -> Fetching
    Failure

esmevane

import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import App, { AppContext } from './App';

const SpiesOnApp = () => {
  const context = React.useContext(AppContext);
  return <>{JSON.stringify(context)}</>;
};

test('tracks username', async () => {

esmevane

Explorer
  Uninitialized
    Rehydrate -> Ready
  Ready&
    Requesting -> Ready
    Results
      Idle
        Requesting -> Loading
      Loading
        Success -> Idle