[BUG] Fatal error trigger when testing a component that have a `class.bind`

[Baben01]

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.

[bigopon]

@Baben01 when you do class.bind in your app, does it work?

[Baben01]

Hello @bigopon, thanks for your quick reply. Yes it work well in my app

[Baben01]

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