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

Add 'Revert All Selection' feature #68

Browse Source 
This commit introduces 'Revert: None - Selected' toggle, enabling users
to revert all reversible scripts with a single action, improving user
safety and control over script effects.

This feature addresses user-reported concerns about the ease of
reverting script changes. This feature should enhance the user experience
by streamlining the revert process along with providing essential
information about script reversibility.

Key changes:

- Add buttons to revert all selected scripts or setting all selected
  scripts to non-revert state.
- Add tooltips with detailed explanations about consequences of
  modifying revert states, includinginformation about irreversible
  script changes.

Supporting changes:

- Align items on top menu vertically for better visual consistency.
- Rename `SelectionType` to `RecommendationStatusType` for more clarity.
- Rename `IReverter` to `Reverter` to move away from `I` prefix
  convention.
- The `.script` CSS class was duplicated in `TheScriptsView.vue` and
  `TheScriptsArea.vue`, leading to style collisions in the development
  environment. The class has been renamed to component-specific classes
  to avoid such issues in the future.
This commit is contained in:
undergroundwires
2024-02-11 22:47:34 +01:00
parent a54e16488c
commit 55fa7eae71
34 changed files with 906 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
tests/unit/presentation/components/Scripts/Menu/MenuOptionList.spec.ts Normal file
View File

@@ -0,0 +1,54 @@
import { describe, it, expect } from 'vitest';
import { shallowMount } from '@vue/test-utils';
import MenuOptionList from '@/presentation/components/Scripts/Menu/MenuOptionList.vue';
const DOM_SELECTOR_LABEL = '.list div:first-child:not(.items)';
const DOM_SELECTOR_SLOT = '.list .items';
describe('MenuOptionList', () => {
it('renders the label when provided', () => {
// arrange
const label = 'Test label';
const expectedLabel = `${label}:`;
// act
const wrapper = mountComponent({ label });
// assert
const labelElement = wrapper.find(DOM_SELECTOR_LABEL);
const actualLabel = labelElement.text();
expect(actualLabel).to.equal(expectedLabel);
});
it('does not render the label when not provided', () => {
// arrange
const label = undefined;
// act
const wrapper = mountComponent({ label });
// assert
const labelElement = wrapper.find(DOM_SELECTOR_LABEL);
expect(labelElement.exists()).toBe(false);
});
it('renders default slot content', () => {
// arrange
const expectedSlotContent = 'Slot Content';
// act
const wrapper = mountComponent({ slotContent: expectedSlotContent });
// assert
const slotText = wrapper.find(DOM_SELECTOR_SLOT);
expect(slotText.text()).to.equal(expectedSlotContent);
});
});
function mountComponent(options?: {
readonly label?: string;
readonly slotContent?: string;
}) {
return shallowMount(MenuOptionList, {
props: {
label: options?.label,
},
slots: {
default: options?.slotContent ?? 'Stubbed slot content',
},
});
}

4
tests/unit/presentation/components/Scripts/Menu/Selector/Rating/CircleRating.spec.ts → tests/unit/presentation/components/Scripts/Menu/Recommendation/Rating/CircleRating.spec.ts
View File

@@ -1,7 +1,7 @@
import { describe, it, expect } from 'vitest';
import { shallowMount } from '@vue/test-utils';
import CircleRating from '@/presentation/components/Scripts/Menu/Selector/Rating/CircleRating.vue';
import RatingCircle from '@/presentation/components/Scripts/Menu/Selector/Rating/RatingCircle.vue';
import RatingCircle from '@/presentation/components/Scripts/Menu/Recommendation/Rating/RatingCircle.vue';
import CircleRating from '@/presentation/components/Scripts/Menu/Recommendation/Rating/CircleRating.vue';
const MAX_RATING = 4;

2
tests/unit/presentation/components/Scripts/Menu/Selector/Rating/RatingCircle.spec.ts → tests/unit/presentation/components/Scripts/Menu/Recommendation/Rating/RatingCircle.spec.ts
View File

