serialize-mdx.test.js.snap

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`kitchen sink 1`] = `
"
<div data-type=\\"frontmatter\\" data-value=\\"eyJ0aXRsZSI6IkVuYWJsZSBzZXJ2ZXJsZXNzIG1vbml0b3JpbmcgZm9yIEFXUyBMYW1iZGEiLCJjb250ZW50VHlwZSI6InBhZ2UiLCJ0ZW1wbGF0ZSI6ImJhc2ljRG9jIiwidG9waWNzIjpbXSwid2F0ZXJtYXJrIjoiQkVUQSIsInRyYW5zbGF0aW9uVHlwZSI6Imh1bWFuIn0=\\">
  <div data-key=\\"title\\">Enable serverless monitoring for AWS Lambda</div>
</div>
<div data-type=\\"import\\" data-value=\\"aW1wb3J0IHsgTGluayB9IGZyb20gJ0BuZXdyZWxpYy9nYXRzYnktdGhlbWUtbmV3cmVsaWMn\\"></div>
<p>New Relic defines a <a href=\\"/docs/apm/transactions/intro-transactions/transactions-new-relic-apm\\">web or non-web transaction</a> as one logical unit of work in a software application. Once you <a href=\\"/docs/instrument-transactions-c-agent\\">instrument a transaction</a>, you can also instrument errors in the transaction so you can monitor them in the New Relic UI. In order to use the C SDK to monitor errors, you must manually instrument your source code by adding the New Relic function <code>newrelic_notice_error()</code> to it.</p>
<div data-type=\\"component\\" data-component=\\"Callout\\" data-props=\\"W3sidHlwZSI6Im1keEF0dHJpYnV0ZSIsIm5hbWUiOiJ2YXJpYW50IiwidmFsdWUiOiJ0aXAifV0=\\">
  <div data-type=\\"prop\\" data-prop=\\"children\\">
    <p>To include <var data-type=\\"component\\">function</var> calls in error traces, use GNU's <code>-rdynamic</code> linker flag to <a href=\\"/docs/install-c-agent-compile-link-your-code#compile\\">link your apps when compiling</a>. The <code>-rdynamic</code> linker flag gives you more meaningful error traces.</p>
  </div>
</div>
<h2 id=\\"in-page-toc\\">Contents</h2>
<p>For an index of <mark data-type=\\"component\\">documentation</mark> available during the private Beta, see the <a href=\\"https://docs.newrelic.com/docs/c-agent-table-contents\\">C SDK table of contents</a>.</p>
<h2 id=\\"errors\\">Instrument errors in transactions</h2>
<div data-type=\\"component\\" data-component=\\"Callout\\" data-props=\\"W3sidHlwZSI6Im1keEF0dHJpYnV0ZSIsIm5hbWUiOiJ0aXRsZSIsInZhbHVlIjoiQ29kZSJ9LHsidHlwZSI6Im1keEF0dHJpYnV0ZSIsIm5hbWUiOiJ2YXJpYW50IiwidmFsdWUiOiJ0aXAifV0=\\">
  <div data-type=\\"prop\\" data-prop=\\"title\\">Code</div>
  <div data-type=\\"prop\\" data-prop=\\"children\\">
    <p>To include function calls in error traces, use GNU's <code>-rdynamic</code> linker flag to <a href=\\"/docs/install-c-agent-compile-link-your-code#compile\\">link your apps when compiling</a>. The <code>-rdynamic</code> linker flag gives you more meaningful error traces.</p>
  </div>
</div>
<h2 id=\\"errors\\"><code>instrument_errors</code></h2>
<p>To instrument errors in transactions:</p>
<ol>
  <li><a href=\\"/docs/instrument-transactions-c-agent#start-transaction\\">Start a transaction</a>.</li>
  <li>Record an with <a href=\\"https://source.datanerd.us/c-agent/c-agent/blob/master/examples/ex_notice_error.c\\"><code>newrelic_notice_error()</code></a>, supplying the required parameters.</li>
  <li><a href=\\"/docs/instrument-transactions-c-agent#end-transaction\\">End the transaction</a>.</li>
</ol>
<div data-type=\\"component\\" data-component=\\"ImageSizing\\" data-props=\\"W3sidHlwZSI6Im1keEF0dHJpYnV0ZSIsIm5hbWUiOiJ3aWR0aCIsInZhbHVlIjoiMzJweCJ9LHsidHlwZSI6Im1keEF0dHJpYnV0ZSIsIm5hbWUiOiJoZWlnaHQiLCJ2YWx1ZSI6IjMycHgifV0=\\">
  <div data-type=\\"prop\\" data-prop=\\"children\\">
    <p>
      <img src=\\"./images/debian.png\\" alt=\\"debian.png\\">
    </p>
  </div>
</div>
<p>This is a test with an inline image <span data-type=\\"component\\" data-component=\\"ImageSizing\\" data-props=\\"W3sidHlwZSI6Im1keEF0dHJpYnV0ZSIsIm5hbWUiOiJ3aWR0aCIsInZhbHVlIjoiMzJweCJ9XQ==\\"><span data-type=\\"prop\\" data-prop=\\"children\\"><img src=\\"./images/image.png\\" alt=\\"image.png\\"></span></span></p>
<table data-type=\\"component\\">
  <thead data-type=\\"component\\">
    <tr data-type=\\"component\\">
      <th data-type=\\"component\\" data-props=\\"W3sidHlwZSI6Im1keEF0dHJpYnV0ZSIsIm5hbWUiOiJzdHlsZSIsInZhbHVlIjp7InR5cGUiOiJtZHhWYWx1ZUV4cHJlc3Npb24iLCJ2YWx1ZSI6Insgd2lkdGg6IFwiMjAwcHhcIiB9IiwicG9zaXRpb24iOnsic3RhcnQiOnsibGluZSI6NTEsImNvbHVtbiI6MTcsIm9mZnNldCI6MjE4MX0sImVuZCI6eyJsaW5lIjo1MSwiY29sdW1uIjozNywib2Zmc2V0IjoyMjAxfX19fV0=\\">
        <p><strong>If you want to...</strong></p>
      </th>
      <th data-type=\\"component\\">
        <p><strong>Do this...</strong></p>
      </th>
    </tr>
  </thead>
  <tbody data-type=\\"component\\">
    <tr data-type=\\"component\\">
      <td data-type=\\"component\\">
        <p>Run recent queries</p>
      </td>
      <td data-type=\\"component\\">
        <p>Select a recent query from the history list. The query will appear on the command line, where it can be edited.</p>
      </td>
    </tr>
    <tr data-type=\\"component\\">
      <td data-type=\\"component\\">
        <p>Delete queries</p>
      </td>
      <td data-type=\\"component\\">
        <p>Mouse over a query in the history list so the delete <span data-type=\\"component\\" data-component=\\"Icon\\" data-props=\\"W3sidHlwZSI6Im1keEF0dHJpYnV0ZSIsIm5hbWUiOiJuYW1lIiwidmFsdWUiOiJmZS10cmFzaC0yIn1d\\"> </span> icon appears. The query history only retains the twenty most recent queries, so it can be useful to delete unwanted queries to make room for queries you like.</p>
      </td>
    </tr>
    <tr data-type=\\"component\\">
      <td data-type=\\"component\\">
        <p>Favorite queries</p>
      </td>
      <td data-type=\\"component\\">
        <p>Mouse over a query in the history list and the favorite <span data-type=\\"component\\" data-component=\\"Icon\\" data-props=\\"W3sidHlwZSI6Im1keEF0dHJpYnV0ZSIsIm5hbWUiOiJuYW1lIiwidmFsdWUiOiJmZS1zdGFyIn1d\\"> </span> icon appears. Then, to view and use your favorite queries, select the <strong>Favorites</strong> tab.</p>
      </td>
    </tr>
  </tbody>
</table>
<pre data-type=\\"component\\" data-component=\\"CodeBlock\\" data-props=\\"eyJsYW5nIjoicHl0aG9uIiwibWV0YSI6ImNvcHlhYmxlPWZhbHNlIiwidmFsdWUiOiJAbmV3cmVsaWMuYWdlbnQubGFtYmRhX2hhbmRsZXIoKVxuZGVmIGhhbmRsZXIoZXZlbnQsIGNvbnRleHQpOlxuICAgIG5ld3JlbGljLmFnZW50LnJlY29yZF9jdXN0b21fZXZlbnQoJ0N1c3RvbUV2ZW50Jywgeydmb28nOiAnYmFyJ30pIiwicG9zaXRpb24iOnsic3RhcnQiOnsibGluZSI6OTQsImNvbHVtbiI6MSwib2Zmc2V0IjozMTYyfSwiZW5kIjp7ImxpbmUiOjk4LCJjb2x1bW4iOjQsIm9mZnNldCI6MzMyMn0sImluZGVudCI6WzEsMSwxLDFdfX0=\\"></pre>
<div data-type=\\"component\\" data-component=\\"TechTileGrid\\">
  <div data-type=\\"prop\\" data-prop=\\"children\\">
    <div data-type=\\"component\\" data-component=\\"TechTile\\" data-props=\\"W3sidHlwZSI6Im1keEF0dHJpYnV0ZSIsIm5hbWUiOiJuYW1lIiwidmFsdWUiOiJpT1MifSx7InR5cGUiOiJtZHhBdHRyaWJ1dGUiLCJuYW1lIjoiaWNvbiIsInZhbHVlIjoibG9nby1hcHBsZSJ9LHsidHlwZSI6Im1keEF0dHJpYnV0ZSIsIm5hbWUiOiJ0byIsInZhbHVlIjoiL2FnZW50cy9pb3MtYWdlbnQifV0=\\">
      <div data-type=\\"prop\\" data-prop=\\"name\\">iOS</div>
    </div>
    <div data-type=\\"component\\" data-component=\\"TechTile\\" data-props=\\"W3sidHlwZSI6Im1keEF0dHJpYnV0ZSIsIm5hbWUiOiJuYW1lIiwidmFsdWUiOiJBbmRyb2lkIn0seyJ0eXBlIjoibWR4QXR0cmlidXRlIiwibmFtZSI6Imljb24iLCJ2YWx1ZSI6ImxvZ28tYW5kcm9pZCJ9LHsidHlwZSI6Im1keEF0dHJpYnV0ZSIsIm5hbWUiOiJ0byIsInZhbHVlIjoiL2FnZW50cy9hbmRyb2lkLWFnZW50In1d\\">
      <div data-type=\\"prop\\" data-prop=\\"name\\">Android</div>
    </div>
    <div data-type=\\"component\\" data-component=\\"TechTile\\" data-props=\\"W3sidHlwZSI6Im1keEF0dHJpYnV0ZSIsIm5hbWUiOiJuYW1lIiwidmFsdWUiOiJ0dk9TIn0seyJ0eXBlIjoibWR4QXR0cmlidXRlIiwibmFtZSI6Imljb24iLCJ2YWx1ZSI6ImxvZ28tYXBwbGUifSx7InR5cGUiOiJtZHhBdHRyaWJ1dGUiLCJuYW1lIjoidG8iLCJ2YWx1ZSI6Ii9hZ2VudHMvdHZvcy1hZ2VudCJ9XQ==\\">
      <div data-type=\\"prop\\" data-prop=\\"name\\">tvOS</div>
    </div>
  </div>
</div>
<div data-type=\\"component\\" data-component=\\"CollapserGroup\\">
  <div data-type=\\"prop\\" data-prop=\\"children\\">
    <div data-type=\\"component\\" data-component=\\"Collapser\\" data-props=\\"W3sidHlwZSI6Im1keEF0dHJpYnV0ZSIsIm5hbWUiOiJpZCIsInZhbHVlIjoiZXZlbnRzLWFwaS1rZXkifSx7InR5cGUiOiJtZHhBdHRyaWJ1dGUiLCJuYW1lIjoidGl0bGUiLCJ2YWx1ZSI6IldoYXQgYWNjb3VudCBjaGFuZ2VzIGhhdmUgYmVlbiBtYWRlIHVzaW5nIGFuIEFQSSBrZXk/In1d\\">
      <div data-type=\\"prop\\" data-prop=\\"title\\">What account changes have been made using an API key?</div>
      <div data-type=\\"prop\\" data-prop=\\"children\\">
        <p>To see detailed information about changes to the account that were made using an API key during a specific time frame, include <a href=\\"#actorType\\"><code>actorType = 'api_key'</code></a> in the query. For example:</p>
        <pre data-type=\\"component\\" data-component=\\"CodeBlock\\" data-props=\\"eyJsYW5nIjpudWxsLCJtZXRhIjpudWxsLCJ2YWx1ZSI6IlNFTEVDVCBhY3Rpb25JZGVudGlmaWVyLCBkZXNjcmlwdGlvbiwgdGFyZ2V0VHlwZSwgdGFyZ2V0SWQsIGFjdG9yQVBJS2V5LCBhY3RvcklkLCBhY3RvckVtYWlsXG5GUk9NIE5yQXVkaXRFdmVudCBXSEVSRSBhY3RvclR5cGUgPSAnYXBpX2tleScgU0lOQ0UgMSB3ZWVrIGFnbyIsInBvc2l0aW9uIjp7InN0YXJ0Ijp7ImxpbmUiOjEyNywiY29sdW1uIjoxLCJvZmZzZXQiOjM5MzR9LCJlbmQiOnsibGluZSI6MTMxLCJjb2x1bW4iOjMsIm9mZnNldCI6NDExNn0sImluZGVudCI6WzEsMSwxLDFdfX0=\\"></pre>
      </div>
    </div>
    <div data-type=\\"component\\" data-component=\\"Collapser\\" data-props=\\"W3sidHlwZSI6Im1keEF0dHJpYnV0ZSIsIm5hbWUiOiJpZCIsInZhbHVlIjoic3ludGgtdXNlciJ9LHsidHlwZSI6Im1keEF0dHJpYnV0ZSIsIm5hbWUiOiJ0aXRsZSIsInZhbHVlIjoiU3ludGhldGljczogV2hhdCBtb25pdG9ycyB3ZXJlIGNyZWF0ZWQgYnkgYSBzcGVjaWZpYyB1c2VyPyJ9XQ==\\">
      <div data-type=\\"prop\\" data-prop=\\"title\\">Synthetics: What monitors were created by a specific user?</div>
      <div data-type=\\"prop\\" data-prop=\\"children\\">
        <p>To query Synthetics monitor updates made by a specific user, include the <a href=\\"/attribute-dictionary/nrauditevent/actionidentifier\\"><code>actionIdentifier</code></a> and <a href=\\"/attribute-dictionary/nrauditevent/actoremail\\"><code>actorEmail</code></a> attribute in your query. For example:</p>
        <pre data-type=\\"component\\" data-component=\\"CodeBlock\\" data-props=\\"eyJsYW5nIjpudWxsLCJtZXRhIjpudWxsLCJ2YWx1ZSI6IlNFTEVDVCBjb3VudCgqKSBGUk9NIE5yQXVkaXRFdmVudFxuV0hFUkUgYWN0aW9uSWRlbnRpZmllciA9ICdzeW50aGV0aWNzX21vbml0b3IudXBkYXRlX3NjcmlwdCdcbkZBQ0VUIGFjdG9yRW1haWwsIGFjdGlvbklkZW50aWZpZXIsIGRlc2NyaXB0aW9uXG5TSU5DRSAxIHdlZWsgYWdvIExJTUlUIDEwMDAiLCJwb3NpdGlvbiI6eyJzdGFydCI6eyJsaW5lIjoxMzksImNvbHVtbiI6MSwib2Zmc2V0Ijo0NDk0fSwiZW5kIjp7ImxpbmUiOjE0NSwiY29sdW1uIjozLCJvZmZzZXQiOjQ2OTh9LCJpbmRlbnQiOlsxLDEsMSwxLDEsMV19fQ==\\"></pre>
      </div>
    </div>
  </div>
</div>
<div data-type=\\"component\\" data-component=\\"CollapserGroup\\">
  <div data-type=\\"prop\\" data-prop=\\"children\\">
    <div data-type=\\"component\\" data-component=\\"Collapser\\" data-props=\\"W3sidHlwZSI6Im1keEF0dHJpYnV0ZSIsIm5hbWUiOiJpZCIsInZhbHVlIjoibGFjay1jcHUtY3JlZGl0LWJhbGFuY2UifSx7InR5cGUiOiJtZHhBdHRyaWJ1dGUiLCJuYW1lIjoidGl0bGUiLCJ2YWx1ZSI6IkxhY2sgb2YgQ1BVIENyZWRpdCBCYWxhbmNlIn1d\\">
      <div data-type=\\"prop\\" data-prop=\\"title\\">Lack of CPU Credit Balance</div>
      <div data-type=\\"prop\\" data-prop=\\"children\\">
        <table data-type=\\"component\\">
          <tbody data-type=\\"component\\">
            <tr data-type=\\"component\\">
              <td data-type=\\"component\\">
                <p><strong>Condition name</strong></p>
              </td>
              <td data-type=\\"component\\">
                <p>Lack of CPU Credit Balance</p>
              </td>
            </tr>
            <tr data-type=\\"component\\">
              <td data-type=\\"component\\">
                <p><strong>Cloud entity type</strong></p>
              </td>
              <td data-type=\\"component\\">
                <p>AWS RDS DB instance</p>
              </td>
            </tr>
            <tr data-type=\\"component\\">
              <td data-type=\\"component\\">
                <p><strong>Description</strong></p>
              </td>
              <td data-type=\\"component\\">
                <p>The database instance is running out of CPU Credit Balance.</p>
              </td>
            </tr>
            <tr data-type=\\"component\\">
              <td data-type=\\"component\\">
                <p><strong>Recommended action</strong></p>
              </td>
              <td data-type=\\"component\\">
                <p>You may need to reduce the load of the RDS instance, or use a larger RDS instance type.</p>
              </td>
            </tr>
            <tr data-type=\\"component\\">
              <td data-type=\\"component\\">
                <p><strong>Reference</strong></p>
              </td>
              <td data-type=\\"component\\">
                <p>For more information, see <a href=\\"https://docs.aws.amazon.com/AmazonRDS/latest/UserGuide/CHAP_Storage.html\\">DB instance storage</a> or <a href=\\"https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/burstable-credits-baseline-concepts.html\\">CPU Credits and Baseline Performance for Burstable Performance Instances</a>.</p>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
"
`;

