Add batch support

[mastertheblaster]

Inside e2e tests i would really want to make multiple screenshots and checks per it/test

[yanivefraim]

One of the options is something like:

const screenshot1 = await page.screenshot();
// do something
const screenshot2 = await page.screenshot();
// do something
const screenshot3 = await page.screenshot();
const screenshots = [{screenshot: screenshot1, key: 'first screenshot'}, ...];
await expect(screenshots).toMatchScreenshot();

Then we can just eyes.open one time, batch all screenshots, and close.

This will also solve #4

[mastertheblaster]

import { eyes } from 'match-screenshot';

describe('suite', () => {

  it('test', async function () {
    const shots = new eyes.Shots();
    shots.add(await page.screenshot(), 'first one', { version: '3.0.0' });
    shots.add(await page.screenshot(), 'second one');
    shots.add(await page.screenshot(), 'third');
    await shots.match(this.getFullTitle(), { version: '2.0.0' });
  });

  it('using matcher', async () => {
    const shots = new eyes.Shots();
    shots.add(await page.screenshot(), 'first one', { version: '3.0.0' });
    shots.add(await page.screenshot(), 'second one');
    shots.add(await page.screenshot(), 'third');
    await expect(shots).toMatchScreenshot(this.getFullTitle(), { version: '2.0.0' });
  });

});

???

[mastertheblaster]

i am not really sure regarding the test title.
best case would be automatically get it from current test.

[yanivefraim]

1. I like the second option better (imo it is more readable).
2. Not sure why do we need const shots = new eyes.Shots(); in this case. We can just expect on an array of screenshots + pass options.
3. We can automatically take test name. I tried to reduce "magic" here... (I like things to be explicit)

[mastertheblaster]

3. How will you take test title automatically? Will you write a generic code which checks if it's mocha, if it's jest or if it's jasmine?

[yanivefraim]

hmmm, I think so... do you have a different way to do so?

[yanivefraim]

Something similar to this one:
https://github.com/wix-incubator/puppeteer-eyes.it/blob/master/lib/eyes-with.js#L29

[mastertheblaster]

Ok, i would suggest to do like this:

expect([...] || {}).toMatchEyes(testName, optionalParams);

expect(screenshots).toMatchEyes(this.getFullTitle());
expect(screenshots).toMatchEyes('test title');
expect(screenshots).toMatchEyes('test title', { version: '2.0.0' });

[mastertheblaster]

In such way eyes test title would be optional.

const {Assertion} = require('chai');
const {toMatchScreenshot} = require('match-screenshot/chai');
const {withMochaSpecTitle} = require('match-screenshot/mocha');
const {withCustomSpecTitle} = require('match-screenshot/custom');

Assertion.addMethod('toMatchScreenshot', withMochaSpecTitle(toMatchScreenshot));
Assertion.addMethod('toMatchScreenshot', withCustomSpecTitle(toMatchScreenshot, () => Math.random()));

expect(screenshots).toMatchEyes(); // will take a default one
expect(screenshots).toMatchEyes('my nice test'); // will override a default one

[mastertheblaster]

const screenshots = [{
   screenshot: screenshot1,
   windowName: 'first screen'
}, {
   screenshot: screenshot2,
   windowName: 'second screen'
}];

screenshots definition looks complex IMHO

Maybe having an object would be much easier?

expect({
  'first screen': screenshot1,
  'second screen' screenshot2
}).toMatchEyes();

[mastertheblaster]

You put 👍 for everything :) Regarding matcher API I am ok fine. Can implement.
Regarding screenshots structure, not really sure.
Which one do you prefer ? string -> screenshot or {windowName: '', image: null} ?

[yanivefraim]

Sorry, was too tired and watched from mobile.

imo:

1. Screenshot api is nice. What if user did not use 'with...' wrapper? Maybe we just won't override? (like it is today). This way all of this will be optional.
2. Regarding screenshot structure, I agree, {key: screenshot} is nicer.

LMK if I can help with that