Add tests

Altinn · Oct 18, 2024 · 9bcd54c · 9bcd54c
1 parent 83f46eb
commit 9bcd54c
Showing 1 changed file with 34 additions and 6 deletions.
diff --git a/...dioResizableLayout/StudioResizableLayoutContainer/StudioResizableLayoutContainer.test.tsx b/...dioResizableLayout/StudioResizableLayoutContainer/StudioResizableLayoutContainer.test.tsx
@@ -5,14 +5,14 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import { StudioResizableLayoutElement } from '../StudioResizableLayoutElement/StudioResizableLayoutElement';
 
 describe('StudioResizableLayoutContainer', () => {
-  it('should render just one handle with two elements', () => {
+  it('should render two handles with three elements', () => {
     renderStudioResizableLayoutContainer();
-    expect(screen.getAllByRole('separator').length).toBe(1);
+    expect(screen.getAllByRole('separator').length).toBe(2);
   });
 
   it('should resize containers', () => {
     renderStudioResizableLayoutContainer();
-    const handle = screen.getByRole('separator');
+    const handle = screen.getAllByRole('separator')[0];
 
     dragHandle(handle, { clientX: 400 }, { clientX: 200 });
 
@@ -23,7 +23,7 @@ describe('StudioResizableLayoutContainer', () => {
   it('should not resize containers below minimum size', () => {
     // minimum flexgrow should be minimumSize/containerSize=0.25
     renderStudioResizableLayoutContainer();
-    const handle = screen.getByRole('separator');
+    const handle = screen.getAllByRole('separator')[0];
 
     dragHandle(handle, { clientX: 400 }, { clientX: 0 });
     expect(screen.getAllByTestId('resizablelayoutelement')[0].style.flexGrow).toBe('0.25');
@@ -36,12 +36,29 @@ describe('StudioResizableLayoutContainer', () => {
 
   it('should not resize containers above maximum size', () => {
     renderStudioResizableLayoutContainer(600);
-    const handle = screen.getByRole('separator');
+    const handle = screen.getAllByRole('separator')[0];
 
     dragHandle(handle, { clientX: 400 }, { clientX: 800 });
     expect(screen.getAllByTestId('resizablelayoutelement')[0].style.flexGrow).toBe('1.5');
     expect(screen.getAllByTestId('resizablelayoutelement')[1].style.flexGrow).toBe('0.5');
   });
+
+  it('should render StudioResizableLayoutHandle with base CSS classes', () => {
+    renderStudioResizableLayoutContainer();
+    expect(screen.getAllByRole('separator')[0]).toHaveClass('resizeHandle');
+    expect(screen.getAllByRole('separator')[1]).toHaveClass('resizeHandle');
+  });
+
+  it('should render StudioResizableLayoutHandle with multiple CSS classes', () => {
+    renderStudioResizableLayoutContainer();
+    expect(screen.getAllByRole('separator')[0]).toHaveClass('resizeHandle');
+    expect(screen.getAllByRole('separator')[0]).toHaveClass('resizeHandleH');
+    expect(screen.getAllByRole('separator')[0]).not.toHaveClass('hideLeftSide');
+
+    expect(screen.getAllByRole('separator')[1]).toHaveClass('resizeHandle');
+    expect(screen.getAllByRole('separator')[1]).not.toHaveClass('resizeHandleH');
+    expect(screen.getAllByRole('separator')[1]).not.toHaveClass('hideLeftSide');
+  });
 });
 
 const dragHandle = (
@@ -73,6 +90,7 @@ const renderStudioResizableLayoutContainer = (
         maximumSize={maximumSize}
         collapsed={collapsed}
         collapsedSize={400}
+        hasNeighbour={true}
       >
         <div>test1</div>
       </StudioResizableLayoutElement>
@@ -81,8 +99,18 @@ const renderStudioResizableLayoutContainer = (
         maximumSize={maximumSize}
         collapsed={collapsed}
         collapsedSize={400}
+        hasNeighbour={true}
+        disableRightHandle={true}
       >
-        <div>test1</div>
+        <div>test2</div>
+      </StudioResizableLayoutElement>
+      <StudioResizableLayoutElement
+        minimumSize={100}
+        maximumSize={maximumSize}
+        collapsed={collapsed}
+        collapsedSize={400}
+      >
+        <div>test3</div>
       </StudioResizableLayoutElement>
     </StudioResizableLayoutContainer>,
   );