diff --git a/apps/vr-tests/src/stories/PeoplePicker.stories.tsx b/apps/vr-tests/src/stories/PeoplePicker.stories.tsx index 799c7efd2b5c09..49aaefbe388bb4 100644 --- a/apps/vr-tests/src/stories/PeoplePicker.stories.tsx +++ b/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', () => ( + + + )) .addDecorator(story => ( >((value, index) => { + return { + item: { + key: value, + name: value + }, + selected: index === selectedIndex + }; + }); + +} + +const basicSuggestionRenderer = (props: ISimple) => { + return
{ props.name }
; +}; + +export interface ISimple { + key: string; + name: string; +} + +function mockOnClick() { + console.log('clicked'); +} + +describe('Suggestions', () => { + + it('renders a list properly', () => { + + const component = renderer.create( + + ); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); + + it('scrolls to selected index properly', () => { + const component = renderer.create( + + ); + + component.update( + + ); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); + +}); \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/pickers/Suggestions/__snapshots__/Suggestions.test.tsx.snap b/packages/office-ui-fabric-react/src/components/pickers/Suggestions/__snapshots__/Suggestions.test.tsx.snap new file mode 100644 index 00000000000000..dd6959f0d17886 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/pickers/Suggestions/__snapshots__/Suggestions.test.tsx.snap @@ -0,0 +1,3095 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Suggestions renders a list properly 1`] = ` +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+`; + +exports[`Suggestions scrolls to selected index properly 1`] = ` +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+`;