exports[`serialize Icon inline with text to HTML 1`] = `
"
<p>This is some text with a star <span data-type=\\"component\\" data-component=\\"Icon\\" data-props=\\"W3sidHlwZSI6Im1keEF0dHJpYnV0ZSIsIm5hbWUiOiJuYW1lIiwidmFsdWUiOiJmZS1zdGFyIn0seyJ0eXBlIjoibWR4QXR0cmlidXRlIiwibmFtZSI6InNpemUiLCJ2YWx1ZSI6IjFyZW0ifV0=\\"> </span> and some more text after it</p>
"
`;

exports[`serializes Button to html 1`] = `
"
<div data-type=\\"component\\" data-component=\\"Button\\" data-props=\\"W3sidHlwZSI6Im1keEF0dHJpYnV0ZSIsIm5hbWUiOiJ2YXJpYW50IiwidmFsdWUiOiJub3JtYWwifV0=\\">
  <div data-type=\\"prop\\" data-prop=\\"children\\">
    <p>View all C SDK docs</p>
  </div>
</div>
"
`;

exports[`serializes ButtonLink to html 1`] = `
"
<div data-type=\\"component\\" data-component=\\"ButtonLink\\" data-props=\\"W3sidHlwZSI6Im1keEF0dHJpYnV0ZSIsIm5hbWUiOiJ0byIsInZhbHVlIjoiL2RvY3MvYWdlbnRzL3J1Ynktc2RrIn0seyJ0eXBlIjoibWR4QXR0cmlidXRlIiwibmFtZSI6InZhcmlhbnQiLCJ2YWx1ZSI6Im5vcm1hbCJ9XQ==\\">
  <div data-type=\\"prop\\" data-prop=\\"children\\">
    <p>View all C SDK docs</p>
  </div>
</div>
"
`;

