How to use tdd-buffet - 6 common examples

export async function expectIdenticalScreenshots(
  screenshot: Buffer | string,
  baselineName: string,
  message?: string
) {
  const baseline = await fs.readFile(
    path.join(__dirname, `screenshots/${BROWSER}/${baselineName}.png`)
  );

  if (typeof screenshot === 'string') {
    // eslint-disable-next-line no-param-reassign
    screenshot = await fs.readFile(screenshot);
  }

  const differ = new PixelDiffer({ threshold: 0 });
  expect((await differ.compare(baseline, screenshot)).matches, message).to.be
    .true;
}

const baseConfig = require('tdd-buffet/config/jest.config');

module.exports = {
  ...baseConfig,

  // For some reason Jest will complain that this is duplicating the packages/mugshot/package.json.
  modulePathIgnorePatterns: ['/package.json'],
  moduleNameMapper: {
    ...baseConfig.moduleNameMapper,
    // For some reason the ts-jest helper doesn't pick this one up.
    '^mugshot/(.*)$': '/packages/mugshot/$1'
  },

  // We're doing multiple coverage runs so we don't want to print the table every time
  // and we want to check thresholds once at the end with nyc.
  coverageReporters: ['json', 'html'],
  coverageThreshold: undefined
};

export async function expectIdenticalBuffers(actual: Buffer, expected: Buffer) {
  const screenshotJimp = await Jimp.read(actual);
  const baselineJimp = await Jimp.read(expected);

  const sWidth = screenshotJimp.getWidth();
  const sHeight = screenshotJimp.getHeight();
  const bWidth = baselineJimp.getWidth();
  const bHeight = baselineJimp.getHeight();

  expect(sWidth, 'Images have different widths').to.equal(bWidth);
  expect(bHeight, 'Images have different heights').to.equal(bHeight);

  for (let x = 0; x < sWidth; x++) {
    for (let y = 0; y < sHeight; y++) {
      expect(
        Jimp.intToRGBA(screenshotJimp.getPixelColor(x, y)),
        `Pixel at ${x}, ${y} has a different color`
      ).to.deep.equal(Jimp.intToRGBA(baselineJimp.getPixelColor(x, y)));
    }
  }
}

export async function expectIdenticalBuffers(actual: Buffer, expected: Buffer) {
  const screenshotJimp = await Jimp.read(actual);
  const baselineJimp = await Jimp.read(expected);

  const sWidth = screenshotJimp.getWidth();
  const sHeight = screenshotJimp.getHeight();
  const bWidth = baselineJimp.getWidth();
  const bHeight = baselineJimp.getHeight();

  expect(sWidth, 'Images have different widths').to.equal(bWidth);
  expect(bHeight, 'Images have different heights').to.equal(bHeight);

  for (let x = 0; x < sWidth; x++) {
    for (let y = 0; y < sHeight; y++) {
      expect(
        Jimp.intToRGBA(screenshotJimp.getPixelColor(x, y)),
        `Pixel at ${x}, ${y} has a different color`
      ).to.deep.equal(Jimp.intToRGBA(baselineJimp.getPixelColor(x, y)));
    }
  }
}

export async function expectIdenticalBuffers(actual: Buffer, expected: Buffer) {
  const screenshotJimp = await Jimp.read(actual);
  const baselineJimp = await Jimp.read(expected);

  const sWidth = screenshotJimp.getWidth();
  const sHeight = screenshotJimp.getHeight();
  const bWidth = baselineJimp.getWidth();
  const bHeight = baselineJimp.getHeight();

  expect(sWidth, 'Images have different widths').to.equal(bWidth);
  expect(bHeight, 'Images have different heights').to.equal(bHeight);

  for (let x = 0; x < sWidth; x++) {
    for (let y = 0; y < sHeight; y++) {
      expect(
        Jimp.intToRGBA(screenshotJimp.getPixelColor(x, y)),
        `Pixel at ${x}, ${y} has a different color`
      ).to.deep.equal(Jimp.intToRGBA(baselineJimp.getPixelColor(x, y)));
    }
  }
}

export async function loadFixture(browser: Browser, name: string) {
  const fixtureContent = await fs.readFile(
    path.join(__dirname, `./fixtures/${name}.html`),
    { encoding: 'utf8' }
  );

  await browser.url('about:blank');

  await browser.execute(createFixture, fixtureContent);

  await setViewportSize(1024, 768);
}