Fix code highlighting and optimize category select

This commit introduces a batched debounce mechanism for managing user selection state changes. It effectively reduces unnecessary processing during rapid script checking, preventing multiple triggers for code compilation and UI rendering. Key improvements include: - Enhanced performance, especially noticeable when selecting large categories. This update resolves minor UI freezes experienced when selecting categories with numerous scripts. - Correction of a bug where the code area only highlighted the last selected script when multiple scripts were chosen. Other changes include: - Timing functions: - Create a `Timing` folder for `throttle` and the new `batchedDebounce` functions. - Move these functions to the application layer from the presentation layer, reflecting their application-wide use. - Refactor existing code for improved clarity, naming consistency, and adherence to new naming conventions. - Add missing unit tests. - `UserSelection`: - State modifications in `UserSelection` now utilize a singular object inspired by the CQRS pattern, enabling batch updates and flexible change configurations, thereby simplifying change management. - Remove the `I` prefix from related interfaces to align with new coding standards. - Refactor related code for better testability in isolation with dependency injection. - Repository: - Move repository abstractions to the application layer. - Improve repository abstraction to combine `ReadonlyRepository` and `MutableRepository` interfaces. - E2E testing: - Introduce E2E tests to validate the correct batch selection behavior. - Add a specialized data attribute in `TheCodeArea.vue` for improved testability. - Reorganize shared Cypress functions for a more idiomatic Cypress approach. - Improve test documentation with related information. - `SelectedScript`: - Create an abstraction for simplified testability. - Introduce `SelectedScriptStub` in tests as a substitute for the actual object.
2023-11-18 22:23:27 +01:00
parent 4531645b4c
commit cb42f11b97
79 changed files with 2733 additions and 1351 deletions
--- a/tests/unit/application/Context/State/Code/ApplicationCode.spec.ts
+++ b/tests/unit/application/Context/State/Code/ApplicationCode.spec.ts
@@ -1,7 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { UserSelection } from '@/application/Context/State/Selection/UserSelection';
 import { ApplicationCode } from '@/application/Context/State/Code/ApplicationCode';
-import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';
 import { ICodeChangedEvent } from '@/application/Context/State/Code/Event/ICodeChangedEvent';
 import { IUserScriptGenerator } from '@/application/Context/State/Code/Generation/IUserScriptGenerator';
 import { CodePosition } from '@/application/Context/State/Code/Position/CodePosition';
@@ -9,16 +7,18 @@ import { ICodePosition } from '@/application/Context/State/Code/Position/ICodePo
 import { IScriptingDefinition } from '@/domain/IScriptingDefinition';
 import { IUserScript } from '@/application/Context/State/Code/Generation/IUserScript';
 import { ScriptingDefinitionStub } from '@tests/unit/shared/Stubs/ScriptingDefinitionStub';
-import { CategoryStub } from '@tests/unit/shared/Stubs/CategoryStub';
 import { ScriptStub } from '@tests/unit/shared/Stubs/ScriptStub';
-import { CategoryCollectionStub } from '@tests/unit/shared/Stubs/CategoryCollectionStub';
 import { expectExists } from '@tests/shared/Assertions/ExpectExists';