exports[`serializes Callouts with title to html 1`] = `
"
<div data-type=\\"component\\" data-component=\\"Callout\\" data-props=\\"W3sidHlwZSI6Im1keEF0dHJpYnV0ZSIsIm5hbWUiOiJ0aXRsZSIsInZhbHVlIjoiTGlmZSB0aXBzICMxIn0seyJ0eXBlIjoibWR4QXR0cmlidXRlIiwibmFtZSI6InZhcmlhbnQiLCJ2YWx1ZSI6InRpcCJ9XQ==\\">
  <div data-type=\\"prop\\" data-prop=\\"title\\">Life tips #1</div>
  <div data-type=\\"prop\\" data-prop=\\"children\\">
    <p>Don't walk down that dark alleyway</p>
  </div>
</div>
"
`;

exports[`serializes Callouts without title to html 1`] = `
"
<div data-type=\\"component\\" data-component=\\"Callout\\" data-props=\\"W3sidHlwZSI6Im1keEF0dHJpYnV0ZSIsIm5hbWUiOiJ2YXJpYW50IiwidmFsdWUiOiJ0aXAifV0=\\">
  <div data-type=\\"prop\\" data-prop=\\"children\\">
    <p>Always tip your waiter</p>
  </div>
</div>
"
`;

exports[`serializes Collapser with JSX title to html 1`] = `
"
<div data-type=\\"component\\" data-component=\\"Collapser\\" data-props=\\"W3sidHlwZSI6Im1keEF0dHJpYnV0ZSIsIm5hbWUiOiJ0aXRsZSIsInZhbHVlIjp7InR5cGUiOiJtZHhWYWx1ZUV4cHJlc3Npb24iLCJ2YWx1ZSI6Ijw+PElubGluZUNvZGU+YWdlbnQucmVwb3J0X2N1c3RvbV9hdHRyaWJ1dGU8L0lubGluZUNvZGU+IEFQSTwvPiIsInBvc2l0aW9uIjp7InN0YXJ0Ijp7ImxpbmUiOjMsImNvbHVtbiI6OSwib2Zmc2V0IjoyMH0sImVuZCI6eyJsaW5lIjozLCJjb2x1bW4iOjc0LCJvZmZzZXQiOjg1fX19fV0=\\">
  <div data-type=\\"prop\\" data-prop=\\"title\\">
    <div data-type=\\"component\\" data-component=\\"React.Fragment\\">
      <div data-type=\\"prop\\" data-prop=\\"children\\"><code data-type=\\"component\\" data-component=\\"InlineCode\\">agent.report_custom_attribute</code> API</div>
    </div>
  </div>
  <div data-type=\\"prop\\" data-prop=\\"children\\">
    <p>Some API docs about <code>agent.report_custom_attribute</code></p>
  </div>
</div>
"
`;

