Regression Test: Tests updates

common/changes/visualTests_2017-04-27-23-02.json

@@ -0,0 +1,25 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Regression Tests",
+      "type": "patch"
+    },
+    {
+      "comment": "",
+      "packageName": "@uifabric/utilities",
+      "type": "none"
+    },
+    {
+      "comment": "",
+      "packageName": "@uifabric/styling",
+      "type": "none"
+    },
+    {
+      "comment": "",
+      "packageName": "@uifabric/example-app-base",
+      "type": "none"
+    }
+  ],
+  "email": "r33najain@gmail.com"
+}

ghdocs/VISUALTESTS.md

@@ -11,58 +11,70 @@ In order to have PhantomCSS run you must have python version 2.6 or higher insta
 To run tests:
 
 1. Navigate to packages/office-ui-fabric-react in command prompt.
-2. gulp visualtest --production
+2. gulp visualtest --production                          // To generate and comapre the baseline
+3. gulp visualtest --production --match <ComponentName>  // To generate baseline for one component
+4. gulp visualtest --debug                               // To debug components at localhost
 
 To create new tests:
 1. Add a file to the component you want to test named [ComponentName]Page.visualtest.tsx. This is where you will put all of the code for rendering the components you want to test. For example:
 
-ButtonPage.visualtest.tsx
+CheckBoxPage.visualtest.tsx
 ```typescript
-import { DefaultButton, IconButton } from './index';
-import { IconName } from '../../Icon';
+import { Checkbox } from './index';
 /* tslint:disable:no-unused-variable */
 import * as React from 'react';
 /* tslint:enable:no-unused-variable */
-export default class ButtonVPage extends React.Component<any, any> {
+export default class CheckboxVPage extends React.Component<any, any> {
   public render() {
-    let iconName: IconName = 'Snow';
-    return <div >
-      <DefaultButton id='DefaultButton'> I'm a button! </DefaultButton>
-      <div style={ { backgroundColor: 'white' } }>
-        <IconButton id={ 'IconButton' } icon={ iconName } />
-      </div>
+    return <div style={ { backgroundColor: 'white' } } >
+      <Checkbox className='Checkbox' label='Check Box'
+        defaultChecked={ true } />
+      <Checkbox className='CheckboxDisabled' label='Check Box Disabled'
+        defaultChecked={ true }
+        disabled={ true } />
     </div>;
   }
 }
 ```
-2. Create a file to run the test, named [ComponentName].visualtest.ts . In this file you will need to import Casper and a IPhantomCss. Additionally you will need to declare 2 vars, phantomcss and casper (see below). Then you can use them to perform various functions. The proper start url to give casper is baseUrl + [ComponentName] (For example ` baseUrl + 'button' `). The Most important one is phantomcss.screenshot which actually performs the screenshot tests.
+2. Create a file to run the test, named [ComponentName].visualtest.ts . In this file you will need to import Casper and a IPhantomCss. Additionally you will need to declare 2 vars, phantomcss and casper (see below). Then you can use them to perform various functions. The proper start url to give casper is baseUrl + [ComponentName] (For example ` baseUrl + 'checkbox' `). The Most important one is phantomcss.screenshot which actually performs the screenshot tests.
 
 For Example:
-Button.visualtest.ts
+Checkbox.visualtest.ts
 ```typescript
-import { Casper, IPhantomCSS } from '../../visualtest/PhantomCssInterface';
-import { baseUrl } from '../../common/VisualTest'
-declare var phantomcss: IPhantomCSS;
+import { Casper } from '../../visualtest/PhantomCssInterface';
+import { baseUrl } from '../../common/VisualTest';
+import { defaultScreenshot, mouseMoveScreenshot, mouseDownScreenshot, mouseClickScreenshot } from '../../visualtest/RunVisualTest';
+import { IRunVisualTest } from '../../visualtest/IRunVisualTest';
+
 declare var casper: Casper;
-/* tslint:disable:no-function-expression */
+
+let componentIds: IRunVisualTest[] = [];  // Array of components
+
+componentIds.push({
+  selector: '.' + 'ms-Checkbox-input',// Selector for event
+  fileName: 'checkbox',// baseline file name
+  imageSelector: '.' + 'Checkbox',// Image selector
+  commands: [defaultScreenshot, mouseClickScreenshot, mouseMoveScreenshot, mouseDownScreenshot] // Events for screen shots refer RunVisualTest.ts
+});
+
+componentIds.push({
+  selector: '.' + 'CheckboxDisabled',
+  fileName: 'checkboxDisabled',
+  commands: [defaultScreenshot]
+});
+
 casper.
-  start(baseUrl + 'button').
-  then(function () {
-    phantomcss.screenshot('#DefaultButton', 'Button_not_pressed');
-  }).then(function () {
-    this.mouse.move('#DefaultButton');
-    phantomcss.screenshot('#DefaultButton', 'Button_Hovered');
-  }).then(function () {
-    this.mouse.down('#DefaultButton');
-    phantomcss.screenshot('#DefaultButton', 'Button_pressed');
-  }).then(function () {
-    phantomcss.screenshot('#IconButton', 'Icon_Button');
-  })
-casper.run(function () { casper.test.done(); });
-/* tslint:enable:no-function-expression */
-```
-3. Add you're test component to VisualTestRootState. You'll just need to add the componentPath.
+  start(baseUrl + 'checkbox').
+  then(() => {
+    testRunner();
+  });
 
