Testing with aurelia-testing and StageComponent - how to inject an aurelia-store into the component?

Help Requests
1

I’m new to Aurelia. I’m working with an existing app that is using aurelia-testing & aurelia-store.

Components are doing this:

@connectTo<State>({
	onChanged: "stateChanged",
	target: "state",
} as ConnectToSettings<State>)

I’ve followed the guide on aurelia.io and my test is creating a new ComponentTester using the StageComponent.withResources

beforeEach(async () => {
  component = StageComponent.withResources("./cover-needs.html")
    .inView("<cover-needs></cover-needs>");
  await component.create(bootstrap);
});

Is there a way that I can inject the initial state of the aurelia-store to the component that I want to test here?

2

if you scroll a bit down on the testing docs there is the form shown of providing custom bootstrapping. in there you get access to au and further the di container

component.bootstrap(aurelia => {
        aurelia.use.standardConfiguration();
  
        aurelia.container.registerInstance(Service, service);
      });

so use the container to grab the store instance and set the initial state manually via store.resetToState or directly overwriting (store as any)._state.setValue(yourstate)

1 Like
3

When you say use the container to grab the store, does that mean the store should be a public (using TS) member of the component? For example this is the component I’m trying to test (State is the store btw).

@connectTo<State>({
	onChanged: "stateChanged",
	target: "state",
} as ConnectToSettings<State>)
@autoinject()
@applyTooltips(".cover-needs")
export class CoverNeeds {
	private state: State;
    ... etc

What would the component.bootstrap implementation look like for setting the store? Do I need to refactor the component?

4

nope you dont need to modify your component. what I meant is, as shown in the stagedcomponent test docs that via a custom bootstrap you get a chance to access the aurelia instance and also its DI container before the component is created. So this way you can manipulate the container instance of the store, which is consumed by the connectTo decorator.

So you essentially setup the test environment before the component gets created and the test starts.

5

I see, thank you for the response.

The docs aren’t clear what the first arg here is.

aurelia.container.registerInstance(Service, service);