exports[`serializes Collapser with plain text title to html 1`] = `
"
<div data-type=\\"component\\" data-component=\\"Collapser\\" data-props=\\"W3sidHlwZSI6Im1keEF0dHJpYnV0ZSIsIm5hbWUiOiJ0aXRsZSIsInZhbHVlIjoiQ29sbGFwc2UgbWUgeW8ifV0=\\">
  <div data-type=\\"prop\\" data-prop=\\"title\\">Collapse me yo</div>
  <div data-type=\\"prop\\" data-prop=\\"children\\">
    <p>These tests are hard to write docs for</p>
  </div>
</div>
"
`;

exports[`serializes CollapserGroup to html 1`] = `
"
<div data-type=\\"component\\" data-component=\\"CollapserGroup\\">
  <div data-type=\\"prop\\" data-prop=\\"children\\">
    <div data-type=\\"component\\" data-component=\\"Collapser\\" data-props=\\"W3sidHlwZSI6Im1keEF0dHJpYnV0ZSIsIm5hbWUiOiJ0aXRsZSIsInZhbHVlIjoiRWFzeSBwZWFzeSJ9XQ==\\">
      <div data-type=\\"prop\\" data-prop=\\"title\\">Easy peasy</div>
      <div data-type=\\"prop\\" data-prop=\\"children\\">
        <p>Par-cheesy</p>
      </div>
    </div>
  </div>
</div>
"
`;

