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

Fix unresponsive copy button on instructions modal

Browse Source 
This commit fixes the bug where the "Copy" button does not copy when
clicked on download instructions modal (on Linux and macOS).

This commit also introduces several improvements to the UI components
related to copy action and their interaction with the clipboard feature.

It adds more tests to avoid regression of the bugs and improves
maintainability, testability and adherence to Vue's reactive principles.

Changes include:

- Fix non-responsive copy button in the download instructions modal by
  triggering a `click` event in `AppIcon.vue`.
- Improve `TheCodeButtons.vue`:
  - Remove redundant `getCurrentCode` function.
  - Separate components for each button for better separation of
    concerns and higher testability.
  - Use the `gap` property in the flexbox layout, replacing the less
    explicit sibling combinator approach.
- Add `useClipboard` compositional hook for more idiomatic Vue approach
  to interacting with the clipboard.
- Add `useCurrentCode` compositional hook to handle current code state
  more effectively with unified logic.
- Abstract clipboard operations to an interface to isolate
  responsibilities.
- Switch clipboard implementation to the `navigator.clipboard` API,
  moving away from the deprecated `document.execCommand`.
- Move clipboard logic to the presentation layer to conform to
  separation of concerns and domain-driven design principles.
- Improve `IconButton.vue` component to increase reusability with
  consistent sizing.
This commit is contained in:
undergroundwires
2023-11-06 21:55:43 +01:00
parent b2ffc90da7
commit 8ccaec7af6
37 changed files with 881 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
tests/unit/presentation/components/Code/CodeButtons/CodeCopyButton.spec.ts Normal file
View File

@@ -0,0 +1,65 @@
import { describe, it, expect } from 'vitest';
import { shallowMount } from '@vue/test-utils';
import { InjectionKeys } from '@/presentation/injectionSymbols';
import CodeCopyButton from '@/presentation/components/Code/CodeButtons/CodeCopyButton.vue';
import { ClipboardStub } from '@tests/unit/shared/Stubs/ClipboardStub';
import { Clipboard } from '@/presentation/components/Shared/Hooks/Clipboard/Clipboard';
import { UseClipboardStub } from '@tests/unit/shared/Stubs/UseClipboardStub';
import { UseCurrentCodeStub } from '@tests/unit/shared/Stubs/UseCurrentCodeStub';
const COMPONENT_ICON_BUTTON_WRAPPER_NAME = 'IconButton';
describe('CodeCopyButton', () => {
it('copies current code when clicked', async () => {
// arrange
const expectedCode = 'code to be copied';
const clipboard = new ClipboardStub();
const wrapper = mountComponent({
clipboard,
currentCode: expectedCode,
});
// act
await wrapper.trigger('click');
// assert
const calls = clipboard.callHistory;
expect(calls).to.have.lengthOf(1);
const call = calls.find((c) => c.methodName === 'copyText');
expect(call).toBeDefined();
const [copiedText] = call.args;
expect(copiedText).to.equal(expectedCode);
});
});
function mountComponent(options?: {
clipboard?: Clipboard,
currentCode?: string,
}) {
return shallowMount(CodeCopyButton, {
global: {
provide: {
[InjectionKeys.useClipboard as symbol]: () => (
options?.clipboard
? new UseClipboardStub(options.clipboard)
: new UseClipboardStub()
).get(),
[InjectionKeys.useCurrentCode as symbol]: () => (
options.currentCode === undefined
? new UseCurrentCodeStub()
: new UseCurrentCodeStub().withCurrentCode(options.currentCode)
).get(),
},
stubs: {
[COMPONENT_ICON_BUTTON_WRAPPER_NAME]: {
name: COMPONENT_ICON_BUTTON_WRAPPER_NAME,
template: '<div @click="handleClick()" />',
emits: ['click'],
setup: (_, { emit }) => ({
handleClick: () => emit('click'),
}),
},
},
},
});
}

96
tests/unit/presentation/components/Code/CodeButtons/Save/Instructions/CodeInstruction.spec.ts Normal file
View File

