Pagination and keyboard navigation on Reports test preview

[neojp]

I'd love a way to go to the previous and next test without having to close the preview modal. It would be specially great if you could use the arrow keys on your keyboard to do so.

[garris]

Yes. I have wanted to do that for the longest time. I am very time constrained but happy to answer questions / support where I can.

[FGRibreau]

Did not have the time right now to fork BackstopJS and implement this, but since I'm just moved out from axcept.io I wanted the same.

I had two minutes to write a very dirty and hacky little helper that I automatically append at the end of the html_report/index.html after each run. I works but it's very dirty 🤢🤮.

I hope I (or someone) will find the time to submit a clean PR to implement this in the React JS code.

// inside html_helper.js
window.onkeydown = (e) => {
  // yep, it does recompute everytime... Dirty. As I said.
  const btns = Array.from(document.querySelectorAll('button'));
  const testBtn = btns.filter(btn => btn.innerText === 'TEST')[0];
  const referenceBtn = btns.filter(btn => btn.innerText === 'REFERENCE')[0];
  const GRAY_COLOR = 'rgb(120, 120, 120)';

  function isBtnSelected(testBtn) {
    return window.getComputedStyle(testBtn).backgroundColor === GRAY_COLOR;
  }

  function openTest(testId) {
    // close previously opened window
    Array.from(document.querySelectorAll('.ReactModal__Content')).forEach(x => x.querySelectorAll('button')[0].click());

    // open window
    document.getElementById(testId).querySelectorAll('img#refImage')[0].click();
  }

  if (e.keyCode === 13 /* enter */ && e.ctrlKey === true) {
    // move into review mode
    if (window.tests.__current_index__ === undefined) {
      window.tests.__current_index__ = 0;
    } else {
      window.tests.__current_index__++;
      if (window.tests.__current_index__ >= window.tests.tests.length) {
        alert('the end');
        return;
      }
    }

    openTest(`test` + window.tests.__current_index__);
  }

  if (e.keyCode === 32) { // space
    // alternate between reference and test
    if (isBtnSelected(testBtn)) {
      referenceBtn.click();
    } else {
      testBtn.click();
    }
  }
};

document.body.children[0].prepend('Use ctrl+Enter to move into review mode or go next. Space to toggle between REFERENCE and TEST.');

// inside your a script that calls backstop
const validCmds = ['test', 'reference'];
const cmd = String(process.argv[2]).trim();

if (!validCmds.includes(cmd)) {
  throw new Error(
    'Invalid command "' +
      cmd +
      '", it must be one of: ' +
      JSON.stringify(validCmds)
  );
}

backstop(cmd, {
  config: {
  /* your configuration */
   }
}).then(appendHTMLHelper, appendHTMLHelper);

function appendHTMLHelper() {
  const fs = require('fs');
  const path = require('path');

  function read(file) {
    return fs.readFileSync(path.resolve(__dirname, file), 'utf8');
  }

  function write(file, data) {
    return fs.writeFileSync(path.resolve(__dirname, file), data, 'utf8');
  }

  const dest = './html_report/index.html';
  const hook = '<script type="text/javascript" src="index_bundle.js"></script>';
  const helper = read('./html_helper.js');
  write(dest, read(dest).replace(hook, hook + `<script>${helper}</script>`));
}

[cericoda]

@FGRibreau I don't have a clean PR, but developed your script a bit which is good enough for my needs.

it gives a page counter, and maps left and right arrows to prev/next image, which then jumps straight to scrubber.

to make this work, update your test scripts in package.json:

1. modify each test call to run post-test e.g.

"backstop:test": "backstop test --config=test/mainConfig.js; npm run post-test",

add the following script:-
"post-test": "node ./test/post-test.js"

2. drop the two attached files in the test directory, and after the test runs, it injects the script into the HTML report.

html_helper.js

post-test.js