Pickers: Add suggestions tests (#4409)

* Revert "FocusTrapZone does not correctly trap focus when last child is FocusZone (#4172)"

This reverts commit 699fa69.

* fix picker suggestions and add many tests

* adding snap file

* adding change file

* improve test

* fix tests and config

* revert test changes

* last test update

* update test name and snapshot

* undo suggestions change so it will merge properly

* revert change to suggestions

apps/vr-tests/src/stories/PeoplePicker.stories.tsx

@@ -47,6 +47,56 @@ const people: (IPersonaProps & { key: string | number })[] = [
     tertiaryText: 'In a meeting',
     optionalText: 'Available at 4:00pm',
     presence: PersonaPresence.offline
+  },
+  {
+    key: 5,
+    imageUrl: TestImages.personaMale,
+    imageInitials: 'RK',
+    primaryText: 'Alex Lundberg1',
+    secondaryText: 'Financial Analyst',
+    tertiaryText: 'In a meeting',
+    optionalText: 'Available at 4:00pm',
+    presence: PersonaPresence.offline
+  },
+  {
+    key: 6,
+    imageUrl: TestImages.personaMale,
+    imageInitials: 'RK',
+    primaryText: 'Alex Lundberg2',
+    secondaryText: 'Financial Analyst',
+    tertiaryText: 'In a meeting',
+    optionalText: 'Available at 4:00pm',
+    presence: PersonaPresence.offline
+  },
+  {
+    key: 7,
+    imageUrl: TestImages.personaMale,
+    imageInitials: 'RK',
+    primaryText: 'Alex Lundberg2',
+    secondaryText: 'Financial Analyst',
+    tertiaryText: 'In a meeting',
+    optionalText: 'Available at 4:00pm',
+    presence: PersonaPresence.offline
+  },
+  {
+    key: 8,
+    imageUrl: TestImages.personaMale,
+    imageInitials: 'RK',
+    primaryText: 'Alex Lundberg3',
+    secondaryText: 'Financial Analyst',
+    tertiaryText: 'In a meeting',
+    optionalText: 'Available at 4:00pm',
+    presence: PersonaPresence.offline
+  },
+  {
+    key: 9,
+    imageUrl: TestImages.personaMale,
+    imageInitials: 'RK',
+    primaryText: 'Alex Lundberg4',
+    secondaryText: 'Financial Analyst',
+    tertiaryText: 'In a meeting',
+    optionalText: 'Available at 4:00pm',
+    presence: PersonaPresence.offline
   }
 ];
 
@@ -96,7 +146,22 @@ storiesOf('PeoplePicker', module)
       pickerSuggestionsProps={ suggestionProps }
       disabled
     />
-  ))
+  )).add('Normal with text', () => (
+    <Screener
+      steps={ new Screener.Steps()
+        .snapshot('default', { cropTo: '.testWrapper' })
+        .click('.ms-BasePicker-input')
+        .setValue('.ms-BasePicker-input', 'a')
+        .snapshot('suggestion: "a"')
+        .end() }>
+      <NormalPeoplePicker
+        onResolveSuggestions={ getPeople }
+        onEmptyInputFocus={ getPeople }
+        getTextFromItem={ getTextFromItem }
+        className={ 'ms-PeoplePicker' }
+        pickerSuggestionsProps={ suggestionProps }
+      />
+    </Screener>))
   .addDecorator(story => (
     <Screener
       steps={ new Screener.Steps()

packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.test.tsx

@@ -0,0 +1,91 @@
+
+/* tslint:disable:no-unused-variable */
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import * as ReactTestUtils from 'react-dom/test-utils';
+/* tslint:enable:no-unused-variable */
+import * as renderer from 'react-test-renderer';
+
+import { Suggestions } from './Suggestions';
+import { ISuggestionItemProps } from './Suggestions.types';
+import { ISuggestionModel } from './SuggestionsController';
+
+const suggestions = [
+  'black',
+  'blue',
+  'brown',
+  'cyan',
+  'green',
+  'magenta',
+  'mauve',
+  'orange',
+  'pink',
+  'purple',
+  'red',
+  'rose',
+  'violet',
+  'white',
+  'yellow'];
+
+function generateSimpleSuggestions(selectedIndex: number = 0) {
+  return suggestions.map<ISuggestionModel<ISimple>>((value, index) => {
+    return {
+      item: {
+        key: value,
+        name: value
+      },
+      selected: index === selectedIndex
+    };
+  });
+
+}
+
+const basicSuggestionRenderer = (props: ISimple) => {
+  return <div> { props.name } </div>;
+};
+
+export interface ISimple {
+  key: string;
+  name: string;
+}
+
+function mockOnClick() {
+  console.log('clicked');
+}
+
+describe('Suggestions', () => {
+
+  it('renders a list properly', () => {
+
+    const component = renderer.create(
+      <Suggestions
+        onRenderSuggestion={ basicSuggestionRenderer }
+        onSuggestionClick={ mockOnClick }
+        suggestions={ generateSimpleSuggestions() }
+      />
+    );
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('scrolls to selected index properly', () => {
+    const component = renderer.create(
+      <Suggestions
+        onRenderSuggestion={ basicSuggestionRenderer }
+        onSuggestionClick={ mockOnClick }
+        suggestions={ generateSimpleSuggestions() }
+      />
+    );
+
+    component.update(
+      <Suggestions
+        onRenderSuggestion={ basicSuggestionRenderer }
+        onSuggestionClick={ mockOnClick }
+        suggestions={ generateSimpleSuggestions(8) }
+      />
+    );
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+});