@@ -0,0 +1,96 @@
import { describe, it, expect } from 'vitest';
import { shallowMount } from '@vue/test-utils';
import CodeInstruction from '@/presentation/components/Code/CodeButtons/Save/Instructions/CodeInstruction.vue';
import { expectThrowsAsync } from '@tests/unit/shared/Assertions/ExpectThrowsAsync';
import { InjectionKeys } from '@/presentation/injectionSymbols';
import { Clipboard } from '@/presentation/components/Shared/Hooks/Clipboard/Clipboard';
import { UseClipboardStub } from '@tests/unit/shared/Stubs/UseClipboardStub';
import { ClipboardStub } from '@tests/unit/shared/Stubs/ClipboardStub';
const DOM_SELECTOR_CODE_SLOT = 'code';
const DOM_SELECTOR_COPY_BUTTON = '.copy-button';
const COMPONENT_TOOLTIP_WRAPPER_NAME = 'TooltipWrapper';
describe('CodeInstruction.vue', () => {
it('renders a slot content inside a <code> element', () => {
// arrange
const expectedSlotContent = 'Example Code';
const wrapper = mountComponent({
slotContent: expectedSlotContent,
});
// act
const codeSlot = wrapper.find(DOM_SELECTOR_CODE_SLOT);
const actualContent = codeSlot.text();
// assert
expect(actualContent).to.equal(expectedSlotContent);
});
describe('copy', () => {
it('calls copyText when the copy button is clicked', async () => {
// arrange
const expectedCode = 'Code to be copied';
const clipboardStub = new ClipboardStub();
const wrapper = mountComponent({
clipboard: clipboardStub,
});
wrapper.vm.codeElement = { textContent: expectedCode } as HTMLElement;
// act
const copyButton = wrapper.find(DOM_SELECTOR_COPY_BUTTON);
await copyButton.trigger('click');
// assert
const calls = clipboardStub.callHistory;
expect(calls).to.have.lengthOf(1);
const call = calls.find((c) => c.methodName === 'copyText');
expect(call).toBeDefined();
const [actualCode] = call.args;
expect(actualCode).to.equal(expectedCode);
});
it('throws an error when codeElement is not found during copy', async () => {
// arrange
const expectedError = 'Code element could not be found.';
const wrapper = mountComponent();
wrapper.vm.codeElement = undefined;
// act
const act = () => wrapper.vm.copyCode();
// assert
await expectThrowsAsync(act, expectedError);
});
it('throws an error when codeElement has no textContent during copy', async () => {
// arrange
const expectedError = 'Code element does not contain any text.';
const wrapper = mountComponent();
wrapper.vm.codeElement = { textContent: '' } as HTMLElement;
// act
const act = () => wrapper.vm.copyCode();
// assert
await expectThrowsAsync(act, expectedError);
});
});
});
function mountComponent(options?: {
readonly clipboard?: Clipboard,
readonly slotContent?: string,
}) {
return shallowMount(CodeInstruction, {
global: {
provide: {
[InjectionKeys.useClipboard as symbol]:
() => {
if (options?.clipboard) {
return new UseClipboardStub(options.clipboard).get();
}
return new UseClipboardStub().get();
},
},
stubs: {
[COMPONENT_TOOLTIP_WRAPPER_NAME]: {
name: COMPONENT_TOOLTIP_WRAPPER_NAME,
template: '<slot />',
},
},
},
slots: {
default: options?.slotContent ?? 'Stubbed slot content',
},
});
}

4
tests/unit/presentation/components/Code/CodeButtons/Instructions/Data/InstructionsBuilder.spec.ts → tests/unit/presentation/components/Code/CodeButtons/Save/Instructions/Data/InstructionsBuilder.spec.ts
View File

