Added first templates of react tests

static/main/js/control_page/.babelrc

@@ -0,0 +1,8 @@
+{
+    "presets": ["@babel/preset-env", "@babel/preset-react"],
+    "plugins": [
+        ["@babel/plugin-transform-runtime", {
+          "regenerator": true
+        }]
+      ]
+}

static/main/js/control_page/control.js

@@ -0,0 +1,142 @@
+"use strict";
+import React from "react";
+import ReactDOM from "react-dom";
+
+function head_checkbox() {
+  let head_checkbox = document.getElementById("head-checkbox");
+  head_checkbox.addEventListener("click", () => {
+    let checkboxes = document.getElementsByName("users");
+    for (let checkbox of checkboxes) checkbox.click();
+  });
+}
+
+// React
+class ModelUserTableRow extends React.Component {
+  render() {
+    return (
+      <tr className={"table-dark"}>
+        <td>
+          <input
+            type="checkbox"
+            value={this.props.user.id}
+            className="form-check-input"
+            name="users"
+          />
+        </td>
+        <td>
+          <a href="#">{this.props.user.name}</a>
+        </td>
+        <td>{this.props.user.user.email}</td>
+        <td>{this.props.user.zendesk_role}</td>
+      </tr>
+    );
+  }
+}
+
+class ModelUserTableRows extends React.Component {
+  render() {
+    return ReactDOM.createPortal(
+      this.props.users.map((user, key) => (
+        <ModelUserTableRow user={user} key={key} />
+      )),
+      document.getElementById("tbody")
+    );
+  }
+}
+
+class ZendeskUserTableRow extends React.Component {
+  render() {
+    return (
+      <tr className={"table-secondary text-secondary"}>
+        <td></td>
+        <td>
+          <a href="#" style={{ color: "grey", fontStyle: "italic" }}>
+            {this.props.user.name}
+          </a>
+        </td>
+        <td style={{ color: "grey", fontStyle: "italic" }}>
+          {this.props.user.email}
+        </td>
+        <td style={{ color: "grey", fontStyle: "italic" }}>
+          {this.props.user.zendesk_role}
+        </td>
+      </tr>
+    );
+  }
+}
+
+class ZendeskUserTableRows extends React.Component {
+  render() {
+    return ReactDOM.createPortal(
+      this.props.users.map((user, key) => (
+        <ZendeskUserTableRow user={user} key={key} />
+      )),
+      document.getElementById("tbody")
+    );
+  }
+}
+
+class TableBody extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      users: [],
+      engineers: 0,
+      light_agents: 0,
+      zendesk_users: [],
+      max_agents: 3,
+    };
+  }
+
+  change_elemnts_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({
+        users: response.data.users,
+        engineers: response.data.engineers,
+        light_agents: response.data.light_agents,
+        zendesk_users: response.data.zendesk_users,
+        max_agents: response.data.max_agents,
+      });
+    });
+    this.change_elemnts_html();
+  }
+
+  delete_pretext() {
+    document.getElementById("loading").remove();
+  }
+
+  componentDidMount() {
+    this.get_users().then(() => this.delete_pretext());
+    this.interval = setInterval(() => {
+      this.get_users();
+    }, 60000);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval);
+  }
+
+  render() {
+    return (
+      <tr>
+        <ModelUserTableRows users={this.state.users} />
+        <ZendeskUserTableRows users={this.state.zendesk_users} />
+      </tr>
+    );
+  }
+}
+
+ReactDOM.render(<TableBody />, document.getElementById("tbody"));
+head_checkbox();

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

@@ -0,0 +1,37 @@
+import React from "react";
+import { render, unmountComponentAtNode } from "react-dom";
+import { act } from "react-dom/test-utils";
+import TableBody from "./control";
+
+let container = null;
+let table = null;
+let load = null;
+beforeEach(() => {
+  table = document.createElement("table");
+  container = document.createElement("tbody");
+  container.id = "tbody";
+  table.appendChild(container);
+  load = document.createElement("p");
+  load.innerHTML = "Данные загружаются";
+  document.body.appendChild(table);
+  document.body.appendChild(load);
+  jest.useFakeTimers();
+});
+
+afterEach(() => {
+  unmountComponentAtNode(container);
+  container.remove();
+  table.remove();
+  load.remove();
+  container = null;
+  table = null;
+  load = null;
+  jest.useRealTimers();
+});
+
+it("has no rows on mount", () => {
+  act(() => {
+    render(<TableBody />, container);
+  });
+  expect(container.getElementsByTagName("tr").length).toBe(0);
+});

static/main/js/control_page/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "control_page",
+  "version": "1.0.0",
+  "description": "",
+  "main": "control.js",
+  "scripts": {
+    "test": "jest"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@babel/plugin-transform-runtime": "^7.13.15",
+    "@babel/preset-react": "^7.13.13",
+    "babel": "^6.23.0",
+    "jsx": "^0.9.89",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.13.16",
+    "@babel/preset-env": "^7.13.15",
+    "jest": "^26.6.3"
+  }
+}