Add test

cl2-component-library/src/components/LateralScrollControls/LateralScrollControls.test.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { render, screen } from '../../utils/testUtils/rtl';
+import LateralScrollControls from '.';
+import Box from '../Box';
+
+describe('<LateralScrollControls />', () => {
+  it('renders', () => {
+    const containerRef = React.createRef<HTMLDivElement>();
+
+    render(
+      <LateralScrollControls containerRef={containerRef}>
+        <Box
+          display="flex"
+          width="200px"
+          height="auto"
+          gap="16px"
+          flexDirection="row"
+          flexWrap="nowrap"
+          overflow="auto"
+          overflowX="scroll"
+          py="24px"
+          ref={containerRef}
+        >
+          <Box width="200px">Element 1</Box>
+          <Box width="200px">Element 2</Box>
+          <Box width="200px">Element 3</Box>
+          <Box width="200px">Element 4</Box>
+          <Box width="200px">Element 5</Box>
+        </Box>
+      </LateralScrollControls>
+    );
+
+    expect(
+      screen.getByTestId('event-previews-scroll-left')
+    ).toBeInTheDocument();
+    expect(
+      screen.getByTestId('event-previews-scroll-right')
+    ).toBeInTheDocument();
+  });
+});

cl2-component-library/src/components/LateralScrollControls/index.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { useTheme } from 'styled-components';
 import Box from '../Box';
 import Button from '../Button';
+import testEnv from '../../utils/testUtils/testEnv';
 
 interface Props {
   containerRef?: React.RefObject<HTMLDivElement>; // Ref of the container with elements which can be laterally scrolled through
@@ -82,6 +83,7 @@ const LateralScrollControls = ({
           p="0px"
           my="auto"
           id="e2e-event-previews-scroll-left"
+          data-testid={testEnv('event-previews-scroll-left')}
         />
       </Box>
       {children}
@@ -99,6 +101,7 @@ const LateralScrollControls = ({
           buttonStyle="text"
           p="0px"
           id="e2e-event-previews-scroll-right"
+          data-testid={testEnv('event-previews-scroll-right')}
         />
       </Box>
     </Box>