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

[yuananthony]

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:
<template> <span innerHTML.bind="inputString"></span> </template>

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?

[Alexander-Taran]

@yuananthony did you check the example @ docs? https://aurelia.io/docs/testing/components#manually-handling-lifecycle
does it work for you?

[yuananthony]

Hello @Alexander-Taran,
Thank you for your response to my post. I have looked at the docs but they were unable to help me with my problem. I have other component tests that manually handle the lifecycle and they work fine I'm only having problems with this one test for some reason. I believe it is a problem with .bind({}) in manuallyHandleLifecycle() because my regular component test works fine.

I don't believe that its the function that sets the string because even if I hard code this.inputString = 'test' in attached() the test still returns undefined at expect(nameElement[0].innerHTML).toBe('some string');. I have also tested that expect(component.viewModel.inputString).toBe('some string'); after component.attached() and it passes when I use the function to set it so I do not believe that it is a problem with my view-model.

I have also created the bind() and unbind() functions and put a log statement in each stage of the lifecycle and they are being called at the right times.

[Alexander-Taran]

still weird..