Lars Gyrup Brink Nielsen LayZeeDK

🇩🇰

Denmark

Microsoft MVP, Nx Champion, Co-Founder of This is Learning, Organizer of AarhusJS, Author, Writer, Speaker, Open-Source Maintainer.

LayZeeDK / heroes.container.spec.ts

Last active August 14, 2018 22:10

Heroes: Container component test suite setup

	import { fakeAsync, tick } from '@angular/core/testing';
	import { asapScheduler, of as observableOf, Subject } from 'rxjs';
	import { takeUntil } from 'rxjs/operators';

	import { femaleMarvelHeroes } from '../../test/female-marvel-heroes';
	import { Hero } from '../hero';
	import { HeroService } from '../hero.service';
	import { HeroesContainerComponent } from './heroes.container';

	describe(HeroesContainerComponent.name, () => {

LayZeeDK / heroes.container.spec.ts

Last active October 10, 2018 15:43

Heroes: Testing initial heroes state

	describe('emits all heroes', () => {
	it('all heroes are emitted after subscribing', () => {
	expect(observer).toHaveBeenCalledWith(femaleMarvelHeroes);
	});

	it(`delegates to ${HeroService.name}`, () => {
	expect(heroServiceStub.getHeroes).toHaveBeenCalledTimes(1);
	});
	});

LayZeeDK / heroes.container.spec.ts

Last active October 10, 2018 15:48

Heroes: Testing addition of a hero

	describe('adds a hero', () => {
	it('emits the specified hero when server responds', fakeAsync(() => {
	const wonderWoman = 'Wonder Woman';

	container.add(wonderWoman);
	tick();

	expect(observer).toHaveBeenCalledWith([
	...femaleMarvelHeroes,
	{ id: 42, name: wonderWoman },

LayZeeDK / heroes.container.spec.ts

Created August 15, 2018 20:36

Heroes: Testing addition of a hero

	it(`delegates to ${HeroService.name}`, () => {
	const hawkeye = 'Hawkeye (Kate Bishop)';

	container.add(hawkeye);

	expect(heroServiceStub.addHero).toHaveBeenCalledTimes(1);
	expect(heroServiceStub.addHero).toHaveBeenCalledWith({ name: hawkeye });
	});

LayZeeDK / heroes.container.spec.ts

Last active October 10, 2018 16:46

Heroes: Testing addition of a hero

	it('does not emit the specified hero when server fails', fakeAsync(() => {
	heroServiceStub.addHero.and.returnValue(
	throwError(new Error('server error'), asapScheduler));
	const scarletWitch = 'Scarlet Witch';

	container.add(scarletWitch);
	tick();

	expect(observer).not.toHaveBeenCalledWith([
	...femaleMarvelHeroes,

LayZeeDK / web-application-horizontal-layers.csv

Last active January 19, 2023 11:57

Horizontal layers of a web application.

	Horizontal layer	Examples
	Business logic	Application-specific logic, domain logic, validation rules
	Persistence	WebStorage, IndexedDB, File System Access API, HTTP, WebSocket, GraphQL, Firebase, Meteor
	Messaging	WebRTC, WebSocket, Push API, Server-Sent Events
	I/O	Web Bluetooth, WebUSB, NFC, camera, microphone, proximity sensor, ambient light sensor
	Presentation	DOM manipulation, event listeners, formatting
	User interaction	UI behaviour, form validation
	State management	Application state management, application-specific events

LayZeeDK / immutable-object-update.ts

Last active September 30, 2018 20:22

Property update on immutable object

LayZeeDK / heroes.component.ts

Created October 10, 2018 14:38

Heroes: Mixed component model after extracting a container component

	import { Component } from '@angular/core';

	import { Hero } from '../hero';

	@Component({
	selector: 'app-heroes',
	templateUrl: './heroes.component.html',
	styleUrls: ['./heroes.component.css']
	})
	export class HeroesComponent {

LayZeeDK / heroes.container.spec.ts

Last active October 10, 2018 15:25

Heroes: Setting up a HeroService stub for testing the container component

	import { asapScheduler, of as observableOf } from 'rxjs';

	import { femaleMarvelHeroes } from '../../test/female-marvel-heroes';
	import { Hero } from '../hero';
	import { HeroService } from '../hero.service';
	import { HeroesContainerComponent } from './heroes.container';

	describe(HeroesContainerComponent.name, () => {
	function createHeroServiceStub(): jasmine.SpyObj<HeroService> {
	const stub: jasmine.SpyObj<HeroService> = jasmine.createSpyObj(

LayZeeDK / heroes.container.spec.ts

Created October 10, 2018 15:30

Heroes: Observing the heroes$ property of the container component

	import { fakeAsync, tick } from '@angular/core/testing';
	import { Subject } from 'rxjs';
	import { takeUntil } from 'rxjs/operators';

	import { HeroService } from '../hero.service';
	import { HeroesContainerComponent } from './heroes.container';

	describe(HeroesContainerComponent.name, () => {
	let container: HeroesContainerComponent;
	const destroy: Subject<void> = new Subject();