Error while testing view with value.bind or class.bind

Help Requests
#1

I’m working in a project that is largely untested, unfortunately we have some instances of markup that appears to require refactoring in order to be testable.

For example, when the HTML contains value.bind or class.bind or checked.bind the test fails, an example of value.bind error below.

import { ComponentTester, StageComponent } from "aurelia-testing";
import { bootstrap } from "aurelia-bootstrapper";
import { PLATFORM } from "aurelia-pal";
import * as path from "path";
import { Options } from "aurelia-loader-nodejs";

Options.relativeToDir = path.join(__dirname);

describe("MyComponent", () => {
	let component: ComponentTester;

	beforeEach(() => {
		component = StageComponent.withResources(
			PLATFORM.moduleName("./component")
		).inView("<component></component>")
		.boundTo({ value: "foo" });
	});

	it("should render", (done) => {
		component
			.create(bootstrap)
			.then(() => {
				const element = document.querySelector(".bar");
				expect(element).toBeTruthy();
				done();
			})
			.catch((e) => {
				console.log(e.toString());
			});
	});

The View

<template>
	<input type='input' value.bind='value' class="bar" />
</template>

Error: The value property of a object ([object HTMLInputElement]) cannot be assigned.

Is there a workaround to using value.bind? I’ve seen code examples on discourse using value.bind, so maybe there is something particular about the configuration of our tests.

#2

Somehow having both value and value.bind attributes seems excessive.
Also, from your code it is unclear why you provide resources to a template that does not have a component.

#3

Sorry, that was a typo. I’ve removed the double value part.

So the view model does not get applied in withResources, I have misunderstood?

#4

Is this an issue with the TypeScript types for HTMLInputElement? Anyone else using TypeScript for tests?

#5

OK, so I have resolved the Error by wrapping the view in a <template> element.

But, the next challenge is that the element const element = document.querySelector(".bar"); is null.

#6

Did you make sure DOM is ready by the time you invoke document.querySelector?

#7

I believe the Dom is ready. I tried debugging with querySelector(“body”) on the previous line and can see the <input …

Tried timeouts too, anyway the issue of getting a running test is not the original question.

iress.com

Pete Mann​

Senior Engineer

pete.mann@iress.com

www.iress.com

Level 18 385 Bourke Street
Melbourne, Victoria, 3000

The contents of this email originated from Iress. For this purpose Iress includes Iress Limited and/or any of its subsidiaries, holding companies and trading entities. ​If you have received this email in error please notify the sender immediately and delete this email.

nosig

1 Like
#8

Is this with jest? Also, can you paste the full error message?