Merge pull request #49 from justindujardin/test/combat-components

Test/combat components

Author: justindujardin

.storybook/tsconfig.json

@@ -9,6 +9,7 @@
     "../src/test.ts",
     "../src/**/*.tsx",
     "../src/**/*.spec.ts",
+    "../src/**/*.testing.ts",
     "../projects/**/*.spec.ts"
   ],
   "include": [

karma.conf.js

@@ -34,11 +34,18 @@ module.exports = function (config) {
     customLaunchers: {
       ChromeDebug: {
         base: "Chrome",
-        flags: ["--remote-debugging-port=9333"],
+        flags: [
+          "--remote-debugging-port=9333",
+          "--autoplay-policy=no-user-gesture-required",
+        ],
       },
       ChromeHeadlessCustom: {
         base: "ChromeHeadless",
-        flags: ["--no-sandbox", "--disable-gpu"],
+        flags: [
+          "--no-sandbox",
+          "--disable-gpu",
+          "--autoplay-policy=no-user-gesture-required",
+        ],
       },
     },
     restartOnFileChange: true,

package.json

@@ -144,6 +144,14 @@
               "type": "feat",
               "release": "patch"
             },
+            {
+              "type": "refactor",
+              "release": "patch"
+            },
+            {
+              "type": "test",
+              "release": "patch"
+            },
             {
               "type": "fix",
               "release": "patch"

src/app/app.testing.ts

@@ -0,0 +1,141 @@
+import { TestBed } from '@angular/core/testing';
+import { Store } from '@ngrx/store';
+import { map, take } from 'rxjs/operators';
+import { AppState } from './app.model';
+import { IPartyMember } from './models/base-entity';
+import { EntityAddItemAction } from './models/entity/entity.actions';
+import { EntityWithEquipment } from './models/entity/entity.model';
+import { EntityItemTypes } from './models/entity/entity.reducer';
+import {
+  instantiateEntity,
+  ITemplateBaseItem,
+} from './models/game-data/game-data.model';
+import {
+  GameStateAddInventoryAction,
+  GameStateHurtPartyAction,
+} from './models/game-state/game-state.actions';
+import { Item } from './models/item';
+import {
+  getGameBoardedShip,
+  getGameInventory,
+  getGameKey,
+  getGameParty,
+  getGamePartyGold,
+  getGamePartyWithEquipment,
+} from './models/selectors';
+import { SpritesService } from './models/sprites/sprites.service';
+import { WindowService } from './services/window';
+
+/**
+ * Testing providers for the app.
+ */
+export const APP_TESTING_PROVIDERS = [
+  {
+    // Mock reload() so it doesn't actually reload the page
+    provide: WindowService,
+    useValue: {
+      reload: jasmine.createSpy('reload'),
+    },
+  },
+];
+
+export function testAppGetBoarded(store: Store<AppState>): boolean {
+  let result: boolean = false;
+  store
+    .select(getGameBoardedShip)
+    .pipe(take(1))
+    .subscribe((s) => (result = s));
+  return result;
+}
+
+export function testAppGetKeyData(
+  store: Store<AppState>,
+  keyName?: string
+): boolean | undefined {
+  if (!keyName) {
+    return false;
+  }
+  let result: boolean | undefined = undefined;
+  store
+    .select(getGameKey(keyName))
+    .pipe(take(1))
+    .subscribe((s) => (result = s));
+  return result;
+}
+
+export function testAppGetParty(store: Store<AppState>): IPartyMember[] {
+  let result: IPartyMember[] = [];
+  store
+    .select(getGameParty)
+    .pipe(
+      map((f) => f.toJS()),
+      take(1)
+    )
+    .subscribe((s) => (result = s));
+  return result;
+}
+
+export function testAppGetPartyWithEquipment(
+  store: Store<AppState>
+): EntityWithEquipment[] {
+  let result: EntityWithEquipment[] = [];
+  store
+    .select(getGamePartyWithEquipment)
+    .pipe(
+      map((f) => f.toJS()),
+      take(1)
+    )
+    .subscribe((s) => (result = s));
+  return result;
+}
+
+export function testAppGetInventory(store: Store<AppState>): EntityItemTypes[] {
+  let result: EntityItemTypes[] | undefined;
+  store
+    .select(getGameInventory)
+    .pipe(
+      take(1),
+      map((f) => f.toJS())
+    )
+    .subscribe((s) => (result = s));
+  return result as EntityItemTypes[];
+}
+
+export function testAppGetPartyGold(store: Store<AppState>): number {
+  let result = 0;
+  store
+    .select(getGamePartyGold)
+    .pipe(take(1))
+    .subscribe((s) => (result = s));
+  return result;
+}
+
+export function testAppAddToInventory<T extends Item>(
+  store: Store<AppState>,
+  itemId: string,
+  from: ITemplateBaseItem[],
+  values?: Partial<T>
+): T {
+  const itemInstance = instantiateEntity<T>(
+    from.find((f) => f.id === itemId),
+    values
+  );
+  store.dispatch(new EntityAddItemAction(itemInstance));
+  store.dispatch(new GameStateAddInventoryAction(itemInstance));
+  return itemInstance;
+}
+
+export function testAppDamageParty(
+  store: Store<AppState>,
+  party: EntityWithEquipment[],
+  damage: number
+) {
+  store.dispatch(
+    new GameStateHurtPartyAction({ partyIds: party.map((p) => p.eid), damage })
+  );
+}
+
+export async function testAppLoadSprites() {
+  const spritesService = TestBed.inject(SpritesService);
+  await spritesService.loadSprites('assets/images/index.json').toPromise();
+}

src/app/behaviors/index.ts

@@ -1,14 +1,10 @@
 import { CommonModule } from '@angular/common';
 import { ModuleWithProviders, NgModule } from '@angular/core';
-import { AnimatedBehaviorComponent } from './animated.behavior';
 import { CollisionBehaviorComponent } from './collision.behavior';
 import { SpriteRenderBehaviorComponent } from './sprite-render.behavior';
 
-export * from './animated.behavior';
-
 /** Common behavior behaviors */
 export const BEHAVIOR_COMPONENTS = [
-  AnimatedBehaviorComponent,
   CollisionBehaviorComponent,
   SpriteRenderBehaviorComponent,
 ];

src/app/behaviors/sprite-render.behavior.ts

@@ -44,7 +44,7 @@ export class SpriteRenderBehaviorComponent
     return this._icon$.value;
   }
 
-  private _subscription: Subscription;
+  private _subscription: Subscription | null = null;
 
   meta: ISpriteMeta | null = null;
   image: HTMLImageElement | null = null;
@@ -73,6 +73,6 @@ export class SpriteRenderBehaviorComponent
   }
 
   ngOnDestroy(): void {
-    this._subscription.unsubscribe();
+    this._subscription?.unsubscribe();
   }
 }

