44r0n7/privacy.sexy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix code highlighting and optimize category select

Browse Source 
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
2023-11-18 22:23:27 +01:00
parent 4531645b4c
commit cb42f11b97
79 changed files with 2733 additions and 1351 deletions
Download Patch File Download Diff File Expand all files Collapse all files

191
tests/unit/application/Context/State/CategoryCollectionState.spec.ts
View File

@@ -1,106 +1,167 @@
import { describe, it, expect } from 'vitest';
import { UserSelection } from '@/application/Context/State/Selection/UserSelection';
import { ApplicationCode } from '@/application/Context/State/Code/ApplicationCode';
import { UserSelectionStub } from '@tests/unit/shared/Stubs/UserSelectionStub';
import { CategoryCollectionState } from '@/application/Context/State/CategoryCollectionState';
import { OperatingSystem } from '@/domain/OperatingSystem';
import { IScript } from '@/domain/IScript';
import { ScriptStub } from '@tests/unit/shared/Stubs/ScriptStub';
import { CategoryStub } from '@tests/unit/shared/Stubs/CategoryStub';
import { CategoryCollectionStub } from '@tests/unit/shared/Stubs/CategoryCollectionStub';
import { ScriptingDefinitionStub } from '@tests/unit/shared/Stubs/ScriptingDefinitionStub';
import { ICategoryCollection } from '@/domain/ICategoryCollection';
import { ApplicationCodeStub } from '@tests/unit/shared/Stubs/ApplicationCodeStub';
import { IScriptingDefinition } from '@/domain/IScriptingDefinition';
import { expectExists } from '@tests/shared/Assertions/ExpectExists';
import { ReadonlyScriptSelection } from '@/application/Context/State/Selection/Script/ScriptSelection';
import { ScriptSelectionStub } from '@tests/unit/shared/Stubs/ScriptSelectionStub';
import { SelectedScript } from '@/application/Context/State/Selection/Script/SelectedScript';
import { UserFilterStub } from '@tests/unit/shared/Stubs/UserFilterStub';
import type { CodeFactory, FilterFactory, SelectionFactory } from '@/application/Context/State/CategoryCollectionState';
describe('CategoryCollectionState', () => {
describe('code', () => {
it('initialized with empty code', () => {
// arrange
const collection = new CategoryCollectionStub();
const sut = new CategoryCollectionState(collection);
// act
const code = sut.code.current;
// assert
expect(!code);
});
it('reacts to selection changes as expected', () => {
it('uses the correct scripting definition', () => {
// arrange
const expectedScripting = new ScriptingDefinitionStub();
const collection = new CategoryCollectionStub()
.withAction(new CategoryStub(0).withScriptIds('scriptId'));
const selectionStub = new UserSelection(collection, []);
const expectedCodeGenerator = new ApplicationCode(selectionStub, collection.scripting);
selectionStub.selectAll();
const expectedCode = expectedCodeGenerator.current;
.withScripting(expectedScripting);
let actualScripting: IScriptingDefinition | undefined;
const codeFactoryMock: CodeFactory = (_, scripting) => {
actualScripting = scripting;
return new ApplicationCodeStub();
};
// act
const sut = new CategoryCollectionState(collection);
sut.selection.selectAll();
const actualCode = sut.code.current;
new CategoryCollectionStateBuilder()
.withCollection(collection)
.withCodeFactory(codeFactoryMock)
.build();
// assert
expect(actualCode).to.equal(expectedCode);
expectExists(actualScripting);
expect(actualScripting).to.equal(expectedScripting);
});
it('initializes with the expected script selection', () => {
// arrange
const expectedScriptSelection = new ScriptSelectionStub();
const selectionFactoryMock: SelectionFactory = () => {
return new UserSelectionStub().withScripts(expectedScriptSelection);
};
let actualScriptSelection: ReadonlyScriptSelection | undefined;
const codeFactoryMock: CodeFactory = (scriptSelection) => {
actualScriptSelection = scriptSelection;
return new ApplicationCodeStub();
};
// act
new CategoryCollectionStateBuilder()
.withCodeFactory(codeFactoryMock)
.withSelectionFactory(selectionFactoryMock)
.build();
// assert
expectExists(actualScriptSelection);
expect(actualScriptSelection).to.equal(expectedScriptSelection);
});
});
describe('os', () => {
it('same as its collection', () => {
it('matches the operating system of the collection', () => {
// arrange
const expected = OperatingSystem.macOS;
const collection = new CategoryCollectionStub()
.withOs(expected);
// act
const sut = new CategoryCollectionState(collection);
const sut = new CategoryCollectionStateBuilder()
.withCollection(collection)
.build();
// assert
const actual = sut.os;
expect(expected).to.equal(actual);
});
});
describe('selection', () => {
it('initialized with no selection', () => {
it('initializes with empty scripts', () => {
// arrange
const collection = new CategoryCollectionStub();
const sut = new CategoryCollectionState(collection);
const expectedScripts = [];
let actualScripts: readonly SelectedScript[] | undefined;
const selectionFactoryMock: SelectionFactory = (_, scripts) => {
actualScripts = scripts;
return new UserSelectionStub();
};
// act
const actual = sut.selection.selectedScripts.length;
new CategoryCollectionStateBuilder()
.withSelectionFactory(selectionFactoryMock)
.build();
// assert
expect(actual).to.equal(0);
expectExists(actualScripts);
expect(actualScripts).to.deep.equal(expectedScripts);
});
it('can select a script from current collection', () => {
it('initializes with the provided collection', () => {
// arrange
const expectedScript = new ScriptStub('scriptId');
const collection = new CategoryCollectionStub()
.withAction(new CategoryStub(0).withScript(expectedScript));
const sut = new CategoryCollectionState(collection);
const expectedCollection = new CategoryCollectionStub();
let actualCollection: ICategoryCollection | undefined;
const selectionFactoryMock: SelectionFactory = (collection) => {
actualCollection = collection;
return new UserSelectionStub();
};
// act
sut.selection.selectAll();
new CategoryCollectionStateBuilder()
.withCollection(expectedCollection)
.withSelectionFactory(selectionFactoryMock)
.build();
// assert
expect(sut.selection.selectedScripts.length).to.equal(1);
expect(sut.selection.isSelected(expectedScript.id)).to.equal(true);
expectExists(actualCollection);
expect(actualCollection).to.equal(expectedCollection);
});
});
describe('filter', () => {
it('initialized with an empty filter', () => {
it('initializes with the provided collection for filtering', () => {
// arrange
const collection = new CategoryCollectionStub();
const sut = new CategoryCollectionState(collection);
const expectedCollection = new CategoryCollectionStub();
let actualCollection: ICategoryCollection | undefined;
const filterFactoryMock: FilterFactory = (collection) => {
actualCollection = collection;
return new UserFilterStub();
};
// act
const actual = sut.filter.currentFilter;
new CategoryCollectionStateBuilder()
.withCollection(expectedCollection)
.withFilterFactory(filterFactoryMock)
.build();
// assert
expect(actual).to.equal(undefined);
});
it('can match a script from current collection', () => {
// arrange
const scriptNameFilter = 'scriptName';
const expectedScript = new ScriptStub('scriptId')
.withName(scriptNameFilter);
const collection = new CategoryCollectionStub()
.withAction(new CategoryStub(0).withScript(expectedScript));
const sut = new CategoryCollectionState(collection);
// act
let actualScript: IScript | undefined;
sut.filter.filterChanged.on((result) => {
result.visit({
onApply: (filter) => {
[actualScript] = filter.scriptMatches;
},
});
});
sut.filter.applyFilter(scriptNameFilter);
// assert
expect(expectedScript).to.equal(actualScript);
expectExists(expectedCollection);
expect(expectedCollection).to.equal(actualCollection);
});
});
});
class CategoryCollectionStateBuilder {
private collection: ICategoryCollection = new CategoryCollectionStub();
private codeFactory: CodeFactory = () => new ApplicationCodeStub();
private selectionFactory: SelectionFactory = () => new UserSelectionStub();
private filterFactory: FilterFactory = () => new UserFilterStub();
public withCollection(collection: ICategoryCollection): this {
this.collection = collection;
return this;
}
public withCodeFactory(codeFactory: CodeFactory): this {
this.codeFactory = codeFactory;
return this;
}
public withSelectionFactory(selectionFactory: SelectionFactory): this {
this.selectionFactory = selectionFactory;
return this;
}
public withFilterFactory(filterFactory: FilterFactory): this {
this.filterFactory = filterFactory;
return this;
}
public build() {
return new CategoryCollectionState(
this.collection,
this.selectionFactory,
this.codeFactory,
this.filterFactory,
);
}
}