UTest({
	'should transform css and html using block-css' () {
		var css = `
			.foo { color: red }
			.foo .item { background: green;}
		`;
		var awaitCss = `
			.MyID { color: red }
			.MyID__item { background: green;}
		`;
		
		var html = `			
			<div class='foo'> 
				<ul>
					<li class='item'>Hello</li>
				</ul>				
			</div>
		`;
		var awaitHtml = `			
			<div class='MyID foo'> 
				<ul>
					<li class='MyID__item item'>Hello</li>
				</ul>				
			</div>
		`;
		
	
		var { template, css } = AutoBem.transform(html, css, { 
			scopeId: 'MyID'
		});

		eq_(template, awaitHtml);
		eq_(css, awaitCss);
	},
	'should transform css and html using host-css' () {
		var css = `
			:host { color: red }
			:host(.active) { color: green }

			.item { background: red }
			:host(.active) .item { background: green;}
		`;
		var awaitCss = `
			.MyID { color: red }
			.MyID.active { color: green }

			.MyID__item { background: red }
			.MyID.active .MyID__item { background: green;}
		`;
		
		var html = `			
			<div> 
				<span class='item'>Hello</span>
			</div>
		`;
		var awaitHtml = `			
			<div class='MyID'> 
				<span class='MyID__item item'>Hello</span>
			</div>
		`;
		
	
		var { template, css } = AutoBem.transform(html, css, { 
			scopeId: 'MyID'
		});

		eq_(template, awaitHtml);
		eq_(css, awaitCss);
	},
	'should match descendants of an element' () {
		var css = `
			.container ul .item { background: green; }
		`;
		var awaitCss = `
			.MyID__tag_ul__item { background: green; }
		`;
		
		var html = `	
			<div class='container'>		
				<div> 
					<div class='item'>Hello</div>
				</div>			
				<ul>
					<li class='item'>Hello</li>
				</ul>
			</div>
		`;
		var awaitHtml = `			
			<div class='container'>		
				<div> 
					<div class='item'>Hello</div>
				</div>			
				<ul>
					<li class='MyID__tag_ul__item item'>Hello</li>
				</ul>
			</div>
		`;		
	
		var { template, css } = AutoBem.transform(html, css, { 
			scopeId: 'MyID'
		});		
		eq_(template.trim(), awaitHtml.trim());
		eq_(css.trim(), awaitCss.trim());
	},
	'should match children of an element' () {
		var css = `
			.container .foo > .item { background: green; }
		`;
		var awaitCss = `
			.MyID__foo__child__item { background: green; }
		`;
		
		var html = `	
			<div class='container'>		
				<div class='foo'> 
					<ul><li class='item'>Hello</li></ul>
				</div>			
				<div class='foo'>
					<div class='item'>Hello</div>
				</div>
			</div>
		`;
		var awaitHtml = `			
			<div class='container'>		
				<div class='foo'> 
					<ul><li class='item'>Hello</li></ul>
				</div>			
				<div class='foo'>
					<div class='MyID__foo__child__item item'>Hello</div>
				</div>
			</div>
		`;		
	
		var { template, css } = AutoBem.transform(html, css, { 
			scopeId: 'MyID'
		});		
		eq_(template.trim(), awaitHtml.trim());
		eq_(css.trim(), awaitCss.trim());
	},
	'should not match any element' () {
		var css = `
			.myBlock .foo { background: green; }
		`;
		var awaitCss = `
			.MyID__foo { background: green; }
		`;
		
		var html = `	
			<div class='myBlock'>
				<div class='baz'></div>
			</div>
		`;
		var awaitHtml = `			
			<div class='myBlock'>
				<div class='baz'></div>
			</div>
		`;		
	
		var reporter = sinon.spy();
		var { template, css } = AutoBem.transform(html, css, { 
			scopeId: 'MyID',
			reporter: reporter
		});		
		eq_(template.trim(), awaitHtml.trim());
		eq_(css.trim(), awaitCss.trim());
		eq_(reporter.callCount, 1);		
	}
})