@testgorilla/tgo-typing-test 1.0.0 → 2.0.0

package/.eslintrc.json

@@ -0,0 +1,46 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "tgo",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "tgo",
+            "style": "kebab-case"
+          }
+        ],
+        "@angular-eslint/prefer-standalone": "off"
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    },
+    {
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/dependency-checks": [
+          "error",
+          {
+            "ignoredFiles": ["{projectRoot}/eslint.config.{js,cjs,mjs}"]
+          }
+        ]
+      }
+    }
+  ]
+}

package/jest.config.ts

@@ -0,0 +1,21 @@
+export default {
+  displayName: 'tgo-typing-test',
+  preset: '../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  coverageDirectory: '../../coverage/packages/tgo-typing-test',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+};

package/ng-package.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/packages/tgo-typing-test",
+  "assets": [
+    {
+      "glob": "**/*",
+      "input": "./src/assets",
+      "output": "./assets"
+    }
+  ],
+  "lib": {
+    "entryFile": "./src/index.ts"
+  },
+  "allowedNonPeerDependencies": []
+}

package/package.json

@@ -1,31 +1,16 @@
 {
   "name": "@testgorilla/tgo-typing-test",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "peerDependencies": {
-    "@angular/common": "~18.2.13",
-    "@angular/core": "~18.2.13",
-    "@angular/animations": "~18.2.13",
-    "jest-preset-angular": "~14.2.4",
+    "@angular/common": "~19.2.17",
+    "@angular/core": "~19.2.17",
+    "@angular/animations": "~19.2.17",
+    "jest-preset-angular": "14.4.2",
     "rxjs": "~7.8.1"
   },
-  "typings": "index.d.ts",
+  "typings": "src/lib/types",
   "sideEffects": false,
   "license": "PROPRIETARY",
   "displayName": "Typing Test",
-  "description": "Typing Test component",
-  "module": "fesm2022/testgorilla-tgo-typing-test.mjs",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/testgorilla-tgo-typing-test.mjs",
-      "esm": "./esm2022/testgorilla-tgo-typing-test.mjs",
-      "default": "./fesm2022/testgorilla-tgo-typing-test.mjs"
-    }
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  }
+  "description": "Typing Test component"
 }

package/project.json

@@ -0,0 +1,36 @@
+{
+  "name": "tgo-typing-test",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/tgo-typing-test/src",
+  "prefix": "tgo",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@nx/angular:package",
+      "outputs": ["{workspaceRoot}/dist/{projectRoot}"],
+      "options": {
+        "project": "packages/tgo-typing-test/ng-package.json"
+      },
+      "configurations": {
+        "production": {
+          "tsConfig": "packages/tgo-typing-test/tsconfig.lib.prod.json"
+        },
+        "development": {
+          "tsConfig": "packages/tgo-typing-test/tsconfig.lib.json"
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "packages/tgo-typing-test/jest.config.ts"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    }
+  }
+}

package/src/lib/components/tgo-typing-replay-input/tgo-typing-replay-input.component.html

@@ -0,0 +1,30 @@
+<div id="centerContent">
+  <div id="middle" #middle>
+    <div class="page pageTest active">
+      <div id="result" tabindex="0">
+        <div class="bottom" style="grid-column: 1/3">
+          <div id="resultReplay">
+            <div class="title">
+              Watch replay
+              <span
+                id="playpauseReplayButton"
+                class="textButton"
+                aria-label="Start replay"
+                data-balloon-pos="up"
+                style="display: inline-block"
+                (click)="playpauseReplayButtonClick()"
+                #toggleButton
+              >
+                <div id="key" class="Play" #playpauseelem>{{ playpauseelem.className }}</div>
+              </span>
+              <p id="replayStopwatch" #replayStopwatch>0s</p>
+            </div>
+            <div id="wordsWrapper">
+              <div id="replayWords" class="words"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/src/lib/components/tgo-typing-replay-input/tgo-typing-replay-input.component.spec.ts

