Add 'Revert All Selection' feature #68

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

View File

@@ -0,0 +1,89 @@
import { describe, it, expect } from 'vitest';
import { shallowMount } from '@vue/test-utils';
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;
describe('CircleRating.vue', () => {
describe('number of RatingCircle components', () => {
it('renders correct number of RatingCircle components based on maxRating', () => {
// arrange
const expectedMaxRating = MAX_RATING;
const currentRating = MAX_RATING - 1;
// act
const wrapper = shallowMount(CircleRating, {
propsData: {
rating: currentRating,
},
});
// assert
const ratingCircles = wrapper.findAllComponents(RatingCircle);
expect(ratingCircles.length).to.equal(expectedMaxRating);
});
it('renders the correct number of RatingCircle components for default rating', () => {
// arrange
const expectedMaxRating = MAX_RATING;
// act
const wrapper = shallowMount(CircleRating);
// assert
const ratingCircles = wrapper.findAllComponents(RatingCircle);
expect(ratingCircles.length).to.equal(expectedMaxRating);
});
});
describe('rating logic', () => {
it('fills the correct number of RatingCircle components based on the provided rating', () => {
// arrange
const expectedTotalComponents = 3;
// act
const wrapper = shallowMount(CircleRating, {
propsData: {
rating: expectedTotalComponents,
},
});
// assert
const filledCircles = wrapper.findAllComponents(RatingCircle).filter((w) => w.props().filled);
expect(filledCircles.length).to.equal(expectedTotalComponents);
});
describe('validates rating correctly', () => {
const testCases = [
{
value: -1,
expectedValidationResult: false,
},
{
value: 0,
expectedValidationResult: true,
},
{
value: MAX_RATING - 1,
expectedValidationResult: true,
},
{
value: MAX_RATING,
expectedValidationResult: true,
},
];
testCases.forEach((testCase) => {
it(`given ${testCase.value} return ${testCase.expectedValidationResult ? 'true' : 'false'}`, () => {
// arrange
const { validator } = CircleRating.props.rating;
// act
const actualValidationResult = validator(testCase.value);
// act
expect(actualValidationResult).to.equal(testCase.expectedValidationResult);
});
});
});
});
});

View File

@@ -0,0 +1,89 @@
import { describe, it, expect } from 'vitest';
import { shallowMount } from '@vue/test-utils';
import RatingCircle from '@/presentation/components/Scripts/Menu/Recommendation/Rating/RatingCircle.vue';
const DOM_SVG_SELECTOR = 'svg';
const DOM_CIRCLE_SELECTOR = `${DOM_SVG_SELECTOR} > circle`;
const DOM_CIRCLE_FILLED_SELECTOR = `${DOM_CIRCLE_SELECTOR}.filled`;
describe('RatingCircle.vue', () => {
describe('circle appearance', () => {
it('renders a circle with the correct styles when filled', () => {
const wrapper = shallowMount(RatingCircle, {
propsData: {
filled: true,
},
});
const circle = wrapper.find(DOM_CIRCLE_FILLED_SELECTOR);
expect(circle.exists()).to.equal(true);
});
it('renders a circle without filled styles when not filled', () => {
const wrapper = shallowMount(RatingCircle, {
propsData: {
filled: false,
},
});
const circle = wrapper.find(DOM_CIRCLE_FILLED_SELECTOR);
expect(circle.exists()).to.equal(false);
});
it('renders without filled styles when filled prop is not provided', () => {
const wrapper = shallowMount(RatingCircle);
const circle = wrapper.find(DOM_CIRCLE_FILLED_SELECTOR);
expect(circle.exists()).to.equal(false);
});
});
describe('SVG and circle styles', () => {
it('sets --circle-stroke-width style correctly', () => {
const wrapper = shallowMount(RatingCircle);
const svgElement = wrapper.find(DOM_SVG_SELECTOR).element;
expect(svgElement.style.getPropertyValue('--circle-stroke-width')).to.equal('2px');
});
it('renders circle with correct fill attribute when filled prop is true', () => {
const wrapper = shallowMount(RatingCircle, {
propsData: {
filled: true,
},
});
const circleElement = wrapper.find(DOM_CIRCLE_FILLED_SELECTOR);
expect(circleElement.classes()).to.include('filled');
});
it('renders circle with the correct viewBox property', () => {
const wrapper = shallowMount(RatingCircle);
const circle = wrapper.find(DOM_SVG_SELECTOR);
expect(circle.attributes('viewBox')).to.equal('-1 -1 22 22');
});
});
describe('circle attributes', () => {
it('renders circle with the correct cx attribute', () => {
const wrapper = shallowMount(RatingCircle);
const circleElement = wrapper.find(DOM_CIRCLE_SELECTOR);
expect(circleElement.attributes('cx')).to.equal('10'); // Based on circleDiameterInPx = 20
});
it('renders circle with the correct cy attribute', () => {
const wrapper = shallowMount(RatingCircle);
const circleElement = wrapper.find(DOM_CIRCLE_SELECTOR);
expect(circleElement.attributes('cy')).to.equal('10'); // Based on circleDiameterInPx = 20
});
it('renders circle with the correct r attribute', () => {
const wrapper = shallowMount(RatingCircle);
const circleElement = wrapper.find(DOM_CIRCLE_SELECTOR);
expect(circleElement.attributes('r')).to.equal('9'); // Based on circleRadiusWithoutStrokeInPx = circleDiameterInPx / 2 - circleStrokeWidthInPx / 2
});
});
});

