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

Refactor Vue components using Composition API #230

Browse Source 
- Migrate `StatefulVue`:
  - Introduce `UseCollectionState` that replaces its behavior and acts
    as a shared state store.
  - Add more encapsulated, granular functions based on read or write
    access to state in CollectionState.
- Some linting rules get activates due to new code-base compability to
  modern parses, fix linting errors.
  - Rename Dialog to ModalDialog as after refactoring,
    eslintvue/no-reserved-component-names does not allow name Dialog.
  - To comply with `vue/multi-word-component-names`, rename:
    - `Code`          -> `CodeInstruction`
    - `Handle`        -> `SliderHandle`
    - `Documentable`  -> `DocumentableNode`
    - `Node`          -> `NodeContent`
    - `INode`         -> `INodeContent`
    - `Responsive`    -> `SizeObserver`
- Remove `vue-property-decorator` and `vue-class-component`
  dependencies.
- Refactor `watch` with computed properties when possible for cleaner
  code.
  - Introduce `UseApplication` to reduce repeated code in new components
    that use `computed` more heavily than before.
- Change TypeScript target to `es2017` to allow top level async calls
  for getting application context/state/instance to simplify the code by
  removing async calls. However, mocha (unit and integration) tests do
  not run with top level awaits, so a workaround is used.
This commit is contained in:
undergroundwires
2023-08-07 13:16:39 +02:00
parent 3a594ac7fd
commit 1b9be8fe2d
67 changed files with 2135 additions and 1267 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
tests/unit/presentation/components/Scripts/View/Tree/ScriptNodeParser.spec.ts
View File