@@ -0,0 +1,250 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ElementRef } from '@angular/core';
+import { TgoTypingReplayInputComponent } from './tgo-typing-replay-input.component';
+import * as config from '../../helpers/config';
+import * as replay from '../../helpers/test/replay';
+
+jest.mock('../../helpers/config');
+jest.mock('../../helpers/test/replay');
+
+describe('TgoTypingReplayInputComponent', () => {
+  let component: TgoTypingReplayInputComponent;
+  let fixture: ComponentFixture<TgoTypingReplayInputComponent>;
+
+  const mockReplayExport = JSON.stringify({
+    wordsList: ['word1', 'word2', 'word3'],
+    replayData: [
+      { timestamp: 0, char: 'w' },
+      { timestamp: 100, char: 'o' },
+    ],
+  });
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    TestBed.configureTestingModule({
+      imports: [TgoTypingReplayInputComponent],
+    });
+
+    fixture = TestBed.createComponent(TgoTypingReplayInputComponent);
+    component = fixture.componentInstance;
+  });
+
+  describe('when initialized', () => {
+    it('should create the component', () => {
+      expect(component).toBeDefined();
+    });
+
+    it('should have default funbox value', () => {
+      expect(component.funbox).toBe('none');
+    });
+  });
+
+  describe('#ngOnInit', () => {
+    beforeEach(() => {
+      component.replayExport = mockReplayExport;
+    });
+
+    it('should parse the replayExport JSON string', () => {
+      component.ngOnInit();
+
+      expect(component.replayExportData).toEqual({
+        wordsList: ['word1', 'word2', 'word3'],
+        replayData: [
+          { timestamp: 0, char: 'w' },
+          { timestamp: 100, char: 'o' },
+        ],
+      });
+    });
+
+    it('should call setFunbox with the funbox input value', () => {
+      component.funbox = 'custom-funbox';
+
+      component.ngOnInit();
+
+      expect(config.setFunbox).toHaveBeenCalledWith('custom-funbox');
+      expect(config.setFunbox).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call replayGetWordsList with parsed wordsList', () => {
+      component.ngOnInit();
+
+      expect(replay.replayGetWordsList).toHaveBeenCalledWith(['word1', 'word2', 'word3']);
+      expect(replay.replayGetWordsList).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call setReplayData with parsed replayData', () => {
+      component.ngOnInit();
+
+      expect(replay.setReplayData).toHaveBeenCalledWith([
+        { timestamp: 0, char: 'w' },
+        { timestamp: 100, char: 'o' },
+      ]);
+      expect(replay.setReplayData).toHaveBeenCalledTimes(1);
+    });
+
+    describe('when replayExport contains different data', () => {
+      it('should handle empty wordsList and replayData', () => {
+        component.replayExport = JSON.stringify({
+          wordsList: [],
+          replayData: [],
+        });
+
+        component.ngOnInit();
+
+        expect(replay.replayGetWordsList).toHaveBeenCalledWith([]);
+        expect(replay.setReplayData).toHaveBeenCalledWith([]);
+      });
+
+      it('should handle large wordsList', () => {
+        const largeWordsList = Array.from({ length: 100 }, (_, i) => `word${i}`);
+        component.replayExport = JSON.stringify({
+          wordsList: largeWordsList,
+          replayData: [],
+        });
+
+        component.ngOnInit();
+
+        expect(replay.replayGetWordsList).toHaveBeenCalledWith(largeWordsList);
+      });
+    });
+  });
+
+  describe('#ngAfterViewInit', () => {
+    let mockToggleButtonElement: HTMLElement;
+    let mockReplayStopwatchElement: HTMLElement;
+
+    beforeEach(() => {
+      component.replayExport = mockReplayExport;
+      component.ngOnInit();
+
+      // Create mock elements
+      mockToggleButtonElement = document.createElement('button');
+      mockReplayStopwatchElement = document.createElement('div');
+
+      // Mock ViewChild ElementRef
+      component.toggleButton = {
+        nativeElement: mockToggleButtonElement,
+      } as ElementRef;
+      component.replayStopwatch = {
+        nativeElement: mockReplayStopwatchElement,
+      } as ElementRef;
+    });
+
+    it('should call setToggleButton with toggleButton native element', () => {
+      component.ngAfterViewInit();
+
+      expect(replay.setToggleButton).toHaveBeenCalledWith(mockToggleButtonElement);
+      expect(replay.setToggleButton).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call setReplayStopwatch with replayStopwatch native element', () => {
+      component.ngAfterViewInit();
+
+      expect(replay.setReplayStopwatch).toHaveBeenCalledWith(mockReplayStopwatchElement);
+      expect(replay.setReplayStopwatch).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call initializeReplayPrompt', () => {
+      component.ngAfterViewInit();
+
+      expect(replay.initializeReplayPrompt).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call loadOldReplay', () => {
+      component.ngAfterViewInit();
+
+      expect(replay.loadOldReplay).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call playReplay', () => {
+      component.ngAfterViewInit();
+
+      expect(replay.playReplay).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call replay initialization functions in correct order', () => {
+      const callOrder: string[] = [];
+
+      jest.mocked(replay.setToggleButton).mockImplementation(() => {
+        callOrder.push('setToggleButton');
+      });
+      jest.mocked(replay.setReplayStopwatch).mockImplementation(() => {
+        callOrder.push('setReplayStopwatch');
+      });
+      jest.mocked(replay.initializeReplayPrompt).mockImplementation(() => {
+        callOrder.push('initializeReplayPrompt');
+      });
+      jest.mocked(replay.loadOldReplay).mockImplementation(() => {
+        callOrder.push('loadOldReplay');
+        return 0;
+      });
+      jest.mocked(replay.playReplay).mockImplementation(() => {
+        callOrder.push('playReplay');
+      });
+
+      component.ngAfterViewInit();
+
+      expect(callOrder).toEqual([
+        'setToggleButton',
+        'setReplayStopwatch',
+        'initializeReplayPrompt',
+        'loadOldReplay',
+        'playReplay',
+      ]);
+    });
+  });
+
+  describe('#playpauseReplayButtonClick', () => {
+    it('should call the imported playpauseReplayButtonClick function', () => {
+      component.playpauseReplayButtonClick();
+
+      expect(replay.playpauseReplayButtonClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call playpauseReplayButtonClick on multiple invocations', () => {
+      component.playpauseReplayButtonClick();
+      component.playpauseReplayButtonClick();
+      component.playpauseReplayButtonClick();
+
+      expect(replay.playpauseReplayButtonClick).toHaveBeenCalledTimes(3);
+    });
+  });
+
+  describe('when component lifecycle is complete', () => {
+    let mockToggleButtonElement: HTMLElement;
+    let mockReplayStopwatchElement: HTMLElement;
+
+    beforeEach(() => {
+      component.replayExport = mockReplayExport;
+      component.funbox = 'test-funbox';
+
+      mockToggleButtonElement = document.createElement('button');
+      mockReplayStopwatchElement = document.createElement('div');
+
+      component.toggleButton = {
+        nativeElement: mockToggleButtonElement,
+      } as ElementRef;
+      component.replayStopwatch = {
+        nativeElement: mockReplayStopwatchElement,
+      } as ElementRef;
+    });
+
+    it('should initialize and setup replay completely', () => {
+      // Simulate full lifecycle
+      component.ngOnInit();
+      component.ngAfterViewInit();
+
+      // Verify all initialization steps were called
+      expect(config.setFunbox).toHaveBeenCalledWith('test-funbox');
+      expect(replay.replayGetWordsList).toHaveBeenCalled();
+      expect(replay.setReplayData).toHaveBeenCalled();
+      expect(replay.setToggleButton).toHaveBeenCalledWith(mockToggleButtonElement);
+      expect(replay.setReplayStopwatch).toHaveBeenCalledWith(mockReplayStopwatchElement);
+      expect(replay.initializeReplayPrompt).toHaveBeenCalled();
+      expect(replay.loadOldReplay).toHaveBeenCalled();
+      expect(replay.playReplay).toHaveBeenCalled();
+    });
+  });
+});
+