@@ -1,8 +1,8 @@
import { describe, it, expect } from 'vitest';
import { OperatingSystem } from '@/domain/OperatingSystem';
import { IInstructionsBuilderData, InstructionsBuilder, InstructionStepBuilderType } from '@/presentation/components/Code/CodeButtons/Instructions/Data/InstructionsBuilder';
import { IInstructionsBuilderData, InstructionsBuilder, InstructionStepBuilderType } from '@/presentation/components/Code/CodeButtons/Save/Instructions/Data/InstructionsBuilder';
import { itEachAbsentObjectValue } from '@tests/unit/shared/TestCases/AbsentTests';
import { IInstructionInfo, IInstructionListStep } from '@/presentation/components/Code/CodeButtons/Instructions/InstructionListData';
import { IInstructionInfo, IInstructionListStep } from '@/presentation/components/Code/CodeButtons/Save/Instructions/InstructionListData';
describe('InstructionsBuilder', () => {
describe('withStep', () => {

2
tests/unit/presentation/components/Code/CodeButtons/Instructions/Data/MacOsInstructionsBuilder.spec.ts → tests/unit/presentation/components/Code/CodeButtons/Save/Instructions/Data/MacOsInstructionsBuilder.spec.ts
View File

@@ -1,6 +1,6 @@
import { describe } from 'vitest';
import { OperatingSystem } from '@/domain/OperatingSystem';
import { MacOsInstructionsBuilder } from '@/presentation/components/Code/CodeButtons/Instructions/Data/MacOsInstructionsBuilder';
import { MacOsInstructionsBuilder } from '@/presentation/components/Code/CodeButtons/Save/Instructions/Data/MacOsInstructionsBuilder';
import { runOsSpecificInstructionBuilderTests } from './OsSpecificInstructionBuilderTestRunner';
describe('MacOsInstructionsBuilder', () => {

2
tests/unit/presentation/components/Code/CodeButtons/Instructions/Data/OsSpecificInstructionBuilderTestRunner.ts → tests/unit/presentation/components/Code/CodeButtons/Save/Instructions/Data/OsSpecificInstructionBuilderTestRunner.ts
View File

@@ -1,6 +1,6 @@
import { it, expect } from 'vitest';
import { OperatingSystem } from '@/domain/OperatingSystem';
import { InstructionsBuilder } from '@/presentation/components/Code/CodeButtons/Instructions/Data/InstructionsBuilder';
import { InstructionsBuilder } from '@/presentation/components/Code/CodeButtons/Save/Instructions/Data/InstructionsBuilder';
interface ITestData {
readonly factory: () => InstructionsBuilder;

4
tests/unit/presentation/components/Code/CodeButtons/Instructions/InstructionListDataFactory.spec.ts → tests/unit/presentation/components/Code/CodeButtons/Save/Instructions/InstructionListDataFactory.spec.ts
View File

@@ -1,8 +1,8 @@
import { describe, it, expect } from 'vitest';
import { OperatingSystem } from '@/domain/OperatingSystem';
import { getInstructions, hasInstructions } from '@/presentation/components/Code/CodeButtons/Instructions/InstructionListDataFactory';
import { getInstructions, hasInstructions } from '@/presentation/components/Code/CodeButtons/Save/Instructions/InstructionListDataFactory';
import { getEnumValues } from '@/application/Common/Enum';
import { InstructionsBuilder } from '@/presentation/components/Code/CodeButtons/Instructions/Data/InstructionsBuilder';
import { InstructionsBuilder } from '@/presentation/components/Code/CodeButtons/Save/Instructions/Data/InstructionsBuilder';
describe('InstructionListDataFactory', () => {
const supportedOsList = [OperatingSystem.macOS];

73
tests/unit/presentation/components/Shared/Hooks/Clipboard/BrowserClipboard.spec.ts Normal file
View File

@@ -0,0 +1,73 @@
import { describe, it, expect } from 'vitest';
import { BrowserClipboard, NavigatorClipboard } from '@/presentation/components/Shared/Hooks/Clipboard/BrowserClipboard';
import { StubWithObservableMethodCalls } from '@tests/unit/shared/Stubs/StubWithObservableMethodCalls';
import { expectThrowsAsync } from '@tests/unit/shared/Assertions/ExpectThrowsAsync';
describe('BrowserClipboard', () => {
describe('writeText', () => {
it('calls navigator clipboard with the correct text', async () => {
// arrange
const expectedText = 'test text';
const navigatorClipboard = new NavigatorClipboardStub();
const clipboard = new BrowserClipboard(navigatorClipboard);
// act
await clipboard.copyText(expectedText);
// assert
const calls = navigatorClipboard.callHistory;
expect(calls).to.have.lengthOf(1);
const call = calls.find((c) => c.methodName === 'writeText');
expect(call).toBeDefined();
const [actualText] = call.args;
expect(actualText).to.equal(expectedText);
});
it('throws when navigator clipboard fails', async () => {
// arrange
const expectedError = 'internalError';
const navigatorClipboard = new NavigatorClipboardStub();
navigatorClipboard.writeText = () => {
throw new Error(expectedError);
};
const clipboard = new BrowserClipboard(navigatorClipboard);
// act
const act = () => clipboard.copyText('unimportant-text');
// assert
await expectThrowsAsync(act, expectedError);
});
});
});
class NavigatorClipboardStub
extends StubWithObservableMethodCalls<NavigatorClipboard>
implements NavigatorClipboard {
writeText(data: string): Promise<void> {
this.registerMethodCall({
methodName: 'writeText',
args: [data],
});
return Promise.resolve();
}
read(): Promise<ClipboardItems> {
throw new Error('Method not implemented.');
}
readText(): Promise<string> {
throw new Error('Method not implemented.');
}
write(): Promise<void> {
throw new Error('Method not implemented.');
}
addEventListener(): void {
throw new Error('Method not implemented.');
}
dispatchEvent(): boolean {
throw new Error('Method not implemented.');
}
removeEventListener(): void {
throw new Error('Method not implemented.');
}
}

67
tests/unit/presentation/components/Shared/Hooks/Clipboard/UseClipboard.spec.ts Normal file
View File

@@ -0,0 +1,67 @@
import { describe, it, expect } from 'vitest';
import { useClipboard } from '@/presentation/components/Shared/Hooks/Clipboard/UseClipboard';
import { BrowserClipboard } from '@/presentation/components/Shared/Hooks/Clipboard/BrowserClipboard';
import { ClipboardStub } from '@tests/unit/shared/Stubs/ClipboardStub';
import { FunctionKeys } from '@/TypeHelpers';
describe('useClipboard', () => {
it(`returns an instance of ${BrowserClipboard.name}`, () => {
// arrange
const expectedType = BrowserClipboard;
// act
const clipboard = useClipboard();
// assert
expect(clipboard).to.be.instanceOf(expectedType);
});
it('does not create a new instance if one is provided', () => {
// arrange
const expectedClipboard = new ClipboardStub();
// act
const actualClipboard = useClipboard(expectedClipboard);
// assert
expect(actualClipboard).to.equal(expectedClipboard);
});
describe('supports object destructuring', () => {
type ClipboardFunction = FunctionKeys<ReturnType<typeof useClipboard>>;
const testScenarios: {
readonly [FunctionName in ClipboardFunction]:
Parameters<ReturnType<typeof useClipboard>[FunctionName]>;
} = {
copyText: ['text-arg'],
};
Object.entries(testScenarios).forEach(([functionName, testFunctionArgs]) => {
describe(functionName, () => {
it('binds the method to the instance', () => {
// arrange
const expectedArgs = testFunctionArgs;
const clipboardStub = new ClipboardStub();
// act
const clipboard = useClipboard(clipboardStub);
const { [functionName as ClipboardFunction]: testFunction } = clipboard;
// assert
testFunction(...expectedArgs);
const call = clipboardStub.callHistory.find((c) => c.methodName === functionName);
expect(call).toBeDefined();
expect(call.args).to.deep.equal(expectedArgs);
});
it('ensures method retains the clipboard instance context', () => {
// arrange
const clipboardStub = new ClipboardStub();
const expectedThisContext = clipboardStub;
let actualThisContext: typeof expectedThisContext | undefined;
// eslint-disable-next-line func-names
clipboardStub[functionName] = function () {
// eslint-disable-next-line @typescript-eslint/no-this-alias
actualThisContext = this;
};
// act
const clipboard = useClipboard(clipboardStub);
const { [functionName as ClipboardFunction]: testFunction } = clipboard;
// assert
testFunction(...testFunctionArgs);
expect(expectedThisContext).to.equal(actualThisContext);
});
});
});
});
});

128
tests/unit/presentation/components/Shared/Hooks/UseCurrentCode.spec.ts Normal file
View File

@@ -0,0 +1,128 @@
import { describe, it, expect } from 'vitest';
import { IEventSubscriptionCollection } from '@/infrastructure/Events/IEventSubscriptionCollection';
import { useCurrentCode } from '@/presentation/components/Shared/Hooks/UseCurrentCode';
import { ApplicationCodeStub } from '@tests/unit/shared/Stubs/ApplicationCodeStub';
import { CategoryCollectionStateStub } from '@tests/unit/shared/Stubs/CategoryCollectionStateStub';
import { EventSubscriptionCollectionStub } from '@tests/unit/shared/Stubs/EventSubscriptionCollectionStub';
import { UseCollectionStateStub } from '@tests/unit/shared/Stubs/UseCollectionStateStub';
import { CodeChangedEventStub } from '@tests/unit/shared/Stubs/CodeChangedEventStub';
describe('useCurrentCode', () => {
describe('currentCode', () => {
it('gets code from initial state', () => {
// arrange
const expectedCode = 'initial code';
const { codeStub, collectionStateStub } = createStubs();
codeStub.withCurrentCode(expectedCode);
const useCollectionStateStub = new UseCollectionStateStub();
const { currentCode } = new UseCurrentCodeBuilder()
.withUseCollectionState(useCollectionStateStub)
.build();
// act
useCollectionStateStub.triggerOnStateChange({
newState: collectionStateStub,
immediateOnly: true, // set initial state
});
// assert
const actualCode = currentCode.value;
expect(actualCode).to.equal(expectedCode);
});
it('updates code state code is changed', () => {
// arrange
const initialCode = 'initial code';
const expectedCode = 'changed code';
const {
codeStub: initialCodeStub,
collectionStateStub: initialCollectionStateStub,
} = createStubs();
initialCodeStub.withCurrentCode(initialCode);
const useCollectionStateStub = new UseCollectionStateStub();
const { currentCode } = new UseCurrentCodeBuilder()
.withUseCollectionState(useCollectionStateStub)
.build();
useCollectionStateStub.triggerOnStateChange({
newState: initialCollectionStateStub,
immediateOnly: true, // set initial state
});
const {
codeStub: changedCodeStub,
collectionStateStub: changedStateStub,
} = createStubs();
changedCodeStub.withCurrentCode(expectedCode);
// act
useCollectionStateStub.triggerOnStateChange({
newState: changedStateStub,
immediateOnly: true, // update state
});
// assert
const actualCode = currentCode.value;
expect(actualCode).to.equal(expectedCode);
});
it('updates code when code is changed', () => {
// arrange
const expectedCode = 'changed code';
const { codeStub, collectionStateStub } = createStubs();
const { currentCode } = new UseCurrentCodeBuilder()
.withCollectionState(collectionStateStub)
.build();
// act
codeStub.triggerCodeChange(new CodeChangedEventStub().withCode(expectedCode));
// assert
const actualCode = currentCode.value;
expect(expectedCode).to.equal(actualCode);
});
it('registers event subscription on creation', () => {
// arrange
const eventsStub = new EventSubscriptionCollectionStub();
const stateStub = new UseCollectionStateStub();
// act
new UseCurrentCodeBuilder()
.withUseCollectionState(stateStub)
.withEvents(eventsStub)
.build();
// assert
const calls = eventsStub.callHistory;
expect(calls).has.lengthOf(1);
const call = calls.find((c) => c.methodName === 'unsubscribeAllAndRegister');
expect(call).toBeDefined();
});
});
});
function createStubs() {
const codeStub = new ApplicationCodeStub();
const collectionStateStub = new CategoryCollectionStateStub().withCode(codeStub);
const useStateStub = new UseCollectionStateStub()
.withState(collectionStateStub);
return {
codeStub,
useStateStub,
collectionStateStub,
};
}
class UseCurrentCodeBuilder {
private useCollectionState: UseCollectionStateStub = new UseCollectionStateStub();
private events: IEventSubscriptionCollection = new EventSubscriptionCollectionStub();
public withUseCollectionState(useCollectionState: UseCollectionStateStub): this {
this.useCollectionState = useCollectionState;
return this;
}
public withCollectionState(collectionState: CategoryCollectionStateStub): this {
return this.withUseCollectionState(
this.useCollectionState.withState(collectionState),
);
}
public withEvents(events: IEventSubscriptionCollection): this {
this.events = events;
return this;
}
public build(): ReturnType<typeof useCurrentCode> {
return useCurrentCode(this.useCollectionState.get(), this.events);
}
}

22
tests/unit/presentation/components/Shared/Icon/AppIcon.spec.ts
View File

@@ -55,19 +55,31 @@ describe('AppIcon.vue', () => {
`Expected:\n\n${expectedSvg}\n\nActual:\n\n${actualSvg}`,
);
});
it('emits `click` event when clicked', async () => {
// arrange
const wrapper = mountComponent();
// act
await wrapper.trigger('click');
// assert
expect(wrapper.emitted().click).to.have.lengthOf(1);
});
});
function mountComponent(options: {
readonly iconPropValue: IconName,
readonly loader: UseSvgLoaderStub,
function mountComponent(options?: {
readonly iconPropValue?: IconName,
readonly loader?: UseSvgLoaderStub,
}) {
const iconName = options?.iconPropValue ?? 'globe';
const loaderStub = options?.loader ?? new UseSvgLoaderStub().withSvgIcon(iconName, '<svg />');
return shallowMount(AppIcon, {
props: {
icon: options.iconPropValue,
icon: iconName,
},
global: {
provide: {
useSvgLoaderHook: options.loader.get(),
useSvgLoaderHook: loaderStub.get(),
},
},
});