feat: added component tests for leaderboardItem and Button

frontend/app/jest.config.json

@@ -27,7 +27,7 @@
       "lines": 0
     },
     "./src/leaderboard/": {
-      "lines": 16
+      "lines": 46
     },
     "./src/pages/": {
       "lines": 0

frontend/app/src/components/common/Button.spec.tsx

@@ -0,0 +1,39 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event'
+import nock from 'nock';
+import React from 'react';
+import { setupStore } from '../../__test__/__mockData__/setupStore';
+import { user } from '../../__test__/__mockData__/user';
+import { mockUsehistory } from '../../__test__/__mockFn__/useHistory';
+import Button from './Button';
+
+beforeAll(() => {
+  nock.disableNetConnect();
+  setupStore();
+  mockUsehistory();
+});
+
+/**
+ * @jest-environment jsdom
+ */
+describe('Button Component', () => {
+  nock(user.url).get('/person/id/1').reply(200, {});
+  test('display text and click button', async () => {
+    const queryByTextValue = "queryByText"
+    const mockOnClick = jest.fn()
+
+    render(<Button id={"1"} icon={""} height={10} width={10} disabled={false} color={"green"} leadingIcon={""} text={queryByTextValue} onClick={mockOnClick}/>);
+
+    //Expect text to be there
+    expect(screen.queryByText(queryByTextValue)).toBeInTheDocument();
+
+    await userEvent.click(
+      screen.getByText(queryByTextValue),
+    )
+
+    //If we click on text it should register click
+    expect(mockOnClick).toHaveBeenCalledTimes(1)
+  });
+});
+

frontend/app/src/leaderboard/leaderboardItem/LeaerboardItem.spec.tsx

@@ -0,0 +1,39 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event'
+import nock from 'nock';
+import React from 'react';
+import { setupStore } from '../../__test__/__mockData__/setupStore';
+import { user } from '../../__test__/__mockData__/user';
+import { mockUsehistory } from '../../__test__/__mockFn__/useHistory';
+import { LeaerboardItem } from './index';
+
+beforeAll(() => {
+  nock.disableNetConnect();
+  setupStore();
+  mockUsehistory();
+});
+
+/**
+ * @jest-environment jsdom
+ */
+describe('LeaerboardItem Component', () => {
+  const owner_pubkey = "123456789"
+  nock(user.url).get(`/person/id/1`).reply(200, {});
+  nock(user.url).get(`/person/${owner_pubkey}`).reply(200, {});
+  test('display leaderboard item with correct info', async () => {
+    const mockOnClick = jest.fn()
+    const convertedDollarAmount = "1 000"
+    const props = { owner_pubkey: owner_pubkey, total_sats_earned: 1000, position: 1, total_bounties_completed: 1 }
+
+    const leaderboardItemRender = render(<LeaerboardItem key={0} {...props} />);
+
+    //Expect converted dollar amount to be there
+    expect(screen.queryByText(convertedDollarAmount)).toBeInTheDocument();
+    expect(screen.queryByText("SAT")).toBeInTheDocument();
+    expect(screen.queryByText(`#${props.position}`)).toBeInTheDocument();
+    //expect(screen.queryByText(owner_pubkey)).toBeInTheDocument();
+  });
+});
+
+

frontend/app/src/leaderboard/leaderboardItem/index.tsx

@@ -1,12 +1,12 @@
 import { EuiText } from '@elastic/eui';
-import { PriceOuterContainer } from 'components/common';
-import { colors } from 'config';
-import { DollarConverter } from 'helpers';
-import { UserInfo } from 'leaderboard/userInfo';
-import { LeaderItem } from 'leaderboard/store';
-
 import React from 'react';
 import styled from 'styled-components';
+import { PriceOuterContainer } from '../../components/common';
+import { colors } from '../../config';
+import { DollarConverter } from '../../helpers';
+import { UserInfo } from '../userInfo';
+import { LeaderItem } from '../store';
+
 
 const ItemContainer = styled.div`
   --position-gutter: 3rem;

frontend/app/src/leaderboard/userInfo/index.tsx

@@ -1,13 +1,13 @@
 import { EuiAvatar, EuiText } from '@elastic/eui';
 import MaterialIcon from '@material/react-material-icon';
-import { colors } from 'config';
 import { observer } from 'mobx-react-lite';
-import ConnectCard from 'people/utils/ConnectCard';
 import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { useStores } from 'store';
-import { Person } from 'store/main';
 import styled from 'styled-components';
+import { colors } from '../../config';
+import ConnectCard from '../../people/utils/ConnectCard';
+import { useStores } from '../../store';
+import { Person } from '../../store/main';
 const UserItemContainer = styled.div`
   display: flex;
   gap: 1rem;