tests for Cut block

common.blocks/cut/_switcher/cut_switcher_button.bemhtml

@@ -0,0 +1,19 @@
+block('cut').mod('switcher', 'button')(
+
+    js()(function(){
+        return { expandedText : this.ctx.expandedText || 'Hide' };
+    }),
+
+    content()(function() {
+        return [
+            { elem : 'container', content : this.ctx.content || 'Text here' },
+            {
+                block : 'button',
+                mods : { type : 'button', theme : 'islands', size : this.ctx.mods.size || 's' },
+                mix : { block : 'cut', elem : 'switcher' },
+                text : this.ctx.switcher || 'Show'
+            }
+        ];
+    })
+
+);

common.blocks/cut/_switcher/cut_switcher_button.deps.js

@@ -0,0 +1,17 @@
+[{
+    shouldDeps : [
+        { block : 'button', mods : { theme : 'islands', type : 'button' } }
+    ]
+},
+{
+    tech : 'spec.js',
+    mustDeps : [
+        { tech : 'bemhtml', block : 'button' }
+    ]
+},
+{
+    tech : 'tmpl-spec.js',
+    mustDeps : [
+        { tech : 'bemhtml', block : 'button' }
+    ]
+}]

common.blocks/cut/_switcher/cut_switcher_button.js

@@ -0,0 +1,33 @@
+/**
+ * @module cut
+ */
+
+modules.define('cut', ['button'], function(provide, _, Cut) {
+
+/**
+ * @exports
+ * @class cut
+ * @bem
+ */
+provide(Cut.decl({ modName : 'switcher', modVal : 'button' }, /** @lends cut.prototype */{
+    onSetMod : {
+        'showed' : function(_, modVal) {
+            this.__base.apply(this, arguments);
+            this._changeSwitcherButtonText(_, modVal);
+        }
+    },
+
+    _changeSwitcherButtonText : function(modName, modVal) {
+        var button = this.findBlockOn(this.getSwitcher(), 'button');
+        this.__base.apply(this, arguments);
+
+        button.setText(modVal? this._switcherText.expanded : this._switcherText.collapsed);
+    }
+}, /** @lends cut */{
+    live : function() {
+        this.liveInitOnBlockInsideEvent('click', 'button', this.onSwitcherClick);
+        return this.__base.apply(this, arguments);
+    }
+}));
+
+});

common.blocks/cut/cut.bemhtml

