Added webpack for js

.gitignore

@@ -375,6 +375,7 @@ $RECYCLE.BIN/
 
 ### react ###
 /static/main/js/control_page/node_modules
+/static/main/js/control_page/dist
 node_modules
 # End of https://www.toptal.com/developers/gitignore/api/django,pycharm+all,python,linux,macos,windows
 

README.md

@@ -39,7 +39,7 @@
 
 
 ## Quickstart
-Перед запуском требуется неообходимо `.env` файл.
+Перед запуском требуется необходимо `.env` файл.
 ```bash
 cp .env.example .env
 ```
@@ -59,6 +59,25 @@ pip install -r requirements/dev.txt
 Для админов ZenDesk дополнительно - создайте токен доступа в ZenDesk
 При запуске в Docker убедитесь что папка, которая будет служить хранилищем для БД, открыта на запись и чтение
 
+Для запуска тестов страницы управления: 
+1. Установить npm и npx
+```bash
+sudo apt install npm
+```
+2. Перейти в static папку со страницей управления:
+```bash
+cd static/main/js/control_page
+```
+3. Выполнить установку модулей для js
+```bash
+npm install
+npx webpack
+```
+4. Тестирование запускается с помощью команды в той же папке
+```bash
+npm test
+```
+
 
 ## Запуск на локальной машине:
 - Скопировать репозиторий на локальную машину

main/templates/pages/adm_ruleset.html

@@ -11,10 +11,6 @@
 {% endblock %}
 
 {% block extra_scripts %}
-<script src="{% static 'react/umd/react.development.js' %}" crossorigin></script>
-<script src="{% static 'react-dom/umd/react-dom.development.js' %}" crossorigin></script>
-<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
 {% endblock%}
 
 {% block content %}
@@ -105,7 +101,7 @@
 
 </div>
 
-<script src="{% static 'main/js/control_page/control.js' %}" type="text/babel"></script>
+<script src="{% static 'main/js/control_page/dist/index_bundle.js' %}"></script>
 {% endblock %}
 
 

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

@@ -1,19 +1,35 @@
 import React from "react";
 import {render, unmountComponentAtNode} from "react-dom";
 import {act} from "react-dom/test-utils";
-import TableBody from "./control";
+import {TableBody} from "./src/control";
+import * as test_data from "./test_users.json"
+import axios from "axios";
+import MockAdapter from 'axios-mock-adapter'
 
 let container = null;
 let table = null;
 let load = null;
+let engineer_count = null
+let agents_count = null
+let licences_remaining = null
 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);
   jest.useFakeTimers();
 });
@@ -23,15 +39,39 @@ afterEach(() => {
   container.remove();
   table.remove();
   load.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
   jest.useRealTimers();
 });
 
-it("has rows on mount", () => {
+it("has rows no on mount", () => {
   act(() => {
+    let container = document.createElement("tbody");
     render(<TableBody/>, container);
   });
-  expect(container.getElementsByTagName("tr").length).not.toBe(0);
+  expect(container.getElementsByTagName("tr").length).toBe(0);
 });
+
+it("has valid number of workplaces",async () => {
+  let mock = new MockAdapter(axios)
+  mock.onGet("/api/users").reply(200, test_data)
+
+  await act(async () => {
+    render(<TableBody/>, container)
+  })
+
+  let licences = Number(licences_remaining.textContent.replace(/Свободных мест: /, ''))
+  expect(licences).toEqual(1)
+  mock.restore()
+})
+
+it ("Pretext must be deleted on render", async () => {
+
+})

static/main/js/control_page/package.json

@@ -2,7 +2,7 @@
   "name": "control_page",
   "version": "1.0.0",
   "description": "",
-  "main": "control.js",
+  "main": "src/control.js",
   "scripts": {
     "test": "jest"
   },
@@ -21,6 +21,12 @@
     "@babel/cli": "^7.13.16",
     "@babel/core": "^7.13.16",
     "@babel/preset-env": "^7.13.15",
-    "jest": "^26.6.3"
+    "axios": "^0.21.1",
+    "axios-mock-adapter": "^1.19.0",
+    "babel-loader": "^8.2.2",
+    "jest": "^26.6.3",
+    "npx": "^10.2.2",
+    "webpack": "^5.36.2",
+    "webpack-cli": "^4.6.0"
   }
 }

static/main/js/control_page/src/control.js

@@ -1,16 +1,7 @@
-"use strict";
+import React from "react";
+import ReactDOM from "react-dom";
+import axios from "axios";
 
-let React = require('react')
-
-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 (
@@ -76,7 +67,7 @@ class ZendeskUserTableRows extends React.Component {
   }
 }
 
-class TableBody extends React.Component {
+export class TableBody extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -137,6 +128,3 @@ class TableBody extends React.Component {
     );
   }
 }
-
-ReactDOM.render(<TableBody />, document.getElementById("tbody"));
-head_checkbox();

static/main/js/control_page/src/index.js

@@ -0,0 +1,16 @@
+import {TableBody} from "./control"
+import ReactDOM from "react-dom";
+import React from "react";
+
+
+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();
+  });
+}
+
+
+ReactDOM.render(<TableBody />, document.getElementById("tbody"));
+head_checkbox();

static/main/js/control_page/test_users.json

@@ -0,0 +1,32 @@
+{
+  "users": [
+    {
+      "user": {
+        "email": "123@test.ru"
+      },
+      "id": 2,
+      "name": "UserForAccessTest",
+      "zendesk_role": "light_agent"
+    }
+  ],
+  "engineers": 2,
+  "light_agents": 2,
+  "zendesk_users": [
+    {
+      "name": "Степаненко Ольга s101",
+      "zendesk_role": "engineer",
+      "email": "stepanenko_olga@mail.ru"
+    },
+    {
+      "name": "TEST",
+      "zendesk_role": "engineer",
+      "email": "akovalev1305@gmail.com"
+    },
+    {
+      "name": "Vasua",
+      "zendesk_role": "light_agent",
+      "email": "krav-88@mail.ru"
+    }
+  ],
+  "max_agents": 3
+}

static/main/js/control_page/webpack.config.js

@@ -0,0 +1,31 @@
+const path = require('path')
+
+module.exports = {
+  entry: './src/index.js',
+  module: {
+    rules: [
+      {
+        test: /\.(js)$/,
+        exclude: path.resolve(__dirname, 'node_modules/'),
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env', "@babel/preset-react"],
+            plugins: [["@babel/plugin-transform-runtime", {"regenerator": true}]],
+          }
+        }
+      }
+    ]
+  },
+  resolve: {
+    extensions: [
+      '.js',
+      '.jsx'
+    ]
+  },
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'index_bundle.js'
+  },
+  mode: 'development'
+}