Improve test for imported component

Test mixin, placeholder selector, variable, function

test/component-stylus.js

@@ -43,7 +43,7 @@ describe('component-stylus', function() {
 
     builder.build(function(err, res) {
       if (err) return done(err);
-      assert.equal(res.css.trim(), 'body {\n  content: "test";\n  color: #f00;\n}\nbody div {\n  display: block;\n}');
+      assert.equal(res.css.trim(), '.bar,\n#barz {\n  content: "foo";\n}\n.bar {\n  content: "mixin";\n  font-size: 24px;\n}');
       done();
     });
   });

test/fixtures/utils/component.json

@@ -1,6 +1,9 @@
 {
   "name": "utils",
   "styles": [
-    "index.styl"
+    "mixin.styl",
+    "variable.styl",
+    "placeholder.styl",
+    "function.styl"
   ]
 }

test/fixtures/utils/function.styl

@@ -0,0 +1,3 @@
+add(a, b) {
+  a + b;
+}

test/fixtures/utils/mixin.styl

@@ -0,0 +1,3 @@
+mixin() {
+  content: "mixin";
+}

test/fixtures/utils/placeholder.styl

@@ -0,0 +1,3 @@
+$foo {
+  content: "foo";
+}

test/fixtures/utils/variable.styl

@@ -0,0 +1 @@
+font-size = 14px;

test/fixtures/with-import/index.styl

@@ -1,10 +1,14 @@
-@import "utils/index";
+@import "utils/mixin";
+@import "utils/placeholder";
+@import "utils/function";
+@import "utils/variable";
 
-body {
-  test();
-  color: red;
+.bar {
+  @extend $foo;
+  mixin();
+  font-size: add(font-size, 10);
+}
 
-  div {
-    display: block;
-  }
+#barz {
+  @extend $foo;
 }