+import { SelectedScript } from '@/application/Context/State/Selection/Script/SelectedScript';
+import { ScriptSelectionStub } from '@tests/unit/shared/Stubs/ScriptSelectionStub';

 describe('ApplicationCode', () => {
  describe('ctor', () => {
    it('empty when selection is empty', () => {
      // arrange
-      const selection = new UserSelection(new CategoryCollectionStub(), []);
+      const selectedScripts = [];
+      const selection = new ScriptSelectionStub()
+        .withSelectedScripts(selectedScripts);
      const definition = new ScriptingDefinitionStub();
      const sut = new ApplicationCode(selection, definition);
      // act
@@ -29,10 +29,9 @@ describe('ApplicationCode', () => {
    it('generates code from script generator when selection is not empty', () => {
      // arrange
      const scripts = [new ScriptStub('first'), new ScriptStub('second')];
-      const collection = new CategoryCollectionStub()
-        .withAction(new CategoryStub(1).withScripts(...scripts));
      const selectedScripts = scripts.map((script) => script.toSelectedScript());
-      const selection = new UserSelection(collection, selectedScripts);
+      const selection = new ScriptSelectionStub()
+        .withSelectedScripts(selectedScripts);
      const definition = new ScriptingDefinitionStub();
      const expected: IUserScript = {
        code: 'expected-code',
@@ -53,10 +52,9 @@ describe('ApplicationCode', () => {
        // arrange
        let signaled: ICodeChangedEvent | undefined;
        const scripts = [new ScriptStub('first'), new ScriptStub('second')];
-        const collection = new CategoryCollectionStub()
-          .withAction(new CategoryStub(1).withScripts(...scripts));
-        const scriptsToSelect = scripts.map((script) => new SelectedScript(script, false));
-        const selection = new UserSelection(collection, scriptsToSelect);
+        const selectedScripts = scripts.map((script) => script.toSelectedScript());
+        const selection = new ScriptSelectionStub()
+          .withSelectedScripts(selectedScripts);
        const definition = new ScriptingDefinitionStub();
        const sut = new ApplicationCode(selection, definition);
        sut.changed.on((code) => {
@@ -73,17 +71,18 @@ describe('ApplicationCode', () => {
        // arrange
        let signaled: ICodeChangedEvent | undefined;
        const scripts = [new ScriptStub('first'), new ScriptStub('second')];
-        const collection = new CategoryCollectionStub()
-          .withAction(new CategoryStub(1).withScripts(...scripts));
-        const scriptsToSelect = scripts.map((script) => new SelectedScript(script, false));
-        const selection = new UserSelection(collection, scriptsToSelect);
+        const selectedScripts = scripts.map(
+          (script) => script.toSelectedScript().withRevert(false),
+        );
+        const selection = new ScriptSelectionStub()
+          .withSelectedScripts(selectedScripts);
        const definition = new ScriptingDefinitionStub();
        const sut = new ApplicationCode(selection, definition);
        sut.changed.on((code) => {
          signaled = code;
        });
        // act
-        selection.changed.notify(scripts.map((s) => new SelectedScript(s, false)));
+        selection.changed.notify(selectedScripts);
        // assert
        expectExists(signaled);
        expect(signaled.code).to.have.length.greaterThan(0);
@@ -94,8 +93,8 @@ describe('ApplicationCode', () => {
      it('sends scripting definition to generator', () => {
        // arrange
        const expectedDefinition = new ScriptingDefinitionStub();
-        const collection = new CategoryCollectionStub();
-        const selection = new UserSelection(collection, []);
+        const selection = new ScriptSelectionStub()
+          .withSelectedScripts([]);
        const generatorMock: IUserScriptGenerator = {
          buildCode: (_, definition) => {
            if (definition !== expectedDefinition) {
@@ -118,13 +117,12 @@ describe('ApplicationCode', () => {
        // arrange
        const expectedDefinition = new ScriptingDefinitionStub();
        const scripts = [new ScriptStub('first'), new ScriptStub('second')];
-        const collection = new CategoryCollectionStub()
-          .withAction(new CategoryStub(1).withScripts(...scripts));
-        const scriptsToSelect = scripts.map((script) => new SelectedScript(script, false));
-        const selection = new UserSelection(collection, scriptsToSelect);
+        const selectedScripts = scripts.map((script) => script.toSelectedScript());
+        const selection = new ScriptSelectionStub()
+          .withSelectedScripts(selectedScripts);
        const generatorMock: IUserScriptGenerator = {
-          buildCode: (selectedScripts) => {
-            if (JSON.stringify(selectedScripts) !== JSON.stringify(scriptsToSelect)) {
+          buildCode: (actualScripts) => {
+            if (JSON.stringify(actualScripts) !== JSON.stringify(selectedScripts)) {
              throw new Error('Unexpected scripts');
            }
            return {
@@ -136,7 +134,7 @@ describe('ApplicationCode', () => {
        // eslint-disable-next-line no-new
        new ApplicationCode(selection, expectedDefinition, generatorMock);
        // act
-        const act = () => selection.changed.notify(scriptsToSelect);
+        const act = () => selection.changed.notify(selectedScripts);
        // assert
        expect(act).to.not.throw();
      });
@@ -144,16 +142,17 @@ describe('ApplicationCode', () => {
        // arrange
        let signaled: ICodeChangedEvent | undefined;
        const scripts = [new ScriptStub('first'), new ScriptStub('second')];
-        const collection = new CategoryCollectionStub()
-          .withAction(new CategoryStub(1).withScripts(...scripts));
-        const scriptsToSelect = scripts.map((script) => new SelectedScript(script, false));
-        const selection = new UserSelection(collection, scriptsToSelect);
+        const selectedScripts = scripts.map(
+          (script) => script.toSelectedScript().withRevert(false),
+        );
+        const selection = new ScriptSelectionStub()
+          .withSelectedScripts(selectedScripts);
        const scriptingDefinition = new ScriptingDefinitionStub();
        const totalLines = 20;
        const expected = new Map<SelectedScript, ICodePosition>(
          [
-            [scriptsToSelect[0], new CodePosition(0, totalLines / 2)],
-            [scriptsToSelect[1], new CodePosition(totalLines / 2, totalLines)],
+            [selectedScripts[0], new CodePosition(0, totalLines / 2)],
+            [selectedScripts[1], new CodePosition(totalLines / 2, totalLines)],
          ],
        );
        const generatorMock: IUserScriptGenerator = {
@@ -169,27 +168,27 @@ describe('ApplicationCode', () => {
          signaled = code;
        });
        // act
-        selection.changed.notify(scriptsToSelect);
+        selection.changed.notify(selectedScripts);
        // assert
        expectExists(signaled);
        expect(signaled.getScriptPositionInCode(scripts[0]))
-          .to.deep.equal(expected.get(scriptsToSelect[0]));
+          .to.deep.equal(expected.get(selectedScripts[0]));
        expect(signaled.getScriptPositionInCode(scripts[1]))
-          .to.deep.equal(expected.get(scriptsToSelect[1]));
+          .to.deep.equal(expected.get(selectedScripts[1]));
      });
    });
  });
 });

-interface IScriptGenerationParameters {
-  scripts: readonly SelectedScript[];
-  definition: IScriptingDefinition;
+interface ScriptGenerationParameters {
+  readonly scripts: readonly SelectedScript[];
+  readonly definition: IScriptingDefinition;
 }
 class UserScriptGeneratorMock implements IUserScriptGenerator {
-  private prePlanned = new Map<IScriptGenerationParameters, IUserScript>();
+  private prePlanned = new Map<ScriptGenerationParameters, IUserScript>();

  public plan(
-    parameters: IScriptGenerationParameters,
+    parameters: ScriptGenerationParameters,
    result: IUserScript,
  ): UserScriptGeneratorMock {
    this.prePlanned.set(parameters, result);
--- a/tests/unit/application/Context/State/Code/Event/CodeChangedEvent.spec.ts
+++ b/tests/unit/application/Context/State/Code/Event/CodeChangedEvent.spec.ts
@@ -1,10 +1,10 @@
 import { describe, it, expect } from 'vitest';
 import { CodeChangedEvent } from '@/application/Context/State/Code/Event/CodeChangedEvent';
-import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';
 import { ICodePosition } from '@/application/Context/State/Code/Position/ICodePosition';
 import { CodePosition } from '@/application/Context/State/Code/Position/CodePosition';
 import { SelectedScriptStub } from '@tests/unit/shared/Stubs/SelectedScriptStub';
 import { ScriptStub } from '@tests/unit/shared/Stubs/ScriptStub';
+import { SelectedScript } from '@/application/Context/State/Selection/Script/SelectedScript';

 describe('CodeChangedEvent', () => {
  describe('ctor', () => {
@@ -15,8 +15,8 @@ describe('CodeChangedEvent', () => {
        const nonExistingLine1 = 2;
        const nonExistingLine2 = 31;
        const newScripts = new Map<SelectedScript, ICodePosition>([
-          [new SelectedScriptStub('1'), new CodePosition(0, nonExistingLine1)],
-          [new SelectedScriptStub('2'), new CodePosition(0, nonExistingLine2)],
+          [new SelectedScriptStub(new ScriptStub('1')), new CodePosition(0, nonExistingLine1)],
+          [new SelectedScriptStub(new ScriptStub('2')), new CodePosition(0, nonExistingLine2)],
        ]);
        // act
        let errorText = '';
@@ -47,7 +47,7 @@ describe('CodeChangedEvent', () => {
        for (const testCase of testCases) {
          it(testCase.name, () => {
            const newScripts = new Map<SelectedScript, ICodePosition>([
-              [new SelectedScriptStub('1'), testCase.position],
+              [new SelectedScriptStub(new ScriptStub('1')), testCase.position],
            ]);
            // act
            const act = () => new CodeChangedEventBuilder()
@@ -76,12 +76,15 @@ describe('CodeChangedEvent', () => {
    it('returns new scripts when scripts are added', () => {
      // arrange
      const expected = [new ScriptStub('3'), new ScriptStub('4')];
-      const initialScripts = [new SelectedScriptStub('1'), new SelectedScriptStub('2')];
+      const initialScripts = [
+        new SelectedScriptStub(new ScriptStub('1')),
+        new SelectedScriptStub(new ScriptStub('2')),
+      ];
      const newScripts = new Map<SelectedScript, ICodePosition>([
        [initialScripts[0], new CodePosition(0, 1)],
        [initialScripts[1], new CodePosition(0, 1)],
-        [new SelectedScript(expected[0], false), new CodePosition(0, 1)],
-        [new SelectedScript(expected[1], false), new CodePosition(0, 1)],
+        [new SelectedScriptStub(expected[0]).withRevert(false), new CodePosition(0, 1)],
+        [new SelectedScriptStub(expected[1]).withRevert(false), new CodePosition(0, 1)],
      ]);
      const sut = new CodeChangedEventBuilder()
        .withOldScripts(initialScripts)
@@ -98,8 +101,13 @@ describe('CodeChangedEvent', () => {
  describe('removedScripts', () => {
    it('returns removed scripts when script are removed', () => {
      // arrange
-      const existingScripts = [new SelectedScriptStub('0'), new SelectedScriptStub('1')];
-      const removedScripts = [new SelectedScriptStub('2')];
+      const existingScripts = [
+        new SelectedScriptStub(new ScriptStub('0')),
+        new SelectedScriptStub(new ScriptStub('1')),
+      ];
+      const removedScripts = [
+        new SelectedScriptStub(new ScriptStub('2')),
+      ];
      const initialScripts = [...existingScripts, ...removedScripts];
      const newScripts = new Map<SelectedScript, ICodePosition>([
        [initialScripts[0], new CodePosition(0, 1)],
@@ -119,10 +127,17 @@ describe('CodeChangedEvent', () => {
  describe('changedScripts', () => {
    it('returns changed scripts when scripts are changed', () => {
      // arrange
-      const initialScripts = [new SelectedScriptStub('1', false), new SelectedScriptStub('2', false)];
+      const changedScripts = [
+        new ScriptStub('scripts-with-changed-selection-1'),
+        new ScriptStub('scripts-with-changed-selection-2'),
+      ];
+      const initialScripts = [
+        new SelectedScriptStub(changedScripts[0]).withRevert(false),
+        new SelectedScriptStub(changedScripts[1]).withRevert(false),
+      ];
      const newScripts = new Map<SelectedScript, ICodePosition>([
-        [new SelectedScriptStub('1', true), new CodePosition(0, 1)],
-        [new SelectedScriptStub('2', false), new CodePosition(0, 1)],
+        [new SelectedScriptStub(changedScripts[0]).withRevert(true), new CodePosition(0, 1)],
+        [new SelectedScriptStub(changedScripts[1]).withRevert(false), new CodePosition(0, 1)],
      ]);
      const sut = new CodeChangedEventBuilder()
        .withOldScripts(initialScripts)
@@ -139,7 +154,7 @@ describe('CodeChangedEvent', () => {
    it('returns true when empty', () => {
      // arrange
      const newScripts = new Map<SelectedScript, ICodePosition>();
-      const oldScripts = [new SelectedScriptStub('1', false)];
+      const oldScripts = [new SelectedScriptStub(new ScriptStub('1')).withRevert(false)];
      const sut = new CodeChangedEventBuilder()
        .withOldScripts(oldScripts)
        .withNewScripts(newScripts)
@@ -151,7 +166,7 @@ describe('CodeChangedEvent', () => {
    });
    it('returns false when not empty', () => {
      // arrange
-      const oldScripts = [new SelectedScriptStub('1')];
+      const oldScripts = [new SelectedScriptStub(new ScriptStub('1'))];
      const newScripts = new Map<SelectedScript, ICodePosition>([
        [oldScripts[0], new CodePosition(0, 1)],
      ]);
@@ -182,7 +197,7 @@ describe('CodeChangedEvent', () => {
      const script = new ScriptStub('1');
      const expected = new CodePosition(0, 1);
      const newScripts = new Map<SelectedScript, ICodePosition>([
-        [new SelectedScript(script, false), expected],
+        [new SelectedScriptStub(script).withRevert(false), expected],
      ]);
      const sut = new CodeChangedEventBuilder()
        .withNewScripts(newScripts)
--- a/tests/unit/application/Context/State/Code/Generation/UserScriptGenerator.spec.ts
+++ b/tests/unit/application/Context/State/Code/Generation/UserScriptGenerator.spec.ts
@@ -1,12 +1,12 @@
 import { describe, it, expect } from 'vitest';
 import { UserScriptGenerator } from '@/application/Context/State/Code/Generation/UserScriptGenerator';
-import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';
 import { ICodeBuilderFactory } from '@/application/Context/State/Code/Generation/ICodeBuilderFactory';
 import { ICodeBuilder } from '@/application/Context/State/Code/Generation/ICodeBuilder';
 import { ScriptStub } from '@tests/unit/shared/Stubs/ScriptStub';
 import { ScriptingDefinitionStub } from '@tests/unit/shared/Stubs/ScriptingDefinitionStub';
 import { itEachAbsentStringValue } from '@tests/unit/shared/TestCases/AbsentTests';
 import { expectExists } from '@tests/shared/Assertions/ExpectExists';
+import { SelectedScriptStub } from '@tests/unit/shared/Stubs/SelectedScriptStub';

 describe('UserScriptGenerator', () => {
  describe('scriptingDefinition', () => {
@@ -94,7 +94,7 @@ describe('UserScriptGenerator', () => {
      const scriptName = 'test non-revert script';
      const scriptCode = 'REM nop';
      const script = new ScriptStub('id').withName(scriptName).withCode(scriptCode);
-      const selectedScripts = [new SelectedScript(script, false)];
+      const selectedScripts = [new SelectedScriptStub(script).withRevert(false)];
      const definition = new ScriptingDefinitionStub();
      // act
      const actual = sut.buildCode(selectedScripts, definition);
@@ -113,7 +113,8 @@ describe('UserScriptGenerator', () => {
      const script = new ScriptStub('id')
        .withName(scriptName)
        .withRevertCode(scriptCode)
-        .toSelectedScript(true);
+        .toSelectedScript()
+        .withRevert(true);
      const definition = new ScriptingDefinitionStub();
      // act
      const actual = sut.buildCode([script], definition);
@@ -127,10 +128,9 @@ describe('UserScriptGenerator', () => {
        const expectedError = 'Reverted script lacks revert code.';
        const sut = new UserScriptGenerator();
        const script = new ScriptStub('id')
-          .toSelectedScript(true);
-        // Hack until SelectedScript is interface:
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (script.script.code as any).revert = emptyRevertCode;
+          .withRevertCode(emptyRevertCode)
+          .toSelectedScript()
+          .withRevert(true);
        const definition = new ScriptingDefinitionStub();
        // act
        const act = () => sut.buildCode([script], definition);
@@ -181,7 +181,8 @@ describe('UserScriptGenerator', () => {
            const selectedScript = new ScriptStub('script-id')
              .withName('script')
              .withCode(testCase.scriptCode)
-              .toSelectedScript(false);
+              .toSelectedScript()
+              .withRevert(false);
            // act
            const actual = sut.buildCode([selectedScript], definition);
            // expect