TypeScript inferno render Beispiele

Beispiel #1

Datei: update.spec.browser.ts Projekt: Keats/inferno

			() => render(template('Hello', {}, ' and ', 'Zoo'), container)

Beispiel #2

Datei: patchNonKeyedChildren.spec.browser.ts Projekt: Keats/inferno

	it('should insert to the middle', () => {
		render(template(generateNodes(['c', 'd', 'e'])), container);
		render(template(generateNodes(['a', 'b', 'e'])), container);
		expect(container.textContent).to.equal('abe');
		expect(container.firstChild.childNodes.length).to.equal(3);
	});

Beispiel #3

Datei: createElement.spec.browser.ts Projekt: Keats/inferno

	afterEach(() => {
		render(null, container);
		container.innerHTML = '';
		document.body.removeChild(container);
	});

Beispiel #4

Datei: components.spec.browser.ts Projekt: Keats/inferno

	it('should render a basic component', () => {
		let template = (Component, title) =>
			createElement('div', null,
				createElement(Component, {
					title,
					name: 'basic-render'
				})
			);

		expect(() => {
			render(template(null, 'abc'), container);
		}).to.throw();

		expect(() => {
			render(template({}, 'abc'), container);
		}).to.throw();

		render(template(BasicComponent1, 'abc'), container);

		expect(container.firstChild.firstChild.getAttribute('class')).to.equal('basic');
		expect(container.firstChild.firstChild.firstChild.getAttribute('class')).to.equal('basic-render');
		expect(container.firstChild.firstChild.tagName).to.equal('DIV');
		expect(container.firstChild.firstChild.firstChild.tagName).to.equal('SPAN');
		expect(container.firstChild.firstChild.firstChild.innerHTML).to.equal('The title is abc');

		expect(() => {
			render(template({}, 'abc'), container);
		}).to.throw();

		expect(() => render(template(BasicComponent1, {}), container)).to.throw;

		render(template(BasicComponent1, []), container);

		render(template(BasicComponent1, 'abcdef'), container);

		expect(container.firstChild.firstChild.getAttribute('class')).to.equal('basic');
		expect(container.firstChild.firstChild.firstChild.getAttribute('class')).to.equal('basic-render');
		expect(container.firstChild.firstChild.tagName).to.equal('DIV');
		expect(container.firstChild.firstChild.firstChild.tagName).to.equal('SPAN');
		expect(container.firstChild.firstChild.firstChild.innerHTML).to.equal('The title is abcdef');

		render(template(BasicComponent1, null), container);

		expect(container.firstChild.firstChild.getAttribute('class')).to.equal('basic');
		expect(container.firstChild.firstChild.firstChild.getAttribute('class')).to.equal('basic-render');
		expect(container.firstChild.firstChild.tagName).to.equal('DIV');
		expect(container.firstChild.firstChild.firstChild.tagName).to.equal('SPAN');
		expect(container.firstChild.firstChild.firstChild.innerHTML).to.equal('The title is ');

		render(template(BasicComponent1, undefined), container);

		expect(container.firstChild.firstChild.getAttribute('class')).to.equal('basic');
		expect(container.firstChild.firstChild.firstChild.getAttribute('class')).to.equal('basic-render');
		expect(container.firstChild.firstChild.tagName).to.equal('DIV');
		expect(container.firstChild.firstChild.firstChild.tagName).to.equal('SPAN');
		expect(container.firstChild.firstChild.firstChild.innerHTML).to.equal('The title is ');

		render(template(BasicComponent1, '1234'), container);

		expect(container.firstChild.firstChild.getAttribute('class')).to.equal('basic');
		expect(container.firstChild.firstChild.firstChild.getAttribute('class')).to.equal('basic-render');
		expect(container.firstChild.firstChild.tagName).to.equal('DIV');
		expect(container.firstChild.firstChild.firstChild.tagName).to.equal('SPAN');
		expect(container.firstChild.firstChild.firstChild.innerHTML).to.equal('The title is 1234');
	});

Beispiel #5

Datei: patchNonKeyedChildren.spec.browser.ts Projekt: Keats/inferno

	it('should clear all nodes', () => {
		render(template(generateNodes(['#0', '#1', '#2', '#3'])), container);
		render(template(generateNodes([])), container);
		expect(container.textContent).to.equal('');
		expect(container.firstChild.childNodes.length).to.equal(0);
	});

Beispiel #6

Datei: patchNonKeyedChildren.spec.browser.ts Projekt: Keats/inferno

	it('should move a key', () => {
		render(template(generateNodes(['#0', 'a', '#2', '#3'])), container);
		render(template(generateNodes(['#0', '#1', 'a', '#3'])), container);
		expect(container.textContent).to.equal('#0#1a#3');
		expect(container.firstChild.childNodes.length).to.equal(4);
	});

Beispiel #7

Datei: index.ts Projekt: russelgal/inferno

function unmountComponentAtNode(
  container: Element | SVGAElement | DocumentFragment
): boolean {
  render(null, container);
  return true;
}

Beispiel #8

Datei: patchNonKeyedChildren.spec.browser.ts Projekt: Keats/inferno

	it('should remove two keys at the beginning', () => {
		render(template(generateNodes(['a', 'b', 'c'])), container);
		render(template(generateNodes(['c'])), container);
		expect(container.textContent).to.equal('c');
		expect(container.firstChild.childNodes.length).to.equal(1);
	});

Beispiel #9

Datei: update.spec.browser.ts Projekt: Keats/inferno

			it('Second render (update)', () => {
				render(template(null), container); // change style to null

				expect(container.firstChild.firstChild.getAttribute('style')).to.be.oneOf([null, '']);
			});

Beispiel #10

Datei: hooks.spec.browser.ts Projekt: Keats/inferno

		afterEach(() => {
			render(null, container);
		});