From e32f12019ee94d6be66f90ca565bb660dc6174e1 Mon Sep 17 00:00:00 2001 From: Yuriy Kulakov Date: Fri, 7 May 2021 22:29:50 +0300 Subject: [PATCH] Added control page tests and fixed bugs --- main/templates/pages/adm_ruleset.html | 67 +-------- .../js/control_page/__tests__/control.test.js | 139 ++++++++---------- static/main/js/control_page/jest.config.js | 3 - static/main/js/control_page/src/control.js | 126 +++++++++++----- static/main/js/control_page/src/index.js | 4 +- 5 files changed, 157 insertions(+), 182 deletions(-) diff --git a/main/templates/pages/adm_ruleset.html b/main/templates/pages/adm_ruleset.html index ba8e1c9..cff4681 100644 --- a/main/templates/pages/adm_ruleset.html +++ b/main/templates/pages/adm_ruleset.html @@ -15,11 +15,6 @@ {% block content %}
- -
-

Свободных Мест:

-
- {% for message in messages %} {% endfor %} @@ -27,75 +22,15 @@ {% block form %}
{% csrf_token %} -
-
Список сотрудников
{% block table %} - - - - - - - - - - -
- - NameEmailRole
-

Данные загружаются...

+
{% endblock %} -
- - {% block count %} -
-
-
- -
-
Инженеров:
-
-
- {{ engineers }} -
-
- -
-
Легких агентов:
-
-
- {{ light_agents }} -
-
- -
-
- {% endblock %} - - {% block buttons %} -
- - - - -
- {% endblock %} - -
{% endblock %} diff --git a/static/main/js/control_page/__tests__/control.test.js b/static/main/js/control_page/__tests__/control.test.js index 42beea9..b782862 100644 --- a/static/main/js/control_page/__tests__/control.test.js +++ b/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(, 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(, container) - }) - let licences = Number(licences_remaining.textContent.replace(/Свободных мест: /, '')) - expect(licences).toEqual(1) +it("has only main table row without axios request", () => { + act(() => { + render(, container); }); + let tbody = container.querySelector("#tbody") + expect(tbody.getElementsByTagName('tr').length).toBe(0); +}); - it("Pretext must be deleted on render", () => { - act(() => { - render(, container) - }) - expect(document.body).not.toContain(load) - }); +it("shows valid number of free workplaces", async () => { + await act(async () => { + render(
, 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(, 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(
, 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(, 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(
, 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(
, 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(
, container) + }) + expect(req).toHaveBeenCalledTimes(1) +}) +it("checkbox count equals users from db count", async () => { + await act(async () => { + render(
, container) + }) + let tbody = container.querySelector("#tbody") + let checkboxes = tbody.querySelectorAll("input[type='checkbox']") + let users = test_data.users + expect(checkboxes.length).toEqual(users.length) }) diff --git a/static/main/js/control_page/jest.config.js b/static/main/js/control_page/jest.config.js index adbbaca..91de89a 100644 --- a/static/main/js/control_page/jest.config.js +++ b/static/main/js/control_page/jest.config.js @@ -3,9 +3,6 @@ module.exports = { testPathIgnorePatterns: [ "./node_modules/" ], - unmockedModulePathPatterns: [ - "./node_modules/react" - ], roots: [ "./__tests__" ], diff --git a/static/main/js/control_page/src/control.js b/static/main/js/control_page/src/control.js index 5048cd8..3b491c4 100644 --- a/static/main/js/control_page/src/control.js +++ b/static/main/js/control_page/src/control.js @@ -1,6 +1,48 @@ -import React from "react"; -import ReactDOM from "react-dom"; +import React, {useState} from "react"; import axios from "axios"; +import * as ReactDOM from "react-dom"; + +function FreeWorkplaces(props) { + return ( +
+

Свободных мест: {props.count}

+
+ ) + +} + +function WorkersCount(props) { + return ( +
+
+
+
+
Инженеров:
+
+
+ {props.engineers} +
+
+
+
Легких агентов:
+
+
+ {props.light_agents} +
+
+
+
+
+ + +
+
+ ) +} class ModelUserTableRow extends React.Component { render() { @@ -26,11 +68,10 @@ class ModelUserTableRow extends React.Component { class ModelUserTableRows extends React.Component { render() { - return ReactDOM.createPortal( + return ( this.props.users.map((user, key) => ( - )), - document.getElementById("tbody") + )) ); } } @@ -58,39 +99,27 @@ class ZendeskUserTableRow extends React.Component { class ZendeskUserTableRows extends React.Component { render() { - return ReactDOM.createPortal( + return ( this.props.users.map((user, key) => ( - )), - document.getElementById("tbody") - ); + )) + ) } } -export class TableBody extends React.Component { +export class Table extends React.Component { constructor(props) { super(props); this.state = { users: [], - engineers: 0, - light_agents: 0, + engineers: null, + light_agents: null, zendesk_users: [], - max_agents: 3, + max_agents: null, + renderLoad: true }; } - change_elements_html() { - let elements = document.querySelectorAll(".info-quantity-value"); - let licences = document.getElementById("licences_remaining"); - elements[0].innerHTML = this.state.engineers; - elements[1].innerHTML = this.state.light_agents; - let max_licences = Math.max( - this.state.max_agents - this.state.engineers, - 0 - ); - licences.innerHTML = "Свободных мест: " + max_licences; - } - async get_users() { await axios.get("/api/users").then((response) => { this.setState({ @@ -99,19 +128,23 @@ export class TableBody extends React.Component { light_agents: response.data.light_agents, zendesk_users: response.data.zendesk_users, max_agents: response.data.max_agents, + renderLoad: false }); + return response + }).catch(reason => { + console.log(reason) }); - this.change_elements_html(); - } - - delete_pretext() { - document.getElementById("loading").remove(); } componentDidMount() { - this.get_users().then(() => this.delete_pretext()); + this.get_users().then(() => {}) + .catch(reason => { + console.log(reason) + }); this.interval = setInterval(() => { - this.get_users(); + this.get_users().catch(reason => { + console.log(reason) + }) }, 60000); } @@ -121,10 +154,31 @@ export class TableBody extends React.Component { render() { return ( - - - - +
+ +
+ + + + + + + + + + + + +
+ + NameEmailRole
+ {this.state.renderLoad === true ?

Данные загружаются...

: null} + +
); } } diff --git a/static/main/js/control_page/src/index.js b/static/main/js/control_page/src/index.js index cc08f09..c952f55 100644 --- a/static/main/js/control_page/src/index.js +++ b/static/main/js/control_page/src/index.js @@ -1,4 +1,4 @@ -import {TableBody} from "./control" +import {Table} from "./control" import ReactDOM from "react-dom"; import React from "react"; @@ -12,5 +12,5 @@ function head_checkbox() { } -ReactDOM.render(, document.getElementById("tbody")); +ReactDOM.render(, document.getElementById("table")); head_checkbox();