[BUG] Fatal error trigger when testing a component that have a `class.bind`
Baben01 opened this issue · comments
I'm submitting a bug report
- Library Version:
1.1.0
Please tell us about your environment:
-
Operating System:
Windows 11 -
Node Version:
16.X -
NPM Version:
6.14.18 -
JSPM OR Webpack AND Version
webpack 5.74.X -
Browser:
all -
Language:
TypeScript 4.3.5
Current behavior:
Hello,
I'm trying to test a basic component using jest but when I try to build a component that have a class.bind
attribute in the template a fatal error appear :
The class property of a object ([object HTMLDivElement]) cannot be assigned.
at PrimitiveObserver.setValue (node_modules/aurelia-binding/dist/commonjs/aurelia-binding.js:3761:11)
at Binding.updateTarget (node_modules/aurelia-binding/dist/commonjs/aurelia-binding.js:4995:25)
at Binding.bind (node_modules/aurelia-binding/dist/commonjs/aurelia-binding.js:5053:12)
at View.Object.<anonymous>.View.bind (node_modules/aurelia-templating/src/view.ts:205:19)
at Controller.Object.<anonymous>.Controller.bind (node_modules/aurelia-templating/src/controller.ts:174:17)
at View.Object.<anonymous>.View.bind (node_modules/aurelia-templating/src/view.ts:215:22)
at TemplatingEngine.Object.<anonymous>.TemplatingEngine.enhance (node_modules/aurelia-templating/src/templating-engine.ts:111:10)
at node_modules/aurelia-framework/src/aurelia.ts:122:26
at Aurelia.Object.<anonymous>.Aurelia.enhance (node_modules/aurelia-framework/src/aurelia.ts:120:12)
at node_modules/aurelia-testing/src/component-tester.ts:74:26
My component (TS) :
import {bindable} from 'aurelia-framework';
export class MyComponent {
@bindable firstName: string;
@bindable customClass: string;
}
My component template (HTML)
<template>
<div class.bind="customClass">
<div class="firstName">${firstName}</div>
</div>
</template>
The component test :
import {ComponentTester, StageComponent} from 'aurelia-testing';
import {bootstrap} from 'aurelia-bootstrapper';
import { PLATFORM } from 'aurelia-pal';
describe('MyComponent', () => {
let component: ComponentTester;
beforeEach(() => {
component = StageComponent
.withResources(PLATFORM.moduleName('../../../src/components/my-component'))
.inView('<my-component first-name.bind="firstName" custom-class.bind="customClass"></my-component>')
.boundTo({ firstName: "Bob", customClass: "CustomClass"})
});
it('should render first name', async () => {
await component.create(bootstrap)
const nameElement = document.querySelector('.CustomClass');
expect(nameElement?.innerHTML).toBe('Bob');
});
afterEach(() => {
component.dispose();
});
});
Expected/desired behavior:
As class.bind
work for aurelia it should work also for testing.
Hello,
To be able to bypass this error I had to change the content of this file aurelia-binding/dist/commonjs/aurelia-binding.js
:
PrimitiveObserver.prototype.setValue = function setValue(value) {
var type = _typeof(this.primitive);
this.primitive[this.propertyName] = value
// throw new Error('The ' + this.propertyName + ' property of a ' + type + ' (' + this.primitive + ') cannot be assigned.');
};
Next, I'm able to run my test