Merge pull request #258 from virdesai/crns-147/close-button-tests-and-hooks

CRNS-147: converting CloseButton component from class to functional component and adding hooks

Author: vishalnarkhede

src/components/CloseButton/CloseButton.js

@@ -3,33 +3,27 @@ import { Image } from 'react-native';
 
 import styled from '@stream-io/styled-components';
 
-import { themed } from '../../styles/theme';
 import closeRound from '../../images/icons/close-round.png';
 
+import { themed } from '../../styles/theme';
+
 const Container = styled.View`
-  width: 30;
-  height: 30;
-  border-radius: 3;
   align-items: center;
-  justify-content: center;
   background-color: white;
   border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 3px;
+  height: 30px;
+  justify-content: center;
+  width: 30px;
   ${({ theme }) => theme.closeButton.container.css}
 `;
 
-const CloseButton = themed(
-  class CloseButton extends React.PureComponent {
-    static themePath = 'closeButton';
-    render() {
-      return (
-        <Container>
-          <Image source={closeRound} />
-        </Container>
-      );
-    }
-  },
+const CloseButton = () => (
+  <Container>
+    <Image source={closeRound} testID='close-button' />
+  </Container>
 );
 
-CloseButton.propTypes = {};
+CloseButton.themePath = 'closeButton';
 
-export default CloseButton;
+export default themed(CloseButton);

src/components/CloseButton/__tests__/CloseButton.test.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render, wait } from '@testing-library/react-native';
+
+import CloseButton from '../CloseButton';
+
+describe('CloseButton', () => {
+  it('should render a CloseButton', async () => {
+    const { queryByTestId } = render(<CloseButton />);
+
+    await wait(() => expect(queryByTestId('close-button')).toBeTruthy());
+  });
+});