diff --git a/src/components/flex/__snapshots__/flex_grid.test.js.snap b/src/components/flex/__snapshots__/flex_grid.test.js.snap
index 9d6170dedea..d4298d56e5f 100644
--- a/src/components/flex/__snapshots__/flex_grid.test.js.snap
+++ b/src/components/flex/__snapshots__/flex_grid.test.js.snap
@@ -5,5 +5,63 @@ exports[`EuiFlexGrid is rendered 1`] = `
aria-label="aria-label"
class="euiFlexGrid euiFlexGrid--gutterLarge euiFlexGrid--thirds testClass1 testClass2"
data-test-subj="test subject string"
+>
+
+ My Child
+
+
+`;
+
+exports[`EuiFlexGrid props columns 0 is rendered 1`] = `
+
+`;
+
+exports[`EuiFlexGrid props columns 2 is rendered 1`] = `
+
+`;
+
+exports[`EuiFlexGrid props columns 3 is rendered 1`] = `
+
+`;
+
+exports[`EuiFlexGrid props columns 4 is rendered 1`] = `
+
+`;
+
+exports[`EuiFlexGrid props gutterSize l is rendered 1`] = `
+
+`;
+
+exports[`EuiFlexGrid props gutterSize m is rendered 1`] = `
+
+`;
+
+exports[`EuiFlexGrid props gutterSize none is rendered 1`] = `
+
+`;
+
+exports[`EuiFlexGrid props gutterSize s is rendered 1`] = `
+
+`;
+
+exports[`EuiFlexGrid props gutterSize xl is rendered 1`] = `
+
`;
diff --git a/src/components/flex/__snapshots__/flex_group.test.js.snap b/src/components/flex/__snapshots__/flex_group.test.js.snap
index e9cbbd7879d..1ffdf27dcf7 100644
--- a/src/components/flex/__snapshots__/flex_group.test.js.snap
+++ b/src/components/flex/__snapshots__/flex_group.test.js.snap
@@ -5,5 +5,135 @@ exports[`EuiFlexGroup is rendered 1`] = `
aria-label="aria-label"
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--responsive testClass1 testClass2"
data-test-subj="test subject string"
+>
+
+ My Child
+
+
+`;
+
+exports[`EuiFlexGroup props alignItems center is rendered 1`] = `
+
+`;
+
+exports[`EuiFlexGroup props alignItems flexEnd is rendered 1`] = `
+
+`;
+
+exports[`EuiFlexGroup props alignItems flexStart is rendered 1`] = `
+
+`;
+
+exports[`EuiFlexGroup props alignItems stretch is rendered 1`] = `
+
+`;
+
+exports[`EuiFlexGroup props component div is rendered 1`] = `
+
+`;
+
+exports[`EuiFlexGroup props component span is rendered 1`] = `
+
+`;
+
+exports[`EuiFlexGroup props gutterSize l is rendered 1`] = `
+
+`;
+
+exports[`EuiFlexGroup props gutterSize m is rendered 1`] = `
+
+`;
+
+exports[`EuiFlexGroup props gutterSize none is rendered 1`] = `
+
+`;
+
+exports[`EuiFlexGroup props gutterSize s is rendered 1`] = `
+
+`;
+
+exports[`EuiFlexGroup props gutterSize xl is rendered 1`] = `
+
+`;
+
+exports[`EuiFlexGroup props gutterSize xs is rendered 1`] = `
+
+`;
+
+exports[`EuiFlexGroup props justifyContent center is rendered 1`] = `
+
+`;
+
+exports[`EuiFlexGroup props justifyContent flexEnd is rendered 1`] = `
+
+`;
+
+exports[`EuiFlexGroup props justifyContent flexStart is rendered 1`] = `
+
+`;
+
+exports[`EuiFlexGroup props justifyContent spaceAround is rendered 1`] = `
+
+`;
+
+exports[`EuiFlexGroup props justifyContent spaceBetween is rendered 1`] = `
+
+`;
+
+exports[`EuiFlexGroup props responsive false is rendered 1`] = `
+
+`;
+
+exports[`EuiFlexGroup props responsive true is rendered 1`] = `
+
+`;
+
+exports[`EuiFlexGroup props wrap false is rendered 1`] = `
+
+`;
+
+exports[`EuiFlexGroup props wrap true is rendered 1`] = `
+
`;
diff --git a/src/components/flex/__snapshots__/flex_item.test.js.snap b/src/components/flex/__snapshots__/flex_item.test.js.snap
index d6ebe3edef8..8c4e9cb01d7 100644
--- a/src/components/flex/__snapshots__/flex_item.test.js.snap
+++ b/src/components/flex/__snapshots__/flex_item.test.js.snap
@@ -1,5 +1,89 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`EuiFlexItem component div is rendered 1`] = `
+
+`;
+
+exports[`EuiFlexItem component span is rendered 1`] = `
+
+`;
+
+exports[`EuiFlexItem grow 1 is rendered 1`] = `
+
+`;
+
+exports[`EuiFlexItem grow 2 is rendered 1`] = `
+
+`;
+
+exports[`EuiFlexItem grow 3 is rendered 1`] = `
+
+`;
+
+exports[`EuiFlexItem grow 4 is rendered 1`] = `
+
+`;
+
+exports[`EuiFlexItem grow 5 is rendered 1`] = `
+
+`;
+
+exports[`EuiFlexItem grow 6 is rendered 1`] = `
+
+`;
+
+exports[`EuiFlexItem grow 7 is rendered 1`] = `
+
+`;
+
+exports[`EuiFlexItem grow 8 is rendered 1`] = `
+
+`;
+
+exports[`EuiFlexItem grow 9 is rendered 1`] = `
+
+`;
+
+exports[`EuiFlexItem grow 10 is rendered 1`] = `
+
+`;
+
+exports[`EuiFlexItem grow false is rendered 1`] = `
+
+`;
+
+exports[`EuiFlexItem grow true is rendered 1`] = `
+
+`;
+
exports[`EuiFlexItem is rendered 1`] = `
{
test('is rendered', () => {
const component = render(
-
+
+ My Child
+
);
expect(component)
.toMatchSnapshot();
});
+
+ describe('props', () => {
+ describe('gutterSize', () => {
+ GUTTER_SIZES.forEach(value => {
+ test(`${value} is rendered`, () => {
+ const component = render(
+
+ );
+
+ expect(component)
+ .toMatchSnapshot();
+ });
+ });
+ });
+
+ describe('columns', () => {
+ COLUMNS.forEach(value => {
+ test(`${value} is rendered`, () => {
+ const component = render(
+
+ );
+
+ expect(component)
+ .toMatchSnapshot();
+ });
+ });
+ });
+ });
});
diff --git a/src/components/flex/flex_group.test.js b/src/components/flex/flex_group.test.js
index 86fa6ff37e3..6f524315c91 100644
--- a/src/components/flex/flex_group.test.js
+++ b/src/components/flex/flex_group.test.js
@@ -1,16 +1,118 @@
import React from 'react';
import { render } from 'enzyme';
-import { requiredProps } from '../../test/required_props';
+import {
+ requiredProps,
+ startThrowingReactWarnings,
+ stopThrowingReactWarnings,
+} from '../../test';
-import { EuiFlexGroup } from './flex_group';
+import {
+ EuiFlexGroup,
+ GUTTER_SIZES,
+ ALIGN_ITEMS,
+ JUSTIFY_CONTENTS,
+} from './flex_group';
+
+beforeAll(startThrowingReactWarnings);
+afterAll(stopThrowingReactWarnings);
describe('EuiFlexGroup', () => {
test('is rendered', () => {
const component = render(
-
+
+ My Child
+
);
expect(component)
.toMatchSnapshot();
});
+
+ describe('props', () => {
+ describe('responsive', () => {
+ [true, false].forEach(value => {
+ test(`${value} is rendered`, () => {
+ const component = render(
+
+ );
+
+ expect(component)
+ .toMatchSnapshot();
+ });
+ });
+ });
+
+ describe('gutterSize', () => {
+ GUTTER_SIZES.forEach(value => {
+ test(`${value} is rendered`, () => {
+ const component = render(
+
+ );
+
+ expect(component)
+ .toMatchSnapshot();
+ });
+ });
+ });
+
+ describe('alignItems', () => {
+ ALIGN_ITEMS.forEach(value => {
+ test(`${value} is rendered`, () => {
+ const component = render(
+
+ );
+
+ expect(component)
+ .toMatchSnapshot();
+ });
+ });
+ });
+
+ describe('justifyContent', () => {
+ JUSTIFY_CONTENTS.forEach(value => {
+ test(`${value} is rendered`, () => {
+ const component = render(
+
+ );
+
+ expect(component)
+ .toMatchSnapshot();
+ });
+ });
+ });
+
+ describe('component', () => {
+ ['div', 'span'].forEach(value => {
+ test(`${value} is rendered`, () => {
+ const component = render(
+
+ );
+
+ expect(component)
+ .toMatchSnapshot();
+ });
+ });
+
+ ['h2'].forEach(value => {
+ test(`${value} is not rendered`, () => {
+ expect(() => render(
+
+ )).toThrow();
+ });
+ });
+ });
+
+ describe('wrap', () => {
+ [true, false].forEach(value => {
+ test(`${value} is rendered`, () => {
+ const component = render(
+
+ );
+
+ expect(component)
+ .toMatchSnapshot();
+ });
+ });
+ });
+ });
});
diff --git a/src/components/flex/flex_item.js b/src/components/flex/flex_item.js
index 2176153e4fb..da3aa8cbe4d 100644
--- a/src/components/flex/flex_item.js
+++ b/src/components/flex/flex_item.js
@@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
-const validGrowNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+export const GROW_SIZES = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
export const EuiFlexItem = ({
children,
@@ -15,7 +15,7 @@ export const EuiFlexItem = ({
'euiFlexItem',
{
'euiFlexItem--flexGrowZero': !grow,
- [`euiFlexItem--flexGrow${grow}`]: validGrowNumbers.indexOf(grow) >= 0
+ [`euiFlexItem--flexGrow${grow}`]: GROW_SIZES.indexOf(grow) >= 0
},
className
);
@@ -42,7 +42,7 @@ function growPropType(props, propName, componentName) {
const validValues = [
null, undefined,
true, false,
- ...validGrowNumbers
+ ...GROW_SIZES
];
if (validValues.indexOf(value) === -1) {
diff --git a/src/components/flex/flex_item.test.js b/src/components/flex/flex_item.test.js
index 280681aa3a7..2a95aa02f4a 100644
--- a/src/components/flex/flex_item.test.js
+++ b/src/components/flex/flex_item.test.js
@@ -1,8 +1,18 @@
import React from 'react';
import { render } from 'enzyme';
-import { requiredProps } from '../../test/required_props';
+import {
+ requiredProps,
+ startThrowingReactWarnings,
+ stopThrowingReactWarnings,
+} from '../../test';
-import { EuiFlexItem } from './flex_item';
+import {
+ EuiFlexItem,
+ GROW_SIZES,
+} from './flex_item';
+
+beforeAll(startThrowingReactWarnings);
+afterAll(stopThrowingReactWarnings);
describe('EuiFlexItem', () => {
test('is rendered', () => {
@@ -17,7 +27,7 @@ describe('EuiFlexItem', () => {
test('tests the grow prop correctly', () => {
const propType = EuiFlexItem.propTypes.grow;
- const validValues = [undefined, null, true, false, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+ const validValues = GROW_SIZES;
const invalidValues = ['true', 'false', '1', 0];
validValues.forEach(value =>
@@ -27,4 +37,38 @@ describe('EuiFlexItem', () => {
expect(propType({ grow: value }, `grow`) instanceof Error).toBe(true)
);
});
+
+ describe('grow', () => {
+ GROW_SIZES.concat([true, false]).forEach(value => {
+ test(`${value} is rendered`, () => {
+ const component = render(
+
+ );
+
+ expect(component)
+ .toMatchSnapshot();
+ });
+ });
+ });
+
+ describe('component', () => {
+ ['div', 'span'].forEach(value => {
+ test(`${value} is rendered`, () => {
+ const component = render(
+
+ );
+
+ expect(component)
+ .toMatchSnapshot();
+ });
+ });
+
+ ['h2'].forEach(value => {
+ test(`${value} is not rendered`, () => {
+ expect(() => render(
+
+ )).toThrow();
+ });
+ });
+ });
});
diff --git a/src/test/index.js b/src/test/index.js
index 02a0977d7b0..af1224e7b7b 100644
--- a/src/test/index.js
+++ b/src/test/index.js
@@ -1,3 +1,4 @@
export { requiredProps } from './required_props';
export { takeMountedSnapshot } from './take_mounted_snapshot';
export { findTestSubject } from './find_test_subject';
+export { startThrowingReactWarnings, stopThrowingReactWarnings } from './react_warnings';
diff --git a/src/test/react_warnings.js b/src/test/react_warnings.js
new file mode 100644
index 00000000000..2e5c6bd72db
--- /dev/null
+++ b/src/test/react_warnings.js
@@ -0,0 +1,22 @@
+/*
+ Use this utility to throw errors whenever React complains via the console
+ about things like invalid propTypes. This lets us assert that a propType
+ check works correctly with `toThrow`.
+
+ Usage looks like:
+
+ beforeAll(startThrowingReactWarnings);
+ afterAll(stopThrowingReactWarnings);
+*/
+
+const consoleWarn = console.warn;
+const consoleError = console.error;
+
+export const startThrowingReactWarnings = () => {
+ console.warn = console.error = (msg) => { throw msg; };
+};
+
+export const stopThrowingReactWarnings = () => {
+ console.warn = consoleWarn;
+ console.error = consoleError;
+};