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.
This commit is contained in:
undergroundwires
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user