Merge pull request #118 from MahtabBukhari/resolve-open-bouties-hover…

…-affect-issue

resolve open bounties background disappear on hover issue

src/people/utils/AssignedUnassignedBounties.tsx

@@ -63,13 +63,10 @@ const DescriptionPriceContainer = styled.div<containerProps>`
   background-size: cover;
 
   :hover {
-    background: url('static/unassigned_bounty_hover_bg.svg');
+    background: url('/static/unassigned_bounty_hover_bg.svg');
     background-repeat: no-repeat;
     background-size: cover;
   }
-  :active {
-    background: url('static/unassigned_bounty_active_bg.svg');
-  }
 `;
 
 const UnassignedPersonProfile = styled.div<containerProps>`
@@ -204,7 +201,10 @@ const Bounties = (props: BountiesProps) => {
         </BountyLink>
       ) : (
         <BountyContainer color={color}>
-          <DescriptionPriceContainer unAssignedBackgroundImage='url("/static/unassigned_bounty_bg.svg")'>
+          <DescriptionPriceContainer
+            data-testid="description-price-container"
+            unAssignedBackgroundImage={'url("/static/unassigned_bounty_bg.svg")'}
+          >
             <BountyLink
               to={props.org_uuid ? `/bounty/${props.id}/${props.org_uuid}` : `/bounty/${props.id}`}
             >

src/people/utils/__test__/AssignedUnassignedBounties.spec.tsx

@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom';
 import { Router } from 'react-router-dom';
-import { queryByText, render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import nock from 'nock';
 import React from 'react';
 import { setupStore } from '../../../__test__/__mockData__/setupStore';
@@ -32,6 +32,7 @@ beforeEach(() => {
  */
 describe('Bounties Component', () => {
   nock(user.url).get('/person/id/1').reply(200, {});
+
   test('display bounty', () => {
     const bountyProps = {
       assignee: person,
@@ -55,4 +56,37 @@ describe('Bounties Component', () => {
     );
     expect(screen.queryByText(bountyProps.title)).toBeInTheDocument();
   });
+
+  test('display bounty with hover effect on DescriptionPriceContainer', async () => {
+    const bountyProps = {
+      assignee: undefined,
+      price: 0,
+      sessionLength: '',
+      priceMin: 0,
+      priceMax: 0,
+      codingLanguage: [],
+      title: 'test_title',
+      person: person,
+      onPanelClick: () => {},
+      widget: {},
+      created: 0,
+      isPaid: false
+    };
+
+    render(
+      <Router history={history}>
+        <Bounties {...bountyProps} />
+      </Router>
+    );
+
+    const descriptionPriceContainer = screen.getByTestId('description-price-container');
+
+    expect(descriptionPriceContainer).toBeInTheDocument();
+
+    fireEvent.mouseEnter(descriptionPriceContainer);
+
+    expect(descriptionPriceContainer).toHaveStyle({
+      background: 'url("/static/unassigned_bounty_hover_bg.svg")'
+    });
+  });
 });