Added control page tests and fixed bugs

static/main/js/control_page/__tests__/control.test.js

@@ -1,95 +1,84 @@
 import React from "react";
 import {render, unmountComponentAtNode} from "react-dom";
 import {act} from "react-dom/test-utils";
-import {TableBody} from "../src/control";
+import {Table} from "../src/control";
 import * as test_data from "./test_users.json"
 import axios from "axios";
+import MockAdapter from "axios-mock-adapter";
 
+let mock;
 let container = null
-let table = null
-let load = null
-let engineer_count = null
-let agents_count = null
-let licences_remaining = null
-jest.mock("axios", () => {
-  return {
-    get: jest.fn(() => Promise.resolve())
-  };
-});
 beforeEach(() => {
-  table = document.createElement("table");
-  container = document.createElement("tbody");
-  container.id = "tbody";
-  table.appendChild(container);
-  load = document.createElement("p");
-  load.id = "loading"
-  load.innerHTML = "Данные загружаются";
-  licences_remaining = document.createElement('p')
-  licences_remaining.id = "licences_remaining"
-  engineer_count = document.createElement("p")
-  agents_count = document.createElement("p")
-  engineer_count.className = "info-quantity-value"
-  agents_count.className = "info-quantity-value"
-  document.body.appendChild(table)
-  document.body.appendChild(engineer_count)
-  document.body.appendChild(agents_count)
-  document.body.appendChild(licences_remaining)
-  document.body.appendChild(load)
-});
+  mock = new MockAdapter(axios);
+  mock.onGet('/api/users').reply(200, test_data)
+  container = document.createElement('div')
+  container.id = "table"
+  document.body.appendChild(container)
+})
 
 afterEach(() => {
   unmountComponentAtNode(container);
+  mock.restore()
   container.remove();
-  table.remove();
-  engineer_count.remove()
-  agents_count.remove()
-  licences_remaining.remove()
   container = null;
-  table = null;
-  load = null;
-  engineer_count = null
-  agents_count = null
-  licences_remaining = null
 });
-describe("testing table", (done) => {
-  it("has only main table row without axios request", () => {
-    act(() => {
-      render(<TableBody/>, container);
-    });
-    expect(container.getElementsByTagName("tr").length).toBe(1);
-  });
 
-  it("shows valid number of free workplaces", async () => {
-    axios.get.mockImplementation(() => Promise.resolve({data: test_data}));
-    await act(async () => {
-      render(<TableBody/>, container)
-    })
-    let licences = Number(licences_remaining.textContent.replace(/Свободных мест: /, ''))
-    expect(licences).toEqual(1)
+it("has only main table row without axios request", () => {
+  act(() => {
+    render(<Table/>, container);
   });
+  let tbody = container.querySelector("#tbody")
+  expect(tbody.getElementsByTagName('tr').length).toBe(0);
+});
 
-  it("Pretext must be deleted on render", () => {
-    act(() => {
-      render(<TableBody/>, container)
-    })
-    expect(document.body).not.toContain(load)
-  });
+it("shows valid number of free workplaces", async () => {
+  await act(async () => {
+    render(<Table/>, container)
+  })
+  let element = container.querySelector('#licences_remaining')
+  let licences = Number(element.innerHTML.replace(/Свободных мест: /, ''))
+  expect(licences).toEqual(1)
+});
 
-  it("has valid number of table rows with axios request", async () => {
-    axios.get.mockImplementation(() => Promise.resolve({data: test_data}));
-    await act(async () => {
-      render(<TableBody/>, container)
-    })
-    expect(container.getElementsByTagName("tr").length)
-      .toEqual(test_data.users.length + test_data.zendesk_users.length + 1)
-  });
+it("Pretext must be deleted on render", () => {
+  act(() => {
+    render(<Table/>, container)
+  })
+  expect(document.body).not.toContain(container.querySelector('#loading'))
+});
 
-  it("show valid number for engineers and light agents", async () => {
-    axios.get.mockImplementation(() => Promise.resolve({data: test_data}));
-    await act(async () => {
-      render(<TableBody/>, container)
-    })
-    expect(Number(engineer_count.textContent)).toEqual(test_data.engineers)
-    expect(Number(agents_count.textContent)).toEqual(test_data.light_agents)
-  });
+it("has valid number of table rows with axios request", async () => {
+  await act(async () => {
+    render(<Table/>, container)
+  })
+  let tbody = container.querySelector("#tbody")
+  expect(tbody.getElementsByTagName('tr').length)
+    .toEqual(test_data.users.length + test_data.zendesk_users.length)
+});
+
+it("show valid number for engineers and light agents", async () => {
+  await act(async () => {
+    render(<Table/>, container)
+  })
+  let engineers = container.querySelector('#engineers')
+  let agents = container.querySelector('#agents')
+  expect(Number(engineers.textContent)).toEqual(test_data.engineers)
+  expect(Number(agents.textContent)).toEqual(test_data.light_agents)
+});
+
+it("called one request on mount", async () => {
+  let req = jest.spyOn(Table.prototype, "get_users")
+  await act(async () => {
+    render(<Table/>, container)
+  })
+  expect(req).toHaveBeenCalledTimes(1)
+})
+it("checkbox count equals users from db count", async () => {
+  await act(async () => {
+    render(<Table/>, container)
+  })
+  let tbody = container.querySelector("#tbody")
+  let checkboxes = tbody.querySelectorAll("input[type='checkbox']")
+  let users = test_data.users
+  expect(checkboxes.length).toEqual(users.length)
 })