aurelia / aurelia/testing

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

Open
#110 3 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
38
Forks
27
PR merge metrics
No merged PRs in 30d

Description

**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..View.bind (node_modules/aurelia-templating/src/view.ts:205:19)
at Controller.Object..Controller.bind (node_modules/aurelia-templating/src/controller.ts:174:17)
at View.Object..View.bind (node_modules/aurelia-templating/src/view.ts:215:22)
at TemplatingEngine.Object..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..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) :
```ts
import {bindable} from 'aurelia-framework';

export class MyComponent {
@bindable firstName: string;
@bindable customClass: string;
}
```
My component template (HTML)

```


${firstName}

```

The component test :
```ts
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('')
.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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.