golden/modules/multi-zoom-sk/multi-zoom-sk_test.ts

import './index';
import { expect } from 'chai';
import { eventPromise, setUpElementUnderTest } from '../../../infra-sk/modules/test_util';
import { diff16x16, left16x16, right16x16 } from './test_data';
import { MultiZoomSk } from './multi-zoom-sk';
import { MultiZoomSkPO } from './multi-zoom-sk_po';

describe('multi-zoom-sk', () => {
  const newInstance = setUpElementUnderTest<MultiZoomSk>('multi-zoom-sk');

  let multiZoomSk: MultiZoomSk;
  let multiZoomSkPO: MultiZoomSkPO;

  beforeEach(async () => {
    multiZoomSk = newInstance();
    multiZoomSkPO = new MultiZoomSkPO(multiZoomSk);

    const event = eventPromise('sources-loaded');
    multiZoomSk.details = {
      leftImageSrc: left16x16,
      diffImageSrc: diff16x16,
      rightImageSrc: right16x16,
      leftLabel: 'left16x16',
      rightLabel: 'right16x16',
    };
    // Even though the image is supplied via base64 encoding and no network traffic is required,
    // the browser asynchronously decodes the image, and then calls the load callback. Thus, we need
    // to wait for the appropriate event.
    await event;
  });

  it('has loaded pixel data for all three images', () => {
    // This is a private property.
    const loadedImageData = (multiZoomSk as any).loadedImageData as ImageData[];

    expect(loadedImageData.length).to.equal(3);
    // These are 16 x 16 images and the ImageData objects should reflect this.
    expect(loadedImageData[0].height).to.equal(16);
    expect(loadedImageData[0].width).to.equal(16);
    expect(loadedImageData[1].height).to.equal(16);
    expect(loadedImageData[1].width).to.equal(16);
    expect(loadedImageData[2].height).to.equal(16);
    expect(loadedImageData[2].width).to.equal(16);
  });

  it('uses u and y to go between biggest pixel diffs', async () => {
    // default values
    expect(multiZoomSk.x).to.equal(0);
    expect(multiZoomSk.y).to.equal(0);
    expect(await multiZoomSkPO.getCoordinate()).to.equal('(0, 0)');
    expect(await multiZoomSkPO.isNthDiffVisible()).to.be.false;

    await multiZoomSkPO.sendKeypress('u');
    expect(multiZoomSk.x).to.equal(12);
    expect(multiZoomSk.y).to.equal(13);
    expect(await multiZoomSkPO.getCoordinate()).to.equal('(12, 13)');

    expect(await multiZoomSkPO.getNthDiff()).to.equal('1st biggest pixel diff (out of 32)');

    await multiZoomSkPO.sendKeypress('u');
    expect(multiZoomSk.x).to.equal(12);
    expect(multiZoomSk.y).to.equal(14);
    expect(await multiZoomSkPO.getCoordinate()).to.equal('(12, 14)');

    expect(await multiZoomSkPO.getNthDiff()).to.equal('2nd biggest pixel diff (out of 32)');

    await multiZoomSkPO.sendKeypress('y');
    expect(multiZoomSk.x).to.equal(12);
    expect(multiZoomSk.y).to.equal(13);
    expect(await multiZoomSkPO.getCoordinate()).to.equal('(12, 13)');

    expect(await multiZoomSkPO.getNthDiff()).to.equal('1st biggest pixel diff (out of 32)');

    // Already at the beginning - this won't move anywhere.
    await multiZoomSkPO.sendKeypress('y');
    expect(multiZoomSk.x).to.equal(12);
    expect(multiZoomSk.y).to.equal(13);
    expect(await multiZoomSkPO.getCoordinate()).to.equal('(12, 13)');
  });

  it('provides pixel diff information for the current pixel once calculated', async () => {
    multiZoomSk.x = 12;
    multiZoomSk.y = 0;

    // We know there's a diff, but we haven't calculated all the diffs yet (it's done on demand
    // the first time the user clicks 'u')
    expect(await multiZoomSkPO.getLeftPixel()).to.equal('rgba(255, 10, 10, 128) #FF0A0A80');
    expect(await multiZoomSkPO.getDiffPixel()).to.equal('rgba(0, 0, 0, 76)');
    expect(await multiZoomSkPO.getRightPixel()).to.equal('rgba(255, 10, 10, 204) #FF0A0ACC');
    expect(await multiZoomSkPO.isNthDiffVisible()).to.be.false;

    // calculate the diffs.
    await multiZoomSkPO.sendKeypress('u');
    // Now when we move back to that pixel, we will see where this pixel diff ranks.
    multiZoomSk.x = 12;
    multiZoomSk.y = 0;

    expect(await multiZoomSkPO.getDiffPixel()).to.equal('rgba(0, 0, 0, 76)');
    expect(await multiZoomSkPO.getNthDiff()).to.equal('13th biggest pixel diff (out of 32)');
  });

  it('uses z and a to zoom in and out', async () => {
    // default value
    expect(multiZoomSk.zoomLevel).to.equal(8);

    // Zoom should increase by a factor of 2.
    await multiZoomSkPO.sendKeypress('z');
    expect(multiZoomSk.zoomLevel).to.equal(16);

    // and decrease by a factor of 2.
    await multiZoomSkPO.sendKeypress('a');
    expect(multiZoomSk.zoomLevel).to.equal(8);

    await multiZoomSkPO.sendKeypress('a'); // 4
    await multiZoomSkPO.sendKeypress('a'); // 2
    await multiZoomSkPO.sendKeypress('a'); // 1
    await multiZoomSkPO.sendKeypress('a'); // clamp at 1
    await multiZoomSkPO.sendKeypress('a'); // clamp at 1
    expect(multiZoomSk.zoomLevel).to.equal(1);
  });

  it('uses g to toggle the grid', async () => {
    // default value
    expect(multiZoomSk.showGrid).to.equal(false);

    await multiZoomSkPO.sendKeypress('g');
    expect(multiZoomSk.showGrid).to.equal(true);

    await multiZoomSkPO.sendKeypress('g');
    expect(multiZoomSk.showGrid).to.equal(false);
  });

  it('uses m to manually go through the images selected by the checkboxes', async () => {
    // default values
    expect(multiZoomSk.cyclingView).to.equal(true);
    expect(await multiZoomSkPO.isLeftCheckboxChecked()).to.be.true;
    expect(await multiZoomSkPO.isDiffCheckboxChecked()).to.be.false;
    expect(await multiZoomSkPO.isRightCheckboxChecked()).to.be.true;

    // By default, only rotates through the left and right images (index 0 and 2).
    expect(await multiZoomSkPO.getDisplayedImage()).to.equal('left');
    await multiZoomSkPO.sendKeypress('m');
    expect(multiZoomSk.cyclingView).to.equal(false);
    expect(await multiZoomSkPO.getDisplayedImage()).to.equal('right');

    await multiZoomSkPO.sendKeypress('m');
    expect(multiZoomSk.cyclingView).to.equal(false);
    expect(await multiZoomSkPO.getDisplayedImage()).to.equal('left');

    await multiZoomSkPO.clickDiffCheckbox();
    expect(await multiZoomSkPO.isLeftCheckboxChecked()).to.be.true;
    expect(await multiZoomSkPO.isDiffCheckboxChecked()).to.be.true;
    expect(await multiZoomSkPO.isRightCheckboxChecked()).to.be.true;

    await multiZoomSkPO.sendKeypress('m');
    expect(await multiZoomSkPO.isLeftDisplayed());
    expect(await multiZoomSkPO.getDisplayedImage()).to.equal('diff');

    await multiZoomSkPO.sendKeypress('m');
    expect(await multiZoomSkPO.getDisplayedImage()).to.equal('right');

    await multiZoomSkPO.sendKeypress('m');
    expect(await multiZoomSkPO.getDisplayedImage()).to.equal('left');

    // Uncheck the left and diff box (even though the left image is currently being displayed).
    await multiZoomSkPO.clickLeftCheckbox();
    await multiZoomSkPO.clickDiffCheckbox();
    expect(await multiZoomSkPO.isLeftCheckboxChecked()).to.be.false;
    expect(await multiZoomSkPO.isDiffCheckboxChecked()).to.be.false;
    expect(await multiZoomSkPO.isRightCheckboxChecked()).to.be.true;

    // It should snap to the right image and not move, since there are no other images selected.
    await multiZoomSkPO.sendKeypress('m');
    expect(await multiZoomSkPO.getDisplayedImage()).to.equal('right');
    await multiZoomSkPO.sendKeypress('m');
    expect(await multiZoomSkPO.getDisplayedImage()).to.equal('right');
  });

  it('uses h, j, k, and l to move the cursor', async () => {
    // default value
    expect(multiZoomSk.x).to.equal(0);
    expect(multiZoomSk.y).to.equal(0);

    await multiZoomSkPO.sendKeypress('j'); // down
    expect(multiZoomSk.x).to.equal(0);
    expect(multiZoomSk.y).to.equal(1);

    await multiZoomSkPO.sendKeypress('l'); // right
    expect(multiZoomSk.x).to.equal(1);
    expect(multiZoomSk.y).to.equal(1);

    await multiZoomSkPO.sendKeypress('k'); // up
    expect(multiZoomSk.x).to.equal(1);
    expect(multiZoomSk.y).to.equal(0);

    await multiZoomSkPO.sendKeypress('h'); // left
    expect(multiZoomSk.x).to.equal(0);
    expect(multiZoomSk.y).to.equal(0);
  });
});