src/app/behaviors/sprite.behavior.ts

@@ -64,26 +64,24 @@ export class SpriteComponent extends SceneObjectBehavior {
   /**
    * Set the current sprite name.  Returns the previous sprite name.
    */
-  setSprite(name: string | null = null, frame: number = 0): Promise<string | null> {
-    return new Promise<string | null>((resolve, reject) => {
-      if (name && name === this.icon && this.image && this.meta) {
-        return resolve(this.icon);
-      }
-      this.icon = name;
-      if (!name) {
-        this.meta = null;
-        return resolve(null);
-      }
-      this.meta = this.host.world.sprites.getSpriteMeta(name);
-      assertTrue(this.meta?.source, `invalid sprite source: ${name}`);
-      this.host.world.sprites
-        .getSpriteSheet(this.meta.source)
-        .then((images: ImageResource[]) => {
-          this.image = images[0].data;
-          this.frame = frame;
-          resolve(this.icon);
-        })
-        .catch(reject);
-    });
+  async setSprite(name: string | null = null, frame?: number): Promise<string | null> {
+    if (name && name === this.icon && this.image && this.meta) {
+      return this.icon;
+    }
+    if (typeof frame !== 'undefined') {
+      this.frame = frame;
+    }
+    this.icon = name;
+    if (!name) {
+      this.meta = null;
+      return null;
+    }
+    this.meta = this.host.world.sprites.getSpriteMeta(name);
+    assertTrue(this.meta?.source, `invalid sprite source: ${name}`);
+    const images: ImageResource[] = await this.host.world.sprites.getSpriteSheet(
+      this.meta.source
+    );
+    this.image = images[0].data;
+    return this.icon;
   }
 }

src/app/components/animated/animated.component.spec.ts

@@ -0,0 +1,82 @@
+import { TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { APP_IMPORTS } from '../../app.imports';
+import { Point } from '../../core';
+import { Scene } from '../../scene/scene';
+import { GameWorld } from '../../services/game-world';
+import { RPGGame } from '../../services/rpg-game';
+import { AnimatedComponent, IAnimationConfig } from './animated.component';
+
+function getFixture() {
+  const fixture = TestBed.createComponent(AnimatedComponent);
+  const comp: AnimatedComponent = fixture.componentInstance;
+  fixture.detectChanges();
+  return { fixture, comp };
+}
+
+describe('AnimatedComponent', () => {
+  let world: GameWorld;
+  let scene: Scene;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RouterTestingModule, ...APP_IMPORTS],
+      declarations: [AnimatedComponent],
+    }).compileComponents();
+    world = TestBed.inject(GameWorld);
+    scene = new Scene();
+    world.mark(scene);
+    world.time.start();
+    const game = TestBed.inject(RPGGame);
+    await game.initGame(false);
+  });
+  afterEach(async () => {
+    world.erase(scene);
+    world.time.stop();
+    scene.destroy();
+  });
+
+  it('initializes', async () => {
+    const { fixture, comp } = getFixture();
+    await fixture.whenRenderingDone();
+    expect(() => {
+      comp.update(0);
+    }).not.toThrow();
+  });
+
+  it('plays async animations', async () => {
+    const { fixture, comp } = getFixture();
+    await fixture.whenRenderingDone();
+    scene.addObject(comp);
+
+    let cb1 = false;
+    let cb2 = false;
+    const anim: IAnimationConfig[] = [
+      {
+        name: 'Prep Animation',
+        host: comp,
+        duration: 0,
+        callback: async () => {
+          cb1 = true;
+          return true;
+        },
+      },
+      {
+        name: 'Move Forward for Attack',
+        host: comp,
+        repeats: 0,
+        duration: 10,
+        move: new Point(1, 0),
+        frames: [1, 2],
+        callback: async () => {
+          cb2 = true;
+          return true;
+        },
+      },
+    ];
+
+    await comp.playChain(anim);
+    expect(cb1).toBe(true);
+    expect(cb2).toBe(true);
+  });
+});