Merge branch 'stakwork:master' into saif/bounty

stakwork · Feb 1, 2024 · fb5c06d · fb5c06d
2 parents 8c324e4 + b31a59b
commit fb5c06d
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 5 deletions.
diff --git a/src/people/main/Body.tsx b/src/people/main/Body.tsx
@@ -35,9 +35,11 @@ const Body = styled.div<{ isMobile: boolean }>`
     display: flex;
     flex-wrap: wrap;
     height: 100%;
-    justify-content: flex-start;
+    justify-content: center;
     align-items: flex-start;
-    padding: 0px 20px 20px 20px;
+    margin-left: 20px;
+    margin-right: 20px;
+    padding-right: 13px;
   }
 `;
 
@@ -122,7 +124,7 @@ function BodyComponent() {
 
   if (loading) {
     return (
-      <Body isMobile={isMobile} style={{ justifyContent: 'center', alignItems: 'center' }}>
+      <Body data-testid="content" isMobile={isMobile}>
         <EuiLoadingSpinner size="xl" />
       </Body>
     );

diff --git a/src/people/main/__tests__/Body.spec.tsx b/src/people/main/__tests__/Body.spec.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import nock from 'nock';
+import { user } from '../../../__test__/__mockData__/user';
+import BodyComponent from '../Body';
+
+beforeAll(() => {
+  nock.disableNetConnect();
+});
+
+describe('BodyComponent', () => {
+  nock(user.url)
+    .get(`/people?page=1&resetPage=true&search=&sortBy=last_login&limit=500`)
+    .reply(200, {});
+
+  it('content element has equal left and right margins', () => {
+    render(<BodyComponent />);
+
+    const contentElement = screen.getByTestId('content');
+
+    expect(contentElement).toBeInTheDocument();
+
+    const styles = window.getComputedStyle(contentElement);
+
+    const { marginLeft, marginRight } = styles;
+
+    expect(marginLeft).toEqual(marginRight);
+  });
+});
diff --git a/src/people/widgetViews/__tests__/UsersList.spec.tsx b/src/people/widgetViews/__tests__/UsersList.spec.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Users from '../organization/UsersList.tsx';
+
+jest.mock('store', () => ({
+  useStores: () => ({
+    main: {
+      bountyRoles: []
+    },
+    ui: {
+      meInfo: {
+        owner_pubkey: 'mocked_pubkey'
+      }
+    }
+  })
+}));
+
+const mockedUsers = [
+  {
+    owner_pubkey: 'user1_pubkey',
+    owner_alias: 'User 1',
+    img: ''
+  },
+  {
+    owner_pubkey: 'mocked_pubkey',
+    owner_alias: 'User 2',
+    img: ''
+  }
+];
+
+const props = {
+  users: mockedUsers,
+  userRoles: ['VIEW'],
+  handleDeleteClick: jest.fn(),
+  handleSettingsClick: jest.fn(),
+  org: { owner_pubkey: 'org_pubkey' }
+};
+
+describe('Users Component', () => {
+  test('displays not-allowed cursor over disabled settings button', () => {
+    // @ts-ignore
+    const { getAllByTestId } = render(<Users {...props} />);
+    const settingsIcons = getAllByTestId('settings-icon');
+    // eslint-disable-next-line @typescript-eslint/typedef
+    settingsIcons.forEach((icon) => {
+      expect(icon).toHaveStyle('cursor: not-allowed');
+    });
+  });
+
+  test('displays not-allowed cursor over disabled delete button', () => {
+    // @ts-ignore
+    const { getAllByTestId } = render(<Users {...props} />);
+    const deleteIcons = getAllByTestId('delete-icon');
+    // eslint-disable-next-line @typescript-eslint/typedef
+    deleteIcons.forEach((icon) => {
+      expect(icon).toHaveStyle('cursor: not-allowed');
+    });
+  });
+});
diff --git a/src/people/widgetViews/organization/UsersList.tsx b/src/people/widgetViews/organization/UsersList.tsx
@@ -46,10 +46,11 @@ const Users = (props: UserListProps) => {
                 <ActionBtn disabled={settingsDisabled}>
                   <MaterialIcon
                     disabled={settingsDisabled}
+                    data-testid="settings-icon"
                     icon={'settings'}
                     style={{
                       fontSize: 24,
-                      cursor: 'pointer',
+                      cursor: settingsDisabled ? 'not-allowed' : 'pointer',
                       color: settingsDisabled ? '#b0b7bc' : '#5f6368'
                     }}
                     onClick={() => handleSettingsClick(user)}
@@ -59,10 +60,11 @@ const Users = (props: UserListProps) => {
               <IconWrap>
                 <ActionBtn disabled={deleteUserDisabled}>
                   <MaterialIcon
+                    data-testid="delete-icon"
                     icon={'delete'}
                     style={{
                       fontSize: 24,
-                      cursor: 'pointer',
+                      cursor: deleteUserDisabled ? 'not-allowed' : 'pointer',
                       color: deleteUserDisabled ? '#b0b7bc' : '#5f6368'
                     }}
                     onClick={() => {