Nested testing

Author: thewebartisan7

test/templates/components/nested-one-slot.html

@@ -0,0 +1,5 @@
+<div class="nested-one">
+  <slot before></slot>
+  <slot></slot>
+  <slot after></slot>
+</div>

test/templates/components/nested-two-slot.html

@@ -0,0 +1,5 @@
+<div>
+  <slot before></slot>
+  <slot></slot>
+  <slot after></slot>
+</div>

test/test-nested.js

@@ -0,0 +1,24 @@
+'use strict';
+
+const test = require('ava');
+const plugin = require('../src');
+const posthtml = require('posthtml');
+const clean = html => html.replace(/(\n|\t)/g, '').trim();
+
+test('Must process all nested component to html', async t => {
+  const actual = `<div><x-nested-one></x-nested-one></div>`;
+  const expected = `<div><div class="nested-one"><div class="nested-two"><div class="nested-three">Nested works!</div></div></div></div>`;
+
+  const html = await posthtml([plugin({root: './test/templates/components'})]).process(actual).then(result => clean(result.html));
+
+  t.is(html, expected);
+});
+
+test('Must process all nested component with slots to html', async t => {
+  const actual = `<div><x-nested-one-slot><x-nested-two-slot>nested-two content<slot before>nested-two before</slot><slot after>nested-two after</slot></x-nested-two-slot><slot before>nested-one before</slot><slot after>nested-one after</slot></x-nested-one-slot></div>`;
+  const expected = `<div><div class="nested-one">  nested-one before  <div>  nested-two before  nested-two content  nested-two after</div>  nested-one after</div></div>`;
+
+  const html = await posthtml([plugin({root: './test/templates/components'})]).process(actual).then(result => clean(result.html));
+
+  t.is(html, expected);
+});

test/test-x-tag.js

@@ -14,15 +14,6 @@ test('Must process component to html', async t => {
   t.is(html, expected);
 });
 
-test('Must process all nested component to html', async t => {
-  const actual = `<div><x-nested-one></x-nested-one></div>`;
-  const expected = `<div><div class="nested-one"><div class="nested-two"><div class="nested-three">Nested works!</div></div></div></div>`;
-
-  const html = await posthtml([plugin({root: './test/templates/components'})]).process(actual).then(result => clean(result.html));
-
-  t.is(html, expected);
-});
-
 test('Must process component with namespace to html', async t => {
   const actual = `<x-dark::button><slot name="content">My button</slot></x-dark::button>`;
   const expected = `<button class="bg-dark text-light">My button</button>`;