Change 'revert' button to title case

- Switch 'revert' button text to title case for consistency and more formal and professional look. - Update related styles to reflect the new case usage. - Adjust tests to match the new button label casing. - Remove reduntant visibility switch between to elements to simpify the DOM and style rules.
undergroundwires · Feb 1, 2024 · 937f459 · 937f459
1 parent 4da306b
commit 937f459
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 49 deletions.
diff --git a/src/presentation/components/Scripts/View/Tree/NodeContent/RevertToggle.vue b/src/presentation/components/Scripts/View/Tree/NodeContent/RevertToggle.vue
@@ -2,7 +2,7 @@
   <ToggleSwitch
     v-model="isReverted"
     :stop-click-propagation="true"
-    :label="'revert'"
+    :label="'Revert'"
   />
 </template>
 

diff --git a/src/presentation/components/Scripts/View/Tree/NodeContent/ToggleSwitch.vue b/src/presentation/components/Scripts/View/Tree/NodeContent/ToggleSwitch.vue
@@ -10,8 +10,15 @@
     >
     <div class="toggle-animation">
       <div class="circle" />
-      <span class="label-off">{{ label }}</span>
-      <span class="label-on">{{ label }}</span>
+      <span
+        class="label"
+        :class="{
+          'label-off': !isChecked,
+          'label-on': isChecked,
+        }"
+      >
+        {{ label }}
+      </span>
     </div>
   </div>
 </template>
@@ -91,16 +98,6 @@ $gap                    : 0.25em;
   }
 }
 
-@mixin setVisibility($isVisible: true) {
-  @if $isVisible {
-    display: block;
-    opacity: 1;
-  } @else {
-    display: none;
-    opacity: 0;
-  }
-}
-
 .toggle-switch {
   display: flex;
   overflow: hidden;
@@ -155,34 +152,22 @@ $gap                    : 0.25em;
       left: $padded-left-offset;
       background-color: $color-toggle-checked;
     }
-
-    .label-off {
-      @include setVisibility(false);
-    }
-
-    .label-on {
-      @include setVisibility(true);
-    }
-  }
-
-  .label-off, .label-on {
-    text-transform: uppercase;
-    font-weight: 700;
-    transition: all 0.3s ease-out;
   }
 
-  .label-off {
-    @include setVisibility(true);
-    @include locateNearCircle('left');
-    padding-right: $padding-horizontal;
-  }
+  .label {
+    font-weight: bold;
+    transition: all 0.3s ease-out, color 0s;
+    &.label-off {
+      @include locateNearCircle('left');
+      padding-right: $padding-horizontal;
+    }
 
-  .label-on {
-    @include setVisibility(false);
-    color: $color-text-checked;
+    &.label-on {
+      color: $color-text-checked;
 
-    @include locateNearCircle('right');
-    padding-left: $padding-horizontal;
+      @include locateNearCircle('right');
+      padding-left: $padding-horizontal;
+    }
   }
 }
 </style>
diff --git a/tests/e2e/revert-toggle.cy.ts b/tests/e2e/revert-toggle.cy.ts
@@ -1,4 +1,5 @@
 import { expectExists } from '@tests/shared/Assertions/ExpectExists';
