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

exports[`OuiCodeEditor behavior hint element should be disabled when the ui ace box gains focus 1`] = `
<button
  class="ouiCodeEditorKeyboardHint"
  data-test-subj="codeEditorHint"
  id="generated-id_codeEditor"
>
  <p
    class="ouiText"
  >
    Press Enter to start editing.
  </p>
  <p
    class="ouiText"
  >
    When you're done, press Escape to stop editing.
  </p>
</button>
`;

exports[`OuiCodeEditor behavior hint element should be enabled when the ui ace box loses focus 1`] = `
<button
  class="ouiCodeEditorKeyboardHint"
  data-test-subj="codeEditorHint"
  id="generated-id_codeEditor"
>
  <p
    class="ouiText"
  >
    Press Enter to start editing.
  </p>
  <p
    class="ouiText"
  >
    When you're done, press Escape to stop editing.
  </p>
</button>
`;

exports[`OuiCodeEditor behavior hint element should be tabable 1`] = `
<button
  class="ouiCodeEditorKeyboardHint"
  data-test-subj="codeEditorHint"
  id="generated-id_codeEditor"
>
  <p
    class="ouiText"
  >
    Press Enter to start editing.
  </p>
  <p
    class="ouiText"
  >
    When you're done, press Escape to stop editing.
  </p>
</button>
`;

exports[`OuiCodeEditor is rendered 1`] = `
<div
  class="ouiCodeEditorWrapper"
  data-test-subj="test subject string"
>
  <button
    class="ouiCodeEditorKeyboardHint"
    data-test-subj="codeEditorHint"
    id="generated-id_codeEditor"
  >
    <p
      class="ouiText"
    >
      Press Enter to start editing.
    </p>
    <p
      class="ouiText"
    >
      When you're done, press Escape to stop editing.
    </p>
  </button>
  <div
    class=" ace_editor ace-tm testClass1 testClass2"
    id="generated-id"
    style="width: 500px; height: 500px;"
  >
    <textarea
      aria-label="aria-label"
      autocapitalize="off"
      autocorrect="off"
      class="ace_text-input"
      spellcheck="false"
      style="opacity: 0;"
      tabindex="-1"
      wrap="off"
    />
    <div
      aria-hidden="true"
      class="ace_gutter"
    >
      <div
        class="ace_layer ace_gutter-layer ace_folding-enabled"
      />
      <div
        class="ace_gutter-active-line"
      />
    </div>
    <div
      class="ace_scroller"
    >
      <div
        class="ace_content"
      >
        <div
          class="ace_layer ace_print-margin-layer"
        >
          <div
            class="ace_print-margin"
            style="left: 4px; visibility: visible;"
          />
        </div>
        <div
          class="ace_layer ace_marker-layer"
        />
        <div
          class="ace_layer ace_text-layer"
          style="padding: 0px 4px;"
        />
        <div
          class="ace_layer ace_marker-layer"
        />
        <div
          class="ace_layer ace_cursor-layer ace_hidden-cursors"
        >
          <div
            class="ace_cursor"
          />
        </div>
      </div>
    </div>
    <div
      class="ace_scrollbar ace_scrollbar-v"
      style="display: none; width: 20px;"
    >
      <div
        class="ace_scrollbar-inner"
        style="width: 20px;"
      />
    </div>
    <div
      class="ace_scrollbar ace_scrollbar-h"
      style="display: none; height: 20px;"
    >
      <div
        class="ace_scrollbar-inner"
        style="height: 20px;"
      />
    </div>
    <div
      style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
    >
      <div
        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
      />
      <div
        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
      >
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
      </div>
    </div>
  </div>
</div>
`;

