aurelia / aurelia/framework

manuallyHandleLifecycle() data in view-model not going to view

Open
#888 3 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
11.7k
Forks
608
PR merge metrics
No merged PRs in 30d

Description

**I'm submitting a bug report**

* **Library Version:**
major.minor.patch-pre

**Please tell us about your environment:**
* **Operating System:**
OSX 10.13.4

* **Node Version:**
6.9.5

* **NPM Version:**
3.10.10

* **Aurelia CLI OR JSPM OR Webpack AND Version**
webpack 3.11.0

* **Browser:**
Chrome 66.0.3359.181

* **Language:**
TypeScript 2.8.3

**Current behavior:**
When using manuallyHandleLifecycle() to manually call the lifecycle functions, the data in the view model is not being passed to the view.

view-model:
@bindable({ defaultBindingMode: bindingMode.oneWay })
public inputString?: string;

public constructor() {
this.inputString = void 0;
}

public attached(): void {
this.setInputString(); // Some function that sets the inputString
}

public detached(): void {
this.inputString = void 0;
}

view:
`

`

test:
await component.manuallyHandleLifecycle().create(bootstrap as any);
await wait(1000);
let nameElement = document.querySelectorAll('span');
await component.bind()
await component.attached();
await wait(1000);
expect(nameElement[0].innerHTML).toBe('some string');
await component.detached();
await component.unbind();

The test fails with the innerHTML being "undefined" and this happens even if setInputString() is removed and inputString is hard coded in the attached() function. The same outcome occurs when setInputString() is called in bind().

However, if `await component.bind()` is called again after `await component.attached()` the expected behavior occurs and test passes.

**Expected/desired behavior:**
It is expected to set the variable in attached() and have that string represented in the view when calling lifecycle functions in manuallyHandleLifecycle();

I am unable to reproduce this error and it only happens in one of my test files that use manuallyHandleLifecycle() all other tests with this function works as expected.

This only happens in manuallyHandleLifecycle(), when testing the component using `await component.create(bootstrap as any)` the expected behavior occurs.

* **What is the motivation / use case for changing the behavior?**

Contributor guide

Open the contributing guide

Research direction

Start at manuallyHandleLifecycle() and the shown lifecycle test sequence, then compare it with component.create(bootstrap as any), which the report says behaves correctly. Reproduce the failing assertion around span.innerHTML and determine whether the view update is complete after attached(); done means the reported sequence renders "some string" without a second bind().

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript, webpack
Domain
frontend, testing
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.