@testgorilla/tgo-typing-test 0.0.1

package/src/assets/typing-test-languages/quotes/filtered_sources.json

@@ -0,0 +1,79 @@
+{
+  "sources":[
+    "Thing Explainer: Complicated Stuff in Simple Words",
+    "Don Quixote",
+    "The Good Place",
+    "Star Trek: Generations",
+    "The Lord of The Rings",
+    "Thus Spoke Zarathustra: A Book for None and All",
+    "The Two Towers",
+    "Richard Feynman",
+    "The Joy of Painting",
+    "The Fellowship of the Ring",
+    "The Lord of the Rings: The Two Towers",
+    "The Complete Calvin and Hobbes",
+    "So Long, and Thanks for All the Fish",
+    "Elon Musk: Tesla, SpaceX, and the Quest for a Fantastic Future",
+    "It's Not Rocket Science: 7 Game-Changing Traits for Uncommon Success",
+    "Lord of the Rings: The Return of the King",
+    "Discourse on Method",
+    "The Hitchhiker's Guide to the Galaxy",
+    "Star Trek",
+    "The Hobbit",
+    "Hitchhiker's Guide to the Galaxy",
+    "Moby Dick",
+    "Harry Potter and the Philosopher's Stone",
+    "Charlotte's Web",
+    "Ratatouille",
+    "The First Philosophers: The Presocratics and the Sophists",
+    "Ollie's Lost",
+    "Harry Potter and the Half-Blood Prince",
+    "Shrek",
+    "Notting Hill",
+    "The Power of Meaning",
+    "Electronics For Dummies",
+    "Philosophy of Social Science (Dimensions of Philosophy) 5th Edition",
+    "Agricultural Geology",
+    "War and Peace",
+    "On Food and Cooking: The Science and Lore of the Kitchen",
+    "Return of the Jedi",
+    "The Greatest Cases Of Sherlock Holmes",
+    "The Rust Programming Language",
+    "Freakonomics",
+    "How Not to Be Wrong: The Power of Mathematical Thinking",
+    "Back to the Future",
+    "Economics in One Lesson",
+    "The Empire Strikes Back",
+    "Magnets and Motors: Teacher's Guide",
+    "Interstellar",
+    "The Wizard of Oz",
+    "Back To The Future - Part 2",
+    "Super Mario 64 Player's Guide",
+    "Harry Potter and the Goblet of Fire",
+    "Improving Reading Skills",
+    "Physics for Game Developers",
+    "Cracking the Coding Interview",
+    "Star Trek: The Next Generation",
+    "2001: A SPACE ODYSSEY",
+    "The Thermodynamics of Pizza",
+    "Computing Machinery and Intelligence",
+    "Astronomy: A Beginner's Guide to the Universe (7th Edition)",
+    "Cars",
+    "Essentials of Economics",
+    "Tom Sawyer",
+    "Holidays on Ice",
+    "SpongeBob SquarePants",
+    "Paper Mario: Color Splash",
+    "The Complete Project Manager",
+    "Classical Mythology",
+    "Scooby-Doo! Mystery Incorporated",
+    "Dr. Seuss' How the Grinch Stole Christmas!",
+    "Willy Wonka, Charlie and the Chocolate Factory",
+    "Dr. Doofenshmirtz, Phineas and Ferb",
+    "Heinz Doofenshmirtz, Phineas and Ferb",
+    "The Behaviour of the Domestic Cat by John W.S. Bradshaw",
+    "Hiccup, How To Train Your Dragon 2",
+    "Plato: Five Dialogues",
+    "TestGorilla"
+  ]
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './lib/components/tgo-typing-test/tgo-typing-test.component';
+export * from './lib/components/tgo-typing-replay-input/tgo-typing-replay-input.component';

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,48 @@
+import { 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',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './tgo-typing-replay-input.component.html',
+  styleUrls: ['../../styles/index.scss'],
+})
+export class TgoTypingReplayInputComponent implements OnInit {
+  @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>
+