Improve selection type documentation

- Refine tooltip documentation with clearer information.
- Introduce privacy ranking indicator for intuitive user guidance.
- Adopt a consistent format throughout documentation.
- Switch from emojis to icons to maintain visual uniformity.

tests/unit/presentation/components/Scripts/Menu/Selector/Rating/CircleRating.spec.ts

@@ -0,0 +1,89 @@
+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';
+
+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);
+        });
+      });
+    });
+  });
+});

tests/unit/presentation/components/Scripts/Menu/Selector/Rating/RatingCircle.spec.ts

@@ -0,0 +1,89 @@
+import { describe, it, expect } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import RatingCircle from '@/presentation/components/Scripts/Menu/Selector/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
+    });
+  });
+});