Acceptance tests for ww and toggle click

hashicorp · Jun 30, 2023 · 320fea9 · 320fea9
1 parent 534bf39
commit 320fea9
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 1 deletion.
diff --git a/ui/app/templates/components/task-log.hbs b/ui/app/templates/components/task-log.hbs
@@ -27,6 +27,7 @@
         {{keyboard-shortcut label="Toggle word wrap" action=(action "toggleWrap") pattern=(array "w" "w") menuLevel=true }}
         checked={{this.wrapped}}
         {{on "change" this.toggleWrap}}
+        data-test-word-wrap-toggle
       as |F|>
         <F.Label>Word Wrap</F.Label>
       </Hds::Form::Toggle::Field>

diff --git a/ui/tests/acceptance/task-logs-test.js b/ui/tests/acceptance/task-logs-test.js
@@ -4,7 +4,12 @@
  */
 
 /* eslint-disable qunit/require-expect */
-import { click, currentURL, findAll } from '@ember/test-helpers';
+import {
+  click,
+  currentURL,
+  findAll,
+  triggerKeyEvent,
+} from '@ember/test-helpers';
 import { run } from '@ember/runloop';
 import { module, test } from 'qunit';
 import { setupApplicationTest } from 'ember-qunit';
@@ -69,6 +74,75 @@ module('Acceptance | task logs', function (hooks) {
     );
   });
 
+  test('logs can be word-wrapped', async function (assert) {
+    await TaskLogs.visit({ id: allocation.id, name: task.name });
+
+    assert.dom('[data-test-word-wrap-toggle]').isNotChecked();
+    assert.dom('[data-test-output]').doesNotHaveClass('wrapped');
+
+    run.later(() => {
+      run.cancelTimers();
+    }, 100);
+    await click('[data-test-word-wrap-toggle]');
+    assert.dom('[data-test-word-wrap-toggle]').isChecked();
+    assert.dom('[data-test-output]').hasClass('wrapped');
+
+    run.later(() => {
+      run.cancelTimers();
+    }, 100);
+    await click('[data-test-word-wrap-toggle]');
+    assert.dom('[data-test-word-wrap-toggle]').isNotChecked();
+    assert.dom('[data-test-output]').doesNotHaveClass('wrapped');
+
+    window.localStorage.clear();
+  });
+
+  test('logs in sidebar can be word-wrapped', async function (assert) {
+    await TaskLogs.visitParentJob({
+      id: job.id,
+      allocationId: allocation.id,
+      name: task.name,
+    });
+
+    run.later(() => {
+      run.cancelTimers();
+    }, 500);
+
+    const taskRow = [
+      ...findAll('.task-sub-row').filter((row) => {
+        return row.textContent.includes(task.name);
+      }),
+    ][0];
+
+    await click(taskRow.querySelector('button.logs-sidebar-trigger'));
+
+    assert.dom('[data-test-word-wrap-toggle]').isNotChecked();
+    assert.dom('[data-test-output]').doesNotHaveClass('wrapped');
+
+    run.later(() => {
+      run.cancelTimers();
+    }, 500);
+
+    // type "ww" to trigger word wrap
+    const W_KEY = 87;
+    triggerKeyEvent('.sidebar', 'keydown', W_KEY);
+    await triggerKeyEvent('.sidebar', 'keydown', W_KEY);
+
+    assert.dom('[data-test-word-wrap-toggle]').isChecked();
+    assert.dom('[data-test-output]').hasClass('wrapped');
+
+    run.later(() => {
+      run.cancelTimers();
+    }, 100);
+
+    triggerKeyEvent('.sidebar', 'keydown', W_KEY);
+    await triggerKeyEvent('.sidebar', 'keydown', W_KEY);
+    assert.dom('[data-test-word-wrap-toggle]').isNotChecked();
+    assert.dom('[data-test-output]').doesNotHaveClass('wrapped');
+
+    window.localStorage.clear();
+  });
+
   test('logs are accessible in a sidebar context', async function (assert) {
     await TaskLogs.visitParentJob({
       id: job.id,