Aurelia Store Change Handler called with undefined

Help Requests
1

Hello again,

I’m testing a component bind method that depends on some data it receives through myDataChanged.

The problem is under test. When calling myClass.bind() under test, myDataChanged is called with arg of undefined before bind. Because bind depends on this value, the test can’t pass.

Are there any problems with this code?

Heres an anonymised snippet of the component.

@connectTo({
	selector: {
		myData: (store) => store.state.pipe(pluck("myData"), distinctUntilChanged()),
	}
});

export class MyClass {

constructor(
	private store: Store<State>,
	private eventAggregator: EventAggregator,
	private configManager: ConfigManager
) {}

private myDataChanged(newState: myDataModel) {
	this.myData = newState;
}

private bind() {
	this.result = computeSomething(this.myData);
}

Snippet of the test:

import { Store } from "aurelia-store";
import { skip } from "rxjs/operators";
import { Container } from "aurelia-dependency-injection";
import { State } from "model";
import { MyClass } from "./MyClass";
import { EventAggregator } from "aurelia-event-aggregator";
import ConfigManager from "./config-manager";

describe("myClass section", () => {
	let container: Container;
	let store: Store<State>;
	let myClass: MyClass;
	let eventAggregatorMock: EventAggregator = new EventAggregator();

	beforeEach(async (done) => {
		container = new Container().makeGlobal();
		// Create a store
		store = new Store({ myData: { id: 1 }});
		container.registerInstance(Store, store);
		// Instantiate new ConfigManager with container deps
		const configManager: ConfigManager = new ConfigManager();
		container.registerInstance(ConfigManager, configManager);
		await configManager.init();
		// Register remaining deps
		container.registerInstance(EventAggregator, eventAggregatorMock);
		// Get MyClass page
		myClass = container.get(MyClass);
		done();
	});

	it("should do something in bind", async (done) => {
		// @ts-ignore
		myClass.bind();
		// @ts-ignore
		expect(myClass.result).toEqual(false);
		done();
	});
2

Update. The test and MyClass have the same instance of the Store. I’ve discovered another issue in another test in this suite (not in the snippet) which is calling dispatchify. When the execution enters aurelia-store no action can be found. When I check the store that is reference in the test and MyClass, the action is registered. Am I setting up the container for the test incorrectly because it looks like aurelia-store somehow has a different Store value?

I think these issues are probably related.

3

here is a sample of the internal unit tests, perhaps this clarifies your issue.

4

Thanks zewa666, yes this does clarify that the expected behaviour of the store. Specifically the bind method is required for the prop & store to be available.

5

yep unless you rewire it to a different hook. but bind is the default one