exports[`serializes DoNotTranslate to html 1`] = `
"
<div data-type=\\"component\\" data-component=\\"DoNotTranslate\\" class=\\"notranslate\\">
  <h1>Not all who wander are lost...</h1>
  <p>Testing this line too</p>
</div>
"
`;

exports[`serializes DoNotTranslate to html inline 1`] = `
"
<p>This is an <span data-type=\\"component\\" data-component=\\"DoNotTranslate\\" class=\\"notranslate\\">MDX</span> file</p>
"
`;

exports[`serializes DoNotTranslate wrapping a Collapser 1`] = `
"
<div data-type=\\"component\\" data-component=\\"DoNotTranslate\\" class=\\"notranslate\\">
  <div data-type=\\"component\\" data-component=\\"Collapser\\" data-props=\\"W3sidHlwZSI6Im1keEF0dHJpYnV0ZSIsIm5hbWUiOiJ0aXRsZSIsInZhbHVlIjoiQ29sbGFwc2UgbWUgeW8ifV0=\\">
    <div data-type=\\"prop\\" data-prop=\\"title\\">Collapse me yo</div>
    <div data-type=\\"prop\\" data-prop=\\"children\\">
      <p>These tests are hard to write docs for</p>
    </div>
  </div>
</div>
"
`;

