We Keep Coding

Xstate machine - Load feature flags

What we need to do: We need to feature flag a few things in our current state machine
My ideal solution: Always load, no matter what state is, all feature flags and assign them to the state machine context
Attempts: Tried using async actions and invoke services, however, I cannot find a way to always run either of them
This basically my state machine and how I envisioned loading feature flag. However, the invoke.src function just gets called for the first time when I'm first loading the state machine.
Every time that I hydrate the state machine and the state machine is in one of the state, for example create, the invoke.src function does not get called therefore no FF is loaded into the context
const stateMachine = createStateMachine({
id: 'state-machine',
invoke: {
src: async () => {
return await featureFlagService.load();
},
onDone: {
actions: assign(_context, event) => ({ featureFlagEvaluations: event.data }),
}
},
states: {
'create': { ... },
'retrieve': { ... },
}
});
Does anyone have any idea of how to implement such use case?

You should use the actor model approach. Each time when you need to refresh/fetch the FF you should spawn FF-machine and on done call parentSend() message which will update the context to your main SM(state-machine)
const stateMachine = createStateMachine({
id: 'state-machine',
invoke: {
src: async () => {
return await featureFlagService.load();
},
onDone: [{
actions: assign({
ffActorRef: () => spawn(featureFlagMachine, 'ffActor'),
}),
}],
states: {
'create': { ... },
'retrieve': { ... },
},
on:{
REFRESH_FEATURE_FLAG : [{
actions: assign(_context, event) => ({ featureFlagEvaluations: event.data }),
}]
}
});
const featureFlagMachine = createStateMachine({
id: 'ff-machine',
initial: 'retrieve',
invoke: {
src: async () => {
return await featureFlagService.load();
},
onDone: [{
actions: ['notifyRefresh']
}],
states: {
'create': { ... },
'retrieve': { ... },
},
},
{
actions: {
notifyRefresh: sendParent((ctx, event) => {
return {
type: 'REFRESH_FEATURE_FLAG',
data: { featureFlagEvaluations: event.data },
};
}),
},
}
}
);

How can i test an observable that has pipe and map?

I'm assigning values to this variables inside ngOnInit:
this.simStatsList$ = this.sideMenuService.getSimStatsList();
this.currentStation$ = this.simStatsList$.pipe(
map(station => station.find((station: ISimStats) => station.stationName === this.authService.userStation)),
) as Observable<ISimStats>;
This is my test:
it('should select userStation as currentStation', () => {
component.currentStation$.subscribe((response) => {
expect(response).toEqual(
{ stationName: 'test', stats: { open: 0, down: 0, preflight: 0 } }
);
});
});
It passes but is not covering the map function from rxjs. Also im providing sideMenuService and AuthService as mocked values and this is my mock. I'm missing something but i don't know what is it.
export const mockSideMenuService = {
getSimStatsList: () =>
of([
{ stationName: 'test', stats: { open: 0, down: 0, preflight: 0 } },
{ stationName: 'test1', stats: { open: 1, down: 1, preflight: 1 } }
] as ISimStats[])
}
export const mockAuthService = {
userStation: 'test'
}
Could you help me to cover the whole code?

After #will alexander comment i did some change and it worked:
First, pass the function to the sideMenuService and recieve needed data as parameters:
side-menu.service.ts
getCurrentSimStats(
simStatsList$: Observable<ISimStats[]>,
currentStation: string): Observable<ISimStats> {
return simStatsList$.pipe(
map((station) => station.find((station: ISimStats) => station.stationName === currentStation))) as Observable<ISimStats>;
}
Then my component test coverage passed as 100% but the sideMenuService wasn't so i wrote this small test on service spec file:
side-menu.service.spec.ts
it('should getCurrentStation', () =>{
service.getCurrentSimStats(of(mockSideMenuService.mockSimStatsResponse), 'test').subscribe((res) => {
expect(res).toEqual(mockSideMenuService.mockCurrentSimStatsResponse);
});
})
After this, everything worked and tests are passing!

How to call a function in setup() to a function in methods?

I have function in setup() named onRquest, I want to call that function in methods after execution of an action(deleting row), which gonna refresh the table. Please check the code segment for better understanding:
export default {
setup() {
function onRequest(props) {
}
onMounted(() => {
onRequest({
pagination: pagination.value,
filter: undefined,
})
})
return {
onRequest
}
},
methods: {
deleteBranch(branch_id) {
this.$q.dialog({
title: 'Confirm',
message: 'Would you like to Delete Branch#' + branch_id + '?',
cancel: true,
persistent: true
}).onOk(() => {
this.$axios.delete('https://api.bdshsystem.com/api/v1/branch/' +
branch_id).then(response => {
this.$q.notify({
type: 'positive',
timeout: 500,
position: 'top',
message: 'Branch Deleted Successfully !'
})
I want to put function onRequest Here
}).catch((error) => {
this.$q.notify({
type: 'negative',
position: 'top',
timeout: 500,
message: 'Form submission Failed !'
})
})
}).onOk(() => {
// console.log('>>>> second OK catcher')
}).onCancel(() => {
// console.log('>>>> Cancel')
}).onDismiss(() => {
// console.log('I am triggered on both OK and Cancel')
})
},
},
}

Insted of passing you method inline i.e. the "setup()" method, directly in export default. define it outside and pass its reference to export default then you can call setup() directly in whatever method you want
function setup(){
//some code
}
export default {"setup":setup,
"yourOtherMethod":function yourOtherMethod(){
//your other method code here
}}

Using XState, how can I access name of current state in an action?

I'm playing around learning XState and wanted to include an action in a machine that would just log the current state to console.
Defining a simple example machine like so, how would I go about this? Also note the questions in the comments in the code.
import { createMachine, interpret } from "xstate"
const sm = createMachine({
initial: 'foo',
states: {
foo: {
entry: 'logState', // Can I only reference an action by string?
// Or can I add arguments here somehow?
on: {
TOGGLE: {target: 'bar'}
}
},
bar: {
entry: 'logState',
on: {
TOGGLE: {target: 'foo'}
}
}
}
},
{
actions: {
logState(/* What arguments can go here? */) => {
// What do I do here?
}
}
});
I know that actions are called with context and event as arguments but I don't see a way to get the current state from either of those. Am I missing something here?

For a simple use case like yours, you could try recording the state on transition.
let currentState;
const service = interpret(machine).onTransition(state => {
if (state.value != currentState) {
// TODO: terminate timer if any and start a new one
currentState = state.value;
}
});
Then use the value in your actions.
See more here: https://github.com/statelyai/xstate/discussions/1294

Actions receive three arguments - context, event and meta. meta have property state, which is current state.
import { createMachine } from "xstate";
let metaDemo = createMachine(
{
id: "meta-demo",
initial: "ping",
states: {
ping: {
entry: ["logStateValues"],
after: { TIMEOUT: "pong" },
},
pong: {
entry: ["logStateValues"],
after: { TIMEOUT: "ping" },
},
},
},
{
delays: {
TIMEOUT: 3000,
},
actions: {
logStateValues(ctx, event, meta) {
if (meta.state.matches("ping")) {
console.log("It's PING!");
} else if (meta.state.matches("pong")) {
console.log("And now it's PONG");
} else {
console.log(
`This is not supposed to happen. State is: ${meta.state
.toStrings()
.join(".")}`
);
}
},
},
}
);

NGXS - Testing Lazy Selectors failure

we are using ngxs and we do have some lazy selectors defined in separated files from the state definition
export class SectionSelectors {
#Selector([CatalogState])
static ById(state: CatalogModel) {
return function getSectionById(id: number): Section {
const selectedSection: Section = state.sections[id];
return selectedSection;
};
}
}
And we have test cases like
import { TestBed } from '#angular/core/testing';
import { Section } from '#miq-catalog/catalog';
import { NgxsModule, Store } from '#ngxs/store';
import { CatalogModel, CatalogState } from './catalog.state';
import { SectionSelectors } from './section.selectors';
describe('SectionSelectors', () => {
it('should select the section by id', () => {
const one: Section = { sectionId: 1, title: '', columns: [] };
const two: Section = { sectionId: 2, title: '', columns: [] };
const state: CatalogModel = {
catalog: [],
sections: { 1: one, 2: two },
columns: {},
catalogLoaded: true,
};
const selectionFunction = SectionSelectors.ById(state);
const result = selectionFunction(1);
expect(result).toBeDefined();
expect(result).toBe(one);
expect(result.sectionId).toBe(1);
const result2 = selectionFunction(2);
expect(result2).toBeDefined();
expect(result2).toBe(two);
expect(result2.sectionId).toBe(2);
});
});
We are passing the state to the selector however we are getting the next error
An error was thrown in afterAll
Uncaught ReferenceError: Cannot access 'CatalogState' before initialization
ReferenceError: Cannot access 'CatalogState' before initialization
I noticed that if I move these selector to the CatalogState (where the #State definition is) the problem is fixed. But this is forcing us to put all selectors there and we think it's good to have them scoped on their own related files so we don't "pollute" with mixed selectors.
Is there a way we can fix the test case? Does someone already faced this Lazy Selector testing before?
As complementary info this is how our State looks like
#State({
name: 'Catalog',
defaults: {
catalogLoaded: false,
columns: {},
sections: {},
catalog: [],
},
})
export class CatalogState {
constructor(private store: Store) {}
#Action(RetrieveCatalogInfo)
#Action(ChangeColumnConfig)
#Action(ClearCatalog)
public executeAction(ctx: StateContext<CatalogModel>, params: ExecutableAction<CatalogModel>) {
return params.execute({ ctx, store: this.store });
}
}

This should not be a problem with the latest version of NGXS (since v3.6.1).