Testing NGXS states with sub states feeds wrong state into action handler - ngxs

Setup:
I have a parent state defined as
#State<ParentStateModel>({
name: 'grid',
defaults: {
parentData: 'some data'
},
children: [LoadingState]
})
export class ParentState {
#Action(Action1)
action1(ctx: stateContext<ParentStateModel>, action: Action1) {
// In production this state will be ParentStateModel as expected
// but in unit test, it will be of type LoadingState
const state = ctx.getState();
}
}
And a child state defined as
#State<LoadingStateModel>({
name: 'gridLoading',
defaults: {
loading: false
}
})
export class LoadingState{
#Action(Action1)
action1(ctx: stateContext<LoadingStateModel>, action: Action1) {
ctx.setState({loading: true});
}
}
Notice that both states respond to Action1.
When running this in production, it works as it should. The loading state takes care of the LoadingStateModel and the ParentState takes care of the ParentStateModel.
But when unit testing the code, the action handler in ParentState is fed the LoadingStateModel instead of the ParentStateModel (see comment in code).
My unit test is setup as follows
TestBed.configureTestingModule({
imports: [NgxsModule.forRoot([CashflowState, LoadingState])]
});
If I do not include LoadingState in the imports array, NGXS fails with Child state not found: function LoadingState()
Am I doing something wrong, or is it a bug in NGXS?

Related

Quasar2 Vue3 Cypress Cannot read properties of undefined (reading 'deep')

I have the following component test:
import AutoGeneratedPage from '../../../src/components/AutoGenerate/AutoGenerate.vue'; // <= note the absence of `.vue` extension, here we are importing the JS/TS part of a Double File Component
describe('AutoGenerated Page tests', () => {
it('Auto generated page from JSON should contain all the UI Elements', () => {
cy.mount(AutoGeneratedPage);
cy.get('[data-test="toggle-setting-0"]').eq(false);
cy.get('[data-test="toggle-setting-0"]').focus().click();
cy.get('[data-test="toggle-setting-0"]').eq(true);
cy.get('[data-test="dropdown-setting-3"]').should('have.text', 'Option 1');
cy.get('[data-test="dropdown-setting-3"]').should('have.text', 'Option 2');
cy.get('[data-test="dropdown-setting-3"]').should('have.text', 'Option 3');
});
})
and bump into the following error when running the component test:
What do I miss? https://github.com/khteh/quasar
The first assertion needs changing:
cy.get('[data-test="toggle-setting-0"]').eq(false);
cy.get('[data-test="toggle-setting-0"]').focus().click();
cy.get('[data-test="toggle-setting-0"]').eq(true);
change to
cy.get('[data-test="toggle-setting-0"]').invoke('val').should('eq', false);
cy.get('[data-test="toggle-setting-0"]').focus().click();
cy.get('[data-test="toggle-setting-0"]').invoke('val').should('eq', true);
because .eq(number) is a Cypress command for taking the nth item in a group.
The error Cannot read properties of undefined (reading 'deep') is due to the deep rendering (i.e nested components) in the AutoGenerate.vue component.
If you comment out the child components, the test succeeds.
<div v-for="(field, index) in layoutObj.data" :key="index">
<span>{{field.name}}</span>
<!-- <toggle-setting
v-if="field.type === 'toggle'"
:name="field.name"
:fieldName="field.fieldName"
:description="field.description"
:data-test="`toggle-setting-${index}`"
/>
<pop-up-edit-setting
v-if="field.type === 'popUpEdit'"
:dataType="field.dataType"
:name="field.name"
:fieldName="field.fieldName"
:hint="field.hint"
:data-test="`popup-edit-setting-${index}`"
/>
<drop-down-setting
v-if="field.type === 'dropDown'"
:name="field.name"
:description="field.description"
:fieldName="field.fieldName"
:internalOptions="internalOptions"
:data-test="`dropdown-setting-${index}`"
/> -->
</div>
Of course, the child components are required, but I thought I'd post this in case it gives you clues.
In any case, the Cypress component test is configured correctly, this is the config I used.
const { defineConfig } = require("cypress");
const webpackConfig = require("./webpack.config");
module.exports = defineConfig({
e2e: {
...
},
component: {
devServer: {
framework: "vue",
bundler: "webpack",
webpackConfig,
},
specPattern: 'test/cypress/components/**/*.cy.{js,jsx,ts,tsx}',
indexHtmlFile: 'test/cypress/support/component-index.html',
},
});
Will add to this if I find out the problem with deep-nested components.
Remove mount() and all references to quasar UI stuff. mount() must only be used for Component Tests. Not E2E tests.