exports[`serializes ExternalLink to html 1`] = `
"
<div data-type=\\"component\\" data-component=\\"ExternalLink\\" data-props=\\"W3sidHlwZSI6Im1keEF0dHJpYnV0ZSIsIm5hbWUiOiJocmVmIiwidmFsdWUiOiJodHRwczovL2RldmVsb3Blci5uZXdyZWxpYy5jb20ifV0=\\">
  <div data-type=\\"prop\\" data-prop=\\"children\\">
    <p>Go to developer site</p>
  </div>
</div>
"
`;

exports[`serializes Icon to html 1`] = `
"
<div data-type=\\"component\\" data-component=\\"Icon\\" data-props=\\"W3sidHlwZSI6Im1keEF0dHJpYnV0ZSIsIm5hbWUiOiJuYW1lIiwidmFsdWUiOiJmZS1leHRlcm5hbC1saW5rIn0seyJ0eXBlIjoibWR4QXR0cmlidXRlIiwibmFtZSI6InNpemUiLCJ2YWx1ZSI6IjFyZW0ifV0=\\"> </div>
"
`;

exports[`serializes Icon to html 2`] = `
"
<div data-type=\\"component\\" data-component=\\"Icon\\" data-props=\\"W3sidHlwZSI6Im1keEF0dHJpYnV0ZSIsIm5hbWUiOiJuYW1lIiwidmFsdWUiOiJmZS1leHRlcm5hbC1saW5rIn0seyJ0eXBlIjoibWR4QXR0cmlidXRlIiwibmFtZSI6InNpemUiLCJ2YWx1ZSI6IjFyZW0ifV0=\\"> </div>
"
`;

