This commit introduces native operating system file dialogs in the desktop application replacing the existing web-based dialogs. It lays the foundation for future enhancements such as: - Providing error messages when saving or executing files, addressing #264. - Creating system restore points, addressing #50. Documentation updates: - Update `desktop-vs-web-features.md` with added functionality. - Update `README.md` with security feature highlights. - Update home page documentation to emphasize security features. Other supporting changes include: - Integrate IPC communication channels for secure Electron dialog API interactions. - Refactor `IpcRegistration` for more type-safety and simplicity. - Introduce a Vue hook to encapsulate dialog functionality. - Improve errors during IPC registration for easier troubleshooting. - Move `ClientLoggerFactory` for consistency in hooks organization and remove `LoggerFactory` interface for simplicity. - Add tests for the save file dialog in the browser context. - Add `Blob` polyfill in tests to compensate for the missing `blob.text()` function in `jsdom` (see jsdom/jsdom#2555). Improve environment detection logic: - Treat test environment as browser environments to correctly activate features based on the environment. This resolves issues where the environment is misidentified as desktop, but Electron preloader APIs are missing. - Rename `isDesktop` environment identification variable to `isRunningAsDesktopApplication` for better clarity and to avoid confusion with desktop environments in web/browser/test environments. - Simplify `BrowserRuntimeEnvironment` to consistently detect non-desktop application environments. - Improve environment detection for Electron main process (electron/electron#2288).
This commit is contained in:
undergroundwires
@@ -245,7 +245,7 @@ function initializeDragHandlerWithMocks(mocks?: {
|
||||
}
|
||||
|
||||
function createMockPointerEvent(...args: ConstructorArguments<typeof PointerEvent>): PointerEvent {
|
||||
return new MouseEvent(...args) as PointerEvent; // JSDom does not support `PointerEvent` constructor, https://github.com/jsdom/jsdom/issues/2527
|
||||
return new MouseEvent(...args) as PointerEvent; // jsdom does not support `PointerEvent` constructor, https://github.com/jsdom/jsdom/issues/2527
|
||||
}
|
||||
|
||||
class DragDomModifierMock implements DragDomModifier {
|
||||
|
||||
@@ -0,0 +1,88 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { determineDialogBasedOnEnvironment, WindowDialogCreationFunction, BrowserDialogCreationFunction } from '@/presentation/components/Shared/Hooks/Dialog/ClientDialogFactory';
|
||||
import { RuntimeEnvironment } from '@/infrastructure/RuntimeEnvironment/RuntimeEnvironment';
|
||||
import { RuntimeEnvironmentStub } from '@tests/unit/shared/Stubs/RuntimeEnvironmentStub';
|
||||
import { DialogStub } from '@tests/unit/shared/Stubs/DialogStub';
|
||||
import { collectExceptionMessage } from '@tests/unit/shared/ExceptionCollector';
|
||||
|
||||
describe('ClientDialogFactory', () => {
|
||||
describe('determineDialogBasedOnEnvironment', () => {
|
||||
describe('non-desktop environment', () => {
|
||||
it('returns browser dialog', () => {
|
||||
// arrange
|
||||
const expectedDialog = new DialogStub();
|
||||
const context = new DialogCreationTestSetup()
|
||||
.withEnvironment(new RuntimeEnvironmentStub().withIsRunningAsDesktopApplication(false))
|
||||
.withBrowserDialogFactory(() => expectedDialog);
|
||||
|
||||
// act
|
||||
const actualDialog = context.createDialogForTest();
|
||||
|
||||
// assert
|
||||
expect(expectedDialog).to.equal(actualDialog);
|
||||
});
|
||||
});
|
||||
describe('desktop environment', () => {
|
||||
it('returns window-injected dialog', () => {
|
||||
// arrange
|
||||
const expectedDialog = new DialogStub();
|
||||
const context = new DialogCreationTestSetup()
|
||||
.withEnvironment(new RuntimeEnvironmentStub().withIsRunningAsDesktopApplication(true))
|
||||
.withWindowInjectedDialogFactory(() => expectedDialog);
|
||||
|
||||
// act
|
||||
const actualDialog = context.createDialogForTest();
|
||||
|
||||
// assert
|
||||
expect(expectedDialog).to.equal(actualDialog);
|
||||
});
|
||||
it('throws error when window-injected dialog is unavailable', () => {
|
||||
// arrange
|
||||
const expectedError = 'The Dialog API could not be retrieved from the window object.';
|
||||
const context = new DialogCreationTestSetup()
|
||||
.withEnvironment(new RuntimeEnvironmentStub().withIsRunningAsDesktopApplication(true))
|
||||
.withWindowInjectedDialogFactory(() => undefined);
|
||||
|
||||
// act
|
||||
const act = () => context.createDialogForTest();
|
||||
|
||||
// assert
|
||||
const actualError = collectExceptionMessage(act);
|
||||
expect(actualError).to.include(expectedError);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
class DialogCreationTestSetup {
|
||||
private environment: RuntimeEnvironment = new RuntimeEnvironmentStub();
|
||||
|
||||
private browserDialogFactory: BrowserDialogCreationFunction = () => new DialogStub();
|
||||
|
||||
private windowInjectedDialogFactory: WindowDialogCreationFunction = () => new DialogStub();
|
||||
|
||||
public withEnvironment(environment: RuntimeEnvironment): this {
|
||||
this.environment = environment;
|
||||
return this;
|
||||
}
|
||||
|
||||
public withBrowserDialogFactory(browserDialogFactory: BrowserDialogCreationFunction): this {
|
||||
this.browserDialogFactory = browserDialogFactory;
|
||||
return this;
|
||||
}
|
||||
|
||||
public withWindowInjectedDialogFactory(
|
||||
windowInjectedDialogFactory: WindowDialogCreationFunction,
|
||||
): this {
|
||||
this.windowInjectedDialogFactory = windowInjectedDialogFactory;
|
||||
return this;
|
||||
}
|
||||
|
||||
public createDialogForTest() {
|
||||
return determineDialogBasedOnEnvironment(
|
||||
this.environment,
|
||||
this.windowInjectedDialogFactory,
|
||||
this.browserDialogFactory,
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { DialogFactory, useDialog } from '@/presentation/components/Shared/Hooks/Dialog/UseDialog';
|
||||
import { DialogStub } from '@tests/unit/shared/Stubs/DialogStub';
|
||||
|
||||
describe('UseDialog', () => {
|
||||
describe('useDialog', () => {
|
||||
it('returns provided dialog instance', () => {
|
||||
// arrange
|
||||
const expectedDialog = new DialogStub();
|
||||
const factoryMock: DialogFactory = () => expectedDialog;
|
||||
|
||||
// act
|
||||
const { dialog } = useDialog(factoryMock);
|
||||
|
||||
// assert
|
||||
expect(dialog).to.equal(expectedDialog);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,159 @@
|
||||
// eslint-disable-next-line max-classes-per-file
|
||||
import { describe, it } from 'vitest';
|
||||
import { RuntimeEnvironment } from '@/infrastructure/RuntimeEnvironment/RuntimeEnvironment';
|
||||
import { Logger } from '@/application/Common/Log/Logger';
|
||||
import { RuntimeEnvironmentStub } from '@tests/unit/shared/Stubs/RuntimeEnvironmentStub';
|
||||
import { itIsSingleton } from '@tests/unit/shared/TestCases/SingletonTests';
|
||||
import { LoggerStub } from '@tests/unit/shared/Stubs/LoggerStub';
|
||||
import { ClientLoggerFactory, LoggerCreationFunction, WindowAccessor } from '@/presentation/components/Shared/Hooks/Log/ClientLoggerFactory';
|
||||
|
||||
describe('ClientLoggerFactory', () => {
|
||||
describe('Current', () => {
|
||||
describe('singleton behavior', () => {
|
||||
itIsSingleton({
|
||||
getter: () => ClientLoggerFactory.Current,
|
||||
expectedType: ClientLoggerFactory,
|
||||
});
|
||||
});
|
||||
});
|
||||
describe('logger instantiation based on environment', () => {
|
||||
const testCases: Array<{
|
||||
readonly description: string,
|
||||
readonly build: (
|
||||
builder: ClientLoggerFactoryBuilder,
|
||||
expectedLogger: Logger,
|
||||
) => ClientLoggerFactory,
|
||||
}> = [
|
||||
{
|
||||
description: 'production desktop environment',
|
||||
build: (b, expectedLogger) => b
|
||||
.withWindowInjectedLoggerFactory(() => expectedLogger)
|
||||
.withEnvironment(new RuntimeEnvironmentStub()
|
||||
.withIsRunningAsDesktopApplication(true)
|
||||
.withIsNonProduction(false))
|
||||
.withWindowAccessor(() => createWindowWithLogger())
|
||||
.build(),
|
||||
},
|
||||
{
|
||||
description: 'non-production desktop environment',
|
||||
build: (b, expectedLogger) => b
|
||||
.withWindowInjectedLoggerFactory(() => expectedLogger)
|
||||
.withEnvironment(new RuntimeEnvironmentStub()
|
||||
.withIsRunningAsDesktopApplication(true)
|
||||
.withIsNonProduction(true))
|
||||
.withWindowAccessor(() => createWindowWithLogger())
|
||||
.build(),
|
||||
},
|
||||
{
|
||||
description: 'non-production web environment',
|
||||
build: (b, expectedLogger) => b
|
||||
.withConsoleLoggerFactory(() => expectedLogger)
|
||||
.withEnvironment(new RuntimeEnvironmentStub()
|
||||
.withIsRunningAsDesktopApplication(false)
|
||||
.withIsNonProduction(true))
|
||||
.withWindowAccessor(() => createWindowWithLogger())
|
||||
.build(),
|
||||
},
|
||||
{
|
||||
description: 'production web environment',
|
||||
build: (b, expectedLogger) => b
|
||||
.withNoopLoggerFactory(() => expectedLogger)
|
||||
.withEnvironment(new RuntimeEnvironmentStub()
|
||||
.withIsRunningAsDesktopApplication(false)
|
||||
.withIsNonProduction(false))
|
||||
.withWindowAccessor(() => createWindowWithLogger())
|
||||
.build(),
|
||||
},
|
||||
{
|
||||
description: 'unit/integration tests environment',
|
||||
build: (b, expectedLogger) => b
|
||||
.withNoopLoggerFactory(() => expectedLogger)
|
||||
.withEnvironment(new RuntimeEnvironmentStub().withIsRunningAsDesktopApplication(true))
|
||||
.withWindowAccessor(() => createWindowWithLogger(null))
|
||||
.build(),
|
||||
},
|
||||
];
|
||||
testCases.forEach(({ description, build }) => {
|
||||
it(`creates correct logger for ${description}`, () => {
|
||||
// arrange
|
||||
const expectedLogger = new LoggerStub();
|
||||
const factory = build(new ClientLoggerFactoryBuilder(), expectedLogger);
|
||||
// act
|
||||
const { logger } = factory;
|
||||
// assert
|
||||
expect(logger).to.equal(expectedLogger);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function createWindowWithLogger(logger: Logger | null = new LoggerStub()): Window {
|
||||
return {
|
||||
log: logger,
|
||||
} as unknown as Window;
|
||||
}
|
||||
|
||||
class ClientLoggerFactoryBuilder {
|
||||
private environment: RuntimeEnvironment = new RuntimeEnvironmentStub();
|
||||
|
||||
private windowAccessor: WindowAccessor = () => ({} as Window);
|
||||
|
||||
private noopLoggerFactory: LoggerCreationFunction = () => new LoggerStub();
|
||||
|
||||
private windowInjectedLoggerFactory: LoggerCreationFunction = () => new LoggerStub();
|
||||
|
||||
private consoleLoggerFactory: LoggerCreationFunction = () => new LoggerStub();
|
||||
|
||||
public withWindowAccessor(windowAccessor: WindowAccessor): this {
|
||||
this.windowAccessor = windowAccessor;
|
||||
return this;
|
||||
}
|
||||
|
||||
public withEnvironment(environment: RuntimeEnvironment): this {
|
||||
this.environment = environment;
|
||||
return this;
|
||||
}
|
||||
|
||||
public withNoopLoggerFactory(factory: LoggerCreationFunction): this {
|
||||
this.noopLoggerFactory = factory;
|
||||
return this;
|
||||
}
|
||||
|
||||
public withWindowInjectedLoggerFactory(factory: LoggerCreationFunction): this {
|
||||
this.windowInjectedLoggerFactory = factory;
|
||||
return this;
|
||||
}
|
||||
|
||||
public withConsoleLoggerFactory(factory: LoggerCreationFunction): this {
|
||||
this.consoleLoggerFactory = factory;
|
||||
return this;
|
||||
}
|
||||
|
||||
public build(): ClientLoggerFactory {
|
||||
return new TestableClientLoggerFactory(
|
||||
this.environment,
|
||||
this.windowAccessor,
|
||||
this.noopLoggerFactory,
|
||||
this.windowInjectedLoggerFactory,
|
||||
this.consoleLoggerFactory,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class TestableClientLoggerFactory extends ClientLoggerFactory {
|
||||
public constructor(
|
||||
environment: RuntimeEnvironment,
|
||||
windowAccessor: WindowAccessor,
|
||||
noopLoggerFactory: LoggerCreationFunction,
|
||||
windowInjectedLoggerFactory: LoggerCreationFunction,
|
||||
consoleLoggerFactory: LoggerCreationFunction,
|
||||
) {
|
||||
super(
|
||||
environment,
|
||||
windowAccessor,
|
||||
noopLoggerFactory,
|
||||
windowInjectedLoggerFactory,
|
||||
consoleLoggerFactory,
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,16 +1,17 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { useLogger } from '@/presentation/components/Shared/Hooks/UseLogger';
|
||||
import { LoggerStub } from '@tests/unit/shared/Stubs/LoggerStub';
|
||||
import { LoggerFactoryStub } from '@tests/unit/shared/Stubs/LoggerFactoryStub';
|
||||
import { useLogger } from '@/presentation/components/Shared/Hooks/Log/UseLogger';
|
||||
import { LoggerFactory } from '@/presentation/components/Shared/Hooks/Log/LoggerFactory';
|
||||
|
||||
describe('UseLogger', () => {
|
||||
it('returns expected logger from factory', () => {
|
||||
// arrange
|
||||
const expectedLogger = new LoggerStub();
|
||||
const factory = new LoggerFactoryStub()
|
||||
.withLogger(expectedLogger);
|
||||
const factoryMock: LoggerFactory = {
|
||||
logger: expectedLogger,
|
||||
};
|
||||
// act
|
||||
const { log: actualLogger } = useLogger(factory);
|
||||
const { log: actualLogger } = useLogger(factoryMock);
|
||||
// assert
|
||||
expect(actualLogger).to.equal(expectedLogger);
|
||||
});
|
||||
Reference in New Issue
Block a user