From 0cf7375d4e4a298db145dd5141f96d08761af064 Mon Sep 17 00:00:00 2001
From: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
Date: Fri, 27 Oct 2023 14:02:03 +0100
Subject: [PATCH] adding tests for shrink and basis props added in OuiFlexItem

Signed-off-by: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
---
 .../__snapshots__/flex_item.test.tsx.snap     | 72 +++++++++++++++++++
 src/components/flex/flex_item.test.tsx        | 22 +++++-
 src/components/flex/flex_item.tsx             | 17 ++++-
 3 files changed, 107 insertions(+), 4 deletions(-)

diff --git a/src/components/flex/__snapshots__/flex_item.test.tsx.snap b/src/components/flex/__snapshots__/flex_item.test.tsx.snap
index e516a31ce9..05e9fecac0 100644
--- a/src/components/flex/__snapshots__/flex_item.test.tsx.snap
+++ b/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"
+/>
+`;
diff --git a/src/components/flex/flex_item.test.tsx b/src/components/flex/flex_item.test.tsx
index d6b5781c80..ee5a11f69a 100644
--- a/src/components/flex/flex_item.test.tsx
+++ b/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();
+      });
+    });
+  });
 });
diff --git a/src/components/flex/flex_item.tsx b/src/components/flex/flex_item.tsx
index f77a4d2d6a..665fa530a1 100644
--- a/src/components/flex/flex_item.tsx
+++ b/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
   );