Running in dev environment (mock data)

Run you app locally on your computer using customisable mock data.

Most of the time, you'll want to develop your app in isolation. The apps SDK comes with an environment to make this really easy to do. All you need to do is start the local dev server.

> yarn start
Starting the development server...
...
  Local:            http://localhost:31080/dev.html
...

Copy and paste the URL to dev.html in your browser and that's it.

Mock Data

The dev environment uses mocked data for API calls such as getting the current user, getting a ticket, or doing CORS requests.

The create-react-app setup script installs a default set of data to:test/integration/helpdeskScenarios/default.js

The default scenario comes with a lot of useful default data and most apps might not even need to modify the data at all. But if your app requires specific information (i.e. maybe your app requires a helpdesk with specific custom fields), then you can add your own scenarios.

Scenarios

A scenario is a collection of IDs that represent API calls. These IDs are mapped to an object literal, or a function that is expected to return an object -- we call these providers.

Every provider is expected to return a certain object in a certain shape. You should refer to the default.js scenario to see what provider functions get passed and what they need to return.

Let's create a new scenario file:

to:test/integration/helpdeskScenarios/myScenario.js

import { addScenario } from '@deskpro/apps-sdk/lib/Testing';

addScenario('myScenario', {
  'context.me_get': {
    body: {
      id: 1,
      email: '[e-mail]',
      name: 'John Smith',
    },
    status: 'success',
  },

  'context.property.get': function({ path, type }) {
    const fullPath = path.join('.');
    const ticket = {
      id: 1,
      subject: "Foo",
      person: {
        id: 55,
        name: "Jane"
      }
    }
    
    let body;
    if (fullPath === 'ticket') {
      body = ticket;
    } else if (fullPath === 'ticket.person') {
      body = ticket.person;
    }

    return body ? {
      body: body,
      status: 'success',
    } : {
      body: null,
      status: 'error'
    }
  }
}

• On line 3 we register a new scenario.

• On line 4 we map the API request for dpapp.context.getMe() to be an object literal.

• On line 13 we map the API request for dpapp.context.get() which might be something like dpapp.context.get('ticket') or dpapp.context.get('ticket.person')

You also need to import your scenario in the helpdeskStub.js file so it gets loaded:

test/integration/helpdeskStub.js

import './helpdeskScenarios/default';
import './helpdeskScenarios/myScenario';

Running your scenario

By default, when you run dev.html in your browser, it will run with the default scenario. To run with a custom scenario, specify the scenario name in the query string:

http://localhost:31080/dev.html?scenario=myScenario