Improve the props-driven approach

Author: aswitalski

PROPS.md

@@ -0,0 +1 @@
+## Props-driven components

README.md

@@ -45,6 +45,20 @@ const Square = props => [
 
 There is no transpilation phase, the sources are directly used by the browser in the form of ES modules.
 
+## Props-driven
+
+All the components receive props from the parent in a form of an object.
+These props are the single source of truth for each and every component. The props define what given component renders.
+
+All simple components, based only on props, always render the same template for the same set of props.
+
+Elements get props transformed into properties, attributes and listeners set on the element instance.
+
+Web Components are also driven by props, but they can fetch supplementary data if necessary.
+Supplemented props object is stored as internal state, which feeds the rendered content.
+
+More about props-driven components [here](PROPS.md).
+
 ## State management
 
 Instead of using the centralized state, as in Redux, Web Component manages only the view model that is necessary

src/core/virtual-dom.js

@@ -46,7 +46,7 @@ limitations under the License.
       if (ComponentClass.prototype instanceof opr.Toolkit.WebComponent) {
         return this.createWebComponent(
             description, parent && parent.rootNode, context,
-            /*= requireCustomElement */ true);
+            /*= requireCustomElement */ false);
       }
       const component = new ComponentClass(description, parent, context);
       const nodeDescription = opr.Toolkit.Renderer.render(

test/functional/components.test.js

@@ -1,4 +1,5 @@
-describe.skip('Components', () => {
+describe.only('Components', () => {
+
   let container;
 
   beforeEach(() => {
@@ -8,12 +9,27 @@ describe.skip('Components', () => {
 
   afterEach(() => { container.remove(); })
 
-  it('creates a simple Component', async () => {
+  describe('=> Web Component', () => {
 
-  });
+    it('renders custom element', async() => {
+
+      // given
+      class CustomElement extends opr.Toolkit.WebComponent {
+
+        static elementName = 'custom-element';
+
+        render() {
+          return [
+            'main',
+          ];
+        }
+      }
 
-  // drive
-  it('creates a Web Component', async () => {
+      // when
+      const element = await opr.Toolkit.render(CustomElement, container);
 
+      // then
+      assert.equal(element.ref.tagName, 'CUSTOM-ELEMENT');
+    })
   });
 });