Files
privacy.sexy/tests/unit/application/Context/State/CategoryCollectionState.spec.ts
undergroundwires cb42f11b97 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

168 lines
6.1 KiB
TypeScript

import { describe, it, expect } from 'vitest';
import { UserSelectionStub } from '@tests/unit/shared/Stubs/UserSelectionStub';
import { CategoryCollectionState } from '@/application/Context/State/CategoryCollectionState';
import { OperatingSystem } from '@/domain/OperatingSystem';
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('uses the correct scripting definition', () => {
// arrange
const expectedScripting = new ScriptingDefinitionStub();
const collection = new CategoryCollectionStub()
.withScripting(expectedScripting);
let actualScripting: IScriptingDefinition | undefined;
const codeFactoryMock: CodeFactory = (_, scripting) => {
actualScripting = scripting;
return new ApplicationCodeStub();
};
// act
new CategoryCollectionStateBuilder()
.withCollection(collection)
.withCodeFactory(codeFactoryMock)
.build();
// assert
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('matches the operating system of the collection', () => {
// arrange
const expected = OperatingSystem.macOS;
const collection = new CategoryCollectionStub()
.withOs(expected);
// act
const sut = new CategoryCollectionStateBuilder()
.withCollection(collection)
.build();
// assert
const actual = sut.os;
expect(expected).to.equal(actual);
});
});
describe('selection', () => {
it('initializes with empty scripts', () => {
// arrange
const expectedScripts = [];
let actualScripts: readonly SelectedScript[] | undefined;
const selectionFactoryMock: SelectionFactory = (_, scripts) => {
actualScripts = scripts;
return new UserSelectionStub();
};
// act
new CategoryCollectionStateBuilder()
.withSelectionFactory(selectionFactoryMock)
.build();
// assert
expectExists(actualScripts);
expect(actualScripts).to.deep.equal(expectedScripts);
});
it('initializes with the provided collection', () => {
// arrange
const expectedCollection = new CategoryCollectionStub();
let actualCollection: ICategoryCollection | undefined;
const selectionFactoryMock: SelectionFactory = (collection) => {
actualCollection = collection;
return new UserSelectionStub();
};
// act
new CategoryCollectionStateBuilder()
.withCollection(expectedCollection)
.withSelectionFactory(selectionFactoryMock)
.build();
// assert
expectExists(actualCollection);
expect(actualCollection).to.equal(expectedCollection);
});
});
describe('filter', () => {
it('initializes with the provided collection for filtering', () => {
// arrange
const expectedCollection = new CategoryCollectionStub();
let actualCollection: ICategoryCollection | undefined;
const filterFactoryMock: FilterFactory = (collection) => {
actualCollection = collection;
return new UserFilterStub();
};
// act
new CategoryCollectionStateBuilder()
.withCollection(expectedCollection)
.withFilterFactory(filterFactoryMock)
.build();
// assert
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,
);
}
}