How can I access the name of the currently running test file from an event handler?

I need to access the name of the file with the currently running test within an event handler that runs before every test to log some stuff about that test. Like this:
Cypress.on('uncaught:exception', (err, runnable) => {
cy.currentTest; // Doesn't have the test file name, only the names of a context and a spec
logSomeStuff();
return false
});
Is that possible?
You can use the Cypress.spec for this. You can read about it from here
it('log spec info', () => {
console.log(Cypress.spec)
// {
// name: 'filter.cy.js',
// relative: 'cypress/e2e/filter.cy.js',
// absolute: '/Users/janelane/Dev/web-app/cypress/e2e/filter.cy.js',
// }
})
The runnable parameter gives you the following information
title: 'my-test-title',
duration: 75,
state: 'failed',
invocationDetails: {
relativeFile: 'path-to-test'
},
parent: {
title: 'my-describe-title',
tests: [other tests in suite]
}

Cypress asynchronous execution returns 4 same assertion

I have a question.
I am using Cypress for my automation and I started using async and await for my tests.
I am using POM design pattern.
My question:
If I execute the following test:
test.spec.ts class (test class)
import { login_po } from "../pom/1.Chiquito/login_po";
const pom = new login_po()
describe("Put some name here.", async() => {
it('TestCase1', async () => {
await pom.navigateTo();
});
});
My POM class.
export class login_po {
navigateTo() {
cy
.visit(`https://chiquito-qa.omnifitrgsites.co.uk/`)
.url()
.should('be.equal', 'https://chiquito-qa.omnifitrgsites.co.uk/').then(() => this.verifyAfterLogin());
}
verifyAfterLogin() {
cy.get('.header__logo-img');
}
}
When I execute the test - Cypress makes 4 (same) assertions.
If I remove 'async' - 'await' from the test class - Cypress makes 1 assertion.
import { login_po } from "../pom/1.Chiquito/login_po";
const pom = new login_po()
describe("Put some name here.", () => {
it('TestCase1', () => {
pom.navigateTo();
});
});
Why this is happening?
Cypress commands are not promises, and their interaction with async/await will not happen as you expect. Additionally, while POM is feasible and reasonable to do within Cypress, it is recommended that you use App Actions instead of a POM.

Angular in-memory-web-api method always returns 404 NotFound in the brower's console even if the tests passed

