Fixtures

Mock data is an indispensable part of the front-end development process, and it is the key link separating front-end and back-end development. By pre-agreement with the server-side interface to simulate request data and logic, front-end development can be conducted independently of server development without being blocked.

Using the request Interceptor

Workspaces 20.05 comes with a fake server that runs in the browser. It intercepts any XMLHttpRequest or fetch requests your JavaScript app makes and lets you mock the response. That means you can develop and test your app just as if it were talking to a real server. In addition to intercepting HTTP requests, For more details see MirageJS.

Because our mock server runs on the client, by importing @transact-open-ux/workspaces/dist/Server into your project and passing your fixtures to makeServer, you get support for live refresh based on import dynamic analysis and friendly error messages.

src/index.ts

import 'dayjs/locale/en';
import App from '@transact-open-ux/workspaces/dist/App';
import configs from './configs/development';
import messages from './locales/en';

const root = document.getElementById('root');

export default async function init() {
  if (process.env.NODE_ENV === 'development') {
    const { default: fixtures } = await import('./fixtures/development');
    const { default: makeServer } = await import('@transact-open-ux/workspaces/dist/Server');
    // start server
    makeServer({
      fixtures,
    });
  }
  // Start only the client if production
  App(root, configs, messages, 'en');
}

init();

src/fixtures/default/index.ts

import txnQuery from './txn/query';
import txnCount from './txn/count';
import txnCancel from './txn/cancel';
import txnReopen from './txn/reopen';
import txnAssign from './txn/assign';
import txnUnassign from './txn/unassign';
import txnComment from './txn/comment';
import userQuery from './user/query';
import jobQuery from './job/query';
import formQuery from './form/query';
import spaceQuery from './space/query';
import currentUserQuery from './currentUser/query';
import currentUserProfileUpdate from './currentUser/profile-update';
import currentUserPreferencesUpdate from './currentUser/preferences-update';

export default {
  txnQuery,
  txnCount,
  txnCancel,
  txnReopen,
  txnAssign,
  txnUnassign,
  txnComment,
  userQuery,
  jobQuery,
  formQuery,
  spaceQuery,
  currentUserQuery,
  currentUserProfileUpdate,
  currentUserPreferencesUpdate,
};

When the client (browser) sends a request, such as: POST /workspaces/secure/api/v1/current-user/query, then the locally launched yarn run start will match the configuration file to match the request path and method. If it matches, the request will be processed through configuration.