Files
privacy.sexy/tests/unit/presentation/bootstrapping/DependencyProvider.spec.ts
undergroundwires dd71536316 Fix misaligned tooltip positions in modal dialogs
This commit fixes a bug that causes tooltips to be slightly misaligned.

Tooltip positioning was incorrect during modal transitions due to their
initial movement, causing tooltips to align incorrectly at the start of
the animation rather than the end.

One way to solve this would be using `autoUpdate` from `floating-ui`
with `animationFrame: true`. However, this recalculates positions tens
of times per second, impacting performance. This is a monkey solution.

This commit adopts a more efficient approach by updating tooltip
positions only at the end of the transitions, which reduces calculations
and conserves resources.

Key changes:

- Addd transition end event listener for updating tooltip positions.
- Use throttling to eliminate excessive position recalculations.

Other supporting changes:

- Improve throttle function to support efficient recalculations of
  positions:
  - Add ability to optionally exclude the first execution (leading
    call).
  - Refactor to simplify it make it easier to follow and read.
  - Fix a bug where initial calls were incorrectly throttled if
    `dateNow()` returned `0`.
- Introduce and use a global hook for efficient DOM event management.
  This greatily introduce safety, reuse and testability of event
  listening.
2024-05-08 15:24:12 +02:00

115 lines
4.0 KiB
TypeScript

import { describe } from 'vitest';
import { VueDependencyInjectionApiStub } from '@tests/unit/shared/Stubs/VueDependencyInjectionApiStub';
import { InjectionKeys } from '@/presentation/injectionSymbols';
import { provideDependencies, type VueDependencyInjectionApi } from '@/presentation/bootstrapping/DependencyProvider';
import { ApplicationContextStub } from '@tests/unit/shared/Stubs/ApplicationContextStub';
import { itIsSingleton } from '@tests/unit/shared/TestCases/SingletonTests';
import type { IApplicationContext } from '@/application/Context/IApplicationContext';
describe('DependencyProvider', () => {
describe('provideDependencies', () => {
const testCases: {
readonly [K in keyof typeof InjectionKeys]: (injectionKey: symbol) => void;
} = {
useCollectionState: createTransientTests(),
useApplication: createSingletonTests(),
useRuntimeEnvironment: createSingletonTests(),
useAutoUnsubscribedEvents: createTransientTests(),
useClipboard: createTransientTests(),
useCurrentCode: createTransientTests(),
useUserSelectionState: createTransientTests(),
useLogger: createTransientTests(),
useCodeRunner: createTransientTests(),
useDialog: createTransientTests(),
useScriptDiagnosticsCollector: createTransientTests(),
useAutoUnsubscribedEventListener: createTransientTests(),
};
Object.entries(testCases).forEach(([key, runTests]) => {
const registeredKey = InjectionKeys[key].key;
describe(`Key: "${registeredKey.toString()}"`, () => {
runTests(registeredKey);
});
});
});
});
function createTransientTests() {
return (injectionKey: symbol) => {
it('should register a function when transient dependency is resolved', () => {
// arrange
const api = new VueDependencyInjectionApiStub();
// act
new ProvideDependenciesBuilder()
.withApi(api)
.provideDependencies();
// expect
const registeredObject = api.inject(injectionKey);
expect(registeredObject).to.be.instanceOf(Function);
});
it('should return different instances for transient dependency', () => {
// arrange
const api = new VueDependencyInjectionApiStub();
// act
new ProvideDependenciesBuilder()
.withApi(api)
.provideDependencies();
// expect
const registeredObject = api.inject(injectionKey);
const factory = registeredObject as () => unknown;
const firstResult = factory();
const secondResult = factory();
expect(firstResult).to.not.equal(secondResult);
});
};
}
function createSingletonTests() {
return (injectionKey: symbol) => {
it('should register an object when singleton dependency is resolved', () => {
// arrange
const api = new VueDependencyInjectionApiStub();
// act
new ProvideDependenciesBuilder()
.withApi(api)
.provideDependencies();
// expect
const registeredObject = api.inject(injectionKey);
expect(registeredObject).to.be.instanceOf(Object);
});
describe('should return the same instance for singleton dependency', () => {
// arrange
const singletonContext = new ApplicationContextStub();
const api = new VueDependencyInjectionApiStub();
new ProvideDependenciesBuilder()
.withContext(singletonContext)
.withApi(api)
.provideDependencies();
// act
const getRegisteredInstance = () => api.inject(injectionKey);
// assert
itIsSingleton({
getter: getRegisteredInstance,
});
});
};
}
class ProvideDependenciesBuilder {
private context: IApplicationContext = new ApplicationContextStub();
private api: VueDependencyInjectionApi = new VueDependencyInjectionApiStub();
public withApi(api: VueDependencyInjectionApi): this {
this.api = api;
return this;
}
public withContext(context: IApplicationContext): this {
this.context = context;
return this;
}
public provideDependencies() {
return provideDependencies(this.context, this.api);
}
}