Skip to content

Commit

Permalink
Add createElement and JSX tests
Browse files Browse the repository at this point in the history
  • Loading branch information
pomber committed May 21, 2017
1 parent fc4d360 commit 15010f8
Show file tree
Hide file tree
Showing 2 changed files with 62 additions and 1 deletion.
16 changes: 15 additions & 1 deletion src/element.js
Original file line number Diff line number Diff line change
@@ -1 +1,15 @@
export function createElement(type, config, ...args) {}
const TEXT_ELEMENT = "TEXT ELEMENT";

export function createElement(type, config, ...args) {
const props = Object.assign({}, config);
const hasChildren = args.length > 0;
const rawChildren = hasChildren ? [].concat(...args) : [];
props.children = rawChildren
.filter(c => c != null && c !== false)
.map(c => c instanceof Object ? c : createTextElement(c));
return { type, props };
}

function createTextElement(value) {
return createElement(TEXT_ELEMENT, { nodeValue: value });
}
47 changes: 47 additions & 0 deletions test/01.render-jsx-dom-elements.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import test from "ava";
import browserEnv from "browser-env";
/** @jsx createElement */
import { render, createElement } from "../src/didact";

// Create document global var
browserEnv(["document"]);

test.beforeEach(t => {
const root = document.createElement("div");
document.body.appendChild(root);
t.context.root = root;
});

test.afterEach.always(t => {
const root = t.context.root;
root.innerHTML = "";
document.body.removeChild(root);
});

test("render jsx div", t => {
const root = t.context.root;
const element = <div />;
render(element, root);
t.is(root.innerHTML, "<div></div>");
});

test("render div with children", t => {
const root = t.context.root;
const element = <div><b /><a href="foo" /></div>;
render(element, root);
t.is(root.innerHTML, '<div><b></b><a href="foo"></a></div>');
});

test("render div with props", t => {
const root = t.context.root;
const element = <div id="foo" />;
render(element, root);
t.is(root.innerHTML, '<div id="foo"></div>');
});

test("render span with text child", t => {
const root = t.context.root;
const element = <span>Foo</span>;
render(element, root);
t.is(root.innerHTML, "<span>Foo</span>");
});

0 comments on commit 15010f8

Please sign in to comment.