Regression Tests: Test helper events

common/changes/regressionTestHelperCLass_2017-04-20-20-27.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Regression Tests: Test Helper class updates",
+      "type": "patch"
+    }
+  ],
+  "email": "r33najain@gmail.com"
+}

packages/office-ui-fabric-react/src/VisualTestState.ts

@@ -4,14 +4,15 @@ export interface IVisualTestState {
 
 export const VisualTestState: IVisualTestState = {
   componentPath: [
+    './Breadcrumb/BreadcrumbPage.visualtest',
     './Button/CommandButtonPage.visualtest',
     './Button/CompoundButtonPage.visualtest',
     './Button/ContextualButtonPage.visualtest',
     './Button/DefaultButtonPage.visualtest',
     './Button/PrimaryButtonPage.visualtest',
     './Checkbox/CheckboxPage.visualtest',
     './ChoiceGroup/ChoiceGroupPage.visualtest',
-    './ContextualMenu/ContextualMenuPage.visualtest'
-
+    './ContextualMenu/ContextualMenuPage.visualtest',
+    './DocumentCard/DocumentCardPage.visualtest'
   ]
-};
+};

packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.visualtest.ts

@@ -0,0 +1,29 @@
+import { Casper, IPhantomCSS } from '../../visualtest/PhantomCssInterface';
+import { baseUrl } from '../../common/VisualTest';
+import { defaultScreenshot, mouseMoveScreenshot, mouseDownScreenshot, mouseClickScreenshot, testRunner } from '../../visualtest/RunVisualTest';
+import { IRunVisualTest } from '../../visualtest/IRunVisualTest';
+
+declare var phantomcss: IPhantomCSS;
+declare var casper: Casper;
+
+let componentIds: IRunVisualTest[] = [];
+let commands: ((params: IRunVisualTest) => void)[] = [];
+
+componentIds.push({
+  selector: '.' + 'Breadcrumb',
+  fileName: 'breadcrumb',
+  commands: [defaultScreenshot]
+});
+componentIds.push({
+  selector: '.' + 'ms-Breadcrumb-listItem',
+  fileName: 'breadcrumb',
+  commands: [mouseMoveScreenshot, mouseDownScreenshot, mouseClickScreenshot]
+});
+
+casper.
+  start(baseUrl + 'breadcrumb').
+  then(() => {
+    testRunner(componentIds);
+  });
+
+casper.run(() => { casper.test.done(); });

packages/office-ui-fabric-react/src/components/Breadcrumb/BreadcrumbPage.visualtest.tsx

@@ -0,0 +1,22 @@
+import { Breadcrumb } from './index';
+
+/* tslint:disable:no-unused-variable */
+import * as React from 'react';
+/* tslint:enable:no-unused-variable */
+export default class BreadcrumbVPage extends React.Component<any, any> {
+  public render() {
+    return <div>
+      <Breadcrumb
+        className='Breadcrumb'
+        items={ [
+          { text: 'Files', 'key': 'Files' },
+          { text: 'This is folder 1', 'key': 'f1' },
+          { text: 'This is folder 2', 'key': 'f2' },
+          { text: 'This is folder 3', 'key': 'f3' },
+          { text: 'This is folder 4', 'key': 'f4' },
+          { text: 'This is folder 5', 'key': 'f5' },
+        ] }
+        maxDisplayedItems={ 3 } />
+    </div>;
+  }
+}

packages/office-ui-fabric-react/src/components/Button/CommandButton.visualtest.ts

@@ -1,26 +1,38 @@
 import { Casper, IPhantomCSS } from '../../visualtest/PhantomCssInterface';
 import { baseUrl } from '../../common/VisualTest';
+import {
+  defaultScreenshot, mouseMoveScreenshot,
+  mouseDownScreenshot, mouseClickScreenshot, testRunner
+} from '../../visualtest/RunVisualTest';
+import { IRunVisualTest } from '../../visualtest/IRunVisualTest';
+
 declare var phantomcss: IPhantomCSS;
 declare var casper: Casper;
-/* tslint:disable:no-function-expression */
+
+let componentIds: IRunVisualTest[] = [];
+let commands: ((params: IRunVisualTest) => void)[] = [];
+
+commands.push(defaultScreenshot);
+commands.push(mouseMoveScreenshot);
+commands.push(mouseDownScreenshot);
+commands.push(mouseClickScreenshot);
+
+componentIds.push({
+  selector: '#' + 'CommandButton',
+  fileName: 'commandButton',
+  commands: commands
+});
+
+componentIds.push({
+  selector: '#' + 'CommandButtonDisabled',
+  fileName: 'commandButtonDisabled',
+  commands: commands
+});
+
 casper.
   start(baseUrl + 'commandButton').
-  then(function () {
-    phantomcss.screenshot('#CommandButton', 'CommandButton_not_pressed');
-  }).then(function () {
-    this.mouse.move('#CommandButton');
-    phantomcss.screenshot('#CommandButton', 'CommandButton_hovered');
-  }).then(function () {
-    this.mouse.down('#CommandButton');
-    phantomcss.screenshot('#CommandButton', 'CommandButton_pressed');
-  }).then(function () {
-    phantomcss.screenshot('#CommandButtonDisabled', 'CommandButtonDisabled_not_pressed');
-  }).then(function () {
-    this.mouse.move('#CommandButtonDisabled');
-    phantomcss.screenshot('#CommandButtonDisabled', 'CommandButtonDisabled_hovered');
-  }).then(function () {
-    this.mouse.down('#CommandButtonDisabled');
-    phantomcss.screenshot('#CommandButtonDisabled', 'CommandButtonDisabled_pressed');
+  then(() => {
+    testRunner(componentIds);
   });
-casper.run(function () { casper.test.done(); });
-/* tslint:enable:no-function-expression */
+
+casper.run(() => { casper.test.done(); });

packages/office-ui-fabric-react/src/components/Button/CommandButtonPage.visualtest.tsx

@@ -2,6 +2,7 @@ import { CommandButton } from './index';
 /* tslint:disable:no-unused-variable */
 import * as React from 'react';
 /* tslint:enable:no-unused-variable */
+
 export default class CommandButtonVPage extends React.Component<any, any> {
   public render() {
     return <div>