exports[`serializes InlineCode to html 1`] = `"<code data-type=\\"component\\" data-component=\\"InlineCode\\">agent.report_custom_event()</code>"`;

exports[`serializes LandingPageTile to html 1`] = `
"
<div data-type=\\"component\\" data-component=\\"LandingPageTile\\" data-props=\\"W3sidHlwZSI6Im1keEF0dHJpYnV0ZSIsIm5hbWUiOiJ0aXRsZSIsInZhbHVlIjoiR2V0IHN0YXJ0ZWQuIn0seyJ0eXBlIjoibWR4QXR0cmlidXRlIiwibmFtZSI6Imljb24iLCJ2YWx1ZSI6ImZlLWNoZWNrLXNxdWFyZSJ9XQ==\\">
  <div data-type=\\"prop\\" data-prop=\\"title\\">Get started.</div>
  <div data-type=\\"prop\\" data-prop=\\"children\\">
    <ul>
      <li><a href=\\"/docs/apm/new-relic-apm/getting-started/introduction-new-relic-apm\\">Learn</a> about the wealth of APM data automatically available to you.</li>
      <li><a href=\\"/docs/agents/manage-apm-agents/installation/installing-agent\\">Install your APM language agent</a> from New Relic One, then start seeing actionable performance data in the <a href=\\"/docs/apm/apm-ui-pages\\">APM UI</a>.</li>
      <li>Monitor your own <a href=\\"/docs/apm/transactions/key-transactions/introduction-key-transactions\\">business-critical key transactions</a>.</li>
    </ul>
  </div>
</div>
"
`;

exports[`serializes LandingPageTileGrid to html 1`] = `
"
<div data-type=\\"component\\" data-component=\\"LandingPageTileGrid\\">
  <div data-type=\\"prop\\" data-prop=\\"children\\">
    <div data-type=\\"component\\" data-component=\\"LandingPageTile\\" data-props=\\"W3sidHlwZSI6Im1keEF0dHJpYnV0ZSIsIm5hbWUiOiJ0aXRsZSIsInZhbHVlIjoiR2V0IHN0YXJ0ZWQuIn0seyJ0eXBlIjoibWR4QXR0cmlidXRlIiwibmFtZSI6Imljb24iLCJ2YWx1ZSI6ImZlLWNoZWNrLXNxdWFyZSJ9XQ==\\">
      <div data-type=\\"prop\\" data-prop=\\"title\\">Get started.</div>
      <div data-type=\\"prop\\" data-prop=\\"children\\">
        <ul>
          <li><a href=\\"/docs/apm/new-relic-apm/getting-started/introduction-new-relic-apm\\">Learn</a> about the wealth of APM data automatically available to you.</li>
          <li><a href=\\"/docs/agents/manage-apm-agents/installation/installing-agent\\">Install your APM language agent</a> from New Relic One, then start seeing actionable performance data in the <a href=\\"/docs/apm/apm-ui-pages\\">APM UI</a>.</li>
          <li>Monitor your own <a href=\\"/docs/apm/transactions/key-transactions/introduction-key-transactions\\">business-critical key transactions</a>.</li>
        </ul>
      </div>
    </div>
  </div>
</div>
"
`;

exports[`serializes Link to html 1`] = `
"
<div data-type=\\"component\\" data-component=\\"Link\\" data-props=\\"W3sidHlwZSI6Im1keEF0dHJpYnV0ZSIsIm5hbWUiOiJ0byIsInZhbHVlIjoiL2RvY3MvYWdlbnRzL3J1Ynktc2RrIn1d\\">
  <div data-type=\\"prop\\" data-prop=\\"children\\">
    <p>Check out our Ruby agent docs</p>
  </div>
</div>
"
`;