I'm new to unit testing in Angular (using Jasmine and Karma)
I'm trying to create some tests for my httpService, apparently the tests are OK.
But sometimes when I either run ng test, or refresh the browser, I found that one of the test in one of the 3 test suites has failed with this message : Uncaught [object Object] thrown.
Another annoying thing is that no matter whether all of the tests pass or any of them fail, if you check the browser's console, you'll ALWAYS find this message :
I'm attaching the code in a zip file (uploaded to Drive). You only need to run npm install and npm start.
I really hope you can help me understand why this testing behaves like a Russian roulette.
The issue is calculator.component.spec.ts. You are not mocking loanService where it is going out and making HTTP calls. You should always mock external services.
Change calculator.component.spec.ts to:
import { NO_ERRORS_SCHEMA } from '#angular/core';
import { FormBuilder } from '#angular/forms';
import { async, ComponentFixture, TestBed } from '#angular/core/testing';
import { CalculatorComponent } from './calculator.component';
import { LoanService } from '../loan.service';
import { Campaign } from '../campaign';
import { of } from 'rxjs/internal/observable/of';
describe('CalculatorComponent', () => {
let component: CalculatorComponent;
let fixture: ComponentFixture<CalculatorComponent>;
let mockLoanService: any;
beforeEach(async(() => {
// mockLoanService object, first parameter ('loanService') is optional, second paramter => array of methods needing
// mock for component
mockLoanService = jasmine.createSpyObj('loanService', ['getCurrentCampaign', 'getMonthlyAmount']);
TestBed.configureTestingModule({
declarations: [ CalculatorComponent ],
imports: [],
// NO_ERRORS_SCHEMA to ignore child components, if you need the
// painting of the DOM of the child components/directives, put them in declarations
schemas: [NO_ERRORS_SCHEMA],
providers: [
FormBuilder,
// provide the mock for LoanService
{ provide: LoanService, useValue: mockLoanService },
]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(CalculatorComponent);
component = fixture.componentInstance;
// getCurrentCampaig is related to ngOnInit so we have to mock it
mockLoanService.getCurrentCampaign.and.returnValue(of({
id: 1,
campaign_name: 'Donald Trump 2020',
min_quota: -200000000,
max_quota: 0,
max_amount: 0,
min_amount: 0,
tea: 1,
payment_date: new Date(),
currency: 'Fake News',
} as Campaign))
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
I have written some comments in the file itself. By the way, Donald Trump 2020 and Fake News are just jokes, I have no political affiliation but I like writing jokes in my unit tests for other developers :).
Some notes:
1.) Whenever you are injecting a service, always mock it. You are testing the component and component alone, you have to assume that the service will do its job because it is already being tested.
2.) Check out NO_ERRORS_SCHEMA. It basically ignores all components/directives in your HTML that is not in the declarations array. If you are writing a test where you click the button of a child component and it affects this component, then declare it in declarations (basically if you need the actual implementation of the child component, declare it). Otherwise, use NO_ERRORS_SCHEMA.
3.) Importing SharedModule in all unit tests is not good in my opinion. It will make your unit tests slow. Instead, take advantage of declarations and providers and give the component what it needs and JUST what it needs (not extra stuff).
4.) A really good class in PluralSight called Unit Testing in Angular.
Taking that class, you will have a better understanding of Unit/Integration testing. Maybe buy a subscription to PluralSight or start a free trial.

What is the proper way to unit test Service with NestJS/Elastic

Im trying to unit test a Service that uses elastic search. I want to make sure I am using the right techniques.
I am new user to many areas of this problem, so most of my attempts have been from reading other problems similar to this and trying out the ones that make sense in my use case. I believe I am missing a field within the createTestingModule. Also sometimes I see providers: [Service] and others components: [Service].
const module: TestingModule = await Test.createTestingModule({
providers: [PoolJobService],
}).compile()
This is the current error I have:
Nest can't resolve dependencies of the PoolJobService (?).
Please make sure that the argument at index [0]
is available in the _RootTestModule context.
Here is my code:
PoolJobService
import { Injectable } from '#nestjs/common'
import { ElasticSearchService } from '../ElasticSearch/ElasticSearchService'
#Injectable()
export class PoolJobService {
constructor(private readonly esService: ElasticSearchService) {}
async getPoolJobs() {
return this.esService.getElasticSearchData('pool/job')
}
}
PoolJobService.spec.ts
import { Test, TestingModule } from '#nestjs/testing'
import { PoolJobService } from './PoolJobService'
describe('PoolJobService', () => {
let poolJobService: PoolJobService
beforeEach(async () => {
const module: TestingModule = await Test.createTestingModule({
providers: [PoolJobService],
}).compile()
poolJobService = module.get<PoolJobService>(PoolJobService)
})
it('should be defined', () => {
expect(poolJobService).toBeDefined()
})
I could also use some insight on this, but haven't been able to properly test this because of the current issue
it('should return all PoolJobs', async () => {
jest
.spyOn(poolJobService, 'getPoolJobs')
.mockImplementation(() => Promise.resolve([]))
expect(await poolJobService.getPoolJobs()).resolves.toEqual([])
})
})
First off, you're correct about using providers. Components is an Angular specific thing that does not exist in Nest. The closest thing we have are controllers.
What you should be doing for a unit test is testing what the return of a single function is without digging deeper into the code base itself. In the example you've provided you would want to mock out your ElasticSearchServices with a jest.mock and assert the return of the PoolJobService method.
Nest provides a very nice way for us to do this with Test.createTestingModule as you've already pointed out. Your solution would look similar to the following:
PoolJobService.spec.ts
import { Test, TestingModule } from '#nestjs/testing'
import { PoolJobService } from './PoolJobService'
import { ElasticSearchService } from '../ElasticSearch/ElasticSearchService'
describe('PoolJobService', () => {
let poolJobService: PoolJobService
let elasticService: ElasticSearchService // this line is optional, but I find it useful when overriding mocking functionality
beforeEach(async () => {
const module: TestingModule = await Test.createTestingModule({
providers: [
PoolJobService,
{
provide: ElasticSearchService,
useValue: {
getElasticSearchData: jest.fn()
}
}
],
}).compile()
poolJobService = module.get<PoolJobService>(PoolJobService)
elasticService = module.get<ElasticSearchService>(ElasticSearchService)
})
it('should be defined', () => {
expect(poolJobService).toBeDefined()
})
it('should give the expected return', async () => {
elasticService.getElasticSearchData = jest.fn().mockReturnValue({data: 'your object here'})
const poolJobs = await poolJobService.getPoolJobs()
expect(poolJobs).toEqual({data: 'your object here'})
})
You could achieve the same functionality with a jest.spy instead of a mock, but that is up to you on how you want to implement the functionality.
As a basic rule, whatever is in your constructor, you will need to mock it, and as long as you mock it, whatever is in the mocked object's constructor can be ignored. Happy testing!
EDIT 6/27/2019
About why we mock ElasticSearchService: A unit test is designed to test a specific segment of code and not make interactions with code outside of the tested function. In this case, we are testing the function getPoolJobs of the PoolJobService class. This means that we don't really need to go all out and connect to a database or external server as this could make our tests slow/prone to breaking if the server is down/modify data we don't want to modify. Instead, we mock out the external dependencies (ElasticSearchService) to return a value that we can control (in theory this will look very similar to real data, but for the context of this question I made it a string). Then we test that getPoolJobs returns the value that ElasticSearchService's getElasticSearchData function returns, as that is the functionality of this function.
This seems rather trivial in this case and may not seem useful, but when there starts to be business logic after the external call then it becomes clear why we would want to mock. Say that we have some sort of data transformation to make the string uppercase before we return from the getPoolJobs method
export class PoolJobService {
constructor(private readonly elasticSearchService: ElasticSearchService) {}
getPoolJobs(data: any): string {
const returnData = this.elasticSearchService.getElasticSearchData(data);
return returnData.toUpperCase();
}
}
From here in the test we can tell getElasticSearchData what to return and easily assert that getPoolJobs does it's necessary logic (asserting that the string really is upperCased) without worrying about the logic inside getElasticSearchData or about making any network calls. For a function that does nothing but return another functions output, it does feel a little bit like cheating on your tests, but in reality you aren't. You're following the testing patterns used by most others in the community.
When you move on to integration and e2e tests, then you'll want to have your external callouts and make sure that your search query is returning what you expect, but that is outside the scope of unit testing.

Resources