Flex tests (#192)

* Flex group tests * Flex grid tests * Flex item tests
elastic · Dec 7, 2017 · 4dfaf0b · 4dfaf0b
1 parent c970d73
commit 4dfaf0b
Show file tree

Hide file tree

Showing 9 changed files with 486 additions and 11 deletions.
diff --git 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"
+>
+  <h2>
+    My Child
+  </h2>
+</div>
+`;
+
+exports[`EuiFlexGrid props columns 0 is rendered 1`] = `
+<div
+  class="euiFlexGrid euiFlexGrid--gutterLarge euiFlexGrid--wrap"
+/>
+`;
+
+exports[`EuiFlexGrid props columns 2 is rendered 1`] = `
+<div
+  class="euiFlexGrid euiFlexGrid--gutterLarge euiFlexGrid--halves"
+/>
+`;
+
+exports[`EuiFlexGrid props columns 3 is rendered 1`] = `
+<div
+  class="euiFlexGrid euiFlexGrid--gutterLarge euiFlexGrid--thirds"
+/>
+`;
+
+exports[`EuiFlexGrid props columns 4 is rendered 1`] = `
+<div
+  class="euiFlexGrid euiFlexGrid--gutterLarge euiFlexGrid--fourths"
+/>
+`;
+
+exports[`EuiFlexGrid props gutterSize l is rendered 1`] = `
+<div
+  class="euiFlexGrid euiFlexGrid--gutterLarge euiFlexGrid--wrap"
+/>
+`;
+
+exports[`EuiFlexGrid props gutterSize m is rendered 1`] = `
+<div
+  class="euiFlexGrid euiFlexGrid--gutterMedium euiFlexGrid--wrap"
+/>
+`;
+
+exports[`EuiFlexGrid props gutterSize none is rendered 1`] = `
+<div
+  class="euiFlexGrid euiFlexGrid--wrap"
+/>
+`;
+
+exports[`EuiFlexGrid props gutterSize s is rendered 1`] = `
+<div
+  class="euiFlexGrid euiFlexGrid--gutterSmall euiFlexGrid--wrap"
+/>
+`;
+
+exports[`EuiFlexGrid props gutterSize xl is rendered 1`] = `
+<div
+  class="euiFlexGrid euiFlexGrid--gutterXLarge euiFlexGrid--wrap"
 />
 `;
diff --git 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"
+>
+  <h2>
+    My Child
+  </h2>
+</div>
+`;
+
+exports[`EuiFlexGroup props alignItems center is rendered 1`] = `
+<div
+  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--responsive"
+/>
+`;
+
+exports[`EuiFlexGroup props alignItems flexEnd is rendered 1`] = `
+<div
+  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsEnd euiFlexGroup--responsive"
+/>
+`;
+
+exports[`EuiFlexGroup props alignItems flexStart is rendered 1`] = `
+<div
+  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsStart euiFlexGroup--responsive"
+/>
+`;
+
+exports[`EuiFlexGroup props alignItems stretch is rendered 1`] = `
+<div
+  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--responsive"
+/>
+`;
+
+exports[`EuiFlexGroup props component div is rendered 1`] = `
+<div
+  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--responsive"
+/>
+`;
+
+exports[`EuiFlexGroup props component span is rendered 1`] = `
+<span
+  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--responsive"
+/>
+`;
+
+exports[`EuiFlexGroup props gutterSize l is rendered 1`] = `
+<div
+  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--responsive"
+/>
+`;
+
+exports[`EuiFlexGroup props gutterSize m is rendered 1`] = `
+<div
+  class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--responsive"
+/>
+`;
+
+exports[`EuiFlexGroup props gutterSize none is rendered 1`] = `
+<div
+  class="euiFlexGroup euiFlexGroup--responsive"
+/>
+`;
+
+exports[`EuiFlexGroup props gutterSize s is rendered 1`] = `
+<div
+  class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--responsive"
+/>
+`;
+
+exports[`EuiFlexGroup props gutterSize xl is rendered 1`] = `
+<div
+  class="euiFlexGroup euiFlexGroup--gutterExtraLarge euiFlexGroup--responsive"
+/>
+`;
+
+exports[`EuiFlexGroup props gutterSize xs is rendered 1`] = `
+<div
+  class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--responsive"
+/>
+`;
+
+exports[`EuiFlexGroup props justifyContent center is rendered 1`] = `
+<div
+  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentCenter euiFlexGroup--responsive"
+/>
+`;
+
+exports[`EuiFlexGroup props justifyContent flexEnd is rendered 1`] = `
+<div
+  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentFlexEnd euiFlexGroup--responsive"
+/>
+`;
+
+exports[`EuiFlexGroup props justifyContent flexStart is rendered 1`] = `
+<div
+  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--responsive"
+/>
+`;
+
+exports[`EuiFlexGroup props justifyContent spaceAround is rendered 1`] = `
+<div
+  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceAround euiFlexGroup--responsive"
+/>
+`;
+
+exports[`EuiFlexGroup props justifyContent spaceBetween is rendered 1`] = `
+<div
+  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--responsive"
+/>
+`;
+
+exports[`EuiFlexGroup props responsive false is rendered 1`] = `
+<div
+  class="euiFlexGroup euiFlexGroup--gutterLarge"
+/>
+`;
+
+exports[`EuiFlexGroup props responsive true is rendered 1`] = `
+<div
+  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--responsive"
+/>
+`;
+
+exports[`EuiFlexGroup props wrap false is rendered 1`] = `
+<div
+  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--responsive"
+/>
+`;
+
+exports[`EuiFlexGroup props wrap true is rendered 1`] = `
+<div
+  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--responsive euiFlexGroup--wrap"
 />
 `;
diff --git 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`] = `
+<div
+  class="euiFlexItem"
+/>
+`;
+
+exports[`EuiFlexItem component span is rendered 1`] = `
+<span
+  class="euiFlexItem"
+/>
+`;
+
+exports[`EuiFlexItem grow 1 is rendered 1`] = `
+<div
+  class="euiFlexItem euiFlexItem--flexGrow1"
+/>
+`;
+
+exports[`EuiFlexItem grow 2 is rendered 1`] = `
+<div
+  class="euiFlexItem euiFlexItem--flexGrow2"
+/>
+`;
+
+exports[`EuiFlexItem grow 3 is rendered 1`] = `
+<div
+  class="euiFlexItem euiFlexItem--flexGrow3"
+/>
+`;
+
+exports[`EuiFlexItem grow 4 is rendered 1`] = `
+<div
+  class="euiFlexItem euiFlexItem--flexGrow4"
+/>
+`;
+
+exports[`EuiFlexItem grow 5 is rendered 1`] = `
+<div
+  class="euiFlexItem euiFlexItem--flexGrow5"
+/>
+`;
+
+exports[`EuiFlexItem grow 6 is rendered 1`] = `
+<div
+  class="euiFlexItem euiFlexItem--flexGrow6"
+/>
+`;
+
+exports[`EuiFlexItem grow 7 is rendered 1`] = `
+<div
+  class="euiFlexItem euiFlexItem--flexGrow7"
+/>
+`;
+
+exports[`EuiFlexItem grow 8 is rendered 1`] = `
+<div
+  class="euiFlexItem euiFlexItem--flexGrow8"
+/>
+`;
+
+exports[`EuiFlexItem grow 9 is rendered 1`] = `
+<div
+  class="euiFlexItem euiFlexItem--flexGrow9"
+/>
+`;
+
+exports[`EuiFlexItem grow 10 is rendered 1`] = `
+<div
+  class="euiFlexItem euiFlexItem--flexGrow10"
+/>
+`;
+
+exports[`EuiFlexItem grow false is rendered 1`] = `
+<div
+  class="euiFlexItem euiFlexItem--flexGrowZero"
+/>
+`;
+
+exports[`EuiFlexItem grow true is rendered 1`] = `
+<div
+  class="euiFlexItem"
+/>
+`;
+
 exports[`EuiFlexItem is rendered 1`] = `
 <div
   aria-label="aria-label"

diff --git a/src/components/flex/flex_grid.test.js b/src/components/flex/flex_grid.test.js
@@ -2,15 +2,49 @@ import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../test/required_props';
 
-import { EuiFlexGrid } from './flex_grid';
+import {
+  EuiFlexGrid,
+  GUTTER_SIZES,
+  COLUMNS,
+} from './flex_grid';
 
 describe('EuiFlexGrid', () => {
   test('is rendered', () => {
     const component = render(
-      <EuiFlexGrid columns={3} {...requiredProps} />
+      <EuiFlexGrid columns={3} {...requiredProps}>
+        <h2>My Child</h2>
+      </EuiFlexGrid>
     );
 
     expect(component)
       .toMatchSnapshot();
   });
+
+  describe('props', () => {
+    describe('gutterSize', () => {
+      GUTTER_SIZES.forEach(value => {
+        test(`${value} is rendered`, () => {
+          const component = render(
+            <EuiFlexGrid gutterSize={value} />
+          );
+
+          expect(component)
+            .toMatchSnapshot();
+        });
+      });
+    });
+
+    describe('columns', () => {
+      COLUMNS.forEach(value => {
+        test(`${value} is rendered`, () => {
+          const component = render(
+            <EuiFlexGrid columns={value} />
+          );
+
+          expect(component)
+            .toMatchSnapshot();
+        });
+      });
+    });
+  });
 });