import { html } from 'lit-html';
import { define } from 'skatejs';
import withRenderer from '..';

const Component = withRenderer(HTMLElement);

@define
class MyElement extends Component {
  render({ name }) {
    return html`Hello, ${name}!`;
  }
}

it('renders', () => {
  const el = new MyElement();
  expect(el.innerHTML).toEqual('');
  el.renderer(el, el.render.bind(el, { name: 'World' }));
  expect(el.innerHTML).toEqual('Hello, <!---->!');
  el.renderer(el, el.render.bind(el, { name: 'Bob' }));
  expect(el.innerHTML).toEqual('Hello, <!---->!');
});

import { html } from 'lit-html';
import { define } from 'skatejs';
import withRenderer from '..';

const Component = withRenderer(HTMLElement);

function regexContent(text) {
  return new RegExp(`Hello, ${text}!`);
}

@define
class MyElement extends Component {
  render({ name }) {
    return html`Hello, ${name}!`;
  }
}

it('renders', () => {
  const el = new MyElement();
  expect(el.innerHTML).toEqual('');
  el.renderer(el, el.render.bind(el, { name: 'World' }));
  expect(el.innerHTML).toMatch(regexContent('World'));
  el.renderer(el, el.render.bind(el, { name: 'Bob' }));
  expect(el.innerHTML).toMatch(regexContent('Bob'));
});

Make tests between hyperhtml and lit-html consistent since they're very similar.
Make tests between hyperhtml and lit-html consistent since they're very similar.
