Code cleanups and refactoring

src/config/apolloclient.ts

@@ -1,4 +1,4 @@
-import { ApolloClient, InMemoryCache, createHttpLink, split, from } from '@apollo/client';
+import { ApolloClient, InMemoryCache, createHttpLink, split } from '@apollo/client';
 import absinthe from './absinthe';
 import { URI } from '.';
 import { setContext } from '@apollo/link-context';

src/containers/Chat/ChatMessages/ChatMessage/ChatMessage.tsx

@@ -10,7 +10,7 @@ import Paper from '@material-ui/core/Paper';
 import AddToMessageTemplate from '../AddToMessageTemplate/AddToMessageTemplate';
 import { Tooltip } from '../../../../components/UI/Tooltip/Tooltip';
 import styles from './ChatMessage.module.css';
-import { useMutation, useApolloClient, gql } from '@apollo/client';
+import { useMutation, useApolloClient } from '@apollo/client';
 import { DATE_FORMAT, TIME_FORMAT } from '../../../../common/constants';
 import { UPDATE_MESSAGE_TAGS, MESSAGE_FRAGMENT } from '../../../../graphql/mutations/Chat';
 import { setNotification } from '../../../../common/notification';

src/containers/List/List.module.css

@@ -0,0 +1,65 @@
+.Buttons {
+  width: 315px;
+  border-color: #e0e0e0;
+  vertical-align: middle;
+  margin-left: auto;
+}
+
+.Table {
+  border-radius: 10px;
+}
+
+.Title {
+  margin-left: 14px !important;
+  vertical-align: middle;
+  font-weight: 500 !important;
+  color: #073f24;
+}
+
+.IconButton {
+  background-color: '#e0e0e0';
+}
+
+.DropdownButton {
+  margin-left: 24px !important;
+  border-radius: 50% !important;
+  min-width: 25px !important;
+  margin-right: 14px !important;
+}
+.AddButton {
+  height: 80%;
+  text-transform: capitalize;
+  border-radius: 20px;
+  margin-left: 24px;
+}
+
+.Header {
+  display: flex;
+  padding: 10px;
+  padding-right: 24px;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 10px;
+  margin-top: 6px;
+  height: 70px;
+}
+
+.Icon {
+  background-color: #eaedec !important;
+  margin-right: 10px !important;
+}
+
+.Icons {
+  margin-left: auto;
+}
+
+.ButtonsCenter {
+  justify-content: center !important;
+}
+.DialogText {
+  margin-top: 0px;
+  text-align: center;
+  color: #073f24;
+  font-weight: 400;
+  font-family: 'heebo', sans-serif;
+}

src/containers/List/List.test.helper.ts

@@ -0,0 +1,109 @@
+import { GET_TAGS_COUNT, FILTER_TAGS, GET_LANGUAGES } from '../../graphql/queries/Tag';
+import { DELETE_TAG } from '../../graphql/mutations/Tag';
+
+export const defaultProps = {
+  columnNames: ['label', 'description', 'keywords', 'actions'],
+  countQuery: GET_TAGS_COUNT,
+  listItem: 'tags',
+  filterItemsQuery: FILTER_TAGS,
+  deleteItemQuery: DELETE_TAG,
+  listItemName: 'tag',
+  dialogMessage: 'are you sure?',
+  pageLink: 'tag',
+  columns: jest.fn(),
+  listIcon: null,
+  columnStyles: [],
+  title: 'Tags',
+};
+
+const count = {
+  request: {
+    query: GET_TAGS_COUNT,
+    variables: {
+      filter: {
+        label: '',
+      },
+    },
+  },
+  result: {
+    data: {
+      countTags: 2,
+    },
+  },
+};
+
+const filter = {
+  request: {
+    query: FILTER_TAGS,
+    variables: {
+      filter: {
+        label: '',
+      },
+      opts: {
+        limit: 10,
+        offset: 0,
+        order: 'ASC',
+      },
+    },
+  },
+  result: {
+    data: {
+      tags: [
+        {
+          id: '87',
+          label: 'Good message',
+          description: 'Hey There',
+          keywords: ['Hi'],
+        },
+        {
+          id: '88',
+          label: 'Good morning',
+          description: 'Hey There',
+          keywords: null,
+        },
+      ],
+    },
+  },
+};
+
+export const LIST_MOCKS = [
+  {
+    request: {
+      query: DELETE_TAG,
+      variables: {
+        id: '87',
+      },
+    },
+    result: {
+      data: {
+        deleteTag: {
+          errors: null,
+        },
+      },
+    },
+  },
+
+  {
+    request: {
+      query: GET_LANGUAGES,
+    },
+    result: {
+      data: {
+        languages: [
+          {
+            id: '1',
+            label: 'English (United States)',
+          },
+          {
+            id: '2',
+            label: 'Hindi (India)',
+          },
+        ],
+      },
+    },
+  },
+  count,
+  count,
+  filter,
+  filter,
+];

