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,10 @@
|
||||
import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';
|
||||
import { SelectedScript } from '@/application/Context/State/Selection/Script/SelectedScript';
|
||||
import { RecommendationLevel } from '@/domain/RecommendationLevel';
|
||||
import { CategoryCollectionStateStub } from '@tests/unit/shared/Stubs/CategoryCollectionStateStub';
|
||||
import { ScriptSelectionStub } from '@tests/unit/shared/Stubs/ScriptSelectionStub';
|
||||
import { ScriptStub } from '@tests/unit/shared/Stubs/ScriptStub';
|
||||
import { SelectedScriptStub } from '@tests/unit/shared/Stubs/SelectedScriptStub';
|
||||
import { UserSelectionStub } from '@tests/unit/shared/Stubs/UserSelectionStub';
|
||||
|
||||
export class SelectionStateTestScenario {
|
||||
public readonly all: readonly SelectedScript[];
|
||||
@@ -28,13 +31,21 @@ export class SelectionStateTestScenario {
|
||||
this.all = [...this.allStandard, ...this.allStrict, ...this.allUnrecommended];
|
||||
}
|
||||
|
||||
public generateState(selectedScripts: readonly SelectedScript[]) {
|
||||
public generateState(selectedScripts: readonly SelectedScript[] = []) {
|
||||
const allScripts = this.all.map((s) => s.script);
|
||||
return new CategoryCollectionStateStub(allScripts)
|
||||
const scriptSelection = new ScriptSelectionStub()
|
||||
.withSelectedScripts(selectedScripts);
|
||||
const categoryCollectionState = new CategoryCollectionStateStub(allScripts)
|
||||
.withSelection(new UserSelectionStub().withScripts(scriptSelection));
|
||||
return {
|
||||
scriptsStub: scriptSelection,
|
||||
stateStub: categoryCollectionState,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function createSelectedScripts(level?: RecommendationLevel, ...ids: string[]) {
|
||||
return ids.map((id) => new SelectedScript(new ScriptStub(id).withLevel(level), false));
|
||||
function createSelectedScripts(level?: RecommendationLevel, ...ids: string[]): SelectedScript[] {
|
||||
return ids.map((id) => new SelectedScriptStub(
|
||||
new ScriptStub(id).withLevel(level),
|
||||
).withRevert(false));
|
||||
}
|
||||
|
||||
@@ -3,10 +3,14 @@ import {
|
||||
SelectionCheckContext, SelectionMutationContext, SelectionType,
|
||||
getCurrentSelectionType, setCurrentSelectionType,
|
||||
} from '@/presentation/components/Scripts/Menu/Selector/SelectionTypeHandler';
|
||||
import { scrambledEqual } from '@/application/Common/Array';
|
||||
import { RecommendationLevel } from '@/domain/RecommendationLevel';
|
||||
import { ICategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
|
||||
import { EnumRangeTestRunner } from '@tests/unit/application/Common/EnumRangeTestRunner';
|
||||
import { ScriptSelection } from '@/application/Context/State/Selection/Script/ScriptSelection';
|
||||
import { MethodCall } from '@tests/unit/shared/Stubs/StubWithObservableMethodCalls';
|
||||
import { expectExists } from '@tests/shared/Assertions/ExpectExists';
|
||||
import { scrambledEqual } from '@/application/Common/Array';
|
||||
import { IScript } from '@/domain/IScript';
|
||||
import { SelectionStateTestScenario } from './SelectionStateTestScenario';
|
||||
|
||||
describe('SelectionTypeHandler', () => {
|
||||
@@ -14,11 +18,11 @@ describe('SelectionTypeHandler', () => {
|
||||
describe('throws with invalid type', () => {
|
||||
// arrange
|
||||
const scenario = new SelectionStateTestScenario();
|
||||
const state = scenario.generateState([]);
|
||||
const { stateStub } = scenario.generateState([]);
|
||||
// act
|
||||
const act = (type: SelectionType) => setCurrentSelectionType(
|
||||
type,
|
||||
createMutationContext(state),
|
||||
createMutationContext(stateStub),
|
||||
);
|
||||
// assert
|
||||
new EnumRangeTestRunner(act)
|
||||
@@ -28,44 +32,64 @@ describe('SelectionTypeHandler', () => {
|
||||
describe('select types as expected', () => {
|
||||
// arrange
|
||||
const scenario = new SelectionStateTestScenario();
|
||||
const initialScriptsCases = [{
|
||||
name: 'when nothing is selected',
|
||||
initialScripts: [],
|
||||
}, {
|
||||
name: 'when some scripts are selected',
|
||||
initialScripts: [...scenario.allStandard, ...scenario.someStrict],
|
||||
}, {
|
||||
name: 'when all scripts are selected',
|
||||
initialScripts: scenario.all,
|
||||
}];
|
||||
for (const initialScriptsCase of initialScriptsCases) {
|
||||
describe(initialScriptsCase.name, () => {
|
||||
const state = scenario.generateState(initialScriptsCase.initialScripts);
|
||||
const typeExpectations = [{
|
||||
input: SelectionType.None,
|
||||
output: [],
|
||||
}, {
|
||||
input: SelectionType.Standard,
|
||||
output: scenario.allStandard,
|
||||
}, {
|
||||
input: SelectionType.Strict,
|
||||
output: [...scenario.allStandard, ...scenario.allStrict],
|
||||
}, {
|
||||
input: SelectionType.All,
|
||||
output: scenario.all,
|
||||
}];
|
||||
for (const expectation of typeExpectations) {
|
||||
// act
|
||||
it(`${SelectionType[expectation.input]} returns as expected`, () => {
|
||||
setCurrentSelectionType(expectation.input, createMutationContext(state));
|
||||
// assert
|
||||
const actual = state.selection.selectedScripts;
|
||||
const expected = expectation.output;
|
||||
expect(scrambledEqual(actual, expected));
|
||||
});
|
||||
const testScenarios: ReadonlyArray<{
|
||||
readonly givenType: SelectionType;
|
||||
readonly expectedCall: MethodCall<ScriptSelection>;
|
||||
}> = [
|
||||
{
|
||||
givenType: SelectionType.None,
|
||||
expectedCall: {
|
||||
methodName: 'deselectAll',
|
||||
args: [],
|
||||
},
|
||||
},
|
||||
{
|
||||
givenType: SelectionType.Standard,
|
||||
expectedCall: {
|
||||
methodName: 'selectOnly',
|
||||
args: [
|
||||
scenario.allStandard.map((s) => s.script),
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
givenType: SelectionType.Strict,
|
||||
expectedCall: {
|
||||
methodName: 'selectOnly',
|
||||
args: [[
|
||||
...scenario.allStandard.map((s) => s.script),
|
||||
...scenario.allStrict.map((s) => s.script),
|
||||
]],
|
||||
},
|
||||
},
|
||||
{
|
||||
givenType: SelectionType.All,
|
||||
expectedCall: {
|
||||
methodName: 'selectAll',
|
||||
args: [],
|
||||
},
|
||||
},
|
||||
];
|
||||
testScenarios.forEach(({
|
||||
givenType, expectedCall,
|
||||
}) => {
|
||||
it(`${SelectionType[givenType]} modifies as expected`, () => {
|
||||
const { stateStub, scriptsStub } = scenario.generateState();
|
||||
// act
|
||||
setCurrentSelectionType(givenType, createMutationContext(stateStub));
|
||||
// assert
|
||||
const call = scriptsStub.callHistory.find(
|
||||
(c) => c.methodName === expectedCall.methodName,
|
||||
);
|
||||
expectExists(call);
|
||||
if (expectedCall.args.length > 0) { /** {@link ScriptSelection.selectOnly}. */
|
||||
expect(scrambledEqual(
|
||||
call.args[0] as IScript[],
|
||||
expectedCall.args[0] as IScript[],
|
||||
)).to.equal(true);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
describe('getCurrentSelectionType', () => {
|
||||
@@ -106,9 +130,9 @@ describe('SelectionTypeHandler', () => {
|
||||
}];
|
||||
for (const testCase of testCases) {
|
||||
it(testCase.name, () => {
|
||||
const state = scenario.generateState(testCase.selection);
|
||||
const { stateStub } = scenario.generateState(testCase.selection);
|
||||
// act
|
||||
const actual = getCurrentSelectionType(createCheckContext(state));
|
||||
const actual = getCurrentSelectionType(createCheckContext(stateStub));
|
||||
// assert
|
||||
expect(actual).to.deep.equal(
|
||||
testCase.expected,
|
||||
@@ -130,14 +154,14 @@ describe('SelectionTypeHandler', () => {
|
||||
|
||||
function createMutationContext(state: ICategoryCollectionState): SelectionMutationContext {
|
||||
return {
|
||||
selection: state.selection,
|
||||
selection: state.selection.scripts,
|
||||
collection: state.collection,
|
||||
};
|
||||
}
|
||||
|
||||
function createCheckContext(state: ICategoryCollectionState): SelectionCheckContext {
|
||||
return {
|
||||
selection: state.selection,
|
||||
selection: state.selection.scripts,
|
||||
collection: state.collection,
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user