exports[`OuiCodeEditor props aria attributes allows setting aria-describedby on textbox 1`] = `
<div
  class="ouiCodeEditorWrapper"
  data-test-subj="codeEditorContainer"
>
  <button
    class="ouiCodeEditorKeyboardHint"
    data-test-subj="codeEditorHint"
    id="generated-id_codeEditor"
  >
    <p
      class="ouiText"
    >
      Press Enter to start editing.
    </p>
    <p
      class="ouiText"
    >
      When you're done, press Escape to stop editing.
    </p>
  </button>
  <div
    class=" ace_editor ace-tm"
    id="generated-id"
    style="width: 500px; height: 500px;"
  >
    <textarea
      aria-describedby="describedbyid"
      autocapitalize="off"
      autocorrect="off"
      class="ace_text-input"
      spellcheck="false"
      style="opacity: 0;"
      tabindex="-1"
      wrap="off"
    />
    <div
      aria-hidden="true"
      class="ace_gutter"
    >
      <div
        class="ace_layer ace_gutter-layer ace_folding-enabled"
      />
      <div
        class="ace_gutter-active-line"
      />
    </div>
    <div
      class="ace_scroller"
    >
      <div
        class="ace_content"
      >
        <div
          class="ace_layer ace_print-margin-layer"
        >
          <div
            class="ace_print-margin"
            style="left: 4px; visibility: visible;"
          />
        </div>
        <div
          class="ace_layer ace_marker-layer"
        />
        <div
          class="ace_layer ace_text-layer"
          style="padding: 0px 4px;"
        />
        <div
          class="ace_layer ace_marker-layer"
        />
        <div
          class="ace_layer ace_cursor-layer ace_hidden-cursors"
        >
          <div
            class="ace_cursor"
          />
        </div>
      </div>
    </div>
    <div
      class="ace_scrollbar ace_scrollbar-v"
      style="display: none; width: 20px;"
    >
      <div
        class="ace_scrollbar-inner"
        style="width: 20px;"
      />
    </div>
    <div
      class="ace_scrollbar ace_scrollbar-h"
      style="display: none; height: 20px;"
    >
      <div
        class="ace_scrollbar-inner"
        style="height: 20px;"
      />
    </div>
    <div
      style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
    >
      <div
        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
      />
      <div
        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
      >
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
      </div>
    </div>
  </div>
</div>
`;

exports[`OuiCodeEditor props aria attributes allows setting aria-labelledby on textbox 1`] = `
<div
  class="ouiCodeEditorWrapper"
  data-test-subj="codeEditorContainer"
>
  <button
    class="ouiCodeEditorKeyboardHint"
    data-test-subj="codeEditorHint"
    id="generated-id_codeEditor"
  >
    <p
      class="ouiText"
    >
      Press Enter to start editing.
    </p>
    <p
      class="ouiText"
    >
      When you're done, press Escape to stop editing.
    </p>
  </button>
  <div
    class=" ace_editor ace-tm"
    id="generated-id"
    style="width: 500px; height: 500px;"
  >
    <textarea
      aria-labelledby="labelledbyid"
      autocapitalize="off"
      autocorrect="off"
      class="ace_text-input"
      spellcheck="false"
      style="opacity: 0;"
      tabindex="-1"
      wrap="off"
    />
    <div
      aria-hidden="true"
      class="ace_gutter"
    >
      <div
        class="ace_layer ace_gutter-layer ace_folding-enabled"
      />
      <div
        class="ace_gutter-active-line"
      />
    </div>
    <div
      class="ace_scroller"
    >
      <div
        class="ace_content"
      >
        <div
          class="ace_layer ace_print-margin-layer"
        >
          <div
            class="ace_print-margin"
            style="left: 4px; visibility: visible;"
          />
        </div>
        <div
          class="ace_layer ace_marker-layer"
        />
        <div
          class="ace_layer ace_text-layer"
          style="padding: 0px 4px;"
        />
        <div
          class="ace_layer ace_marker-layer"
        />
        <div
          class="ace_layer ace_cursor-layer ace_hidden-cursors"
        >
          <div
            class="ace_cursor"
          />
        </div>
      </div>
    </div>
    <div
      class="ace_scrollbar ace_scrollbar-v"
      style="display: none; width: 20px;"
    >
      <div
        class="ace_scrollbar-inner"
        style="width: 20px;"
      />
    </div>
    <div
      class="ace_scrollbar ace_scrollbar-h"
      style="display: none; height: 20px;"
    >
      <div
        class="ace_scrollbar-inner"
        style="height: 20px;"
      />
    </div>
    <div
      style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
    >
      <div
        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
      />
      <div
        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
      >
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
      </div>
    </div>
  </div>
</div>
`;