src/containers/List/List.test.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { render, wait, screen, cleanup } from '@testing-library/react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { MockedProvider } from '@apollo/client/testing';
+import { Tag } from '../Tag/Tag';
+import { List } from './List';
+
+import { Switch, Route } from 'react-router-dom';
+import { within, fireEvent } from '@testing-library/dom';
+import { LIST_MOCKS, defaultProps } from './List.test.helper';
+
+const mocks = LIST_MOCKS;
+
+const list = (
+  <MockedProvider mocks={mocks} addTypename={false}>
+    <Router>
+      <List {...defaultProps} />
+    </Router>
+  </MockedProvider>
+);
+
+it('should have loading', async () => {
+  const { getByText } = render(list);
+  expect(getByText('Loading...')).toBeInTheDocument();
+  await wait();
+});
+
+it('should have add new button', async () => {
+  const { container } = render(list);
+
+  await wait();
+  expect(container.querySelector('button.MuiButton-containedPrimary')).toBeInTheDocument();
+});
+
+it('should have a table', async () => {
+  const { container } = render(list);
+
+  await wait();
+  expect(container.querySelector('table')).toBeInTheDocument();
+});
+
+test('list has proper headers', async () => {
+  const { container } = render(list);
+  await wait();
+  const tableHead = container.querySelector('thead');
+  const { getByText } = within(tableHead);
+  expect(getByText('label')).toBeInTheDocument();
+  expect(getByText('description')).toBeInTheDocument();
+  expect(getByText('keywords')).toBeInTheDocument();
+  expect(getByText('actions')).toBeInTheDocument();
+});
+
+test('A row in the table should have an edit and delete button', async () => {
+  const { container } = render(list);
+
+  await wait();
+  const tableRow = container.querySelector('tbody tr');
+  const { getByLabelText } = within(tableRow);
+  expect(getByLabelText('Edit')).toBeInTheDocument();
+  expect(getByLabelText('Delete')).toBeInTheDocument();
+});
+
+const listButtons = (
+  <MockedProvider mocks={mocks} addTypename={false}>
+    <Router>
+      <Switch>
+        <Route path="/tag/add" exact component={Tag} />
+      </Switch>
+      <List {...defaultProps} />
+    </Router>
+  </MockedProvider>
+);
+
+test('add new Button contains a route to add new page', async () => {
+  const { container } = render(listButtons);
+  await wait();
+  const button = container.querySelector('button.MuiButton-containedPrimary');
+  fireEvent.click(button);
+  await wait();
+  expect(container.querySelector('div.ItemAdd')).toBeInTheDocument();
+});
+
+test('click on delete button opens dialog box', async () => {
+  const { container } = render(list);
+
+  await wait();
+  const { queryByLabelText } = within(container.querySelector('tbody tr'));
+  const button = queryByLabelText('Delete');
+  fireEvent.click(button);
+  await wait();
+  expect(screen.queryByRole('dialog')).toBeInTheDocument();
+});
+
+test('click on agree button shows alert', async () => {
+  const { getAllByTestId } = render(list);
+
+  await wait();
+  const button = getAllByTestId('DeleteIcon')[0];
+  fireEvent.click(button);
+  await wait();
+  const agreeButton = screen
+    .queryByRole('dialog')
+    ?.querySelector('button.MuiButton-containedSecondary');
+  fireEvent.click(agreeButton);
+  await wait();
+  expect(screen.queryByRole('alert')).toBeInTheDocument();
+});