# Testing

## Creating a Development Sandbox

When a webview (for example the one integrated in the Stagecast app) launches a Moment, it will pass certain information to the Moment. Because we will develop and test our Moment on our locale machine first, before pushing it to a staging server, we have to create a development sandbox, which takes care of passing test data to our Moment.

To mimic the data being passed to the moment we have to retrieve an API token and some information about our moment first. Currently you have to make two POST requests to the Stagecast API manually. Feel free to use a HTTP client like Postman to make your life easier.

## Get the token

<mark style="color:green;">`POST`</mark> `https://stagecast.se/api/users/login`

First we will have to get our API token by making a login request to Stagecast’s API. Only the **`token`** property of the response will be relevant for us.

#### Request Body

| Name     | Type   | Description        |
| -------- | ------ | ------------------ |
| password | string | Your user password |
| email    | string | Your user email    |

{% tabs %}
{% tab title="200 " %}

```javascript
{
  ...
  "token": "<YOUR_API_TOKEN>"
  ...
}
```

{% endtab %}
{% endtabs %}

Next we have to retrieve the **momentID** and the **momentClassID** from the Stagecast Sandbox API. You will need your eventID for this request. You can find the eventID in the URL when opening an event in the **Stagecast Web Platform**:\
[https://stagecast.se/dashboard/events/](https://stagecast.se/dashboard/events)**\<YOUR\_EVENT\_ID>/launchpad**

## Create the Sandbox

<mark style="color:green;">`POST`</mark> `https://stagecast.se/api/sandbox/<YOUR_EVENT_ID>`

{% tabs %}
{% tab title="200 " %}

```javascript
{
  "momentID": "<YOUR_MOMENT_ID>",
  "momentClassID": "<YOUR_MOMENT_CLASS_ID>",
  "eventID": "<YOUR_EVENT_ID>",
  "creationTime": 1584007941692
}
```

{% endtab %}
{% endtabs %}

After retrieving those values from the API we can start setting up our sandbox.

Our sandbox/adapter is a simple HTML/JS application itself, which will launch the Moment inside an iframe.

For this we will create a few files in the directory **`src/adapters/tests`** (you have to create this directory manually).

The content of the folder is the following:&#x20;

{% tabs %}
{% tab title="mobile.adapter.html " %}

```markup
<!DOCTYPE html>
<!DOCTYPE html>
<!-- Use this file to test your Moment -->
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
    <title>Treasure Hunt Moment Tester</title>
<style>body {
    position:fixed;
    padding: 0px;
    margin: 0px;
    overflow:hidden;
    height:100vh;
    width:100vw;
}

#frame {
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    margin:0;
    padding:0;
    overflow: hidden;
    box-sizing: border-box;
    border-style: none;
}
</style>
</head>
<body>
<!-- iframe where the treasure hunt moment will be loaded. -->
<iframe id="frame" title="Treasure Hunt Moment" onload="iframeLoaded()" src="../../mobile/index.html"></iframe>
<script src="./test-data.js"></script>
<script src="./loader.js"></script>
</body>
</html>

```

{% endtab %}

{% tab title="test-data.js" %}

```javascript
var momentData = {
  "environment": "staging", // staging or production
  "userId": "f.tester@stagecast.com", // The userID of the test user
  "token": "<YOUR_API_TOKEN>", // The API token we just retrieved from the API
  "momentClassData": {
    "sender": null,
    "language": "en",
    "notification": true,
    "message": "",
    "showSponsor": true,
    "sponsor": {
      "logos": [],
      "credit": "The moment is provided by:"
    },
    "showTopBanner": true,
    "topBannerMessage": "Download Stagecast App and type in the code 9279",
    "custom": { // This will contain the custom Moment data from the configuration form
      "backgroundImage": ["E77DFDBB-1C5B-4977-8FE5-CD0A8D1850E3"], 
      "resultBackgroundImage": ["E77DFDBB-1C5B-4977-8FE5-CD0A8D1850E3"],
      "infoText": "TBD",
      "prizeImage": ["F827F4D2-A805-4C31-8284-3079B0E51666"],
      "prizeDescriptionHeadline": "You can win a prize",
      "prizeDescriptionText": "This is a description of the prize",
      "prizeButtonText": "Prize",
      "winText": "Congratulations! You have won a prize.",
      "claimButtonLink": "https://google.com",
      "claimButtonText": "Claim prize",
      "quests": [{
        "id": "option0",
        "image": ["FC68B874-44DF-4449-8EDC-8DA6280A65D0"],
        "imageLink": "https://google.com",
        "name": "Quest 1",
        "question": "Visit London...",
        "answers": "32,thirtytwo,thirty two"
      }, {
        "id": "option1",
        "image": ["69DE8CA3-B9F7-40EE-9413-EAB2F521FE5C"],
        "imageLink": "https://google.com",
        "name": "Quest 2",
        "question": "Visit Vienna...",
        "answers": "15,fifteen"
      }]
    }
  },
  "momentClassId": "<YOUR_MOMENT_CLASS_ID>", // The Moment Class ID we retrieved from the API before.
  "momentId": "<YOUR_MOMENT_ID>", // The Moment ID we retrieved from the API before.
  "created": 1583925842255,
  "eventId": "<YOUR_EVENT_ID>", // The Event ID we retrieved from the Dashboard URL.
  "disableLogs": false,
  "coordinates": ["0", "0"],
  "isGuest": false,
  "isActive": true,
  "isMomentActive": true
}

```

{% endtab %}

{% tab title="loader.js" %}

```javascript
function iframeLoaded() {
  document.getElementById("frame").contentWindow.postMessage({
    "messageSource": "STAGECAST_SDK",
    "config": momentData
  }, '*');
}

```

{% endtab %}
{% endtabs %}

**src/adapters/tests/mobile.adapter.html:** With this file we create an iframe, and link it to the index.html inside our **`src/mobile`** folder (So our Moment will launch inside this iframe).&#x20;

**src/adapters/tests/test-data.js:** This is the data we will seed the Moment with. This JavaScript object is normally passed to the Moment via the Stagecast App/Webview integration. Now we have to inject the test data we’ve just created into the iframe in our mobile.adapter.html. This is done in the **loader.js** file we include right after the **test-data.js.**

**src/adapters/tests/loader.js:** Inside this file we define the function`iframeLoaded()` which will be called as soon as the iframe finishes loading. Once loaded, we will pass the variable momentData we’ve just created to our iframe with the `postMessage()` method.\
\
That’s it. From now on we can launch our moment by opening the src/adapters/tests/mobile.adapter.html file. Right now you won’t see much, because our moment is still an empty HTML file, but let’s change that!


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://dev-stagecast.gitbook.io/moments-sdk/documentation/testing.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
