Dialog differ

WORK IN PROGRESS

An application for diffing two dialogs against each other.

Uses Google Chrome's Puppeteer to take screenshots and ImageDiff to compare screenshots.

A collaboration with Starak.

Required

Node 6+

Use

npm install dialog-differ

const DialogDiffer = require( 'dialog-differ' );

const suite = { // see 'Suite' structure
    options: {
        sizes: [
            { width: 460, height: 350 },
            { width: 320, height: 150 }
        ],
        originalVersion: '1.0.1',
        currentVersion: '1.0.2'        
    },
    original: [
        {
            id: 'first',
            version: '1.0.1',
            url: 'http://example.com/1.0.1/dialog-first.html'
        },
        {
            id: 'second',
            version: '1.0.1',
            url: 'http://example.com/1.0.1/dialog-second.html'
        }
    ],
    current: [
        {
            id: 'first',
            version: '1.0.2',
            url: 'http://example.com/1.0.2/dialog-first.html'
        },
        {
            id: 'second',
            version: '1.0.2',
            url: 'http://example.com/1.0.2/dialog-second.html'
        }
    ]
};

// create dialog differ
const dialogDiffer = new DialogDiffer();

// init dialog differ
await dialogDiffer.initDialogDiffer( { databaseArgs: `${__dirname}/database.json` } ); // store database in database.json

// diff suite
const suiteResult = await dialogDiffer.diff( suite ); // see 'SuiteResult' structure

Methods

constructor

Property	Type	Description
[databaseLayer]	AbstractDatabaseLayer	Database layer. Default LowDbDatabaseLayer.
[logLevel]	`String`	Log level. Default error.

const dialogDiffer = new DialogDiffer( {
    databaseLayer = null,
    logLevel = null,
} )

initDialogDiffer

Returns Promise<void>

Method to initialize dialog differ. Used to send arguments to database layer.

Property	Type	Description
[databaseArgs]	`any`	Database arguments. See AbstractDatabaseLayer~initDB.

// store database in database.json when using LowDbDatabaseLayer
await dialogDiffer.initDialogDiffer( { databaseArgs: `${__dirname}/database.json` } );

diff

Returns Promise<DialogDiffer.SuiteResult>

Diffs original dialogs with current dialogs.

Property	Type	Description
suite	`DialogDiffer.Suite`	Suite. See AbstractDatabaseLayer~initDB.

const suiteResult = await dialogDiffer.diff( suite );

getSuiteResult

Returns Promise<DialogDiffer.SuiteResult>

Get running or finished DialogDiffer.SuiteResult from database.

Property	Type	Description
suiteId	`String`	Suite id

const suiteResult = await dialogDiffer.getSuiteResult( suiteId );

getLastSuiteResults

Returns Promise<Array<DialogDiffer.SuiteResult>>

Get list of latest running or finished DialogDiffer.SuiteResult from database.

const suiteResults = await dialogDiffer.getLastSuiteResults();

deleteDialogs

Returns Promise<Boolean>

Delete all DialogDiffer.DialogScreenshots for Dialogs matching dialogId from database.

Property	Type	Description
dialogId	`String`	Dialog id

await dialogDiffer.deleteDialogs( dialogId );

deleteSuiteResult

Returns Promise<Boolean>

Delete DialogDiffer.SuiteResult for suiteId from database.

Property	Type	Description
suiteId	`String`	Suite id

await dialogDiffer.deleteSuiteResult( suiteId );

Structure

Input

Suite

Property	Type	Description
options	`DialogDiffer.Options`	Suite options
original	`Array<DialogDiffer.Dialog>`	Original dialogs
current	`Array<DialogDiffer.Dialog>`	Current dialogs

Suite Options

Property	Type	Description	Example
sizes	`Array<{ width: Number, height: Number }>`	Sizes	`[ { width: 460, height: 350 } ]`
originalVersion	`String`	Original version	`1.0.1`
currentVersion	`String`	Current version	`1.0.2`
[isForceSnap]	`Boolean`	Force snap	`false`
[isForceDiff]	`Boolean`	Force diff	`false`

Suite Dialog

Property	Type	Description	Example
version	`String`	Dialog version	`1.0.1`
id	`String`	Dialog id	`first`
url	`String`	Dialog URL	`http://example.com/1.0.1/dialog-first.html`
[hash]	`String`	URL hash	`#hash`
[waitForSelector]	`String`	Wait for selector	`body.active`
[timeout]	`Number`	Timeout before taking snap (ms)	`250`
[crop]	`String`	Selector to use for cropping screenshot	`#container`
[resize]	`Function(defaultWidth, defaultHeight): { width: Number, height: Number }`	Function evaluated by Puppeteer which returns the new size to use for screenshot	`function() { var container = document.querySelector('#container'); return { width: container.scrollWidth, height: container.scrollHeight }; }`

Result

Suite Result

Property	Type	Description	Example
options	`DialogDiffer.Options`	Suite options
results	`Array<DialogDiffer.DialogsResult>`	Dialog results	`[ DialogDiffer.DialogsResult, ... ]`

Suite Dialogs Result

Property	Type	Description	Example
dialogId	`String`	Dialog id	`first`
original	`DialogDiffer.DialogResult`	Original dialog	`{ id: 'first', version: '1.0.1', url: ..., screenshots: [ ... ] }`
current	`DialogDiffer.DialogResult`	Current dialog	`{ id: 'first', version: '1.0.2', url: ..., screenshots: [ ... ] }`
originalVersion	`String`	Original version	`1.0.1`
currentVersion	`String`	Current version	`1.0.2`
result	`DifferConstant`	Diff result	`changed`
differ	`Array<DialogDiffer.DialogResultDiff>`	Dialogs diffs	`[ { index: 0, result: 'changed', base64: 'data:image/png;base64,...' } ]`

Suite Dialog Result

Extends Suite Dialog

Property	Type	Description	Example
screenshots	`Array<base64: String, width: String, height: String>`	Dialog screenshots	`[ { base64: 'data:image/png;base64,...', width: 460, height: 350 } ]`
[error]	`{ code: String, message: String }`	Error when creating screenshot	`{ code: 'snap-dialog-from-browser-error', message: 'Could not snap dialog url \'http://example.com/1.0.1/dialog-first.html\'' }`

Suite Dialog Result Diff

Property	Type	Description	Example
index	`Number`	Index	`0`
result	`DifferConstant`	Diff result	`identical`
base64	`String`	Diff image	`data:image/png;base64,...`

Suite Error

Extends JS Error

Property	Type	Description	Example
message	`String`	Error message	Unexpected error
code	`ErrorConstants`	Error code	`unexpected-error`
args	`Object`	Error arguments	`{ dialogId: 'one' }`

Constants

Error Constants

See ErrorConstants

Property	Type	Description
`unexpected-error`	`String`	Unexpected error

TODO More errors

Differ Constants

Property	Type	Description
`identical`	`String`	Identical dialog/screenshot
`changed`	`String`	Changed dialog/screenshot
`new`	`String`	New dialog/screenshot
`deleted`	`String`	Deleted dialog/screenshot

Logger Constants

Property	Type	Description
`none`	`String`	No logging
`debug`	`String`	Log, info and error logging
`info`	`String`	Info and error logging
`error`	`String`	Error logging

Tests

npm install
npm test

Build

npm run dist

Todo

Examples

Skarbo/dialog-differ