exports[`OuiCodeEditor props isReadOnly renders alternate hint text 1`] = `
<div
  class="ouiCodeEditorWrapper"
  data-test-subj="codeEditorContainer"
>
  <button
    class="ouiCodeEditorKeyboardHint"
    data-test-subj="codeEditorHint"
    id="generated-id_codeEditor"
  >
    <p
      class="ouiText"
    >
      Press Enter to start interacting with the code.
    </p>
    <p
      class="ouiText"
    >
      When you're done, press Escape to stop interacting with the code.
    </p>
  </button>
  <div
    class=" ace_editor ace-tm"
    id="generated-id"
    style="width: 500px; height: 500px;"
  >
    <textarea
      autocapitalize="off"
      autocorrect="off"
      class="ace_text-input"
      spellcheck="false"
      style="opacity: 0;"
      tabindex="-1"
      wrap="off"
    />
    <div
      aria-hidden="true"
      class="ace_gutter"
    >
      <div
        class="ace_layer ace_gutter-layer ace_folding-enabled"
      />
      <div
        class="ace_gutter-active-line"
        style="display: none;"
      />
    </div>
    <div
      class="ace_scroller"
    >
      <div
        class="ace_content"
      >
        <div
          class="ace_layer ace_print-margin-layer"
        >
          <div
            class="ace_print-margin"
            style="left: 4px; visibility: visible;"
          />
        </div>
        <div
          class="ace_layer ace_marker-layer"
        />
        <div
          class="ace_layer ace_text-layer"
          style="padding: 0px 4px;"
        />
        <div
          class="ace_layer ace_marker-layer"
        />
        <div
          class="ace_layer ace_cursor-layer ace_hidden-cursors"
        >
          <div
            class="ace_cursor"
          />
        </div>
      </div>
    </div>
    <div
      class="ace_scrollbar ace_scrollbar-v"
      style="display: none; width: 20px;"
    >
      <div
        class="ace_scrollbar-inner"
        style="width: 20px;"
      />
    </div>
    <div
      class="ace_scrollbar ace_scrollbar-h"
      style="display: none; height: 20px;"
    >
      <div
        class="ace_scrollbar-inner"
        style="height: 20px;"
      />
    </div>
    <div
      style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
    >
      <div
        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
      />
      <div
        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
      >
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
      </div>
    </div>
  </div>
</div>
`;

exports[`OuiCodeEditor props theme renders terminal theme 1`] = `
<div
  class="ouiCodeEditorWrapper"
  data-test-subj="codeEditorContainer"
>
  <button
    class="ouiCodeEditorKeyboardHint"
    data-test-subj="codeEditorHint"
    id="generated-id_codeEditor"
  >
    <p
      class="ouiText"
    >
      Press Enter to start editing.
    </p>
    <p
      class="ouiText"
    >
      When you're done, press Escape to stop editing.
    </p>
  </button>
  <div
    class=" ace_editor ace-tm"
    id="generated-id"
    style="width: 500px; height: 500px;"
  >
    <textarea
      autocapitalize="off"
      autocorrect="off"
      class="ace_text-input"
      spellcheck="false"
      style="opacity: 0;"
      tabindex="-1"
      wrap="off"
    />
    <div
      aria-hidden="true"
      class="ace_gutter"
    >
      <div
        class="ace_layer ace_gutter-layer ace_folding-enabled"
      />
      <div
        class="ace_gutter-active-line"
      />
    </div>
    <div
      class="ace_scroller"
    >
      <div
        class="ace_content"
      >
        <div
          class="ace_layer ace_print-margin-layer"
        >
          <div
            class="ace_print-margin"
            style="left: 4px; visibility: visible;"
          />
        </div>
        <div
          class="ace_layer ace_marker-layer"
        />
        <div
          class="ace_layer ace_text-layer"
          style="padding: 0px 4px;"
        />
        <div
          class="ace_layer ace_marker-layer"
        />
        <div
          class="ace_layer ace_cursor-layer ace_hidden-cursors"
        >
          <div
            class="ace_cursor"
          />
        </div>
      </div>
    </div>
    <div
      class="ace_scrollbar ace_scrollbar-v"
      style="display: none; width: 20px;"
    >
      <div
        class="ace_scrollbar-inner"
        style="width: 20px;"
      />
    </div>
    <div
      class="ace_scrollbar ace_scrollbar-h"
      style="display: none; height: 20px;"
    >
      <div
        class="ace_scrollbar-inner"
        style="height: 20px;"
      />
    </div>
    <div
      style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
    >
      <div
        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
      />
      <div
        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
      >
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
      </div>
    </div>
  </div>
</div>
`;