I am testing my effect with marble diagram but i always get error without any details while the result is correct.
Here is my test for the effect :
I dispatch action with details and i expect the effect to return the "expected action" with new data.
it("should render pie chart", () => {
actions$ = hot('-a-|', {
a: DashboardComplianceActions.handleEntriesPerJournalPieChart({
entriesPerJournal: [
{
journalLib: 'Ventes',
journalCode: 'VTE',
numberOfEntries: 17769,
numberOfRows: 72168,
},
{
journalLib: 'Achats',
journalCode: 'ACH',
numberOfEntries: 14701,
numberOfRows: 53532,
},
{
journalLib: 'B06',
journalCode: 'B06',
numberOfEntries: 7132,
numberOfRows: 34927,
},
],
}),
});
const expected = hot('-a-|', {
a: DashboardComplianceActions.initChart({
chart: {
key: DashboardComplianceCharts.ENTRIES_PER_JOURNAL_PIE_CHART,
config: {
color: [
'#184e77',
'#1e6091',
'#1a759f',
'#168aad',
'#34a0a4',
'#52b69a',
'#76c893',
'#99d98c',
'#b5e48c',
'#d9ed92',
],
tooltip: {
trigger: 'item',
},
series: [
{
type: 'pie',
radius: ['50%', '70%'],
label: {},
data: [
{
name: 'VTE - Ventes',
value: 17769,
},
{
name: 'ACH - Achats',
value: 14701,
},
{
name: 'B06 - B06',
value: 7132,
},
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
},
],
},
},
}),
});
expect(effects.handleEntriesPerJournalPieChart$).toBeObservable(expected);
});
And here is my effect : here i check if the data is not empty then i init the chart and return the action.
public handleEntriesPerJournalPieChart$ = createEffect(() =>
this.actions$.pipe(
ofType(DashboardComplianceActions.handleEntriesPerJournalPieChart),
map(
(
action: ReturnType<
typeof DashboardComplianceActions.handleEntriesPerJournalPieChart
>
) => {
if (action.entriesPerJournal.length === 0) {
return DashboardComplianceActions.destroyChart({
key: DashboardComplianceCharts.ENTRIES_PER_JOURNAL_PIE_CHART,
});
}
// Prepare pie chart data.
const data = action.entriesPerJournal.map(
(item: JournalComposition) => {
return {
name: item.journalCode + ' - ' + item.journalLib,
value: item.numberOfEntries as number,
};
}
);
// Prepare pie chart configuration.
return DashboardComplianceActions.initChart({
chart: {
key: DashboardComplianceCharts.ENTRIES_PER_JOURNAL_PIE_CHART,
config: preparePieChartConfig({
data,
lang: this.translocoService.getActiveLang(),
}),
},
});
}
)
)
);
but i always get this error:
Error: Expected: -a-|, Received: -?-|,
Expected:
[{"frame":10,"notification":{"kind":"N","value":{"chart":{"key":0,"config":{"color":["#184e77","#1e6091","#1a759f","#168aad","#34a0a4","#52b69a","#76c893","#99d98c","#b5e48c","#d9ed92"],"tooltip":{"trigger":"item"},"series":[{"type":"pie","radius":["50%","70%"],"label":{},"data":[{"name":"VTE - Ventes","value":17769},{"name":"ACH - Achats","value":14701},{"name":"B06 - B06","value":7132}],"emphasis":{"itemStyle":{"shadowBlur":10,"shadowOffsetX":0,"shadowColor":"rgba(0, 0, 0, 0.5)"}}}]}},"type":"[UI] init chart"}}},{"frame":30,"notification":{"kind":"C"}}]
Received:
[{"frame":10,"notification":{"kind":"N","value":{"chart":{"key":0,"config":{"color":["#184e77","#1e6091","#1a759f","#168aad","#34a0a4","#52b69a","#76c893","#99d98c","#b5e48c","#d9ed92"],"tooltip":{"trigger":"item"},"series":[{"type":"pie","radius":["50%","70%"],"label":{},"data":[{"name":"VTE - Ventes","value":17769},{"name":"ACH - Achats","value":14701},{"name":"B06 - B06","value":7132}],"emphasis":{"itemStyle":{"shadowBlur":10,"shadowOffsetX":0,"shadowColor":"rgba(0, 0, 0, 0.5)"}}}]}},"type":"[UI] init chart"}}},{"frame":30,"notification":{"kind":"C"}}],
at /home/mohamed.farjallah/kantik/libs/client/web-app/dashboard-compliance/data-access/src/lib/+state/dashboard-compliance.effects.spec.ts:238:56
at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (/home/mohamed.farjallah/kantik/node_modules/zone.js/bundles/zone-testing-bundle.umd.js:409:30)
at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (/home/mohamed.farjallah/kantik/node_modules/zone.js/bundles/zone-testing-bundle.umd.js:3830:43)
at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (/home/mohamed.farjallah/kantik/node_modules/zone.js/bundles/zone-testing-bundle.umd.js:408:56)
at Zone.Object.<anonymous>.Zone.run (/home/mohamed.farjallah/kantik/node_modules/zone.js/bundles/zone-testing-bundle.umd.js:169:47)
at Object.wrappedFunc (/home/mohamed.farjallah/kantik/node_modules/zone.js/bundles/zone-testing-bundle.umd.js:4330:34)
at Promise.then.completed (/home/mohamed.farjallah/kantik/node_modules/jest-circus/build/utils.js:333:28)
at new Promise (<anonymous>)
at callAsyncCircusFn (/home/mohamed.farjallah/kantik/node_modules/jest-circus/build/utils.js:259:10)
at _callCircusTest (/home/mohamed.farjallah/kantik/node_modules/jest-circus/build/run.js:277:40)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async _runTest (/home/mohamed.farjallah/kantik/node_modules/jest-circus/build/run.js:209:3)
at async _runTestsForDescribeBlock (/home/mohamed.farjallah/kantik/node_modules/jest-circus/build/run.js:97:9)
at async _runTestsForDescribeBlock (/home/mohamed.farjallah/kantik/node_modules/jest-circus/build/run.js:91:9)
at async _runTestsForDescribeBlock (/home/mohamed.farjallah/kantik/node_modules/jest-circus/build/run.js:91:9)
at async run (/home/mohamed.farjallah/kantik/node_modules/jest-circus/build/run.js:31:3)
at async runAndTransformResultsToJestFormat (/home/mohamed.farjallah/kantik/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:135:21)
I was expecting to return the dispatched action of the effect with the same exact data as the expected action, but even i receive what i am expecting it display the error