package/src/lib/components/tgo-typing-replay-input/tgo-typing-replay-input.component.ts

@@ -0,0 +1,47 @@
+import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+import { setFunbox } from '../../helpers/config';
+import {
+  initializeReplayPrompt,
+  loadOldReplay,
+  playpauseReplayButtonClick,
+  playReplay,
+  replayGetWordsList,
+  setReplayData,
+  setReplayStopwatch,
+  setToggleButton,
+} from '../../helpers/test/replay';
+import { CommonModule } from '@angular/common';
+
+@Component({
+    selector: 'tgo-typing-replay-input',
+    imports: [CommonModule],
+    templateUrl: './tgo-typing-replay-input.component.html',
+    styleUrls: ['../../styles/index.scss']
+})
+export class TgoTypingReplayInputComponent implements OnInit, AfterViewInit {
+  @Input() replayExport: any;
+  @Input() funbox = 'none';
+  replayExportData: any;
+
+  @ViewChild('toggleButton') toggleButton!: ElementRef;
+  @ViewChild('replayStopwatch') replayStopwatch!: ElementRef;
+
+  ngOnInit(): void {
+    this.replayExportData = JSON.parse(this.replayExport);
+    setFunbox(this.funbox);
+    replayGetWordsList(this.replayExportData['wordsList']);
+    setReplayData(this.replayExportData['replayData']);
+  }
+
+  ngAfterViewInit() {
+    setToggleButton(this.toggleButton.nativeElement);
+    setReplayStopwatch(this.replayStopwatch.nativeElement);
+    initializeReplayPrompt();
+    loadOldReplay();
+    playReplay();
+  }
+
+  playpauseReplayButtonClick() {
+    playpauseReplayButtonClick();
+  }
+}

