Angular Konami Code

#angular #konami #typescript #unittest

I've had the pleasure of working on several projects where small easter eggs were allowed.

In the most recent, I build an Angular Directive, created a Module, and actually built Unit Tests.

Here's the code.

The Module

File: konami.module.ts

import { NgModule, ModuleWithProviders } from '@angular/core'; import { CommonModule } from '@angular/common'; import { KonamiDirective } from './konami.directive';  export * from './konami.directive';  @NgModule({ imports: [ CommonModule ], declarations: [ KonamiDirective ], exports: [ KonamiDirective ] }) export class KonamiModule { static forRoot(): ModuleWithProviders<KonamiModule> { return { ngModule: KonamiModule }; } }

Clearly, this is in the same folder as the Directive.

The Directive

File: konami.directive.ts

import { Directive, EventEmitter, HostListener, Output } from '@angular/core';  @Directive({ selector: '[konami]' }) export class KonamiDirective {  @Output() private konami: EventEmitter<void>;  private sequence: string[];  private konamiCode: string[];  constructor() { this.konami = new EventEmitter<void>(); this.sequence = []; this.konamiCode = [ 'arrowup', 'arrowup', 'arrowdown', 'arrowdown', 'arrowleft', 'arrowright', 'arrowleft', 'arrowright', 'b', 'a' ]; }  @HostListener('window:keydown', ['$event']) handleKeyboardEvent(event: KeyboardEvent) { if (event.key) { this.sequence.push(event.key.toLowerCase());  if (this.sequence.length > this.konamiCode.length) { this.sequence.shift(); }  if (this.isKonamiCode()) { this.konami.emit(); } } }  isKonamiCode(): boolean { return this.konamiCode.every((code: string, index: number) => code === this.sequence[index]); } }

And, all this gets tested ...

The Unit Tests

File: konami.directive.spec.ts

import { KonamiDirective } from './konami.directive';  describe('Konami2irective', () => { let directive;  beforeEach(() => { directive = new KonamiDirective(); });  afterEach(() => { directive = null; });  it('should create an instance', () => { expect(directive).toBeTruthy(); });  it('expects "handleKeyboardEvent" to add keydown to sequence', () => { spyOn(directive.konami, 'emit').and.stub(); spyOn(directive, 'isKonamiCode').and.callThrough(); const keyEvent = new KeyboardEvent('keydown', { key: 'ArrowUp' }); directive.sequence = [];  directive.handleKeyboardEvent(keyEvent); expect(directive.sequence).toEqual([ 'arrowup' ]); expect(directive.isKonamiCode).toHaveBeenCalled(); expect(directive.konami.emit).not.toHaveBeenCalled(); });  it('expects "handleKeyboardEvent" to trigger a konami emit', () => { spyOn(directive.konami, 'emit').and.stub(); spyOn(directive, 'isKonamiCode').and.callThrough(); const keyEvent = new KeyboardEvent('keydown', { key: 'A' }); directive.sequence = ['arrowup', 'arrowup', 'arrowdown', 'arrowdown', 'arrowleft', 'arrowright', 'arrowleft', 'arrowright', 'b'];  directive.handleKeyboardEvent(keyEvent); expect(directive.isKonamiCode).toHaveBeenCalled(); expect(directive.konami.emit).toHaveBeenCalled(); });  it('expects "handleKeyboardEvent" to not work if event had no key detail', () => { spyOn(directive.konami, 'emit').and.stub(); spyOn(directive, 'isKonamiCode').and.callThrough(); const keyEvent = new KeyboardEvent('keydown', { key: '' }); directive.sequence = ['arrowup', 'arrowup', 'arrowdown', 'arrowdown', 'arrowleft', 'arrowright', 'arrowleft', 'arrowright', 'a'];  directive.handleKeyboardEvent(keyEvent); expect(directive.isKonamiCode).not.toHaveBeenCalled(); expect(directive.konami.emit).not.toHaveBeenCalled(); });  it('expects "handleKeyboardEvent" to add to the sequence, removing from the front', () => { spyOn(directive.konami, 'emit').and.stub(); spyOn(directive, 'isKonamiCode').and.callThrough(); directive.sequence = ['arrowup', 'arrowup', 'arrowdown', 'arrowdown', 'arrowleft', 'arrowright', 'arrowleft', 'arrowright', 'b', 'a']; const result = ['arrowup', 'arrowdown', 'arrowdown', 'arrowleft', 'arrowright', 'arrowleft', 'arrowright', 'b', 'a', 'c']; const keyEvent = new KeyboardEvent('keydown', { key: 'C' });  directive.handleKeyboardEvent(keyEvent); expect(directive.sequence).toEqual(result); });  it('expects "isKonamiCode" to return true with a correct sequence', () => { spyOn(directive.konami, 'emit').and.stub(); spyOn(directive, 'isKonamiCode').and.callThrough(); directive.sequence = ['arrowup', 'arrowup', 'arrowdown', 'arrowdown', 'arrowleft', 'arrowright', 'arrowleft', 'arrowright', 'b', 'a'];  expect(directive.isKonamiCode()).toEqual(true); });  });

Now, with all this in place it needs to be added to the application.

Adding To Angular

File: app.module.ts

import { KonamiModule } from '@shared/konami/konami.module'; @NgModule({ declarations: [ ... ], imports: [ ... KonamiModule, ... ], providers: [], bootstrap: [ ... ] }) export class AppModule { }

The Implementation

On a button or div, add the following ...

(konami)="openEasterEgg()"

Clearly, you would want the openEasterEgg function to do something. I generally have it open a Modal with some reference to the design team.

Enjoy.

DEV Community