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

$3

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

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

$3

Returns Promise

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 } );
`

$3

Returns Promise

Diffs original dialogs with current dialogs.

| Property | Type | Description |
| --- | --- | --- |
| suite | DialogDiffer.Suite | Suite. See AbstractDatabaseLayer~initDB. |

`
const suiteResult = await dialogDiffer.diff( suite );
`

$3

Returns Promise

Get running or finished DialogDiffer.SuiteResult from database.

| Property | Type | Description |
| --- | --- | --- |
| suiteId | String | Suite id |

`
const suiteResult = await dialogDiffer.getSuiteResult( suiteId );
`

$3

Returns Promise>

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

`
const suiteResults = await dialogDiffer.getLastSuiteResults();
`

$3

Returns Promise

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

| Property | Type | Description |
| --- | --- | --- |
| dialogId | String | Dialog id |

`
await dialogDiffer.deleteDialogs( dialogId );
`

$3

Returns Promise

Delete DialogDiffer.SuiteResult for suiteId from database.

| Property | Type | Description |
| --- | --- | --- |
| suiteId | String | Suite id |

`
await dialogDiffer.deleteSuiteResult( suiteId );
`

Structure

$3

#### Suite

| Property | Type | Description |
| --- | --- | --- |
| options | DialogDiffer.Options | Suite options |
| original | Array | Original dialogs |
| current | Array | 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 }; } |

$3

#### Suite Result

| Property | Type | Description | Example |
| --- | --- | --- | --- |
| options | DialogDiffer.Options | Suite options |
| results | Array | 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 | Dialogs diffs | [ { index: 0, result: 'changed', base64: 'data:image/png;base64,...' } ] |

#### Suite Dialog Result

Extends Suite Dialog

| Property | Type | Description | Example |
| --- | --- | --- | --- |
| screenshots | Array | 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' } |

$3

#### 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