exports[`serializes Table to html 1`] = `
"
<table data-type=\\"component\\">
  <thead data-type=\\"component\\">
    <tr data-type=\\"component\\">
      <td data-type=\\"component\\">
        <p>Column A</p>
      </td>
      <td data-type=\\"component\\">
        <p>Column B</p>
      </td>
    </tr>
  </thead>
  <tbody data-type=\\"component\\">
    <tr data-type=\\"component\\">
      <td data-type=\\"component\\">
        <p>Data 1a</p>
      </td>
      <td data-type=\\"component\\">
        <p>Data 2a</p>
      </td>
    </tr>
    <tr data-type=\\"component\\">
      <td data-type=\\"component\\">
        <p>Data 1b</p>
      </td>
      <td data-type=\\"component\\">
        <p>Data 2b</p>
      </td>
    </tr>
  </tbody>
</table>
"
`;

exports[`serializes TechTileGrid to html 1`] = `
"
<div data-type=\\"component\\" data-component=\\"TechTileGrid\\">
  <div data-type=\\"prop\\" data-prop=\\"children\\">
    <div data-type=\\"component\\" data-component=\\"TechTile\\" data-props=\\"W3sidHlwZSI6Im1keEF0dHJpYnV0ZSIsIm5hbWUiOiJuYW1lIiwidmFsdWUiOiJpT1MifSx7InR5cGUiOiJtZHhBdHRyaWJ1dGUiLCJuYW1lIjoiaWNvbiIsInZhbHVlIjoibG9nby1hcHBsZSJ9LHsidHlwZSI6Im1keEF0dHJpYnV0ZSIsIm5hbWUiOiJ0byIsInZhbHVlIjoiL2FnZW50cy9pb3MtYWdlbnQifV0=\\">
      <div data-type=\\"prop\\" data-prop=\\"name\\">iOS</div>
    </div>
  </div>
</div>
"
`;

exports[`serializes Video to html 1`] = `
"
<div data-type=\\"component\\" data-component=\\"Video\\" data-props=\\"W3sidHlwZSI6Im1keEF0dHJpYnV0ZSIsIm5hbWUiOiJpZCIsInZhbHVlIjoiYWJjZCJ9LHsidHlwZSI6Im1keEF0dHJpYnV0ZSIsIm5hbWUiOiJ0eXBlIiwidmFsdWUiOiJ3aXN0aWEifV0=\\"></div>
"
`;

exports[`serializes Video with title to html 1`] = `
"
<div data-type=\\"component\\" data-component=\\"Video\\" data-props=\\"W3sidHlwZSI6Im1keEF0dHJpYnV0ZSIsIm5hbWUiOiJpZCIsInZhbHVlIjoiYWJjZCJ9LHsidHlwZSI6Im1keEF0dHJpYnV0ZSIsIm5hbWUiOiJ0eXBlIiwidmFsdWUiOiJ3aXN0aWEifSx7InR5cGUiOiJtZHhBdHRyaWJ1dGUiLCJuYW1lIjoidGl0bGUiLCJ2YWx1ZSI6IlRoZSB2aWRlbyB0aXRsZSJ9XQ==\\">
  <div data-type=\\"prop\\" data-prop=\\"title\\">The video title</div>
</div>
"
`;

exports[`serializes mark to html 1`] = `"<mark data-type=\\"component\\"><p>PDF</p></mark>"`;

exports[`serializes var to html 1`] = `"<var data-type=\\"component\\"><p>JAVA_AGENT_VERSION</p></var>"`;

exports[`test <b> element serializes 1`] = `
"
<p>The Varnish Cache integration collects both metrics(<span data-type=\\"component\\" data-component=\\"b\\"><span data-type=\\"prop\\" data-prop=\\"children\\">M</span></span>) and inventory(<span data-type=\\"component\\" data-component=\\"b\\"><span data-type=\\"prop\\" data-prop=\\"children\\">I</span></span>) information.</p>
"
`;

exports[`test <strong> element serializes 1`] = `
"
<p>The Varnish Cache integration collects both metrics(<span data-type=\\"component\\" data-component=\\"strong\\"><span data-type=\\"prop\\" data-prop=\\"children\\">M</span></span>) and inventory(<span data-type=\\"component\\" data-component=\\"strong\\"><span data-type=\\"prop\\" data-prop=\\"children\\">I</span></span>) information.</p>
"
`;