1b9be8fe2d
- 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.
84 lines
2.5 KiB
TypeScript
84 lines
2.5 KiB
TypeScript
import 'mocha';
|
|
import { expect } from 'chai';
|
|
import { useCollectionState } from '@/presentation/components/Shared/Hooks/UseCollectionState';
|
|
import { IReadOnlyApplicationContext } from '@/application/Context/IApplicationContext';
|
|
|
|
describe('UseCollectionState', () => {
|
|
describe('currentContext', () => {
|
|
it('multiple calls get the same instance', () => {
|
|
// act
|
|
const firstContext = useCollectionState().currentContext;
|
|
const secondContext = useCollectionState().currentContext;
|
|
// assert
|
|
expect(firstContext).to.equal(secondContext);
|
|
});
|
|
});
|
|
|
|
describe('currentState', () => {
|
|
it('returns current collection state', () => {
|
|
// arrange
|
|
const { currentContext } = useCollectionState();
|
|
const expectedState = currentContext.state;
|
|
|
|
// act
|
|
const { currentState } = useCollectionState();
|
|
const actualState = currentState.value;
|
|
|
|
// assert
|
|
expect(expectedState).to.equal(actualState);
|
|
});
|
|
it('returns changed collection state', () => {
|
|
// arrange
|
|
const { currentContext, currentState, modifyCurrentContext } = useCollectionState();
|
|
const newOs = pickNonCurrentOs(currentContext);
|
|
|
|
// act
|
|
modifyCurrentContext((context) => {
|
|
context.changeContext(newOs);
|
|
});
|
|
const expectedState = currentContext.state;
|
|
|
|
// assert
|
|
expect(currentState.value).to.equal(expectedState);
|
|
});
|
|
});
|
|
|
|
describe('modifyCurrentContext', () => {
|
|
it('modifies the current context', () => {
|
|
// arrange
|
|
const { currentContext, currentState, modifyCurrentContext } = useCollectionState();
|
|
const expectedOs = pickNonCurrentOs(currentContext);
|
|
|
|
// act
|
|
modifyCurrentContext((context) => {
|
|
context.changeContext(expectedOs);
|
|
});
|
|
|
|
// assert
|
|
expect(currentContext.state.os).to.equal(expectedOs);
|
|
expect(currentState.value.os).to.equal(expectedOs);
|
|
});
|
|
});
|
|
|
|
describe('modifyCurrentState', () => {
|
|
it('modifies the current state', () => {
|
|
// arrange
|
|
const { currentState, modifyCurrentState } = useCollectionState();
|
|
const expectedFilter = 'expected-filter';
|
|
|
|
// act
|
|
modifyCurrentState((state) => {
|
|
state.filter.setFilter(expectedFilter);
|
|
});
|
|
|
|
// assert
|
|
const actualFilter = currentState.value.filter.currentFilter.query;
|
|
expect(actualFilter).to.equal(expectedFilter);
|
|
});
|
|
});
|
|
});
|
|
|
|
function pickNonCurrentOs(context: IReadOnlyApplicationContext) {
|
|
return context.app.getSupportedOsList().find((os) => os !== context.state.os);
|
|
}
|