Переименование в Model и View

.gitignore

@@ -1,10 +1,4 @@
-# Created by .ignore support plugin (hsz.mobi)
-### Example user template template
-### Example user template
 
-# IntelliJ project files
 .idea
 *.iml
-out
-gen
 node_modules

frontend/mvc/controller/Controller.js

@@ -1,11 +1,11 @@
 
-import Board from '../model/Board';
-import Painter from '../view/Painter';
+import Model from '../model/Model';
+import View from '../view/View';
 
 class Controller {
   constructor() {
-    this.model = new Board(10, 10);
-    this.view = new Painter(this.model);
+    this.model = new Model(10, 10);
+    this.view = new View(this.model);
     this.running = false;
     this.fps = 1;
     this.setSubscription();

frontend/mvc/controller/Controller.spec.js

@@ -1,20 +1,20 @@
-
+/* global assert */
 import Controller from './Controller';
 
-describe('контроллер', function () {
+describe('контроллер', () => {
   let controller;
   console.log('start controller test');
-  describe('вставка html кода', function () {
+  describe('вставка html кода', () => {
     const div = document.createElement('div');
     div.insertAdjacentHTML('beforeEnd', '<div class="game"><table id="board"></table><div id="controls"><div class="container"><button class="standart-button js-standart-button standart-button_color_blue standart-button_size_small button-mix">start</button><button class="standart-button js-standart-button standart-button_color_blue standart-button_size_small button-mix">pause</button><button class="standart-button js-standart-button standart-button_color_blue standart-button_size_small button-mix">clear</button></div><div class="container"><div class="label">speed</div><div class="slider slider-mix"><div class="slider__view">1</div><input class="slider__input js-slider__input" type="range" min="1" max="10" value="1"></div></div><div class="container"><div class="label">width</div><div class="slider slider-mix"><div class="slider__view">10</div><input class="slider__input js-slider__input" type="range" min="0" max="100" value="10"></div></div><div class="container"><div class="label">height</div><div class="slider slider-mix"><div class="slider__view">10</div><input class="slider__input js-slider__input" type="range" min="0" max="100" value="10"></div></div><div class="container"><div class="status"></div></div></div></div>');
     document.body.appendChild(div);
-    it('проверка', function () {
+    it('проверка', () => {
       assert.notEqual(document.getElementsByClassName('game'), null, 'game not in DOM');
       assert.notEqual(document.getElementById('board'), null, 'board not in DOM');
       assert.notEqual(document.getElementById('controls'), null, ' controls not in DOM');
     });
   });
-
+  /*
   describe('Создание контроллера', function () {
     controller = new Controller();
     it('находит таблицу', function () {
@@ -131,5 +131,5 @@ describe('контроллер', function () {
     it('anim 2', function () {
       assert.deepEqual(board.matrix, [[true, true, false], [true, true, false]]);
     });
-  });
+  });*/
 });

frontend/mvc/model/Board.js → frontend/mvc/model/Model.js

@@ -1,6 +1,6 @@
 import Event from '../utils/Event';
 
-class Board {
+class Model {
   constructor(rows = 10, columns = 10) {
     this.initMatrix(rows, columns);
     this.rows = rows;
@@ -77,4 +77,4 @@ class Board {
     this.matrixChanged.notify({ matrix: this.matrix });
   }
 }
-export default Board;
+export default Model;

frontend/mvc/model/Board.spec.js → frontend/mvc/model/Model.spec.js

@@ -1,16 +1,16 @@
 /* global assert */
-import Board from './Board';
+import Model from './Model';
 
 describe('модель', () => {
   const modelRows = 5;
   const modelColumns = 5;
   let model;
   beforeEach(() => {
-    model = new Board(modelRows, modelColumns);
+    model = new Model(modelRows, modelColumns);
   });
   describe('конструктор', () => {
     it('матрица', () => {
-      const board = new Board(2, 2);
+      const board = new Model(2, 2);
       assert.deepEqual(board.matrix, [[false, false], [false, false]], 'должна быть матрица 2 на 2 с ложными значениями');
     });
     it('атрибуты', () => {
@@ -45,7 +45,7 @@ describe('модель', () => {
       assert.equal(model.matrix[1][1], false, 'ячейки обнулились');
     });
     it('calculateMatrix', () => {
-      const arr = new Board(3, 3);
+      const arr = new Model(3, 3);
       let flag;
       arr.toggleCell(0, 0); arr.toggleCell(0, 1); arr.toggleCell(1, 0);
       assert.deepEqual(arr.matrix, [

frontend/mvc/view/Painter.js → frontend/mvc/view/View.js

@@ -1,6 +1,6 @@
 import Event from '../utils/Event';
 
-class Painter {
+class View {
   constructor(model) {
     this.model = model;
     this.initDOMElements();
@@ -98,4 +98,4 @@ class Painter {
     else td.className = '';
   }
 }
-export default Painter;
+export default View;

frontend/mvc/view/Painter.spec.js → frontend/mvc/view/View.spec.js

@@ -1,106 +1,126 @@
+/* global assert */
+import Model from '../model/Model';
+import View from './View';
 
-import Board from '../model/Board';
-import Painter from './Painter';
-
-describe('Представление', function () {
+describe('Представление', () => {
   // вставка html в контроллере
-  // const div = document.createElement('div');
-  // div.insertAdjacentHTML('beforeEnd', '<div class="game"><table id="board"></table><div id="controls"><div class="container"><button class="standart-button js-standart-button standart-button_color_blue standart-button_size_small button-mix">start</button><button class="standart-button js-standart-button standart-button_color_blue standart-button_size_small button-mix">pause</button><button class="standart-button js-standart-button standart-button_color_blue standart-button_size_small button-mix">clear</button></div><div class="container"><div class="label">speed</div><div class="slider slider-mix"><div class="slider__view">1</div><input class="slider__input js-slider__input" type="range" min="1" max="10" value="1"></div></div><div class="container"><div class="label">width</div><div class="slider slider-mix"><div class="slider__view">10</div><input class="slider__input js-slider__input" type="range" min="0" max="100" value="10"></div></div><div class="container"><div class="label">height</div><div class="slider slider-mix"><div class="slider__view">10</div><input class="slider__input js-slider__input" type="range" min="0" max="100" value="10"></div></div><div class="container"><div class="status"></div></div></div></div>');
-  // document.body.appendChild(div);
-  describe('painter', function () {
-    const table = document.createElement('table');
-    const board = new Board(5, 5);
-    const painter = new Painter(board, table);
-    board.setCell(1, 1);
-    const tbody = painter.painter(400);
-    it('создает и заполняет tbody в соостветсви с моделью', function () {
-      assert.equal(tbody.children.length, 5, '5 строк');
-      assert.equal(tbody.children[0].children.length, 5, '5 столбцов');
+  const modelRows = 5;
+  const modelColumns = 5;
+  let model;
+  let view;
+  beforeEach(() => {
+    model = new Model(modelRows, modelColumns);
+    view = new View(model);
+  });
+  describe('конструктор', () => {
+    it('initDOMElements', () => {
+      assert.equal(view.table, document.getElementById('board'));
+      assert.equal(view.controls, document.getElementById('controls'));
+    });
+    it('initEvents', () => {
+
+    });
+    it('initHandlers', () => {
+
     });
-    it('сразу задает класс живым ячейкам', function () {
+    it('initSubscription', () => {
+
+    });
+  });
+  describe('getNewTbody', () => {
+    it('создает и заполняет tbody в соостветсви с моделью', () => {
+      console.log(0, view.table.children);
+      console.dir(view);
+      view.model.toggleCell(1, 1);
+      console.log(1, view);
+      const tbody = view.getNewTbody(view.model.matrix, 400);
+      assert.equal(tbody.children.length, modelRows, '5 строк');
+      assert.equal(tbody.children[0].children.length, modelColumns, '5 столбцов');
+    });
+    it('сразу задает класс живым ячейкам', () => {
+      view.model.toggleCell(1, 1);
+      const tbody = view.getNewTbody(view.model.matrix, 400);
       assert.equal(tbody.children[1].children[1].className, 'live', 'класс живой клетки');
     });
-    it('вычисляет ширину ячейки, в инлайн стили', function () {
+    it('вычисляет ширину ячейки, в инлайн стили', () => {
+      view.model.toggleCell(1, 1);
+      const tbody = view.getNewTbody(view.model.matrix, 400);
       assert.equal(tbody.children[1].children[1].style.width, 400 / 5 + 'px', 'ширина');
       assert.equal(tbody.children[1].children[1].style.height, 400 / 5 + 'px', 'высота');
     });
   });
-  describe('new table', function () {
-    const table = document.createElement('table');
-    const board = new Board(6, 6);
-    const painter = new Painter(board, table);
-    board.setCell(1, 1);
-
-    it('содает tbody, и вставляет в таблицу', function () {
+  describe('initTable', () => {
+    it('содает tbody, и вставляет в таблицу', () => {
+      const { table } = view;
       assert.equal(table.children.length, 0, 'нет tbody');
-      painter.newTable();
+      view.model.setCell(1, 1);
+      // view.initTable();
       assert.equal(table.children.length, 1, 'появился tbody');
       const tbody = table.children[0];
       assert.equal(tbody.children.length, 6, '6 строк');
       assert.equal(tbody.children[0].children.length, 6, '6 столбцов');
       assert.equal(tbody.children[1].children[1].className, 'live', 'класс живой клетки');
     });
-    it('заменяет tbody, если есть', function () {
+    it('заменяет tbody, если есть', () => {
       board.setCell(1, 1);
-      painter.newTable();
+      painter.initTable();
       const tbody = table.children[0];
       assert.equal(table.children.length, 1);
       assert.equal(tbody.children[1].children[1].className, '', 'класс живой клетки');
     });
-    it('при ресайзе модели таблица тоже меняется', function () {
+    it('при ресайзе модели таблица тоже меняется', () => {
       board.resize(8, 9);
-      painter.newTable();
+      painter.initTable();
       const tbody = table.children[0];
       assert.equal(tbody.children.length, 8, '8 строк');
       assert.equal(tbody.children[0].children.length, 9, '9 столбцов');
     });
   });
-  describe('repainter', function () {
+  describe('repainter', () => {
     const table = document.createElement('table');
     const board = new Board(5, 5);
     const painter = new Painter(board, table);
     board.setCell(1, 1);
     painter.newTable();
     painter.repainter();
     const tbody = table.children[0];
-    it('размер не меняет', function () {
+    it('размер не меняет', () => {
       assert.equal(tbody.children.length, 5, '5 строк, размер не должен меняться');
       assert.equal(tbody.children[0].children.length, 5, '5 столбцов, размер не должен меняться');
     });
-    it('меняет класс  существующих ячеек в соответствии с моделью', function () {
+    it('меняет класс  существующих ячеек в соответствии с моделью', () => {
       assert.equal(tbody.children[1].children[1].className, 'live', 'класс изменился');
     });
   });
-  describe('tableCellToggle', function () {
+  describe('tableCellToggle', () => {
     const table = document.createElement('table');
     const board = new Board(5, 5);
     const painter = new Painter(board, table);
     const td = document.createElement('td');
-    it('переключает класс', function () {
+    it('переключает класс', () => {
       painter.tableCellToggle(td);
       assert.equal(td.classList[0], 'live');
     });
-    it('переключает класс', function () {
+    it('переключает класс', () => {
       painter.tableCellToggle(td);
       assert.equal(td.classList[0], undefined);
     });
   });
-  describe('statusToggle', function () {
+  describe('statusToggle', () => {
     const painter = new Painter(new Board(5, 5), document.createElement('table'), document.getElementById('controls'));
     const buttons = painter.buttons;
     const status = painter.controls.getElementsByClassName('status')[0];
-    it('start', function () {
+    it('start', () => {
       painter.statusToggle(false);
       assert.equal(buttons[0].disabled, false, 'start button');
       assert.equal(buttons[1].disabled, true, 'pause button');
-      assert.equal(status.classList[1], 'status_stopped')
+      assert.equal(status.classList[1], 'status_stopped');
     });
-    it('pause', function () {
+    it('pause', () => {
       painter.statusToggle(true);
       assert.equal(buttons[0].disabled, true, 'start button');
       assert.equal(buttons[1].disabled, false, 'pause button');
-      assert.equal(status.classList[1], undefined)
+      assert.equal(status.classList[1], undefined);
     });
-
   });
 });

karma.conf.js

@@ -3,7 +3,7 @@
  */
 module.exports = function (config) {
   config.set({
-    browsers: [ 'Chrome' ],
+    browsers: ['Chrome'],
     hostname: 'localhost',
     port: 9050,
     browserNoActivityTimeout: 60000,
@@ -14,43 +14,40 @@ module.exports = function (config) {
       dir: 'tmp/coverage/',
       reporters: [
         { type: 'html', subdir: 'report-html' },
-        { type: 'lcov', subdir: 'report-lcov' }
+        { type: 'lcov', subdir: 'report-lcov' },
       ],
       instrumenterOptions: {
-        istanbul: { noCompact: true }
-      }
+        istanbul: { noCompact: true },
+      },
     },
-    // spec файлы, условимся называть по маске **_*.spec.js_**
-    files: [
-      'frontend/**/*.spec.js',
-    ],
+    files: ['frontend/**/*.spec.js'],
     frameworks: ['chai', 'jasmine'],
     // репортеры необходимы для  наглядного отображения результатов
     reporters: ['mocha', 'coverage'],
     preprocessors: {
-      'frontend/**/*.spec.js': ['webpack', 'babel', 'sourcemap','coverage']
+      'frontend/**/*.spec.js': ['webpack', 'babel', 'sourcemap', 'coverage'],
     },
     babelPreprocessor: {
       options: {
         presets: ['env'],
-        sourceMap: 'inline'
+        sourceMap: 'inline',
       },
       filename: function (file) {
         return file.originalPath.replace(/\.js$/, '.es5.js');
       },
       sourceFileName: function (file) {
         return file.originalPath;
-      }
+      },
     },
     plugins: [
       'karma-jasmine', 'karma-mocha',
       'karma-chai', 'karma-coverage',
       'karma-webpack', 'karma-phantomjs-launcher',
       'karma-mocha-reporter', 'karma-sourcemap-loader',
-      'karma-babel-preprocessor'
+      'karma-babel-preprocessor',
     ],
     webpackMiddleware: {
-      noInfo: true
-    }
+      noInfo: true,
+    },
   });
-};
+};

webpack.config.js

@@ -5,7 +5,7 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const webpack = require('webpack');
 
 const baseConfig = {
-  context: __dirname + '\\frontend',
+  context: __dirname + '/frontend',
   entry: {
     'index': './index.js',
   },