add test for nested Flex.Container spacing

dnbexperience · May 16, 2024 · 021513c · 021513c
1 parent 0246fe8
commit 021513c
Showing 1 changed file with 29 additions and 0 deletions.
diff --git a/packages/dnb-eufemia/src/components/flex/__tests__/Container.test.tsx b/packages/dnb-eufemia/src/components/flex/__tests__/Container.test.tsx
@@ -723,6 +723,35 @@ describe('Flex.Container', () => {
     })
   })
 
+  it('should support spacing props for nested Flex.Containers', () => {
+    render(
+      <Flex.Container>
+        <Flex.Vertical
+          id="flex-container-space"
+          space={{
+            bottom: 'xx-large',
+            top: 'xx-large',
+            left: 'xx-large',
+            right: 'xx-large',
+          }}
+        >
+          <Flex.Item>FlexItem 1</Flex.Item>
+          <Flex.Item>FlexItem 2</Flex.Item>
+          <Flex.Item>FlexItem 3</Flex.Item>
+          <Flex.Item>FlexItem 4</Flex.Item>
+        </Flex.Vertical>
+      </Flex.Container>
+    )
+
+    const flexContainer = document.querySelector('#flex-container-space')
+    expect(flexContainer).toHaveClass(
+      'dnb-space__left--xx-large',
+      'dnb-space__right--xx-large',
+      'dnb-space__top--xx-large',
+      'dnb-space__bottom--xx-large'
+    )
+  })
+
   it('should set custom element', () => {
     render(<Flex.Container element="section">content</Flex.Container>)