package/src/lib/components/tgo-typing-test/tgo-typing-test.component.html

@@ -0,0 +1,72 @@
+<div id="centerContent">
+    <div id="middle" #middle>
+      <div class="page pageTest active">
+        <div id="typingTest">
+          <div id="capsWarning" [ngClass]="{ hidden: (showCaps$ | async) === false }" #capsWarning>
+            Caps Lock
+          </div>
+          <div id="memoryTimer">Time left to memorise all words: 0s</div>
+          <div id="testModesNotice"></div>
+          <input
+            id="wordsInput"
+            class=""
+            tabindex="0"
+            type="text"
+            autocomplete="off"
+            autocapitalize="off"
+            autocorrect="off"
+            data-gramm="false"
+            data-gramm_editor="false"
+            data-enable-grammarly="false"
+            list="autocompleteOff"
+            (keyup)="wordsInputKeyup($event)"
+            (beforeinput)="wordsInputBeforeinput($event)"
+            (input)="wordsInputInput($event)"
+            (focus)="wordsInputFocus($event)"
+            (focusout)="wordsInputFocusOut()"
+            (copy)="wordsInputCopy($event)"
+            (paste)="wordsInputPaste($event)"
+            (compositionstart)="wordsInputCompositionstart()"
+            (compositionend)="wordsInputCompositionend()"
+            #wordsInput
+          />
+          @if (showMiniTimerAndLiveWpm) {
+            <div id="miniTimerAndLiveWpm" class="timerMain size2">
+              <div class="time" [@fadeIn]="(showTimer$ | async) ? 'show' : 'hide'">
+                {{ timeLeft$ | async }}
+              </div>
+              <div class="wpm hidden">60</div>
+              <div class="acc hidden">100%</div>
+              <div class="burst hidden">1</div>
+            </div>
+          }
+  
+          @if (outOfFocusShow$ | async) {
+            <div class="outOfFocusWarning">
+              Click or press any key to focus
+            </div>
+          }
+  
+          @if (errorEvent | async; as errorMessage) {
+            <div class="errorWarning"> 
+              {{ errorMessage }} Reload the page or <a href="https://candidates.testgorilla.com/hc/en-us/requests/new" target="_blank">contact support</a>.
+            </div>
+          }
+  
+          <div id="wordsWrapper" translate="no" #wordsWrapper (click)="wordsWrapperClick()">
+            <div id="paceCaret" class="default size2 hidden"></div>
+            @if (showCaret$ | async) {
+              <div id="caret" [@updatePositionCaret]="{
+                  value: state,
+                  params: { caretTopPos: caretTop, caretLeftPos: caretLeft }
+                }" 
+                [ngStyle]="{ 'animation-name': (caretAnimation$ | async) }" class="default size2">
+              </div>
+            }
+            <div id="words" class="size2" #words [ngClass]="{ blurred: (outOfFocusShow$ | async) }"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+