Added unit test to account-dialog.component

[Tiago404]

Fixes

Part of #1717

Checks

• Ran yarn test-build
• Updated relevant documentations
• Updated matching config options in altair-static

Changes proposed in this pull request:

This PR adds a test around the functionality of account-dialog.component:

• handleLoginChange

[Tiago404]

This is my first open source contribution, and I'm still pretty new to testing with Angular. This is a pretty simple first test I implemented, kind of just want to see how the process of getting a PR approved goes and see where I could improve.
I would like to implement more tests on this account-dialog component, but I am not sure exactly what else I could test.
I would appreciate any pointers.
Was thinking of implementing some tests for the openBillingPage() function, but am having a hard time figuring out how to implement tests for it.

[imolorhe]

Hey, thanks for the changes!

Testing angular components (how the UI elements interact) isn't always easy/straighforward in my experience. However in Altair, we have a component testing library that builds on top of angular testing APIs and tries to make the testing process a bit easier. As much as possible, we should be using this API (in combination with jest assertions of course) instead of the default angular one.

Note: this library only applies when testing UI components. For all other things like business logic, services, pipes, etc. you should be able to test with simple jest

For testing the openBillingPage(), you'd want to jest.mock the apiClient and then check that the apiClient.getBillingUrl() has been called

[imolorhe]

instead of using jest.spyOn, we could trigger the click event on the submit button (or submit event on the form) and check that the handleLoginChange event was emitted. For example,

altair/packages/altair-app/src/app/components/query-collections/query-collections.component.spec.ts

Lines 206 to 222 in 00353c9

	wrapper.setProps({
	collections: [
	{
	id: 1,
	title: 'Collection 1',
	queries: []
	},
	],
	});
	await wrapper.nextTick();
	const sortOption = wrapper.find('nz-dropdown-menu li');
	sortOption.emit('click');
	expect(wrapper.emitted('sortCollectionsChange')).toBeTruthy();

[imolorhe]

Looking good!