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.

1 Like
8

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