DEV Community

NullVoxPopuli
NullVoxPopuli

Posted on • Edited on

Logging tests to the terminal in browser tests to help AI find your test results

#ai #ember #claude #vscode

Before doing this though, you should see if your AI tool has tool to run your browser tests (VSCode has simpleBrowser, for example). That will yield better output, behavior, and interactions. AIs currently mistakenly want to use bad terminal commands for everything, so it's never a default for an AI to run tests in the browser without first being told.

When using vite, you have a huge ecosystem of plugins to choose from.

If you don't already have a vite app

Create one via:

pnpm dlx ember-cli@latest new demo-terminal-logging-during-ember-browser-testing --pnpm
cd demo-terminal-logging-during-ember-browser-testing
Enter fullscreen mode Exit fullscreen mode

I found https://github.com/patak-dev/vite-plugin-terminal by Patak, one of the vite developers!

Setting this plugin up an an ember project to get browser-test results in the terminal is quite straight-forward:

In your vite config, add the plugin:

+ import Terminal from 'vite-plugin-terminal';

  export default defineConfig({
    plugins: [
+     Terminal({ console: 'terminal' }),
      ember(),
      babel({
        babelHelpers: 'runtime',
        extensions,
      }),
    ],
  });
Enter fullscreen mode Exit fullscreen mode

And QUnit doesn't log to the console in /tests mode by default, so let's add some logging in tests/test-helper.js

import * as QUnit from 'qunit';

QUnit.testDone(function (info) {
  let status = info.failed === 0 ? '✅' : '❌';
  let statusText = info.failed === 0 ? 'passed' : 'failed';
  console.group();
  console.log(`${status} ${info.module} > ${info.name}: ${statusText}`);
  console.log(`   Assertions:`);
  for (let assertion of info.assertions) {
    console.log(`     ${assertion.result}: ${assertion.message}`);
  }
  console.log('');
  console.groupEnd();
});
Enter fullscreen mode Exit fullscreen mode

And that's it!

Now when you run tests, you'll get output like this:

» [vite] connected.
» DEBUG: -------------------------------
» DEBUG: Ember : 6.8.1
» DEBUG: -------------------------------
»   ✅ example > example test: passed
»      Assertions:
»        true: okay
»
»   ✅ ember-qunit: Ember.onerror validation > Ember.onerror is functioning properly: passed
»      Assertions:
»        true: Ember.onerror handler with invalid testing behavior detected. An Ember.onerror handler _must_ rethrow exceptions when `Ember.testing` is `true` or the test suite is unreliable. See https://git.io/vbine for more details.
»
Enter fullscreen mode Exit fullscreen mode

Try it out here: https://github.com/NullVoxPopuli/demo-terminal-logging-during-ember-browser-testing

Top comments (0)