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.
134 lines
5.1 KiB
TypeScript
134 lines
5.1 KiB
TypeScript
import { describe, it } from 'vitest';
|
|
import { SelectedScript } from '@/application/Context/State/Selection/Script/SelectedScript';
|
|
import { UserSelectionFacade } from '@/application/Context/State/Selection/UserSelectionFacade';
|
|
import { ICategoryCollection } from '@/domain/ICategoryCollection';
|
|
import { CategoryCollectionStub } from '@tests/unit/shared/Stubs/CategoryCollectionStub';
|
|
import type { ScriptsFactory, CategoriesFactory } from '@/application/Context/State/Selection/UserSelectionFacade';
|
|
import { ScriptSelectionStub } from '@tests/unit/shared/Stubs/ScriptSelectionStub';
|
|
import { CategorySelectionStub } from '@tests/unit/shared/Stubs/CategorySelectionStub';
|
|
import { expectExists } from '@tests/shared/Assertions/ExpectExists';
|
|
import { SelectedScriptStub } from '@tests/unit/shared/Stubs/SelectedScriptStub';
|
|
import { ScriptStub } from '@tests/unit/shared/Stubs/ScriptStub';
|
|
import { ScriptSelection } from '@/application/Context/State/Selection/Script/ScriptSelection';
|
|
|
|
describe('UserSelectionFacade', () => {
|
|
describe('ctor', () => {
|
|
describe('scripts', () => {
|
|
it('constructs with expected collection', () => {
|
|
// arrange
|
|
const expectedCollection = new CategoryCollectionStub();
|
|
let actualCollection: ICategoryCollection | undefined;
|
|
const factoryMock: ScriptsFactory = (collection) => {
|
|
actualCollection = collection;
|
|
return new ScriptSelectionStub();
|
|
};
|
|
const builder = new UserSelectionFacadeBuilder()
|
|
.withCollection(expectedCollection)
|
|
.withScriptsFactory(factoryMock);
|
|
// act
|
|
builder.construct();
|
|
// assert
|
|
expectExists(actualCollection);
|
|
expect(actualCollection).to.equal(expectedCollection);
|
|
});
|
|
it('constructs with expected selected scripts', () => {
|
|
// arrange
|
|
const expectedScripts: readonly SelectedScript[] = [
|
|
new SelectedScriptStub(new ScriptStub('1')),
|
|
];
|
|
let actualScripts: readonly SelectedScript[] | undefined;
|
|
const factoryMock: ScriptsFactory = (_, scripts) => {
|
|
actualScripts = scripts;
|
|
return new ScriptSelectionStub();
|
|
};
|
|
const builder = new UserSelectionFacadeBuilder()
|
|
.withSelectedScripts(expectedScripts)
|
|
.withScriptsFactory(factoryMock);
|
|
// act
|
|
builder.construct();
|
|
// assert
|
|
expectExists(actualScripts);
|
|
expect(actualScripts).to.equal(expectedScripts);
|
|
});
|
|
});
|
|
describe('categories', () => {
|
|
it('constructs with expected collection', () => {
|
|
// arrange
|
|
const expectedCollection = new CategoryCollectionStub();
|
|
let actualCollection: ICategoryCollection | undefined;
|
|
const factoryMock: CategoriesFactory = (_, collection) => {
|
|
actualCollection = collection;
|
|
return new CategorySelectionStub();
|
|
};
|
|
const builder = new UserSelectionFacadeBuilder()
|
|
.withCollection(expectedCollection)
|
|
.withCategoriesFactory(factoryMock);
|
|
// act
|
|
builder.construct();
|
|
// assert
|
|
expectExists(actualCollection);
|
|
expect(actualCollection).to.equal(expectedCollection);
|
|
});
|
|
it('constructs with expected scripts', () => {
|
|
// arrange
|
|
const expectedScriptSelection = new ScriptSelectionStub();
|
|
let actualScriptsSelection: ScriptSelection | undefined;
|
|
const categoriesFactoryMock: CategoriesFactory = (selection) => {
|
|
actualScriptsSelection = selection;
|
|
return new CategorySelectionStub();
|
|
};
|
|
const scriptsFactoryMock: ScriptsFactory = () => {
|
|
return expectedScriptSelection;
|
|
};
|
|
const builder = new UserSelectionFacadeBuilder()
|
|
.withCategoriesFactory(categoriesFactoryMock)
|
|
.withScriptsFactory(scriptsFactoryMock);
|
|
// act
|
|
builder.construct();
|
|
// assert
|
|
expectExists(actualScriptsSelection);
|
|
expect(actualScriptsSelection).to.equal(expectedScriptSelection);
|
|
});
|
|
});
|
|
});
|
|
});
|
|
|
|
class UserSelectionFacadeBuilder {
|
|
private collection: ICategoryCollection = new CategoryCollectionStub();
|
|
|
|
private selectedScripts: readonly SelectedScript[] = [];
|
|
|
|
private scriptsFactory: ScriptsFactory = () => new ScriptSelectionStub();
|
|
|
|
private categoriesFactory: CategoriesFactory = () => new CategorySelectionStub();
|
|
|
|
public withCollection(collection: ICategoryCollection): this {
|
|
this.collection = collection;
|
|
return this;
|
|
}
|
|
|
|
public withSelectedScripts(selectedScripts: readonly SelectedScript[]): this {
|
|
this.selectedScripts = selectedScripts;
|
|
return this;
|
|
}
|
|
|
|
public withScriptsFactory(scriptsFactory: ScriptsFactory): this {
|
|
this.scriptsFactory = scriptsFactory;
|
|
return this;
|
|
}
|
|
|
|
public withCategoriesFactory(categoriesFactory: CategoriesFactory): this {
|
|
this.categoriesFactory = categoriesFactory;
|
|
return this;
|
|
}
|
|
|
|
public construct(): UserSelectionFacade {
|
|
return new UserSelectionFacade(
|
|
this.collection,
|
|
this.selectedScripts,
|
|
this.scriptsFactory,
|
|
this.categoriesFactory,
|
|
);
|
|
}
|
|
}
|