Skip to content

Commit

Permalink
Fix and cleanup component tests, update types
Browse files Browse the repository at this point in the history
  • Loading branch information
@tbranyen
tbranyen committed May 1, 2021
1 parent 744dda5 commit bc3437c
Show file tree
Hide file tree
Showing 4 changed files with 54 additions and 58 deletions.
9 changes: 4 additions & 5 deletions packages/diffhtml-components/test/integration/component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,17 +52,16 @@ describe('Component implementation', function() {
);
});

it.skip('will not support returning falsy values', () => {
it('will support returning falsy values', () => {
class NullComponent extends Component {
render() {
return null;
}
}

throws(
() => innerHTML(this.fixture, html`<${NullComponent} />`),
/Must return at least one element from render/,
);
innerHTML(this.fixture, html`<${NullComponent} />`);

strictEqual(this.fixture.innerHTML, '');
});

it('will support rendering empty tree content', () => {
Expand Down
91 changes: 43 additions & 48 deletions packages/diffhtml-components/test/integration/web-component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,39 +2,34 @@

import { deepEqual, equal, ok } from 'assert';
import diff from '../../lib/util/binding';
import Component from '../../lib/component';
import validateCaches from '../util/validate-caches';

const { innerHTML, html, createTree, release } = diff;

const whitespaceEx = /[ ]{2,}|\n/g;

describe.skip('Web Component', function() {
let WebComponent = null;

describe('Web Component', function() {
beforeEach(() => {
newJSDOMSandbox();

// Make setTimeout synchronous.
window.setTimeout = fn => fn();

delete require.cache[require.resolve('../lib/web-component')];
WebComponent = require('../lib/web-component');

this.fixture = document.createElement('div');
process.env.NODE_ENV = 'development';
Component.subscribeMiddleware();
document.body.appendChild(this.fixture);
WebComponent.subscribeMiddleware();
});

afterEach(() => {
release(this.fixture);
WebComponent.unsubscribeMiddleware();
Component.unsubscribeMiddleware();
document.body.removeChild(this.fixture);
validateCaches();
});

it('will render a component', () => {
class CustomComponent extends WebComponent {
class CustomComponent extends Component {
render() {
return html`
<div>Hello world</div>
Expand All @@ -52,7 +47,7 @@ describe.skip('Web Component', function() {
});

it('will render a nested component', () => {
class CustomComponent extends WebComponent {
class CustomComponent extends Component {
render() {
return html`
<div>Hello world</div>
Expand All @@ -70,7 +65,7 @@ describe.skip('Web Component', function() {
});

it('will re-render a component', () => {
class CustomComponent extends WebComponent {
class CustomComponent extends Component {
render() {
return html`
<div>Hello world</div>
Expand All @@ -89,16 +84,16 @@ describe.skip('Web Component', function() {
equal(this.fixture.innerHTML, '<custom-component></custom-component>');
});

it('will re-render a component with string props', () => {
class CustomComponent extends WebComponent {
it('will re-render a component with string props', async () => {
class CustomComponent extends Component {
render() {
return html`
<div>${this.props.message}</div>
`;
}

static propTypes = {
message: String,
static defaultProps = {
message: '',
}
}

Expand All @@ -109,22 +104,22 @@ describe.skip('Web Component', function() {

const instance = this.fixture.querySelector('custom-component');

instance.forceUpdate();
await instance.forceUpdate();

equal(instance.shadowRoot.childNodes[1].outerHTML, '<div>world</div>');
equal(this.fixture.innerHTML, '<custom-component message="world"></custom-component>');
});

it('will re-render a component with object props', () => {
class CustomComponent extends WebComponent {
it('will re-render a component with object props', async () => {
class CustomComponent extends Component {
render() {
return html`
<div>${this.props.message.contents}</div>
`;
}

static propTypes = {
message: Object,
static defaultProps = {
message: {},
}
}

Expand All @@ -140,34 +135,34 @@ describe.skip('Web Component', function() {

const instance = this.fixture.querySelector('custom-component');

instance.forceUpdate();
await instance.forceUpdate();

equal(instance.shadowRoot.childNodes[1].outerHTML, '<div>world</div>');
equal(this.fixture.innerHTML, '<custom-component></custom-component>');
});

it('will re-render a nested component with object props', () => {
class InnerComponent extends WebComponent {
it('will re-render a nested component with object props', async () => {
class InnerComponent extends Component {
render() {
return html`
<div>${this.props.message.contents}</div>
`;
}

static propTypes = {
message: Object,
static defaultProps = {
message: {},
}
}

class OuterComponent extends WebComponent {
class OuterComponent extends Component {
render() {
return html`
<inner-component message=${this.props.message}></inner-component>
`;
}

static propTypes = {
message: Object,
static defaultProps = {
message: {},
}
}

Expand All @@ -188,15 +183,15 @@ describe.skip('Web Component', function() {

innerHTML(this.fixture, html`<outer-component message=${{ ...message }} />`);

outer.forceUpdate();
inner.forceUpdate();
await outer.forceUpdate();
await inner.forceUpdate();

equal(inner.shadowRoot.childNodes[1].outerHTML, '<div>world</div>');
equal(this.fixture.innerHTML, '<outer-component></outer-component>');
});

it('will re-render a nested component', () => {
class CustomComponent extends WebComponent {
class CustomComponent extends Component {
render() {
return html`
<div>Hello world</div>
Expand All @@ -216,23 +211,23 @@ describe.skip('Web Component', function() {
});

it('will re-render a nested component with props', () => {
class OuterComponent extends WebComponent {
class OuterComponent extends Component {
render() {
return html`
<slot></slot>
`;
}
}

class InnerComponent extends WebComponent {
class InnerComponent extends Component {
render() {
return html`
<div>${this.props.message}</div>
`;
}

static propTypes = {
message: String,
static defaultProps = {
message: '',
}
}

Expand Down Expand Up @@ -266,15 +261,15 @@ describe.skip('Web Component', function() {
});

it('will render a nested component', () => {
class InnerComponent extends WebComponent {
class InnerComponent extends Component {
render() {
return html`
<div>Hello world</div>
`;
}
}

class CustomComponent extends WebComponent {
class CustomComponent extends Component {
render() {
return html`
<div><slot></slot></div>
Expand Down Expand Up @@ -314,7 +309,7 @@ describe.skip('Web Component', function() {
it('will pass properties to constructor', () => {
let ctorMessage = null;

class CustomComponent extends WebComponent {
class CustomComponent extends Component {
render({ message }) {
return html`
<div>${message}</div>
Expand All @@ -337,7 +332,7 @@ describe.skip('Web Component', function() {
it('will pass children in properties to constructor', () => {
let children = null;

class CustomComponent extends WebComponent {
class CustomComponent extends Component {
render({ message }) {
return html`
<div>${message}</div>
Expand Down Expand Up @@ -365,7 +360,7 @@ describe.skip('Web Component', function() {
});

it('will pass objects as props', () => {
class CustomComponent extends WebComponent {
class CustomComponent extends Component {
render({ data }) {
return html`
<div>${data.message}</div>
Expand All @@ -385,7 +380,7 @@ describe.skip('Web Component', function() {

describe('JSX Compatibility', () => {
it('will render JSX', () => {
customElements.define('jsx-test', class extends WebComponent {
customElements.define('jsx-test', class extends Component {
render() {
return (
<div>Hello world</div>
Expand All @@ -403,7 +398,7 @@ describe.skip('Web Component', function() {
});

it('will render JSX with props', () => {
customElements.define('jsx-test', class extends WebComponent {
customElements.define('jsx-test', class extends Component {
render() {
const { message } = this.props;

Expand All @@ -412,8 +407,8 @@ describe.skip('Web Component', function() {
);
}

static propTypes = {
message: String,
static defaultProps = {
message: '',
}
});

Expand All @@ -435,10 +430,10 @@ describe.skip('Web Component', function() {
});

describe('Stateful components', () => {
it('will re-render with setState', () => {
it('will re-render with setState', async () => {
let ref = null;

customElements.define('stateful-test', class extends WebComponent {
customElements.define('stateful-test', class extends Component {
render() {
const { msg } = this.state;

Expand All @@ -462,7 +457,7 @@ describe.skip('Web Component', function() {
'<div>default</div>',
);

ref.setState({ msg: 'it works' });
await ref.setState({ msg: 'it works' });

equal(
this.fixture.firstChild.shadowRoot.childNodes[1].outerHTML,
Expand Down
10 changes: 5 additions & 5 deletions packages/diffhtml/lib/release.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ import { StateCache, NodeCache, ReleaseHookCache, Mount } from './util/types';
* @param {Mount} mount - Valid input node
*/
export default function release(mount) {
// If this was a top-level rendered element, deallocate the VTree
// and remove the StateCache reference.
// If this was a top-level rendered element, deallocate the VTree and remove
// the StateCache reference.
if (StateCache.has(mount)) {
const { mutationObserver, oldTree } = StateCache.get(mount);

Expand Down Expand Up @@ -40,8 +40,8 @@ export default function release(mount) {
}
}

// If there is a shadowRoot attached to the DOM node, attempt
// to release this as well.
// If there is a shadowRoot attached to the DOM node, attempt to release this
// as well.
if (asHTMLElement.shadowRoot) {
release(asHTMLElement.shadowRoot);
}
Expand All @@ -50,8 +50,8 @@ export default function release(mount) {
// references to the associated trees.
NodeCache.forEach((domNode, vTree) => {
if (domNode === asHTMLElement) {
unprotectVTree(vTree);
ReleaseHookCache.forEach(fn => fn(vTree));
unprotectVTree(vTree);
}
});
}
2 changes: 2 additions & 0 deletions packages/diffhtml/lib/util/types.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -226,7 +226,9 @@ export const Supplemental = EMPTY.OBJ;
* @property {ValidInput=} markup
* @property {VTree=} oldTree
* @property {Boolean=} isRendering
* @property {Boolean=} isDirty
* @property {String=} previousMarkup
* @property {MutationObserver=} mutationObserver
* @property {import('../transaction').default} activeTransaction
* @property {import('../transaction').default=} nextTransaction
* @property {Document=} ownerDocument
Expand Down

0 comments on commit bc3437c

Please sign in to comment.