+import { formatAssertionMessage } from '@tests/shared/FormatAssertionMessage';
 import { openCard } from './support/interactions/card';
 
 describe('revert toggle', () => {
@@ -21,7 +22,7 @@ describe('revert toggle', () => {
     it('should have revert label', () => {
       cy.get('@toggleSwitch')
         .find('span')
-        .contains('revert');
+        .contains('revert', { matchCase: false });
     });
 
     it('should render label completely without clipping', () => { // Regression test for a bug where label is partially rendered (clipped)
@@ -34,7 +35,11 @@ describe('revert toggle', () => {
           const expectedMinimumTextWidth = getTextWidth(text, font);
           const containerWidth = $label.parent().width();
           expectExists(containerWidth);
-          expect(expectedMinimumTextWidth).to.be.lessThan(containerWidth);
+          expect(expectedMinimumTextWidth).to.be.lessThan(containerWidth, formatAssertionMessage([
+            'Label is not rendered completely.',
+            `Expected minimum text width: ${expectedMinimumTextWidth}`,
+            `Actual text container width: ${containerWidth}`,
+          ]));
         });
     });
 

diff --git a/tests/unit/presentation/components/Scripts/View/Tree/NodeContent/ToggleSwitch.spec.ts b/tests/unit/presentation/components/Scripts/View/Tree/NodeContent/ToggleSwitch.spec.ts
@@ -5,15 +5,19 @@ import {
 } from '@vue/test-utils';
 import { nextTick, defineComponent } from 'vue';
 import ToggleSwitch from '@/presentation/components/Scripts/View/Tree/NodeContent/ToggleSwitch.vue';
+import { formatAssertionMessage } from '@tests/shared/FormatAssertionMessage';
 
 const DOM_INPUT_TOGGLE_CHECKBOX_SELECTOR = 'input.toggle-input';
-const DOM_INPUT_TOGGLE_LABEL_OFF_SELECTOR = 'span.label-off';
-const DOM_INPUT_TOGGLE_LABEL_ON_SELECTOR = 'span.label-on';
+const DOM_INPUT_TOGGLE_LABEL_OFF_SELECTOR = '.label-off';
+const DOM_INPUT_TOGGLE_LABEL_ON_SELECTOR = '.label-on';
 const DOM_INPUT_CIRCLE_ICON_SELECTOR = '.circle';
 
 describe('ToggleSwitch.vue', () => {
   describe('initial state', () => {
-    const testCases = [
+    const testScenarios: ReadonlyArray<{
+      readonly description: string;
+      readonly initialValue: boolean;
+    }> = [
       {
         initialValue: false,
         description: 'unchecked for false',
@@ -23,7 +27,7 @@ describe('ToggleSwitch.vue', () => {
         description: 'checked for true',
       },
     ];
-    testCases.forEach(({ initialValue, description }) => {
+    testScenarios.forEach(({ initialValue, description }) => {
       it(`renders as ${description}`, () => {
         // arrange
         const expectedState = initialValue;
@@ -42,17 +46,23 @@ describe('ToggleSwitch.vue', () => {
     });
   });
   describe('label rendering', () => {
-    const testCases = [
+    const testScenarios: ReadonlyArray<{
+      readonly description: string;
+      readonly initialValue: boolean;
+      readonly selector: string;
+    }> = [
       {
         description: 'off label',
+        initialValue: false,
         selector: DOM_INPUT_TOGGLE_LABEL_OFF_SELECTOR,
       },
       {
         description: 'on label',
+        initialValue: true,
         selector: DOM_INPUT_TOGGLE_LABEL_ON_SELECTOR,
       },
     ];
-    testCases.forEach(({ selector, description }) => {
+    testScenarios.forEach(({ selector, initialValue, description }) => {
       it(description, () => {
         // arrange
         const expectedLabel = 'expected-test-label';
@@ -61,18 +71,26 @@ describe('ToggleSwitch.vue', () => {
         const wrapper = mountComponent({
           properties: {
             label: expectedLabel,
+            modelValue: initialValue,
           },
         });
 
         // assert
         const element = wrapper.find(selector);
+        expect(element.exists()).to.equal(true, formatAssertionMessage([
+          `Selector "${selector}" could not find the DOM element`,
+          `HTML:\n${wrapper.html()}`,
+        ]));
         expect(element.text()).to.equal(expectedLabel);
       });
     });
   });
   describe('model updates', () => {
     describe('emission on change', () => {
-      const testCases = [
+      const testScenarios: ReadonlyArray<{
+        readonly initialValue: boolean;
+        readonly newCheckValue: boolean;
+      }> = [
         {
           initialValue: true,
           newCheckValue: false,
@@ -82,7 +100,7 @@ describe('ToggleSwitch.vue', () => {
           newCheckValue: true,
         },
       ];
-      testCases.forEach(({ initialValue, newCheckValue }) => {
+      testScenarios.forEach(({ initialValue, newCheckValue }) => {
         it(`emits ${newCheckValue} when initial value is ${initialValue} and checkbox value changes`, async () => {
           // arrange
           const wrapper = mountComponent({
@@ -102,7 +120,10 @@ describe('ToggleSwitch.vue', () => {
       });
     });
     describe('no emission on identical value', () => {
-      const testCases = [
+      const testScenarios: ReadonlyArray<{
+        readonly description: string;
+        readonly value: boolean;
+      }> = [
         {
           value: true,
           description: 'true',
@@ -112,7 +133,7 @@ describe('ToggleSwitch.vue', () => {
           description: 'false',
         },
       ];
-      testCases.forEach(({ value, description }) => {
+      testScenarios.forEach(({ value, description }) => {
         it(`does not emit for an unchanged value of ${description}`, async () => {
           // arrange
           const wrapper = mountComponent({