Added first templates of react tests

.gitignore

@@ -373,4 +373,7 @@ $RECYCLE.BIN/
 # Windows shortcuts
 *.lnk
 
+### react ###
+/static/main/js/control_page/node_modules
+
 # End of https://www.toptal.com/developers/gitignore/api/django,pycharm+all,python,linux,macos,windows

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

@@ -1,4 +1,6 @@
 "use strict";
+import React from "react";
+import ReactDOM from "react-dom";
 
 function head_checkbox() {
   let head_checkbox = document.getElementById("head-checkbox");
@@ -45,13 +47,19 @@ class ModelUserTableRows extends React.Component {
 class ZendeskUserTableRow extends React.Component {
   render() {
     return (
-      <tr className={"table-secondary"}>
+      <tr className={"table-secondary text-secondary"}>
         <td></td>
         <td>
-          <a href="#">{this.props.user.name}</a>
+          <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>
-        <td>{this.props.user.email}</td>
-        <td>{this.props.user.zendesk_role}</td>
       </tr>
     );
   }

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"
+  }
+}