Permalink
Browse files

Added some basic tests for #11

  • Loading branch information...
kizu committed Aug 18, 2012
1 parent 3ea97fb commit 62c4ac9b5029a7960263c94fc8d25cf1efa522f7
View
@@ -0,0 +1 @@
+node_modules
View
@@ -0,0 +1,6 @@
+test:
+ @./node_modules/.bin/mocha \
+ --require should \
+ --reporter list
+
+.PHONY: test
View
@@ -164,7 +164,7 @@ would render like
#### Automatic attributes
-There are some tags like `img` that must have at least one attribute set. Bemto would create attributes with some predefined values for such tags. So, for images this code — `+b.image(src="foo.png")` would render `<img src="foo.png" alt="" />` — you can see that in that case there is the added empty `alt`.
+There are some tags like `img` that must have at least one attribute set. Bemto would create attributes with some predefined values for such tags. So, for images this code — `+b.image(src="foo.png")` would render `<img alt="" class="image" src="foo.png"/>` — you can see that in that case there is the added empty `alt`.
Also, in some cases there is a need to adjust some attributes according to other ones. For `img` if the `alt` is set, but the `title` is not we'd need to set it to empty, 'cause there'd be a inconsistency between browsers (IE would show the `title` bubble for `alt`). And from the other side, if there is only `title` set in an image, we'd need to clone it to `alt`. Bemto do all those things.
View
@@ -0,0 +1,17 @@
+{
+ "name": "bemto",
+ "description": "Smart mixins for writing BEM in Jade",
+ "version": "0.1.0",
+ "repository": {
+ "type": "git",
+ "url": "git://github.com/kizu/bemto.git"
+ },
+ "devDependencies": {
+ "jade": "0.27.x"
+ , "mocha": "*"
+ , "should": "*"
+ },
+ "author": "Roman Komarov <kizu@kizu.ru>",
+ "main": "./bemto.jade",
+ "engines": { "node": "*" }
+}
View
@@ -0,0 +1,14 @@
+<div class="foo">bar
+</div>
+<div class="foo">
+ <div class="foo__bar">baz
+ </div>
+</div>
+<div class="block block_foo">bar
+</div>
+<div class="block block_bar block_baz block_foo">
+ <div class="block__element block__element_mode_moddy block__element_type_lol">Blah
+ </div>
+</div>
+<p><span class="foo">bar</span>
+</p>
View
@@ -0,0 +1,14 @@
+include ../../bemto
+
++b.foo bar
+
++b.foo
+ +e.bar baz
+
++b.block_foo bar
+
++b.block_foo._bar._baz
+ +e.element_type_lol._mode_moddy Blah
+
+p
+ +b('span').foo bar
@@ -0,0 +1,8 @@
+<div class="foo" title="Oh, it's a title"><a class="foo__bar" href="#baz">baz</a>
+</div>
+<p><img alt="" class="image" src="foo.png"/>
+</p>
+<p><img alt="no title here" class="image" src="foo.png" title=""/>
+</p>
+<p><img alt="alt is a cloned title" class="image" src="foo.png" title="alt is a cloned title"/>
+</p>
@@ -0,0 +1,13 @@
+include ../../bemto
+
++b.foo(title="Oh, it's a title")
+ +e('a').bar(href='#baz') baz
+
+p
+ +b.image(src="foo.png")
+
+p
+ +b.image(src="foo.png", alt="no title here")
+
+p
+ +b.image(src="foo.png", title="alt is a cloned title")
@@ -0,0 +1,6 @@
+<ul class="list">
+ <li class="list-item"><a class="list-item__link" href="foo"><span class="list-item__text">foo</span></a>
+ </li>
+ <li class="list-item"><a class="list-item__link" href="bar"><span class="list-item__text">bar</span></a>
+ </li>
+</ul>
@@ -0,0 +1,9 @@
+include ../../bemto
+
++b('ul').list
+ +b.list-item
+ +e.link(href="foo")
+ +e.text foo
+ +b.list-item
+ +e.link(href="bar")
+ +e.text bar
View
@@ -0,0 +1,10 @@
+<div class="b-block">
+ <div class="b-block__element">foo
+ </div>
+</div>
+<div class="block">
+ <div class="block-element">foo
+ </div>
+</div>
+<div class="block block--modifier-name block--other-modifier">foo
+</div>
View
@@ -0,0 +1,16 @@
+include ../../bemto
+
+- bemto_settings_prefix = 'b-'
+
++b.block
+ +e.element foo
+
+- bemto_settings_prefix = ''
+- bemto_settings_element = '-'
+
++b.block
+ +e.element foo
+
+- bemto_settings_modifier = '--'
+
++b.block--modifier-name.--other-modifier foo
View
@@ -0,0 +1,10 @@
+<p><a class="link" href="#Foo">Foo</a>
+</p>
+<p><a class="link link_external" href="https://github.com">Github</a>
+</p>
+<p><a class="link url" href="http://kizu.ru" rel="me">Here I am</a>
+</p>
+<p><span class="link">Ah, I'm not a link</span>
+</p>
+<p><a class="link" href="https://github.com"><img alt="" class="link__icon" src="http://favicon.yandex.net/favicon/github.com"/><span class="link__text">Github</span></a>
+</p>
View
@@ -0,0 +1,22 @@
+include ../../bemto
+
+mixin link(url)
+ +b('span').link(attributes, href=url)
+ block
+
+p
+ +link('#Foo') Foo
+
+p
+ +link('https://github.com')._external Github
+
+p
+ +link('http://kizu.ru').url(rel="me") Here I am
+
+p
+ +link Ah, I'm not a link
+
+p
+ +link('https://github.com')
+ +e.icon(src="http://favicon.yandex.net/favicon/github.com")
+ +e.text Github
View
@@ -0,0 +1,26 @@
+/**
+ * Module dependencies.
+ */
+
+var jade = require('jade')
+ , fs = require('fs');
+
+// test cases
+
+var cases = fs.readdirSync('test/cases').filter(function(file){
+ return ~file.indexOf('.jade');
+}).map(function(file){
+ return file.replace('.jade', '');
+});
+
+cases.forEach(function(test){
+ var name = test.replace(/[-.]/g, ' ');
+ it(name, function(){
+ var path = 'test/cases/' + test + '.jade';
+ var str = fs.readFileSync(path, 'utf8');
+ var html = fs.readFileSync('test/cases/' + test + '.html', 'utf8').trim().replace(/\r/g, '');
+ var fn = jade.compile(str, { filename: path, pretty: true });
+ var actual = fn({ title: 'Jade' });
+ actual.trim().should.equal(html);
+ })
+});

0 comments on commit 62c4ac9

Please sign in to comment.