+casper.run(() => { casper.test.done(); });
+```
+3. Add you're test component to VisualTestState.ts You'll just need to add the componentPath.
+```typescript
+'./Checkbox/CheckboxPage.visualtest',
+```
 ## Viewing Tests
 To see your test results navigate to the visualtests folder in packages/office-ui-fabric-react. In the base folder you can see current screenshots. In the Results you can see the results of the tests that were run, including failures and the diff screenshot (screenshot being compared to base).
 

packages/office-ui-fabric-react/gulpfile.js

@@ -30,8 +30,10 @@ let visualTest = build.subTask('visualtest', (gulp, options, done) => {
     directoryListing: false
   });
   if (!options.args['debug']) {
+    let matchFile = options.args['match'] || '';
+
     let casperJs = require('gulp-phantomcss');
-    gulp.src(['lib/**/*.visualtest.js'])
+    gulp.src(['lib/**/*' + matchFile + '.visualtest.js'])
       .pipe(casperJs(
         {
           screenshots: 'visualtests/baseline',

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

@@ -4,14 +4,18 @@ export interface IVisualTestState {
 
 export const VisualTestState: IVisualTestState = {
   componentPath: [
-    './Button/CommandButtonPage.visualtest',
-    './Button/CompoundButtonPage.visualtest',
-    './Button/ContextualButtonPage.visualtest',
-    './Button/DefaultButtonPage.visualtest',
-    './Button/PrimaryButtonPage.visualtest',
+    './Breadcrumb/BreadcrumbPage.visualtest',
+    './Button/ButtonPage.visualtest',
     './Checkbox/CheckboxPage.visualtest',
     './ChoiceGroup/ChoiceGroupPage.visualtest',
-    './ContextualMenu/ContextualMenuPage.visualtest'
-
+    './CommandBar/CommandBarPage.visualtest',
+    './ContextualMenu/ContextualMenuPage.visualtest',
+    './DetailsList/DetailsListPage.visualtest',
+    './Label/LabelPage.visualtest',
+    './DocumentCard/DocumentCardPage.visualtest',
+    './Dialog/DialogPage.visualtest',
+    './Facepile/FacepilePage.visualtest',
+    './Toggle/TogglePage.visualtest',
+    './Tooltip/TooltipPage.visualtest'
   ]
-};
+};

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

@@ -0,0 +1,29 @@
+import { Casper } from '../../visualtest/PhantomCssInterface';
+import { baseUrl } from '../../common/VisualTest';
+import { defaultScreenshot, mouseMoveScreenshot, mouseDownScreenshot, mouseClickScreenshot, testRunner } from '../../visualtest/RunVisualTest';
+import { IRunVisualTest } from '../../visualtest/IRunVisualTest';
+
+declare var casper: Casper;
+let componentIds: IRunVisualTest[] = [];
+
+componentIds.push({
+  selector: '.' + 'Breadcrumb',
+  fileName: 'breadcrumb',
+  imageSelector: '.' + 'Breadcrumb',
+
+  commands: [defaultScreenshot]
+});
+componentIds.push({
+  selector: '.' + 'ms-Breadcrumb-listItem',
+  fileName: 'breadcrumb',
+  imageSelector: '.' + '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,23 @@
+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 style={ { width: '600px' } }>
+      <Breadcrumb
+        className='Breadcrumb'
+
+        items={ [
+          { text: 'Files', 'key': 'Files' },
+          { text: 'This is folder 1', 'key': 'f1', onClick: () => { return; } },
+          { text: 'This is folder 2', 'key': 'f2', onClick: () => { return; } },
+          { text: 'This is folder 3', 'key': 'f3', onClick: () => { return; } },
+          { text: 'This is folder 4', 'key': 'f4', onClick: () => { return; } },
+          { text: 'This is folder 5', 'key': 'f5', onClick: () => { return; } },
+        ] }
+        maxDisplayedItems={ 3 } />
+    </div>;
+  }
+}

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

@@ -0,0 +1,79 @@
+import { Casper } from '../../visualtest/PhantomCssInterface';
+import { baseUrl } from '../../common/VisualTest';
+import {
+  defaultScreenshot, mouseMoveScreenshot, mouseDownScreenshot,
+  mouseClickScreenshot, testRunner, mouseSingleClickScreenshot
+} from '../../visualtest/RunVisualTest';
+import { IRunVisualTest } from '../../visualtest/IRunVisualTest';
+declare var casper: Casper;
+let componentIds: IRunVisualTest[] = [];
+
+componentIds.push({
+  selector: '#' + 'DefaultButton',
+  fileName: 'buttonDefault',
+  commands: [defaultScreenshot, mouseClickScreenshot, mouseDownScreenshot, mouseMoveScreenshot]
+});
+
+componentIds.push({
+  selector: '#' + 'DefaultButtonDisabled',
+  fileName: 'buttonDefaultDisabled',
+  commands: [defaultScreenshot]
+});
+componentIds.push({
+  selector: '#' + 'PrimaryButton',
+  fileName: 'buttonPrimary',
+  commands: [defaultScreenshot, mouseClickScreenshot, mouseDownScreenshot, mouseMoveScreenshot]
+
+});
+componentIds.push({
+  selector: '#' + 'PrimaryButtonDisabled',
+  fileName: 'buttonPrimaryDisabled',
+  commands: [defaultScreenshot]
+});
+
+componentIds.push({
+  selector: '#' + 'CommandButton',
+  fileName: 'buttonCommand',
+  commands: [defaultScreenshot, mouseDownScreenshot, mouseMoveScreenshot, mouseClickScreenshot]
+});
+
+componentIds.push({
+  selector: '#' + 'CommandButtonDisabled',
+  fileName: 'buttonCommandDisabled',
+  commands: [defaultScreenshot]
+});
+
+componentIds.push({
+  selector: '#' + 'CompoundButton',
+  fileName: 'buttonCompound',
+  commands: [defaultScreenshot, mouseClickScreenshot, mouseDownScreenshot, mouseMoveScreenshot]
+});
+componentIds.push({
+  selector: '#' + 'CompoundButtonDisabled',
+  fileName: 'buttonCompoundDisabled',
+  commands: [defaultScreenshot]
+});
+componentIds.push({
+  selector: '#' + 'ContextualButton',
+  fileName: 'buttonContextual',
+  commands: [defaultScreenshot, mouseClickScreenshot, mouseDownScreenshot, mouseMoveScreenshot]
+});
+
+componentIds.push({
+  selector: '#' + 'ContextualButton',
+  fileName: 'buttonContextual',
+  commands: [mouseSingleClickScreenshot],
+  childParams: {
+    selector: '.' + 'ms-ContextualMenu-list',
+    fileName: 'buttonContextualMenu',
+    commands: [defaultScreenshot]
+  }
+});
+
+casper.
+  start(baseUrl + 'button').
+  then(() => {
+    testRunner(componentIds);
+  });
+
+casper.run(() => { casper.test.done(); });

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

@@ -0,0 +1,73 @@
+import { DefaultButton, IconButton, CommandButton, CompoundButton, PrimaryButton } from './index';
+import { IconName } from '../../Icon';
+/* tslint:disable:no-unused-variable */
+import * as React from 'react';
+/* tslint:enable:no-unused-variable */
+export default class ButtonVPage extends React.Component<any, any> {
+  public render() {
+    let iconName: IconName = 'Snow';
+    return <div>
+      <div><label> Default Button:   </label>
+        <DefaultButton id='DefaultButton' icon='Add' text='Default Button' /></div>
+      <div><label> Default Button Disabled:   </label>&nbsp;
+        <DefaultButton id='DefaultButtonDisabled' disabled={ true } icon='Add' text='Default Button' /></div>&nbsp;
+      <div style={ { backgroundColor: 'white' } }>
+        <IconButton id={ 'IconButton' } iconProps={ { iconName } } />
+      </div>&nbsp;
+      <div style={ { backgroundColor: 'white' } }>
+        <CommandButton id='CommandButton'
+          icon='AddFriend'
+          text='Command Button' />
+      </div>&nbsp;
+      <div style={ { backgroundColor: 'white' } }>
+        <CommandButton id='CommandButtonDisabled' icon='AddFriend'
+          disabled={ true }
+          text='Command Button' />
+      </div >&nbsp;
+      <div>
+        <CompoundButton id='CompoundButton'
+          description='You can create a new account here.'
+          text='Compound Button' />
+      </div>&nbsp;
+      <div>
+        <CompoundButton id='CompoundButtonDisabled'
+          disabled={ true }
+          description='You can create a new account here.'
+          text='Compound Button' />
+      </div>&nbsp;
+      <div>
+        <PrimaryButton id='PrimaryButton' icon='Add' text='Primary Button' />
+      </div >&nbsp;
+      <div>
+        <PrimaryButton id='PrimaryButtonDisabled' disabled={ true } icon='Add' text='Primary Button' />
+      </div >&nbsp;
+
+      <div>
+        <DefaultButton
+          id='ContextualButton'
+          disabled={ false }
+          icon='Add'
+          text='New'
+          menuProps={ {
+            className: 'ContextualButtonMenu',
+            id: 'ContextualButtonMenu',
+            items: [
+              {
+                key: 'emailMessage',
+                name: 'Email message',
+                icon: 'Mail'
+              },
+              {
+                key: 'calendarEvent',
+                name: 'Calendar event',
+                icon: 'Calendar'
+              }
+            ]
+          }
+          }
+        >
+        </DefaultButton>
+      </div >
+    </div>;
+  }
+}