Add types for backstopjs 4.1 (#36022)

types/backstopjs/backstopjs-tests.ts

@@ -0,0 +1,64 @@
+import backstop, { Scenario, Viewport } from 'backstopjs';
+
+/** Examples inspired on https://github.com/garris/BackstopJS#integration-options-local-install */
+
+backstop('approve').then(() => { }).catch(() => { });
+
+backstop('init');
+
+backstop('reference', {
+  filter: 'someScenarioLabelAsRegExString'
+});
+
+backstop('test', { config: 'custom/backstop/config.json' });
+
+backstop('test', {
+  filter: 'someScenarioLabelAsRegExString',
+  config: {
+    id: 'foo',
+    scenarios: [],
+    viewports: [],
+  }
+});
+
+/** Custom example */
+
+const scenarios: Scenario[] = [{ label: 'fake', url: 'fakeUrl' }];
+const viewports: Viewport[] = [
+  {
+    name: 'phone',
+    width: 320,
+    height: 480,
+  },
+  {
+    name: 'tablet',
+    width: 1024,
+    height: 768,
+  },
+  {
+    name: 'desktop',
+    width: 1280,
+    height: 1024,
+  },
+];
+backstop('test', {
+  config: {
+    scenarios,
+    viewports,
+    asyncCaptureLimit: 10,
+    asyncCompareLimit: 100,
+    baseUrl: 'http://fake:8080',
+    id: 'fakeId',
+    engine: 'puppeteer',
+    engineOptions: {
+      args: ['--no-sandbox'],
+    },
+    onReadyScript: 'fake/path',
+    paths: {
+      bitmaps_reference: 'fake/path',
+      bitmaps_test: 'fake/path',
+      html_report: 'fake/path',
+    },
+    report: ['browser'],
+  },
+});

types/backstopjs/index.d.ts

@@ -0,0 +1,94 @@
+// Type definitions for backstopjs 4.0
+// 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
+
+export interface Config {
+  asyncCaptureLimit?: number;
+  asyncCompareLimit?: number;
+  baseUrl?: string;
+  ci?: {
+    format?: string;
+    testReportFileName?: string;
+    testSuiteName?: string;
+  };
+  debugWindow?: boolean;
+  debug?: boolean;
+  engine?: 'chromy' | 'puppeteer';
+  engineOptions?: {
+    args: string[];
+    chromeFlags?: string[];
+    chromePath?: string;
+    ignoreHTTPSErrors?: boolean;
+    waitTimeout?: number;
+  };
+  id: string;
+  onBeforeScript?: string;
+  onReadyScript?: string;
+  paths?: {
+    ci_report?: string;
+    bitmaps_reference?: string;
+    bitmaps_test?: string;
+    engine_scripts?: string;
+    html_report?: string;
+    json_report?: string;
+  };
+  report?: Array<'browser' | 'CI' | 'json'>;
+  resembleOutputOptions?: { // See https://github.com/rsmbl/Resemble.js
+    errorColor?: {
+      red: number;
+      green: number;
+      blue: number;
+    },
+    errorType?: string;
+    transparency?: number;
+    ignoreAntialiasing?: boolean;
+  };
+  scenarios: Scenario[];
+  viewports: Viewport[];
+}
+
+export interface KeypressSelector {
+  selector: string;
+  keyPress: string;
+}
+
+/** The Backstop test definition. See https://github.com/garris/BackstopJS#advanced-scenarios */
+export interface Scenario {
+  clickSelector?: string; // Click the specified DOM element prior to screenshot
+  clickSelectors?: string[]; // Simulates multiple sequential click interactions
+  cookiePath?: string; // Import cookies in JSON format
+  delay?: number; // Wait for x milliseconds
+  expect?: number; // Use with selectorExpansion true to expect number of results found
+  hideSelectors?: string[]; // Selectors set to visibility: hidden
+  hoverSelector?: string; // Move pointer over the given DOM element prior to screenshot
+  hoverSelectors?: string[]; // Simulates multiple sequential hover interactions
+  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
+  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
+  readyEvent?: string; // Wait until this string has been logged to the console
+  readySelector?: string; // Wait until this selector exists before continuing
+  referenceUrl?: string; // Specify a different state or environment when creating reference
+  removeSelectors?: string[]; // Selectors set to display: none
+  requireSameDimensions?: boolean; // If true, any change in selector size will trigger a failure
+  selectors?: string[]; // Selectors to capture
+  selectorExpansion?: boolean; // If true, take screenshots of all matching selector instances
+  scrollToSelector?: string; // Scroll the specified DOM element into view prior to screenshots
+  url: string; // The url of your app state
+  viewports?: Viewport[]; // Override global viewports
+}
+
+export interface Viewport {
+  name: 'phone' | 'tablet' | 'desktop';
+  width: number;
+  height: number;
+}
+
+export default function backstop(
+  command: 'approve' | 'init' | 'reference' | 'test',
+  options?: { config?: Config | string, filter?: string },
+): Promise<void>;

types/backstopjs/tsconfig.json

@@ -0,0 +1,23 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictFunctionTypes": true,
+        "strictNullChecks": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.d.ts",
+        "backstopjs-tests.ts"
+    ]
+}

types/backstopjs/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }