Mocking server endpoints

[drewvolz]

This isn't a formal feature proposal. It's more of a collection of thoughts and ideas around providing an application configuration and environment variables to support mocking and switching between servers to enable easier testing and less bugs.

This is a mix of

• App config
• Environment config
  • Test vs prod endpoints
  • Feature flag config (Feature flag module #6106)

What

I don't know why we've never made mock servers for these before

I agree! We could mock the server with development-only endpoints on ccc-server (current or next), a python server, etc.

Why

• Testing login is hard (Settings attempts to login without credentials #6928)
• Testing stoprint is hard (stoprint refactor –– mock data (part 3) #6078)
• Testing account balances is hard (master...drew/demo-account)

Fragmenting the codebase with conditionals makes logic harder to follow and it can easily introduce bugs. These areas are tightly coupled to production data which makes them difficult to work on and validate that they are working correctly.

How

This probably means a refactoring for the codebase.

We should make room for an overall environment provider to indicate which endpoints and clients are needed for test versus production.

Misc thoughts

Mocked server endpoints

• Responds to localhost:3000/v1/login and redirects to frogpond's homepage
• Responds to localhost:3000/v1/login/error and redirects with error= query parameter

// @frogpond/ccci-stolaf-college/v1/index.js

// mock server
if (process.env.NODE_ENV !== 'production') {
    api.redirect('/login', 'https://stolaf.api.frogpond.tech')
    api.redirect('/login/error', 'https://stolaf.api.frogpond.tech/?error=login')
}

Endpoint creation by environment and use case?

• The implementation below tries to combine environment choice and test endpoints.
• Something needs to define which endpoints are for production and which are for test
• I'm not so sure about this implementation yet, I think it could have more separation of concerns.

// where this file lives is up for discussion

import {useEnvironment} from '@frogpond/environment'
import {client} from '@frogpond/api'

import {OLECARD_AUTH_URL} from './financials/urls'

export class NoEndpointFoundError extends Error {}
export type Environment = 'production' | 'test'
export type LoginTestScenario = 'testSuccess' | 'testFailure'

function olecardEndpoint(scenario?: LoginTestScenario) {
	if (useEnvironment().env === 'production') {
		return OLECARD_AUTH_URL
	}

	switch (scenario) {
		case 'testSuccess':
			return 'login'
		case 'testFailure':
			return 'login/error'
		default:
			console.warn(`Unexpected login scenario: ${scenario}`)
                        throw new NoEndpointFoundError('No login url provided')
	}
}

This is where things kind of devolve and break down; things are unclear.

• This is not something that should ship
• It is a demonstration of what not to do for mixing our url building, environment selecting, and client building
• Requirements: build a client and a url (per environment provider)
• Needs separation of url building and test case building (should be defined higher up in useEnvironment)

// source/lib.login.ts

export async function performLogin(...): Promise<Credentials> {
       // ...

	try {
                /**
                 * Aligning what client is and endpoint it should use is missing
                 * 
                 *  const loginResponse = await ky.post(olecardEndpoint(), ...
                 *  vs
                 *  const loginResponse = await client.post(olecardEndpoint('testFailure'), {
                 *
                 * 1. `ky` posts to anywhere (e.g. localhost:3000/v1)
                 * 2. `client` posts to the production server (ccc)
                 *
                 * Production endpoint
                 * olecardEndpoint()
                 *
                 * Test endpoints
                 * olecardEndpoint('testSuccess')
                 * olecardEndpoint('testFailure')
                 */
		let loginClient = useEnvironment().client

		let loginResponse = await loginClient.post(olecardEndpoint(), {
			body: formData,
			credentials: 'include',
			cache: 'no-store',
		})

		let responseUrl = new URL(loginResponse.url)
		if (responseUrl.href.includes('error=')) {
			throw new LoginFailedError('Login failed')
		}
	} catch(error) {
		throw new LoginFailedError('Login failed')
	}

	return {username, password}
}

Where we could see improvement

// ApplicationConfiguration.ts

import { useEffect, useState } from "react"

export interface ApplicationConfiguration {
  [key: string] : string
}

export const useConfiguration = (): [
    ApplicationConfiguration,
    React.Dispatch<ApplicationConfiguration>
  ] => {
    const [config, setConfig] = useState<ApplicationConfiguration>({})
    
    useEffect(() => {
      setConfig({ ... })
    }, [])
    
    return [config, setConfig]
  }