Nary a Package Missing

    dialog-differ
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    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

    Keywords

    none

    Install

    npm i dialog-differ

    DownloadsWeekly Downloads

    67

    Version

    2.0.0

    License

    ISC

    Unpacked Size

    213 kB

    Total Files

    53

    Last publish

    Collaborators

    • skarbo