Update BackstopJS types. (#37834)

* Update BackstopJS types.

Add support for `Viewport.label` which is more commonly used than `name`.
Seems to be a free form string, not a limited set of strings:
aa7de8ee05/examples/jsBasedConfig/backstopConfig.js

Looks like they may have switched from `name` to `label` in this commit:
0535303326 (diff-9e67e5c53c6a24f5b7f26f857fff03ea)

Change `misMatchThreshold` to a number:
aa7de8ee05/examples/jsBasedConfig/backstopConfig.js (L35)

* Fix version.

* I just tested this locally and you can any custom properties you like to scenarios, which is helpful for a custom onBefore script I'm working on.
This commit is contained in:
Christopher Deutsch 2019-08-24 23:50:15 -05:00 committed by Sheetal Nandi
parent dbdc1e5a5e
commit 6b3f9450aa
2 changed files with 44 additions and 4 deletions

View File

@ -23,7 +23,26 @@ backstop('test', {
/** Custom example */
const scenarios: Scenario[] = [{ label: 'fake', url: 'fakeUrl' }];
const scenarios: Scenario[] = [
{
label: 'Microsoft',
url: 'https://microsoft.com/',
referenceUrl: '',
readyEvent: '',
readySelector: '',
delay: 0,
hideSelectors: [],
removeSelectors: [],
hoverSelector: '',
clickSelector: '',
postInteractionWait: 0,
selectors: [],
selectorExpansion: true,
expect: 0,
misMatchThreshold: 0.1,
requireSameDimensions: true,
},
];
const viewports: Viewport[] = [
{
name: 'phone',
@ -40,6 +59,16 @@ const viewports: Viewport[] = [
width: 1280,
height: 1024,
},
{
label: 'tablet_v',
width: 1280,
height: 1024,
},
{
label: 'tablet_h',
width: 1280,
height: 1024,
},
];
backstop('test', {
config: {

View File

@ -1,4 +1,4 @@
// Type definitions for backstopjs 4.0
// Type definitions for backstopjs 4.1
// Project: https://github.com/garris/backstopjs#readme
// Definitions by: Darío Blanco <https://github.com/darioblanco>, MindDoc <https://github.com/minddocdev>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
@ -55,6 +55,7 @@ export interface KeypressSelector {
/** The Backstop test definition. See https://github.com/garris/BackstopJS#advanced-scenarios */
export interface Scenario {
[key: string]: any; // Allow for custom properties.
clickSelector?: string; // Click the specified DOM element prior to screenshot
clickSelectors?: string[]; // Simulates multiple sequential click interactions
cookiePath?: string; // Import cookies in JSON format
@ -66,7 +67,7 @@ export interface Scenario {
keyPressSelector?: KeypressSelector; // Press key in the DOM element prior to screenshot
keyPressSelectors?: KeypressSelector[]; // Simulates multiple sequential keypress interactions
label: string; // Tag saved with your reference images
misMatchThreshold?: string; // Percentage of different pixels allowed to pass test
misMatchThreshold?: number; // Percentage of different pixels allowed to pass test
onBeforeScript?: string; // Used to set up browser state e.g. cookies
onReadyScript?: string; // Used to modify UI state prior to screenshots e.g. hovers, clicks etc
postInteractionWait?: number; // Wait for selector (ms) after interacting with hover or click
@ -82,7 +83,17 @@ export interface Scenario {
viewports?: Viewport[]; // Override global viewports
}
export interface Viewport {
export type Viewport = ViewportNext | ViewportLegacy;
export interface ViewportNext {
label: string;
width: number;
height: number;
}
// Create a Viewport version that uses `name` for legacy support.
// https://github.com/garris/BackstopJS/blob/aa7de8ee059074f947768cfd04db1776348e1a7a/core/util/createBitmaps.js#L25
export interface ViewportLegacy {
name: 'phone' | 'tablet' | 'desktop';
width: number;
height: number;