@@ -1,6 +1,6 @@
import { describe, it, expect } from 'vitest';
import { shallowMount } from '@vue/test-utils';
import RatingCircle from '@/presentation/components/Scripts/Menu/Selector/Rating/RatingCircle.vue';
import RatingCircle from '@/presentation/components/Scripts/Menu/Recommendation/Rating/RatingCircle.vue';
const DOM_SVG_SELECTOR = 'svg';
const DOM_CIRCLE_SELECTOR = `${DOM_SVG_SELECTOR} > circle`;

8
tests/unit/presentation/components/Scripts/Menu/Selector/SelectionTypeDocumentation.spec.ts → tests/unit/presentation/components/Scripts/Menu/Recommendation/RecommendationDocumentation.spec.ts
View File

@@ -1,12 +1,12 @@
import { describe, it, expect } from 'vitest';
import { shallowMount } from '@vue/test-utils';
import SelectionTypeDocumentation from '@/presentation/components/Scripts/Menu/Selector/SelectionTypeDocumentation.vue';
import CircleRating from '@/presentation/components/Scripts/Menu/Selector/Rating/CircleRating.vue';
import RecommendationDocumentation from '@/presentation/components/Scripts/Menu/Recommendation/RecommendationDocumentation.vue';
import CircleRating from '@/presentation/components/Scripts/Menu/Recommendation/Rating/CircleRating.vue';
const DOM_SELECTOR_INCLUDES_SECTION = '.includes';
const DOM_SELECTOR_CONSIDERATIONS_SECTION = '.considerations';
describe('SelectionTypeDocumentation.vue', () => {
describe('RecommendationDocumentation', () => {
it('renders privacy rating using CircleRating component', () => {
// arrange
const expectedPrivacyRating = 3;
@@ -136,7 +136,7 @@ function mountComponent(options: {
readonly includes?: string[],
readonly considerations?: string[],
}) {
return shallowMount(SelectionTypeDocumentation, {
return shallowMount(RecommendationDocumentation, {
propsData: {
privacyRating: options.privacyRating ?? 0,
description: options.description ?? 'test-description',

61
tests/unit/presentation/components/Scripts/Menu/Selector/SelectionTypeHandler.spec.ts → tests/unit/presentation/components/Scripts/Menu/Recommendation/RecommendationStatusHandler.spec.ts
View File

@@ -1,8 +1,8 @@
import { describe, it, expect } from 'vitest';
import {
SelectionCheckContext, SelectionMutationContext, SelectionType,
getCurrentSelectionType, setCurrentSelectionType,
} from '@/presentation/components/Scripts/Menu/Selector/SelectionTypeHandler';
SelectionCheckContext, SelectionMutationContext,
getCurrentRecommendationStatus, setCurrentRecommendationStatus,
} from '@/presentation/components/Scripts/Menu/Recommendation/RecommendationStatusHandler';
import { RecommendationLevel } from '@/domain/RecommendationLevel';
import { ICategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
import { EnumRangeTestRunner } from '@tests/unit/application/Common/EnumRangeTestRunner';
@@ -11,40 +11,41 @@ import { MethodCall } from '@tests/unit/shared/Stubs/StubWithObservableMethodCal
import { expectExists } from '@tests/shared/Assertions/ExpectExists';
import { scrambledEqual } from '@/application/Common/Array';
import { IScript } from '@/domain/IScript';
import { SelectionStateTestScenario } from './SelectionStateTestScenario';
import { RecommendationStatusType } from '@/presentation/components/Scripts/Menu/Recommendation/RecommendationStatusType';
import { RecommendationStatusTestScenario } from './RecommendationStatusTestScenario';
describe('SelectionTypeHandler', () => {
describe('setCurrentSelectionType', () => {
describe('RecommendationStatusHandler', () => {
describe('setCurrentRecommendationStatus', () => {
describe('throws with invalid type', () => {
// arrange
const scenario = new SelectionStateTestScenario();
const scenario = new RecommendationStatusTestScenario();
const { stateStub } = scenario.generateState([]);
// act
const act = (type: SelectionType) => setCurrentSelectionType(
const act = (type: RecommendationStatusType) => setCurrentRecommendationStatus(
type,
createMutationContext(stateStub),
);
// assert
new EnumRangeTestRunner(act)
.testInvalidValueThrows(SelectionType.Custom, 'Cannot select custom type.')
.testOutOfRangeThrows((value) => `Cannot handle the type: ${SelectionType[value]}`);
.testInvalidValueThrows(RecommendationStatusType.Custom, 'Cannot select custom type.')
.testOutOfRangeThrows((value) => `Cannot handle the type: ${RecommendationStatusType[value]}`);
});
describe('select types as expected', () => {
// arrange
const scenario = new SelectionStateTestScenario();
const scenario = new RecommendationStatusTestScenario();
const testScenarios: ReadonlyArray<{
readonly givenType: SelectionType;
readonly givenType: RecommendationStatusType;
readonly expectedCall: MethodCall<ScriptSelection>;
}> = [
{
givenType: SelectionType.None,
givenType: RecommendationStatusType.None,
expectedCall: {
methodName: 'deselectAll',
args: [],
},
},
{
givenType: SelectionType.Standard,
givenType: RecommendationStatusType.Standard,
expectedCall: {
methodName: 'selectOnly',
args: [
@@ -53,7 +54,7 @@ describe('SelectionTypeHandler', () => {
},
},
{
givenType: SelectionType.Strict,
givenType: RecommendationStatusType.Strict,
expectedCall: {
methodName: 'selectOnly',
args: [[
@@ -63,7 +64,7 @@ describe('SelectionTypeHandler', () => {
},
},
{
givenType: SelectionType.All,
givenType: RecommendationStatusType.All,
expectedCall: {
methodName: 'selectAll',
args: [],
@@ -73,10 +74,10 @@ describe('SelectionTypeHandler', () => {
testScenarios.forEach(({
givenType, expectedCall,
}) => {
it(`${SelectionType[givenType]} modifies as expected`, () => {
it(`${RecommendationStatusType[givenType]} modifies as expected`, () => {
const { stateStub, scriptsStub } = scenario.generateState();
// act
setCurrentSelectionType(givenType, createMutationContext(stateStub));
setCurrentRecommendationStatus(givenType, createMutationContext(stateStub));
// assert
const call = scriptsStub.callHistory.find(
(c) => c.methodName === expectedCall.methodName,
@@ -92,51 +93,51 @@ describe('SelectionTypeHandler', () => {
});
});
});
describe('getCurrentSelectionType', () => {
describe('getCurrentRecommendationStatus', () => {
// arrange
const scenario = new SelectionStateTestScenario();
const scenario = new RecommendationStatusTestScenario();
const testCases = [{
name: 'when nothing is selected',
selection: [],
expected: SelectionType.None,
expected: RecommendationStatusType.None,
}, {
name: 'when some standard scripts are selected',
selection: scenario.someStandard,
expected: SelectionType.Custom,
expected: RecommendationStatusType.Custom,
}, {
name: 'when all standard scripts are selected',
selection: scenario.allStandard,
expected: SelectionType.Standard,
expected: RecommendationStatusType.Standard,
}, {
name: 'when all standard and some strict scripts are selected',
selection: [...scenario.allStandard, ...scenario.someStrict],
expected: SelectionType.Custom,
expected: RecommendationStatusType.Custom,
}, {
name: 'when all standard and strict scripts are selected',
selection: [...scenario.allStandard, ...scenario.allStrict],
expected: SelectionType.Strict,
expected: RecommendationStatusType.Strict,
}, {
name: 'when strict scripts are selected but not standard',
selection: scenario.allStrict,
expected: SelectionType.Custom,
expected: RecommendationStatusType.Custom,
}, {
name: 'when all standard and strict, and some unrecommended are selected',
selection: [...scenario.allStandard, ...scenario.allStrict, ...scenario.someUnrecommended],
expected: SelectionType.Custom,
expected: RecommendationStatusType.Custom,
}, {
name: 'when all scripts are selected',
selection: scenario.all,
expected: SelectionType.All,
expected: RecommendationStatusType.All,
}];
for (const testCase of testCases) {
it(testCase.name, () => {
const { stateStub } = scenario.generateState(testCase.selection);
// act
const actual = getCurrentSelectionType(createCheckContext(stateStub));
const actual = getCurrentRecommendationStatus(createCheckContext(stateStub));
// assert
expect(actual).to.deep.equal(
testCase.expected,
`Actual: "${SelectionType[actual]}", expected: "${SelectionType[testCase.expected]}"`
`Actual: "${RecommendationStatusType[actual]}", expected: "${RecommendationStatusType[testCase.expected]}"`
+ `\nSelection: ${printSelection()}`,
);
function printSelection() {

2
tests/unit/presentation/components/Scripts/Menu/Selector/SelectionStateTestScenario.ts → tests/unit/presentation/components/Scripts/Menu/Recommendation/RecommendationStatusTestScenario.ts
View File

@@ -6,7 +6,7 @@ import { ScriptStub } from '@tests/unit/shared/Stubs/ScriptStub';
import { SelectedScriptStub } from '@tests/unit/shared/Stubs/SelectedScriptStub';
import { UserSelectionStub } from '@tests/unit/shared/Stubs/UserSelectionStub';
export class SelectionStateTestScenario {
export class RecommendationStatusTestScenario {
public readonly all: readonly SelectedScript[];
public readonly allStandard: readonly SelectedScript[];

201
tests/unit/presentation/components/Scripts/Menu/Revert/RevertStatusHandler.spec.ts Normal file
View File

@@ -0,0 +1,201 @@
import { describe, it, expect } from 'vitest';
import { RevertStatusType } from '@/presentation/components/Scripts/Menu/Revert/RevertStatusType';
import { SelectedScript } from '@/application/Context/State/Selection/Script/SelectedScript';
import { SelectedScriptStub } from '@tests/unit/shared/Stubs/SelectedScriptStub';
import { ScriptStub } from '@tests/unit/shared/Stubs/ScriptStub';
import { getCurrentRevertStatus, setCurrentRevertStatus } from '@/presentation/components/Scripts/Menu/Revert/RevertStatusHandler';
import { ScriptSelectionStub } from '@tests/unit/shared/Stubs/ScriptSelectionStub';
import { ScriptSelectionChange } from '@/application/Context/State/Selection/Script/ScriptSelectionChange';
describe('RevertStatusHandler', () => {
describe('getCurrentRevertStatus', () => {
const testScenarios: ReadonlyArray<{
readonly description: string;
readonly selectedScripts: readonly SelectedScript[];
readonly expectedRevertStatus: RevertStatusType;
}> = [
{
description: 'no selection',
selectedScripts: [],
expectedRevertStatus: RevertStatusType.NoReversibleScripts,
},
{
description: 'selected scripts are not reversible',
selectedScripts: [
createSelectedScript({ isReversible: false, isReverted: false }),
createSelectedScript({ isReversible: false, isReverted: false }),
],
expectedRevertStatus: RevertStatusType.NoReversibleScripts,
},
{
description: 'all selected scripts are reversible and reverted',
selectedScripts: [
createSelectedScript({ isReversible: true, isReverted: true }),
createSelectedScript({ isReversible: true, isReverted: true }),
],
expectedRevertStatus: RevertStatusType.AllScriptsReverted,
},
{
description: 'mixed selection with irreversible and reverted scripts',
selectedScripts: [
createSelectedScript({ isReversible: false, isReverted: false }),
createSelectedScript({ isReversible: true, isReverted: true }),
],
expectedRevertStatus: RevertStatusType.AllScriptsReverted,
},
{
description: 'mixed revert state among reversible scripts',
selectedScripts: [
createSelectedScript({ isReversible: true, isReverted: true }),
createSelectedScript({ isReversible: true, isReverted: false }),
],
expectedRevertStatus: RevertStatusType.SomeScriptsReverted,
},
{
description: 'mixed selection with irreversible and reversible scripts in mixed revert state',
selectedScripts: [
createSelectedScript({ isReversible: false, isReverted: false }),
createSelectedScript({ isReversible: true, isReverted: true }),
createSelectedScript({ isReversible: true, isReverted: false }),
],
expectedRevertStatus: RevertStatusType.SomeScriptsReverted,
},
];
testScenarios.forEach((
{ description, selectedScripts, expectedRevertStatus },
) => {
it(`${description} returns ${RevertStatusType[expectedRevertStatus]}`, () => {
// arrange
const selection = new ScriptSelectionStub()
.withSelectedScripts(selectedScripts);
// act
const actualRevertStatus = getCurrentRevertStatus(selection);
// assert
expect(actualRevertStatus).to.equal(expectedRevertStatus);
});
});
});
describe('setCurrentRevertStatus', () => {
const selectionTestScenarios: ReadonlyArray<{
readonly description: string;
readonly createSelectedScripts: (
desiredRevertStatus: boolean,
) => readonly SelectedScript[];
readonly expectChanges: (
allScripts: readonly SelectedScript[],
desiredRevertStatus: boolean,
) => readonly ScriptSelectionChange[];
}> = [
{
description: 'single reversible script',
createSelectedScripts: (desiredRevertStatus) => [
createSelectedScript({ isReversible: true, isReverted: !desiredRevertStatus }),
],
expectChanges: (allScripts, desiredRevertStatus) => [
createScriptSelectionChange(allScripts[0], desiredRevertStatus),
],
},
{
description: 'multiple reversible scripts',
createSelectedScripts: (desiredRevertStatus) => [
createSelectedScript({ isReversible: true, isReverted: !desiredRevertStatus }),
createSelectedScript({ isReversible: true, isReverted: !desiredRevertStatus }),
],
expectChanges: (allScripts, desiredRevertStatus) => [
createScriptSelectionChange(allScripts[0], desiredRevertStatus),
createScriptSelectionChange(allScripts[1], desiredRevertStatus),
],
},
{
description: 'no selected scripts',
createSelectedScripts: () => [],
expectChanges: () => [],
},
{
description: 'no reversible scripts',
createSelectedScripts: (desiredRevertStatus) => [
createSelectedScript({ isReversible: false, isReverted: !desiredRevertStatus }),
createSelectedScript({ isReversible: false, isReverted: !desiredRevertStatus }),
],
expectChanges: () => [],
},
{
description: 'reversible and irreversible scripts',
createSelectedScripts: (desiredRevertStatus) => [
createSelectedScript({ isReversible: true, isReverted: !desiredRevertStatus }),
createSelectedScript({ isReversible: false, isReverted: !desiredRevertStatus }),
createSelectedScript({ isReversible: true, isReverted: !desiredRevertStatus }),
createSelectedScript({ isReversible: false, isReverted: !desiredRevertStatus }),
],
expectChanges: (allScripts, desiredRevertStatus) => [
createScriptSelectionChange(allScripts[0], desiredRevertStatus),
createScriptSelectionChange(allScripts[2], desiredRevertStatus),
],
},
{
description: 'reversible scripts already in the desired revert status',
createSelectedScripts: (desiredRevertStatus) => [
createSelectedScript({ isReversible: true, isReverted: desiredRevertStatus }),
createSelectedScript({ isReversible: true, isReverted: desiredRevertStatus }),
],
expectChanges: () => [],
},
];
selectionTestScenarios.forEach(({
description: selectionDescription, createSelectedScripts, expectChanges,
}) => {
const revertStatusTestScenarios: ReadonlyArray<{
readonly description: string;
readonly desiredRevertStatus: boolean;
}> = [
{
description: 'enforcing revert state',
desiredRevertStatus: true,
},
{
description: 'enforcing non-revert state',
desiredRevertStatus: false,
},
];
revertStatusTestScenarios.forEach(({
description: revertStatusDescription, desiredRevertStatus,
}) => {
it(`${revertStatusDescription} - ${selectionDescription}`, () => {
// arrange
const selectedScripts = createSelectedScripts(desiredRevertStatus);
const selection = new ScriptSelectionStub()
.withSelectedScripts(selectedScripts);
// act
setCurrentRevertStatus(desiredRevertStatus, selection);
// assert
const expectedChanges = expectChanges(selectedScripts, desiredRevertStatus);
selection.assertSelectionChanges(expectedChanges);
});
});
});
});
});
function createSelectedScript(options: {
readonly isReversible: boolean;
readonly isReverted: boolean;
}): SelectedScript {
const id = (Math.random() + 1).toString(36).substring(7);
const script = new ScriptStub(id)
.withReversibility(options.isReversible);
return new SelectedScriptStub(script)
.withRevert(options.isReverted);
}
function createScriptSelectionChange(
script: SelectedScript,
isReverted: boolean,
): ScriptSelectionChange {
return {
scriptId: script.id,
newStatus: {
isSelected: true,
isReverted,
},
};
}