diff --git a/common/changes/office-ui-fabric-react/breadcrumb-validation_2018-04-24-20-18.json b/common/changes/office-ui-fabric-react/breadcrumb-validation_2018-04-24-20-18.json new file mode 100644 index 00000000000000..4b33ce7dc64ce2 --- /dev/null +++ b/common/changes/office-ui-fabric-react/breadcrumb-validation_2018-04-24-20-18.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Fix props validation for Breadcrumb", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "tmichon@microsoft.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx index 7209e8f3249262..04b58016825d56 100644 --- a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx @@ -203,8 +203,10 @@ export class Breadcrumb extends BaseComponent { * @param props Props to validate */ private _validateProps(props: IBreadcrumbProps): void { - const { items, overflowIndex } = props; - if (overflowIndex! < 0 || overflowIndex! > items.length - 1) { + const { maxDisplayedItems, overflowIndex, items } = props; + if (overflowIndex! < 0 || + maxDisplayedItems! > 1 && overflowIndex! > maxDisplayedItems! - 1 || + items.length > 0 && overflowIndex! > items.length - 1) { throw new Error('Breadcrumb: overflowIndex out of range'); } } diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.test.tsx b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.test.tsx index 7004f172c843c0..95047b9a51bfad 100644 --- a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.test.tsx +++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.test.tsx @@ -6,7 +6,17 @@ import * as renderer from 'react-test-renderer'; import { Breadcrumb, IBreadcrumbItem } from './index'; describe('Breadcrumb', () => { - it('renders breadcumb correctly', () => { + it('renders empty breadcrumb', () => { + const component = renderer.create( + + ); + + const tree = component.toJSON(); + + expect(tree).toMatchSnapshot(); + }); + + describe('basic rendering', () => { const items: IBreadcrumbItem[] = [ { text: 'TestText1', key: 'TestKey1' }, { text: 'TestText2', key: 'TestKey2' }, @@ -16,48 +26,56 @@ describe('Breadcrumb', () => { const divider = () => *; - let component = renderer.create( - - ); - - let tree = component.toJSON(); - expect(tree).toMatchSnapshot(); - - // With overflow - component = renderer.create( - - ); - - tree = component.toJSON(); - expect(tree).toMatchSnapshot(); - - // With custom divider - component = renderer.create( - - ); - - tree = component.toJSON(); - expect(tree).toMatchSnapshot(); - - // With overflow and overflowIndex - component = renderer.create( - - ); - - tree = component.toJSON(); - expect(tree).toMatchSnapshot(); + it('renders breadcumb correctly 1', () => { + const component = renderer.create( + + ); + + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); + + it('renders breadcumb correctly 2', () => { + // With overflow + const component = renderer.create( + + ); + + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); + + it('renders breadcumb correctly 3', () => { + // With custom divider + const component = renderer.create( + + ); + + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); + + it('renders breadcumb correctly 4', () => { + // With overflow and overflowIndex + const component = renderer.create( + + ); + + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); }); it('can call the callback when an item is clicked', () => { diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap index 0dc35c4aba18c0..46ad2f7c5ce807 100644 --- a/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Breadcrumb renders breadcumb correctly 1`] = ` +exports[`Breadcrumb basic rendering renders breadcumb correctly 1 1`] = `
`; -exports[`Breadcrumb renders breadcumb correctly 2`] = ` +exports[`Breadcrumb basic rendering renders breadcumb correctly 2 1`] = `
`; -exports[`Breadcrumb renders breadcumb correctly 3`] = ` +exports[`Breadcrumb basic rendering renders breadcumb correctly 3 1`] = `
`; -exports[`Breadcrumb renders breadcumb correctly 4`] = ` +exports[`Breadcrumb basic rendering renders breadcumb correctly 4 1`] = `
`; + +exports[`Breadcrumb renders empty breadcrumb 1`] = ` +
+
+
+
+
    +
+
+
+
+`;