From b5deab701b99af778e0cb6943fc2583abc22b3b4 Mon Sep 17 00:00:00 2001 From: Geksanit <31949379+Geksanit@users.noreply.github.com> Date: Sat, 23 Dec 2017 18:22:11 +0700 Subject: [PATCH] =?UTF-8?q?=D0=9F=D0=B5=D1=80=D0=B5=D0=B8=D0=BC=D0=B5?= =?UTF-8?q?=D0=BD=D0=BE=D0=B2=D0=B0=D0=BD=D0=B8=D0=B5=20=D0=B2=20Model=20?= =?UTF-8?q?=D0=B8=20View?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 6 - frontend/mvc/controller/Controller.js | 8 +- frontend/mvc/controller/Controller.spec.js | 12 +- frontend/mvc/model/{Board.js => Model.js} | 4 +- .../model/{Board.spec.js => Model.spec.js} | 8 +- frontend/mvc/view/{Painter.js => View.js} | 4 +- .../view/{Painter.spec.js => View.spec.js} | 104 +++++++++++------- karma.conf.js | 27 ++--- webpack.config.js | 2 +- 9 files changed, 93 insertions(+), 82 deletions(-) rename frontend/mvc/model/{Board.js => Model.js} (98%) rename frontend/mvc/model/{Board.spec.js => Model.spec.js} (95%) rename frontend/mvc/view/{Painter.js => View.js} (98%) rename frontend/mvc/view/{Painter.spec.js => View.spec.js} (52%) diff --git a/.gitignore b/.gitignore index 9a65d4e..51c94e6 100644 --- a/.gitignore +++ b/.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 diff --git a/frontend/mvc/controller/Controller.js b/frontend/mvc/controller/Controller.js index 924413b..1ace85a 100644 --- a/frontend/mvc/controller/Controller.js +++ b/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(); diff --git a/frontend/mvc/controller/Controller.spec.js b/frontend/mvc/controller/Controller.spec.js index 797c24c..8cb328d 100644 --- a/frontend/mvc/controller/Controller.spec.js +++ b/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', '
speed
1
width
10
height
10
'); 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]]); }); - }); + });*/ }); diff --git a/frontend/mvc/model/Board.js b/frontend/mvc/model/Model.js similarity index 98% rename from frontend/mvc/model/Board.js rename to frontend/mvc/model/Model.js index 2342f3d..ea6a478 100644 --- a/frontend/mvc/model/Board.js +++ b/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; diff --git a/frontend/mvc/model/Board.spec.js b/frontend/mvc/model/Model.spec.js similarity index 95% rename from frontend/mvc/model/Board.spec.js rename to frontend/mvc/model/Model.spec.js index f0037f6..7ec4151 100644 --- a/frontend/mvc/model/Board.spec.js +++ b/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, [ diff --git a/frontend/mvc/view/Painter.js b/frontend/mvc/view/View.js similarity index 98% rename from frontend/mvc/view/Painter.js rename to frontend/mvc/view/View.js index 0769563..8f1e2c8 100644 --- a/frontend/mvc/view/Painter.js +++ b/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; diff --git a/frontend/mvc/view/Painter.spec.js b/frontend/mvc/view/View.spec.js similarity index 52% rename from frontend/mvc/view/Painter.spec.js rename to frontend/mvc/view/View.spec.js index 6cca525..e816f17 100644 --- a/frontend/mvc/view/Painter.spec.js +++ b/frontend/mvc/view/View.spec.js @@ -1,61 +1,82 @@ +/* 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', '
speed
1
width
10
height
10
'); - // 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); @@ -63,44 +84,43 @@ describe('Представление', function () { 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); }); - }); }); diff --git a/karma.conf.js b/karma.conf.js index 1d0c4aa..8aae642 100644 --- a/karma.conf.js +++ b/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, + }, }); -}; \ No newline at end of file +}; diff --git a/webpack.config.js b/webpack.config.js index bf0f9eb..7cf5212 100644 --- a/webpack.config.js +++ b/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', },