View File

@@ -0,0 +1,148 @@
import { describe, it, expect } from 'vitest';
import { shallowMount } from '@vue/test-utils';
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('RecommendationDocumentation', () => {
it('renders privacy rating using CircleRating component', () => {
// arrange
const expectedPrivacyRating = 3;
// act
const wrapper = mountComponent({
privacyRating: expectedPrivacyRating,
});
// assert
const ratingComponent = wrapper.findComponent(CircleRating);
expect(ratingComponent.exists()).to.equal(true);
expect(ratingComponent.props().rating).to.equal(expectedPrivacyRating);
});
it('renders the provided description', () => {
// arrange
const expectedDescription = 'Some description';
// act
const wrapper = mountComponent({
description: expectedDescription,
});
// assert
expect(wrapper.text()).to.include(expectedDescription);
});
it('renders the provided recommendation', () => {
// arrange
const expectedRecommendation = 'Some recommendation';
// act
const wrapper = mountComponent({
recommendation: expectedRecommendation,
});
// assert
expect(wrapper.text()).to.include(expectedRecommendation);
});
describe('includes', () => {
it('renders items if provided', () => {
// arrange
const expectedIncludes = ['Item 1', 'Item 2'];
// act
const wrapper = mountComponent({
includes: expectedIncludes,
});
// assert
expect(wrapper.text()).to.include(expectedIncludes[0]);
expect(wrapper.text()).to.include(expectedIncludes[1]);
});
it('renders included section if provided', () => {
// arrange
// act
const wrapper = mountComponent({
includes: ['some', 'includes'],
});
// assert
const includesSection = wrapper.find(DOM_SELECTOR_INCLUDES_SECTION);
expect(includesSection.exists()).to.equal(true);
});
it('does not render included section if no items provided', () => {
// arrange
// act
const wrapper = mountComponent({
includes: [],
});
// assert
const includesSection = wrapper.find(DOM_SELECTOR_INCLUDES_SECTION);
expect(includesSection.exists()).to.equal(false);
});
});
describe('considerations', () => {
it('renders if provided', () => {
// arrange
const expectedConsiderations = ['Consideration 1', 'Consideration 2'];
// act
const wrapper = mountComponent({
considerations: expectedConsiderations,
});
// assert
expect(wrapper.text()).to.include(expectedConsiderations[0]);
expect(wrapper.text()).to.include(expectedConsiderations[1]);
});
it('renders included section if provided', () => {
// arrange
// act
const wrapper = mountComponent({
considerations: ['some', 'considerations'],
});
// assert
const considerationsSection = wrapper.find(DOM_SELECTOR_CONSIDERATIONS_SECTION);
expect(considerationsSection.exists()).to.equal(true);
});
it('does not render considerations section if no items provided', () => {
// arrange
// act
const wrapper = mountComponent({
considerations: [],
});
// assert
const considerationsSection = wrapper.find(DOM_SELECTOR_CONSIDERATIONS_SECTION);
expect(considerationsSection.exists()).to.equal(false);
});
});
});
function mountComponent(options: {
readonly privacyRating?: number,
readonly description?: string,
readonly recommendation?: string,
readonly includes?: string[],
readonly considerations?: string[],
}) {
return shallowMount(RecommendationDocumentation, {
propsData: {
privacyRating: options.privacyRating ?? 0,
description: options.description ?? 'test-description',
recommendation: options.recommendation ?? 'test-recommendation',
considerations: options.considerations ?? [],
includes: options.includes ?? [],
},
});
}