@@ -4,7 +4,7 @@ import {
getScriptNodeId, getScriptId, getCategoryNodeId, getCategoryId, parseSingleCategory,
parseAllCategories,
} from '@/presentation/components/Scripts/View/ScriptsTree/ScriptNodeParser';
import { INode, NodeType } from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/INode';
import { INodeContent, NodeType } from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/INodeContent';
import { IScript } from '@/domain/IScript';
import { ICategory } from '@/domain/ICategory';
import { CategoryStub } from '@tests/unit/shared/Stubs/CategoryStub';
@@ -87,7 +87,7 @@ function isReversible(category: ICategory): boolean {
return category.subCategories.every((c) => isReversible(c));
}
function expectSameCategory(node: INode, category: ICategory): void {
function expectSameCategory(node: INodeContent, category: ICategory): void {
expect(node.type).to.equal(NodeType.Category, getErrorMessage('type'));
expect(node.id).to.equal(getCategoryNodeId(category), getErrorMessage('id'));
expect(node.docs).to.equal(category.docs, getErrorMessage('docs'));
@@ -107,7 +107,7 @@ function expectSameCategory(node: INode, category: ICategory): void {
}
}
function expectSameScript(node: INode, script: IScript): void {
function expectSameScript(node: INodeContent, script: IScript): void {
expect(node.type).to.equal(NodeType.Script, getErrorMessage('type'));
expect(node.id).to.equal(getScriptNodeId(script), getErrorMessage('id'));
expect(node.docs).to.equal(script.docs, getErrorMessage('docs'));

8
tests/unit/presentation/components/Scripts/View/Tree/SelectableTree/LiquorTree/NodeWrapper/NodePredicateFilter.spec.ts
View File

@@ -1,7 +1,7 @@
import 'mocha';
import { expect } from 'chai';
import { ILiquorTreeExistingNode } from 'liquor-tree';
import { NodeType, INode } from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/INode';
import { NodeType, INodeContent } from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/INodeContent';
import { NodePredicateFilter } from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodePredicateFilter';
describe('NodePredicateFilter', () => {
@@ -18,7 +18,7 @@ describe('NodePredicateFilter', () => {
states: undefined,
children: [],
};
const expected: INode = {
const expected: INodeContent = {
id: 'script',
text: 'script-text',
isReversible: false,
@@ -26,8 +26,8 @@ describe('NodePredicateFilter', () => {
children: [],
type: NodeType.Script,
};
let actual: INode;
const predicate = (node: INode) => { actual = node; return true; };
let actual: INodeContent;
const predicate = (node: INodeContent) => { actual = node; return true; };
const sut = new NodePredicateFilter(predicate);
// act
sut.matcher('nop query', object);

2
tests/unit/presentation/components/Scripts/View/Tree/SelectableTree/LiquorTree/NodeWrapper/NodeStateUpdater.spec.ts
View File

@@ -1,7 +1,7 @@
import 'mocha';
import { expect } from 'chai';
import { ILiquorTreeNode } from 'liquor-tree';
import { NodeType } from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/INode';
import { NodeType } from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/INodeContent';
import { getNewState } from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodeStateUpdater';
describe('NodeStateUpdater', () => {

8
tests/unit/presentation/components/Scripts/View/Tree/SelectableTree/LiquorTree/NodeWrapper/NodeTranslator.spec.ts
View File

@@ -3,7 +3,7 @@ import { expect } from 'chai';
import {
ILiquorTreeExistingNode, ILiquorTreeNewNode, ILiquorTreeNodeData, ICustomLiquorTreeData,
} from 'liquor-tree';
import { NodeType, INode } from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/INode';
import { NodeType, INodeContent } from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/INodeContent';
import { convertExistingToNode, toNewLiquorTreeNode } from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/LiquorTree/NodeWrapper/NodeTranslator';
describe('NodeTranslator', () => {
@@ -27,7 +27,7 @@ describe('NodeTranslator', () => {
});
});
function getNode(): INode {
function getNode(): INodeContent {
return {
id: '1',
text: 'parentcategory',
@@ -62,7 +62,7 @@ function getNode(): INode {
};
}
function getExpectedExistingNodeData(node: INode): ILiquorTreeNodeData {
function getExpectedExistingNodeData(node: INodeContent): ILiquorTreeNodeData {
return {
text: node.text,
type: node.type,
@@ -71,7 +71,7 @@ function getExpectedExistingNodeData(node: INode): ILiquorTreeNodeData {
};
}
function getExpectedNewNodeData(node: INode): ICustomLiquorTreeData {
function getExpectedNewNodeData(node: INodeContent): ICustomLiquorTreeData {
return {
type: node.type,
docs: node.docs,

8
tests/unit/presentation/components/Scripts/View/Tree/SelectableTree/Node/Reverter/ReverterFactory.spec.ts
View File

@@ -1,6 +1,6 @@
import 'mocha';
import { expect } from 'chai';
import { INode, NodeType } from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/INode';
import { INodeContent, NodeType } from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/INodeContent';
import { getReverter } from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/Reverter/ReverterFactory';
import { ScriptReverter } from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/Reverter/ScriptReverter';
import { CategoryReverter } from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/Reverter/CategoryReverter';
@@ -14,7 +14,7 @@ describe('ReverterFactory', () => {
it('gets CategoryReverter for category node', () => {
// arrange
const category = new CategoryStub(0).withScriptIds('55');
const node = getNodeStub(getCategoryNodeId(category), NodeType.Category);
const node = getNodeContentStub(getCategoryNodeId(category), NodeType.Category);
const collection = new CategoryCollectionStub()
.withAction(category);
// act
@@ -25,7 +25,7 @@ describe('ReverterFactory', () => {
it('gets ScriptReverter for script node', () => {
// arrange
const script = new ScriptStub('test');
const node = getNodeStub(getScriptNodeId(script), NodeType.Script);
const node = getNodeContentStub(getScriptNodeId(script), NodeType.Script);
const collection = new CategoryCollectionStub()
.withAction(new CategoryStub(0).withScript(script));
// act
@@ -34,7 +34,7 @@ describe('ReverterFactory', () => {
expect(result instanceof ScriptReverter).to.equal(true);
});
});
function getNodeStub(nodeId: string, type: NodeType): INode {
function getNodeContentStub(nodeId: string, type: NodeType): INodeContent {
return {
id: nodeId,
text: 'text',

31
tests/unit/presentation/components/Shared/Hooks/UseApplication.spec.ts Normal file
View File

@@ -0,0 +1,31 @@
import 'mocha';
import { expect } from 'chai';
import { useApplication } from '@/presentation/components/Shared/Hooks/UseApplication';
import { ApplicationStub } from '@tests/unit/shared/Stubs/ApplicationStub';
import { ProjectInformationStub } from '@tests/unit/shared/Stubs/ProjectInformationStub';
describe('UseApplication', () => {
it('should return expected info', () => {
// arrange
const expectedInfo = new ProjectInformationStub()
.withName('expected-project-information');
const application = new ApplicationStub()
.withProjectInformation(expectedInfo);
// act
const { info } = useApplication(application);
// assert
expect(info).to.equal(expectedInfo);
});
it('should return expected application', () => {
// arrange
const expectedApp = new ApplicationStub()
.withProjectInformation(
new ProjectInformationStub().withName('expected-application'),
);
// act
const { application } = useApplication(expectedApp);
// assert
expect(application).to.equal(expectedApp);
});
});

238
tests/unit/presentation/components/Shared/Hooks/UseCollectionState.spec.ts Normal file
View File

@@ -0,0 +1,238 @@
import 'mocha';
import { expect } from 'chai';
import { useCollectionState } from '@/presentation/components/Shared/Hooks/UseCollectionState';
import { CategoryCollectionStateStub } from '@tests/unit/shared/Stubs/CategoryCollectionStateStub';
import { ApplicationContextStub } from '@tests/unit/shared/Stubs/ApplicationContextStub';
import { IReadOnlyCategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
import { ApplicationContextChangedEventStub } from '@tests/unit/shared/Stubs/ApplicationContextChangedEventStub';
import { OperatingSystem } from '@/domain/OperatingSystem';
import { itEachAbsentObjectValue } from '@tests/unit/shared/TestCases/AbsentTests';
describe('UseCollectionState', () => {
describe('currentContext', () => {
it('returns current context', () => {
// arrange
const expected = new ApplicationContextStub();
// act
const { currentContext } = useCollectionState(expected);
// assert
expect(currentContext).to.equal(expected);
});
});
describe('currentState', () => {
it('returns current collection state', () => {
// arrange
const expected = new CategoryCollectionStateStub();
const context = new ApplicationContextStub()
.withState(expected);
// act
const { currentState } = useCollectionState(context);
// assert
expect(currentState.value).to.equal(expected);
});
it('returns changed collection state', () => {
// arrange
const newState = new CategoryCollectionStateStub();
const context = new ApplicationContextStub();
const { currentState } = useCollectionState(context);
// act
context.dispatchContextChange(
new ApplicationContextChangedEventStub().withNewState(newState),
);
// assert
expect(currentState.value).to.equal(newState);
});
});
describe('onStateChange', () => {
describe('throws when callback is absent', () => {
itEachAbsentObjectValue((absentValue) => {
// arrange
const expectedError = 'missing state handler';
const context = new ApplicationContextStub();
const { onStateChange } = useCollectionState(context);
// act
const act = () => onStateChange(absentValue);
// assert
expect(act).to.throw(expectedError);
});
});
it('call handler when context state changes', () => {
// arrange
const expected = true;
const context = new ApplicationContextStub();
const { onStateChange } = useCollectionState(context);
let wasCalled = false;
// act
onStateChange(() => {
wasCalled = true;
});
context.dispatchContextChange();
// assert
expect(wasCalled).to.equal(expected);
});
it('call handler immediately when immediate is true', () => {
// arrange
const expected = true;
const context = new ApplicationContextStub();
const { onStateChange } = useCollectionState(context);
let wasCalled = false;
// act
onStateChange(() => {
wasCalled = true;
}, { immediate: true });
// assert
expect(wasCalled).to.equal(expected);
});
it('does not call handler immediately when immediate is false', () => {
// arrange
const expected = false;
const context = new ApplicationContextStub();
const { onStateChange } = useCollectionState(context);
let wasCalled = false;
// act
onStateChange(() => {
wasCalled = true;
}, { immediate: false });
// assert
expect(wasCalled).to.equal(expected);
});
it('call multiple handlers when context state changes', () => {
// arrange
const expected = 5;
const context = new ApplicationContextStub();
const { onStateChange } = useCollectionState(context);
let totalCalled = 0;
// act
onStateChange(() => {
totalCalled++;
}, { immediate: false });
for (let i = 0; i < expected; i++) {
context.dispatchContextChange();
}
// assert
expect(totalCalled).to.equal(expected);
});
it('call handler with new state after state changes', () => {
// arrange
const expected = new CategoryCollectionStateStub();
let actual: IReadOnlyCategoryCollectionState;
const context = new ApplicationContextStub();
const { onStateChange } = useCollectionState(context);
// act
onStateChange((newState) => {
actual = newState;
});
context.dispatchContextChange(
new ApplicationContextChangedEventStub().withNewState(expected),
);
// assert
expect(actual).to.equal(expected);
});
it('call handler with old state after state changes', () => {
// arrange
const expected = new CategoryCollectionStateStub();
let actual: IReadOnlyCategoryCollectionState;
const context = new ApplicationContextStub();
const { onStateChange } = useCollectionState(context);
// act
onStateChange((_, oldState) => {
actual = oldState;
});
context.dispatchContextChange(
new ApplicationContextChangedEventStub().withOldState(expected),
);
// assert
expect(actual).to.equal(expected);
});
});
describe('modifyCurrentState', () => {
describe('throws when callback is absent', () => {
itEachAbsentObjectValue((absentValue) => {
// arrange
const expectedError = 'missing state mutator';
const context = new ApplicationContextStub();
const { modifyCurrentState } = useCollectionState(context);
// act
const act = () => modifyCurrentState(absentValue);
// assert
expect(act).to.throw(expectedError);
});
});
it('modifies current collection state', () => {
// arrange
const oldOs = OperatingSystem.Windows;
const newOs = OperatingSystem.Linux;
const state = new CategoryCollectionStateStub()
.withOs(oldOs);
const context = new ApplicationContextStub()
.withState(state);
const { modifyCurrentState } = useCollectionState(context);
// act
modifyCurrentState((mutableState) => {
const stubState = (mutableState as CategoryCollectionStateStub);
stubState.withOs(newOs);
});
const actualOs = context.state.collection.os;
// assert
expect(actualOs).to.equal(newOs);
});
});
describe('modifyCurrentContext', () => {
describe('throws when callback is absent', () => {
itEachAbsentObjectValue((absentValue) => {
// arrange
const expectedError = 'missing context mutator';
const context = new ApplicationContextStub();
const { modifyCurrentContext } = useCollectionState(context);
// act
const act = () => modifyCurrentContext(absentValue);
// assert
expect(act).to.throw(expectedError);
});
});
it('modifies the current context', () => {
// arrange
const oldState = new CategoryCollectionStateStub()
.withOs(OperatingSystem.Linux);
const newState = new CategoryCollectionStateStub()
.withOs(OperatingSystem.macOS);
const context = new ApplicationContextStub()
.withState(oldState);
const { modifyCurrentContext } = useCollectionState(context);
// act
modifyCurrentContext((mutableContext) => {
const contextStub = mutableContext as ApplicationContextStub;
contextStub.withState(newState);
});
const actualState = context.state;
// assert
expect(actualState).to.equal(newState);
});
});
});