$

src/components/includes/loader/loader.riot

@@ -0,0 +1,28 @@
+<loader>
+  <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
+  <svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#000">
+      <g fill="none" fill-rule="evenodd">
+          <g transform="translate(1 1)" stroke-width="2">
+              <circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
+              <path d="M36 18c0-9.94-8.06-18-18-18">
+                  <animateTransform
+                      attributeName="transform"
+                      type="rotate"
+                      from="0 18 18"
+                      to="360 18 18"
+                      dur="1s"
+                      repeatCount="indefinite"/>
+              </path>
+          </g>
+      </g>
+  </svg>
+  <style>
+    :host {
+      padding: 1rem 0;
+    }
+
+    :host svg {
+      overflow: visible;
+    }
+  </style>
+</loader>

src/components/includes/user/user.riot

@@ -0,0 +1,3 @@
+<user>
+  <p>My username is: <b>{ props.name }</b></p>
+</user>

src/components/includes/user/user.spec.js

@@ -0,0 +1,17 @@
+import User from './user.riot'
+import { expect } from 'chai'
+import { component } from 'riot'
+
+describe('User Unit Test', () => {
+  const mountUser = component(User)
+
+  it('The component is properly rendered', () => {
+    const div = document.createElement('div')
+
+    const component = mountUser(div, {
+      name: 'Jack'
+    })
+
+    expect(component.$('b').innerHTML).to.be.equal('Jack')
+  })
+})