@@ -1,10 +1,12 @@
 block('cut')(
 
-    js()(true),
+    js()(function(){
+        return { expandedText : this.ctx.expandedText || 'Hide' };
+    }),
 
     content()(function() {
         return [
-            { elem : 'container', content : applyNext() },
+            { elem : 'container', content : this.ctx.content || 'Text here' },
             {
                 block : 'link',
                 mods : { pseudo : true, theme : 'islands' },

common.blocks/cut/cut.bh.js

@@ -2,7 +2,7 @@ module.exports = function(bh) {
 
     bh.match('cut', function(ctx, json) {
         ctx
-            .js(true)
+            .js({ expandedText : json.expandedText || 'Hide' })
             .content([
                 { elem : 'container', content : json.content },
                 {

common.blocks/cut/cut.deps.js

@@ -1,9 +1,24 @@
 [{
     mustDeps : [
-        { block : 'i-bem', elem : 'dom' }
+        { block : 'i-bem', mods : { 'elem-instances' : true }, elem : 'dom' }
     ],
     shouldDeps : [
         { elems : ['switcher', 'container'] },
-        { block : 'link', mods : { theme : 'islands', pseudo : true } }
+        { block : 'link', mods : { theme : 'islands', pseudo : true } }/*,
+        { block : 'button', mods : { theme : 'islands' } }*/
+    ]
+},
+{
+    tech : 'spec.js',
+    mustDeps : [
+        { tech : 'bemhtml', block : 'cut', mods : { theme : 'hackaton' } },
+        { tech : 'bemhtml', block : 'link', mods : { theme : 'islands', type : 'pseudo' } }
+    ]
+},
+{
+    tech : 'tmpl-spec.js',
+    mustDeps : [
+        { tech : 'bemhtml', block : 'cut', mods : { theme : 'hackaton' } },
+        { tech : 'bemhtml', block : 'link', mods : { theme : 'islands', type : 'pseudo' } }
     ]
 }]

common.blocks/cut/cut.js

@@ -15,25 +15,25 @@ provide(BEMDOM.decl(this.name, {
             'inited' : function() {
                 this._switcher = null;
                 this._popup = null;
-                this._params = {
+                this._switcherText = {
                     expanded : this.params.expandedText  || 'Hide',
                     collapsed : this.getSwitcher().text() || 'Show'
                 };
             }
         },
 
-        'opened' : function(modName, modVal) {
+        'showed' : function(modName, modVal) {
             this.setMod((this.getSwitcher()), 'opened', modVal);
             this.setMod((this.getContainer()), 'visible', modVal);
 
-            this._switcherTextChange();
+            if(this.hasMod('switcher')) return false;
+
+            this._changeSwitcherText(modName, modVal);
         }
     },
 
-    _switcherTextChange : function() {
-        var text = this.hasMod('opened')? this._params.expanded : this._params.collapsed;
-
-        this._switcher.html(text);
+    _changeSwitcherText : function(modName, modVal) {
+        this.getSwitcher().html(modVal? this._switcherText.expanded : this._switcherText.collapsed);
     },
 
     /**
@@ -52,8 +52,13 @@ provide(BEMDOM.decl(this.name, {
     getContainer : function() {
         return this._container ||
             (this._container = this.findElem('container', true));
-    },
+    }
 
+}, {
+    live : function() {
+        this.liveBindTo('switcher', 'click', this.onSwitcherClick);
+        return this.__base.apply(this, arguments);
+    },
     /**
      * On BEM click event handler
      * @param {events:Event} e
@@ -62,12 +67,7 @@ provide(BEMDOM.decl(this.name, {
     onSwitcherClick : function(e) {
         e.preventDefault();
 
-        this.toggleMod('opened');
-    }
-
-}, {
-    live : function() {
-        this.liveBindTo('switcher', 'click', this.prototype.onSwitcherClick);
+        this.toggleMod('showed');
     }
 }));
 

common.blocks/cut/cut.spec.js

@@ -0,0 +1,51 @@
+modules.define(
+    'spec',
+    ['cut', 'i-bem__dom', 'jquery', 'BEMHTML'],
+    function(provide, Cut, BEMDOM, $, BEMHTML) {
+
+describe('cut', function() {
+    var body = $('body'),
+        cut;
+
+    beforeEach(function() {
+        cut = BEMDOM.init($(BEMHTML.apply({
+                block : 'cut',
+                expandedText : 'Hide',
+                mods : { theme : 'hackaton' },
+                switcher : 'Show',
+                content : 'Text here'
+            }))
+            .appendTo(body))
+            .bem('cut');
+    });
+
+    afterEach(function() {
+        BEMDOM.destruct(cut.domElem);
+    });
+
+    describe('open/close', function() {
+        it('should show/hide container on open/close', function() {
+            var container = cut.elemInstance('container');
+
+            container.hasMod('visible').should.be.false;
+            cut.setMod('showed');
+            container.hasMod('visible').should.be.true;
+            cut.delMod('showed');
+            container.hasMod('visible').should.be.false;
+        });
+    });
+
+    describe('change switcher text', function() {
+        it('should change switcher text on open/close', function() {
+            cut.elem('switcher').text().should.be.equal('Show');
+            cut.setMod('showed');
+            cut.elem('switcher').text().should.be.equal('Hide');
+            cut.delMod('showed');
+            cut.elem('switcher').text().should.be.equal('Show');
+        });
+    });
+});
+
+provide();
+
+});

common.blocks/cut/cut.tests/simple.bemjson.js

@@ -10,10 +10,8 @@
         { tag : 'h2', content : 'Cut' },
         {
             block : 'cut',
-            js : {
-                expandedText : 'Hide'
-            },
-            mods : { theme : 'simple' },
+            expandedText : 'Hide',
+            mods : { theme : 'hackaton' },
             switcher : 'Show',
             content : 'Text here'
         }

common.blocks/cut/cut.tmpl-specs/10-default.bemjson.js

@@ -1,6 +1,7 @@
 ({
     block : 'cut',
-    js : { expandedText : 'cut-hide' },
+    mods : { theme : 'hackaton' },
     switcher : 'cut-show',
+    expandedText : 'cut-hide',
     content : 'cut-text'
 })

common.blocks/cut/cut.tmpl-specs/10-default.html

@@ -1 +1 @@
-<div class="cut i-bem" data-bem="{&quot;cut&quot;:{&quot;expandedText&quot;:&quot;cut-hide&quot;}}"><div class="cut__container">cut-text</div><a class="link link_type_pseudo link_theme_islands link__control cut__switcher i-bem" data-bem="{&quot;link&quot;:{}}" tabindex="0">cut-show</a></div>
+<div class="cut cut_theme_hackaton i-bem" data-bem="{&quot;cut&quot;:{&quot;expandedText&quot;:&quot;cut-hide&quot;}}"><div class="cut__container">cut-text</div><span class="link link_pseudo link_theme_islands link__control cut__switcher i-bem" data-bem="{&quot;link&quot;:{}}" tabindex="0">cut-show</span></div>

common.blocks/cut/cut.tmpl-specs/20-nested.bemjson.js

@@ -1,16 +1,14 @@
 ({
     block : 'cut',
-    js : {
-        expandedText : 'cut-hide'
-    },
+    mods : { theme : 'hackaton' },
+    expandedText : 'cut-hide',
     switcher : 'cut-show',
     content : [
         'cut-text',
         {
             block : 'cut',
-            js : {
-                expandedText : 'subcut-hide'
-            },
+            mods : { theme : 'hackaton' },
+            expandedText : 'subcut-hide',
             switcher : 'subcut-show',
             content : 'subcut-text'
         }

common.blocks/cut/cut.tmpl-specs/20-nested.html

@@ -1 +1 @@
-<div class="cut i-bem" data-bem="{&quot;cut&quot;:{&quot;expandedText&quot;:&quot;cut-hide&quot;}}"><div class="cut__container">cut-text<div class="cut i-bem" data-bem="{&quot;cut&quot;:{&quot;expandedText&quot;:&quot;subcut-hide&quot;}}"><div class="cut__container">subcut-text</div><a class="link link_type_pseudo link_theme_islands link__control cut__switcher i-bem" data-bem="{&quot;link&quot;:{}}" tabindex="0">subcut-show</a></div></div><a class="link link_type_pseudo link_theme_islands link__control cut__switcher i-bem" data-bem="{&quot;link&quot;:{}}" tabindex="0">cut-show</a></div>
+<div class="cut cut_theme_hackaton i-bem" data-bem="{&quot;cut&quot;:{&quot;expandedText&quot;:&quot;cut-hide&quot;}}"><div class="cut__container">cut-text<div class="cut cut_theme_hackaton i-bem" data-bem="{&quot;cut&quot;:{&quot;expandedText&quot;:&quot;subcut-hide&quot;}}"><div class="cut__container">subcut-text</div><span class="link link_pseudo link_theme_islands link__control cut__switcher i-bem" data-bem="{&quot;link&quot;:{}}" tabindex="0">subcut-show</span></div></div><span class="link link_pseudo link_theme_islands link__control cut__switcher i-bem" data-bem="{&quot;link&quot;:{}}" tabindex="0">cut-show</span></div>

design/common.blocks/cut/_theme/cut_theme_simple.styl → design/common.blocks/cut/_theme/cut_theme_hackaton.styl

@@ -1,4 +1,4 @@
-.cut_theme_simple {
+.cut_theme_hackaton {
 
     >.cut__container {
         display: none;

desktop.pages/cut/cut.bemjson.js

@@ -17,11 +17,9 @@
 		},
 		{
 			block : 'cut',
-			js : {
-				expandedText : 'Скрыть'
-			},
-			mods : { type: 'inline', theme : 'simple', size: 's' },
+			mods : { theme : 'hackaton', switcher : 'button', size : 'm' },
 			switcher : 'Подробнее',
+			expandedText : 'Скрыть',
 			content : [
 				'Время шло, сервисы развивались и всё больше разработчиков ',
 				'интерфейсов вкладывали свои усилия в развитие Яндекса.'