Skip to main content
Version: 20.05

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-agreed with the server-side interface to simulate request data and even logic, the front-end development can be independent, and it will not be blocked by the development of the server.

Using the request Interceptor

Worksapces 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 cleint 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 npm run start will match the configuration file to match the request path and method. If it matches, the request will be processed through configuration.