How to use the metal-dom.dom.enterDocument function in metal-dom

it('should get surface element from the document when it exists', function() {
				dom.enterDocument(dom.buildFragment(
					'<div id="custom"><div id="custom-header"></div></div>'
				));
				var surface = document.querySelector('#custom-header');

				var CustomComponent = createTestComponentClass();
				CustomComponent.SURFACES = {
					header: {}
				};
				component = new CustomComponent({
					element: '#custom'
				});

				assert.strictEqual(surface, component.getRenderer().getSurfaceElement('header'));
			});

it('should update sub components when parent is decorated and html is not correct', function() {
				var frag = dom.buildFragment('<div id="custom"><div id="child">wrong</div></div>');
				dom.enterDocument(frag);
				var childElement = document.getElementById('child');

				var CustomComponent = createTestComponentClass({
					custom: '<div id="custom">%%%%~s-child~%%%%</div>'
				});
				CustomComponent.SURFACES = {
					child: {
						componentName: 'ChildComponent'
					}
				};

				component = new CustomComponent({
					element: '#custom'
				}).decorate();
				assert.notStrictEqual(childElement, component.components.child.element);
			});

it('should scroll to anchor element on navigate', (done) => {
		if (!canScrollIFrame_) {
			done();
			return;
		}

		showPageScrollbar();
		const parentNode = dom.enterDocument('<div style="position:absolute;top:400px;"><div style="position:relative;top:400px" id="surfaceId1"></div></div>');
		this.app = new App();
		this.app.addRoutes(new Route('/path1', Screen));
		this.app.addSurfaces(['surfaceId1']);
		this.app.navigate('/path1#surfaceId1').then(() =&gt; {
			const surfaceNode = document.querySelector('#surfaceId1');
			const {offsetLeft, offsetTop} = utils.getNodeOffset(surfaceNode);
			assert.strictEqual(window.pageYOffset, offsetTop);
			assert.strictEqual(window.pageXOffset, offsetLeft);
			hidePageScrollbar();
			dom.exitDocument(parentNode);
			done();
		});
	});

getId() {
				return 'screenId1';
			}
		}
		class ContentScreen2 extends Screen {
			getSurfaceContent(surfaceId) {
				if (surfaceId === 'surfaceId2') {
					return 'content2';
				}
			}
			getId() {
				return 'screenId2';
			}
		}
		dom.enterDocument('<div id="surfaceId1"><div id="surfaceId1-default">default1</div></div>');
		dom.enterDocument('<div id="surfaceId2"><div id="surfaceId2-default">default2</div></div>');
		var surface1 = new Surface('surfaceId1');
		var surface2 = new Surface('surfaceId2');
		surface1.addContent = sinon.stub();
		surface2.addContent = sinon.stub();
		this.app = new App();
		this.app.addRoutes(new Route('/path1', ContentScreen1));
		this.app.addRoutes(new Route('/path2', ContentScreen2));
		this.app.addSurfaces([surface1, surface2]);
		this.app.navigate('/path1').then(() =&gt; {
			assert.strictEqual(1, surface1.addContent.callCount);
			assert.strictEqual('screenId1', surface1.addContent.args[0][0]);
			assert.strictEqual('content1', surface1.addContent.args[0][1]);
			assert.strictEqual(1, surface2.addContent.callCount);
			assert.strictEqual('screenId1', surface2.addContent.args[0][0]);
			assert.strictEqual(undefined, surface2.addContent.args[0][1]);
			assert.strictEqual('default2', surface2.getChild('default').innerHTML);

}
			getId() {
				return 'screenId1';
			}
		}
		class ContentScreen2 extends Screen {
			getSurfaceContent(surfaceId) {
				if (surfaceId === 'surfaceId2') {
					return 'content2';
				}
			}
			getId() {
				return 'screenId2';
			}
		}
		dom.enterDocument('<div id="surfaceId1"><div id="surfaceId1-default">default1</div></div>');
		dom.enterDocument('<div id="surfaceId2"><div id="surfaceId2-default">default2</div></div>');
		var surface1 = new Surface('surfaceId1');
		var surface2 = new Surface('surfaceId2');
		surface1.addContent = sinon.stub();
		surface2.addContent = sinon.stub();
		this.app = new App();
		this.app.addRoutes(new Route('/path1', ContentScreen1));
		this.app.addRoutes(new Route('/path2', ContentScreen2));
		this.app.addSurfaces([surface1, surface2]);
		this.app.navigate('/path1').then(() =&gt; {
			assert.strictEqual(1, surface1.addContent.callCount);
			assert.strictEqual('screenId1', surface1.addContent.args[0][0]);
			assert.strictEqual('content1', surface1.addContent.args[0][1]);
			assert.strictEqual(1, surface2.addContent.callCount);
			assert.strictEqual('screenId1', surface2.addContent.args[0][0]);
			assert.strictEqual(undefined, surface2.addContent.args[0][1]);

function enterDocumentLinkElement(href) {
	dom.enterDocument('<a href="' + href + '" id="link">link</a>');
	return document.getElementById('link');
}

function enterDocumentFormElement(action, method) {
	const random = Math.floor(Math.random() * 10000);
	dom.enterDocument(`<form enctype="multipart/form-data" method="${method}" action="${action}" id="form_${random}"></form>`);
	return document.getElementById(`form_${random}`);
}