View File

@@ -0,0 +1,168 @@
import { describe, it, expect } from 'vitest';
import {
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';
import { ScriptSelection } from '@/application/Context/State/Selection/Script/ScriptSelection';
import { MethodCall } from '@tests/unit/shared/Stubs/StubWithObservableMethodCalls';
import { expectExists } from '@tests/shared/Assertions/ExpectExists';
import { scrambledEqual } from '@/application/Common/Array';
import { IScript } from '@/domain/IScript';
import { RecommendationStatusType } from '@/presentation/components/Scripts/Menu/Recommendation/RecommendationStatusType';
import { RecommendationStatusTestScenario } from './RecommendationStatusTestScenario';
describe('RecommendationStatusHandler', () => {
describe('setCurrentRecommendationStatus', () => {
describe('throws with invalid type', () => {
// arrange
const scenario = new RecommendationStatusTestScenario();
const { stateStub } = scenario.generateState([]);
// act
const act = (type: RecommendationStatusType) => setCurrentRecommendationStatus(
type,
createMutationContext(stateStub),
);
// assert
new EnumRangeTestRunner(act)
.testInvalidValueThrows(RecommendationStatusType.Custom, 'Cannot select custom type.')
.testOutOfRangeThrows((value) => `Cannot handle the type: ${RecommendationStatusType[value]}`);
});
describe('select types as expected', () => {
// arrange
const scenario = new RecommendationStatusTestScenario();
const testScenarios: ReadonlyArray<{
readonly givenType: RecommendationStatusType;
readonly expectedCall: MethodCall<ScriptSelection>;
}> = [
{
givenType: RecommendationStatusType.None,
expectedCall: {
methodName: 'deselectAll',
args: [],
},
},
{
givenType: RecommendationStatusType.Standard,
expectedCall: {
methodName: 'selectOnly',
args: [
scenario.allStandard.map((s) => s.script),
],
},
},
{
givenType: RecommendationStatusType.Strict,
expectedCall: {
methodName: 'selectOnly',
args: [[
...scenario.allStandard.map((s) => s.script),
...scenario.allStrict.map((s) => s.script),
]],
},
},
{
givenType: RecommendationStatusType.All,
expectedCall: {
methodName: 'selectAll',
args: [],
},
},
];
testScenarios.forEach(({
givenType, expectedCall,
}) => {
it(`${RecommendationStatusType[givenType]} modifies as expected`, () => {
const { stateStub, scriptsStub } = scenario.generateState();
// act
setCurrentRecommendationStatus(givenType, createMutationContext(stateStub));
// assert
const call = scriptsStub.callHistory.find(
(c) => c.methodName === expectedCall.methodName,
);
expectExists(call);
if (expectedCall.args.length > 0) { /** {@link ScriptSelection.selectOnly}. */
expect(scrambledEqual(
call.args[0] as IScript[],
expectedCall.args[0] as IScript[],
)).to.equal(true);
}
});
});
});
});
describe('getCurrentRecommendationStatus', () => {
// arrange
const scenario = new RecommendationStatusTestScenario();
const testCases = [{
name: 'when nothing is selected',
selection: [],
expected: RecommendationStatusType.None,
}, {
name: 'when some standard scripts are selected',
selection: scenario.someStandard,
expected: RecommendationStatusType.Custom,
}, {
name: 'when all standard scripts are selected',
selection: scenario.allStandard,
expected: RecommendationStatusType.Standard,
}, {
name: 'when all standard and some strict scripts are selected',
selection: [...scenario.allStandard, ...scenario.someStrict],
expected: RecommendationStatusType.Custom,
}, {
name: 'when all standard and strict scripts are selected',
selection: [...scenario.allStandard, ...scenario.allStrict],
expected: RecommendationStatusType.Strict,
}, {
name: 'when strict scripts are selected but not standard',
selection: scenario.allStrict,
expected: RecommendationStatusType.Custom,
}, {
name: 'when all standard and strict, and some unrecommended are selected',
selection: [...scenario.allStandard, ...scenario.allStrict, ...scenario.someUnrecommended],
expected: RecommendationStatusType.Custom,
}, {
name: 'when all scripts are selected',
selection: scenario.all,
expected: RecommendationStatusType.All,
}];
for (const testCase of testCases) {
it(testCase.name, () => {
const { stateStub } = scenario.generateState(testCase.selection);
// act
const actual = getCurrentRecommendationStatus(createCheckContext(stateStub));
// assert
expect(actual).to.deep.equal(
testCase.expected,
`Actual: "${RecommendationStatusType[actual]}", expected: "${RecommendationStatusType[testCase.expected]}"`
+ `\nSelection: ${printSelection()}`,
);
function printSelection() {
// eslint-disable-next-line prefer-template
return `total: ${testCase.selection.length}\n`
+ 'scripts:\n'
+ testCase.selection
.map((s) => `{ id: ${s.script.id}, level: ${s.script.level === undefined ? 'unknown' : RecommendationLevel[s.script.level]} }`)
.join(' | ');
}
});
}
});
});
function createMutationContext(state: ICategoryCollectionState): SelectionMutationContext {
return {
selection: state.selection.scripts,
collection: state.collection,
};
}
function createCheckContext(state: ICategoryCollectionState): SelectionCheckContext {
return {
selection: state.selection.scripts,
collection: state.collection,
};
}

View File

@@ -0,0 +1,51 @@
import { SelectedScript } from '@/application/Context/State/Selection/Script/SelectedScript';
import { RecommendationLevel } from '@/domain/RecommendationLevel';
import { CategoryCollectionStateStub } from '@tests/unit/shared/Stubs/CategoryCollectionStateStub';
import { ScriptSelectionStub } from '@tests/unit/shared/Stubs/ScriptSelectionStub';
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 RecommendationStatusTestScenario {
public readonly all: readonly SelectedScript[];
public readonly allStandard: readonly SelectedScript[];
public readonly someStandard: readonly SelectedScript[];
public readonly someStrict: readonly SelectedScript[];
public readonly allStrict: readonly SelectedScript[];
public readonly someUnrecommended: readonly SelectedScript[];
public readonly allUnrecommended: readonly SelectedScript[];
constructor() {
this.someStandard = createSelectedScripts(RecommendationLevel.Standard, 'standard-some-1', 'standard-some-2');
this.allStandard = [...this.someStandard, ...createSelectedScripts(RecommendationLevel.Standard, 'standard-all-1', 'standard-all-2')];
this.someStrict = createSelectedScripts(RecommendationLevel.Strict, 'strict-some-1', 'strict-some-2');
this.allStrict = [...this.someStrict, ...createSelectedScripts(RecommendationLevel.Strict, 'strict-all-1', 'strict-all-2')];
this.someUnrecommended = createSelectedScripts(undefined, 'unrecommended-some-1', 'unrecommended-some-2');
this.allUnrecommended = [...this.someUnrecommended, ...createSelectedScripts(undefined, 'unrecommended-all-1', 'unrecommended-all-2')];
this.all = [...this.allStandard, ...this.allStrict, ...this.allUnrecommended];
}
public generateState(selectedScripts: readonly SelectedScript[] = []) {
const allScripts = this.all.map((s) => s.script);
const scriptSelection = new ScriptSelectionStub()
.withSelectedScripts(selectedScripts);
const categoryCollectionState = new CategoryCollectionStateStub(allScripts)
.withSelection(new UserSelectionStub().withScripts(scriptSelection));
return {
scriptsStub: scriptSelection,
stateStub: categoryCollectionState,
};
}
}
function createSelectedScripts(level?: RecommendationLevel, ...ids: string[]): SelectedScript[] {
return ids.map((id) => new SelectedScriptStub(
new ScriptStub(id).withLevel(level),
).withRevert(false));
}