adding tests for shrink and basis props added in OuiFlexItem

Signed-off-by: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>

src/components/flex/__snapshots__/flex_item.test.tsx.snap

@@ -79,3 +79,75 @@ exports[`OuiFlexItem is rendered 1`] = `
   data-test-subj="test subject string"
 />
 `;
+
+exports[`OuiFlexItem shrink 1 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink1"
+/>
+`;
+
+exports[`OuiFlexItem shrink 2 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink2"
+/>
+`;
+
+exports[`OuiFlexItem shrink 3 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink3"
+/>
+`;
+
+exports[`OuiFlexItem shrink 4 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink4"
+/>
+`;
+
+exports[`OuiFlexItem shrink 5 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink5"
+/>
+`;
+
+exports[`OuiFlexItem shrink 6 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink6"
+/>
+`;
+
+exports[`OuiFlexItem shrink 7 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink7"
+/>
+`;
+
+exports[`OuiFlexItem shrink 8 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink8"
+/>
+`;
+
+exports[`OuiFlexItem shrink 9 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink9"
+/>
+`;
+
+exports[`OuiFlexItem shrink 10 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink10"
+/>
+`;
+
+exports[`OuiFlexItem shrink false is rendered 1`] = `
+<div
+  class="ouiFlexItem"
+/>
+`;
+
+exports[`OuiFlexItem shrink true is rendered 1`] = `
+<div
+  class="ouiFlexItem"
+/>
+`;

src/components/flex/flex_item.test.tsx

@@ -36,7 +36,7 @@ import {
   stopThrowingReactWarnings,
 } from '../../test';
 
-import { OuiFlexItem, GROW_SIZES } from './flex_item';
+import { OuiFlexItem, GROW_SIZES, SHRINK_SIZES, BASIS_VALUES } from './flex_item';
 
 beforeAll(startThrowingReactWarnings);
 afterAll(stopThrowingReactWarnings);
@@ -57,4 +57,24 @@ describe('OuiFlexItem', () => {
       });
     });
   });
+
+  describe('shrink', () => {
+    SHRINK_SIZES.forEach((value) => {
+      test(`${value} is rendered`, () => {
+        const component = render(<OuiFlexItem shrink={value} />);
+
+        expect(component).toMatchSnapshot();
+      });
+    });
+  });
+
+  describe('basis', () => {
+    BASIS_VALUES.forEach((value) => {
+      test(`${value} is rendered`, () => {
+        const component = render(<OuiFlexItem basis={value} />);
+
+        expect(component).toMatchSnapshot();
+      });
+    });
+  });
 });

src/components/flex/flex_item.tsx

@@ -82,7 +82,14 @@ export const SHRINK_SIZES: FlexItemShrinkSize[] = [
   9,
   10,
 ];
-export const BASIS_VALUES:FlexItemBasisValue[] = ['auto','0%','25%','50%','75%','100%']
+export const BASIS_VALUES: FlexItemBasisValue[] = [
+  'auto',
+  '0%',
+  '25%',
+  '50%',
+  '75%',
+  '100%',
+];
 
 export const OuiFlexItem: FunctionComponent<
   CommonProps &
@@ -108,9 +115,13 @@ export const OuiFlexItem: FunctionComponent<
       [`ouiFlexItem--flexGrow${grow}`]:
         typeof grow === 'number' ? GROW_SIZES.indexOf(grow) >= 0 : undefined,
       [`ouiFlexItem--flexShrink${shrink}`]:
-        typeof shrink === 'number' ? SHRINK_SIZES.indexOf(shrink) >= 0 : undefined,
+        typeof shrink === 'number'
+          ? SHRINK_SIZES.indexOf(shrink) >= 0
+          : undefined,
       [`ouiFlexItem--flexBasis${basis}`]:
-        typeof shrink === 'string' ? BASIS_VALUES.indexOf(shrink) >= 0 : undefined,
+        typeof shrink === 'string'
+          ? BASIS_VALUES.indexOf(shrink) >= 0
+          : undefined,
     },
     className
   );