Fix revert toggle partial rendering

This commits fixes an issue where the `REVERT` label on revert toggle
might render as `REVER` or in a similarly clipped manner due to its
fixed width. The problem is visible when certain fonts fail to load or
browser engines render content non-standardly.

Changes:
- Refactor UI component to have its own separate Vue component with unit
  tests.
- Rework component design to utilize flexbox, enhancing its adaptability
  and simplifying the structure.
- Remove obselete `webkit` directives.
- Refactor SCSS for clearer structure and better SCSS best-practices.
- Use `em` when possible instead of `px` for improved responsiveness.

src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/RevertToggle.vue

@@ -1,29 +1,27 @@
 <template>
-  <div class="checkbox-switch">
+  <ToggleSwitch
-    <input
+    v-model="isChecked"
-      type="checkbox"
+    :stopClickPropagation="true"
-      class="input-checkbox"
+    :label="'revert'"
-      v-model="isReverted"
+  />
-      @change="toggleRevert()"
-      v-on:click.stop>
-    <div class="checkbox-animate">
-      <span class="checkbox-off">revert</span>
-      <span class="checkbox-on">revert</span>
-    </div>
-  </div>
 </template>
 
 <script lang="ts">
 import {
   PropType, defineComponent, ref, watch,
+  computed,
 } from 'vue';
 import { useCollectionState } from '@/presentation/components/Shared/Hooks/UseCollectionState';
 import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';
 import { IReverter } from './Reverter/IReverter';
 import { INodeContent } from './INodeContent';
 import { getReverter } from './Reverter/ReverterFactory';
+import ToggleSwitch from './ToggleSwitch.vue';
 
 export default defineComponent({
+  components: {
+    ToggleSwitch,
+  },
   props: {
     node: {
       type: Object as PropType<INodeContent>,
@@ -46,138 +44,43 @@ export default defineComponent({
     );
 
     onStateChange((newState) => {
-      updateStatus(newState.selection.selectedScripts);
+      updateRevertStatusFromState(newState.selection.selectedScripts);
       events.unsubscribeAll();
-      events.register(newState.selection.changed.on((scripts) => updateStatus(scripts)));
+      events.register(
+        newState.selection.changed.on((scripts) => updateRevertStatusFromState(scripts)),
+      );
     }, { immediate: true });
 
     async function onNodeChanged(node: INodeContent) {
       handler = getReverter(node, currentState.value.collection);
-      updateStatus(currentState.value.selection.selectedScripts);
+      updateRevertStatusFromState(currentState.value.selection.selectedScripts);
     }
 
-    function toggleRevert() {
+    async function updateRevertStatusFromState(scripts: ReadonlyArray<SelectedScript>) {
-      modifyCurrentState((state) => {
-        handler.selectWithRevertState(isReverted.value, state.selection);
-      });
-    }
-
-    async function updateStatus(scripts: ReadonlyArray<SelectedScript>) {
       isReverted.value = handler?.getState(scripts) ?? false;
     }
 
+    function syncReversionStatusWithState(value: boolean) {
+      if (value === isReverted.value) {
+        return;
+      }
+      modifyCurrentState((state) => {
+        handler.selectWithRevertState(value, state.selection);
+      });
+    }
+
+    const isChecked = computed({
+      get() {
+        return isReverted.value;
+      },
+      set: (value: boolean) => {
+        syncReversionStatusWithState(value);
+      },
+    });
+
     return {
-      isReverted,
+      isChecked,
-      toggleRevert,
     };
   },
 });
 </script>
-
-<style scoped lang="scss">
-@use 'sass:math';
-@use "@/presentation/assets/styles/main" as *;
-
-$color-bullet-unchecked : $color-primary-darker;
-$color-bullet-checked   : $color-on-secondary;
-$color-text-unchecked   : $color-on-primary;
-$color-text-checked     : $color-on-secondary;
-$color-bg-unchecked     : $color-primary;
-$color-bg-checked       : $color-secondary;
-$size-width             : 85px;
-$size-height            : 30px;
-
-// https://www.designlabthemes.com/css-toggle-switch/
-.checkbox-switch {
-  display: inline-block;
-  overflow: hidden;
-  position: relative;
-  width: $size-width;
-  height: $size-height;
-  -webkit-border-radius: $size-height;
-  border-radius: $size-height;
-  line-height: $size-height;
-  font-size: math.div($size-height, 2);
-
-  input.input-checkbox {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: $size-width;
-    height: $size-height;
-    padding: 0;
-    margin: 0;
-    opacity: 0;
-    z-index: 2;
-    @include clickable;
-  }
-
-  .checkbox-animate {
-    position: relative;
-    width: $size-width;
-    height: $size-height;
-    background-color: $color-bg-unchecked;
-    -webkit-transition: background-color 0.25s ease-out 0s;
-    transition: background-color 0.25s ease-out 0s;
-
-    // Circle
-    &:before {
-      $circle-size: $size-height * 0.66;
-
-      content: "";
-      display: block;
-      position: absolute;
-      width: $circle-size;
-      height: $circle-size;
-      border-radius: $circle-size * 2;
-      -webkit-border-radius: $circle-size * 2;
-      background-color: $color-bullet-unchecked;
-      top: $size-height * 0.16;
-      left: $size-width * 0.05;
-      -webkit-transition: left 0.3s ease-out 0s;
-      transition: left 0.3s ease-out 0s;
-      z-index: 10;
-    }
-  }
-
-  input.input-checkbox:checked {
-    + .checkbox-animate {
-        background-color: $color-bg-checked;
-    }
-    + .checkbox-animate:before {
-        left: ($size-width - math.div($size-width, 3.5));
-        background-color: $color-bullet-checked;
-    }
-    + .checkbox-animate .checkbox-off {
-        display: none;
-        opacity: 0;
-    }
-    + .checkbox-animate .checkbox-on {
-        display: block;
-        opacity: 1;
-    }
-  }
-
-  .checkbox-off, .checkbox-on {
-    text-transform: uppercase;
-    float: left;
-    font-weight: 700;
-    -webkit-transition: all 0.3s ease-out 0s;
-    transition: all 0.3s ease-out 0s;
-  }
-
-  .checkbox-off {
-    margin-left: math.div($size-width, 3);
-    opacity: 1;
-    color: $color-text-unchecked;
-  }
-
-  .checkbox-on {
-    display: none;
-    float: right;
-    margin-right: math.div($size-width, 3);
-    opacity: 0;
-    color: $color-text-checked;
-  }
-}
-</style>

src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/ToggleSwitch.vue

@@ -0,0 +1,188 @@
+<template>
+  <div
+    class="toggle-switch"
+    @click="handleClickPropagation"
+  >
+    <input
+      type="checkbox"
+      class="toggle-input"
+      v-model="isChecked"
+    >
+    <div class="toggle-animation">
+      <span class="label-off">{{ label }}</span>
+      <span class="label-on">{{ label }}</span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from 'vue';
+
+export default defineComponent({
+  props: {
+    value: Boolean,
+    label: {
+      type: String,
+      required: true,
+    },
+    stopClickPropagation: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: {
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+    input: (isChecked: boolean) => true,
+    /* eslint-enable @typescript-eslint/no-unused-vars */
+  },
+  setup(props, { emit }) {
+    const isChecked = computed({
+      get() {
+        return props.value;
+      },
+      set(value: boolean) {
+        if (value === props.value) {
+          return;
+        }
+        emit('input', value);
+      },
+    });
+
+    function handleClickPropagation(event: Event): void {
+      if (props.stopClickPropagation) {
+        event.stopPropagation();
+      }
+    }
+
+    return {
+      isChecked,
+      handleClickPropagation,
+    };
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@use 'sass:math';
+@use "@/presentation/assets/styles/main" as *;
+
+$color-toggle-unchecked : $color-primary-darker;
+$color-toggle-checked   : $color-on-secondary;
+$color-text-unchecked   : $color-on-primary;
+$color-text-checked     : $color-on-secondary;
+$color-bg-unchecked     : $color-primary;
+$color-bg-checked       : $color-secondary;
+$size-height            : 30px;
+$size-circle            : math.div($size-height * 2, 3);
+$padding-horizontal     : 0.40em;
+$gap                    : 0.25em;
+
+@mixin locateNearCircle($direction: 'left') {
+  $circle-width: calc(#{$size-circle} + #{$padding-horizontal});
+  $circle-space: calc(#{$circle-width} + #{$gap});
+  @if $direction == 'left' {
+    margin-left: $circle-space;
+  } @else {
+    margin-right: $circle-space;
+  }
+}
+
+@mixin setVisibility($isVisible: true) {
+  @if $isVisible {
+    display: block;
+    opacity: 1;
+  } @else {
+    display: none;
+    opacity: 0;
+  }
+}
+
+.toggle-switch {
+  display: flex;
+  overflow: hidden;
+  position: relative;
+  width: auto;
+  height: $size-height;
+  border-radius: $size-height;
+  line-height: $size-height;
+  font-size: math.div($size-height, 2);
+
+  input.toggle-input {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    z-index: 2;
+    @include clickable;
+  }
+
+  .toggle-animation {
+    display: flex;
+    align-items: center;
+    gap: $gap;
+    width: 100%;
+    height: 100%;
+    background-color: $color-bg-unchecked;
+    transition: background-color 0.25s ease-out;
+
+    &:before {
+      content: "";
+      display: block;
+      position: absolute;
+      left: $padding-horizontal;
+      $initial-top: 50%;
+      $centered-top-offset: math.div($size-circle, 2);
+      $centered-top: calc(#{$initial-top} - #{$centered-top-offset});
+      top: $centered-top;
+      width: $size-circle;
+      height: $size-circle;
+      border-radius: 50%;
+      background-color: $color-toggle-unchecked;
+      transition: left 0.3s ease-out;
+      z-index: 10;
+    }
+  }
+
+  input.toggle-input:checked + .toggle-animation {
+    background-color: $color-bg-checked;
+    flex-direction: row-reverse;
+
+    &:before {
+      $left-offset: calc(100% - #{$size-circle});
+      $padded-left-offset: calc(#{$left-offset} - #{$padding-horizontal});
+      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-on {
+    @include setVisibility(false);
+    color: $color-text-checked;
+
+    @include locateNearCircle('right');
+    padding-left: $padding-horizontal;
+  }
+}
+</style>

tests/e2e/specs/revert-toggle.cy.js

@@ -0,0 +1,50 @@
+describe('revert toggle', () => {
+  context('toggle switch', () => {
+    beforeEach(() => {
+      cy.visit('/');
+      cy.get('.card')
+        .eq(1) // to get 2nd element, first is often cleanup that may lack revert button
+        .click(); // open the card card
+      cy.get('.toggle-switch')
+        .first()
+        .as('toggleSwitch');
+    });
+
+    it('should be visible', () => {
+      cy.get('@toggleSwitch')
+        .should('be.visible');
+    });
+
+    it('should have revert label', () => {
+      cy.get('@toggleSwitch')
+        .find('span')
+        .contains('revert');
+    });
+
+    it('should render label completely without clipping', () => {
+      cy
+        .get('@toggleSwitch')
+        .find('span')
+        .should(($label) => {
+          const text = $label.text();
+          const font = getFont($label[0]);
+          const expectedMinimumTextWidth = getTextWidth(text, font);
+          const containerWidth = $label.parent().width();
+          expect(expectedMinimumTextWidth).to.be.lessThan(containerWidth);
+        });
+    });
+  });
+});
+
+function getFont(element) {
+  const computedStyle = window.getComputedStyle(element);
+  return `${computedStyle.fontWeight} ${computedStyle.fontSize} ${computedStyle.fontFamily}`;
+}
+
+function getTextWidth(text, font) {
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d');
+  ctx.font = font;
+  const measuredWidth = ctx.measureText(text).width;
+  return measuredWidth;
+}

tests/unit/presentation/components/Scripts/View/Tree/SelectableTree/Node/ToggleSwitch.spec.ts

@@ -0,0 +1,238 @@
+import 'mocha';
+import {
+  Wrapper, shallowMount,
+  mount,
+} from '@vue/test-utils';
+import { expect } from 'chai';
+import { nextTick, defineComponent } from 'vue';
+import ToggleSwitch from '@/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/ToggleSwitch.vue';
+
+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';
+
+describe('ToggleSwitch.vue', () => {
+  describe('initial state', () => {
+    const testCases = [
+      {
+        initialValue: false,
+        description: 'unchecked for false',
+      },
+      {
+        initialValue: true,
+        description: 'checked for true',
+      },
+    ];
+    testCases.forEach(({ initialValue, description }) => {
+      it(`renders as ${description}`, () => {
+        // arrange
+        const expectedState = initialValue;
+
+        // act
+        const wrapper = mountComponent({
+          properties: {
+            modelValue: initialValue,
+          },
+        });
+        const { checkboxElement } = getCheckboxElement(wrapper);
+
+        // assert
+        expect(checkboxElement.checked).to.equal(expectedState);
+      });
+    });
+  });
+  describe('label rendering', () => {
+    const testCases = [
+      {
+        description: 'off label',
+        selector: DOM_INPUT_TOGGLE_LABEL_OFF_SELECTOR,
+      },
+      {
+        description: 'on label',
+        selector: DOM_INPUT_TOGGLE_LABEL_ON_SELECTOR,
+      },
+    ];
+    testCases.forEach(({ selector, description }) => {
+      it(description, () => {
+        // arrange
+        const expectedLabel = 'expected-test-label';
+
+        // act
+        const wrapper = mountComponent({
+          properties: {
+            label: expectedLabel,
+          },
+        });
+
+        // assert
+        const element = wrapper.find(selector);
+        expect(element.text()).to.equal(expectedLabel);
+      });
+    });
+  });
+  describe('model updates', () => {
+    describe('emission on change', () => {
+      const testCases = [
+        {
+          initialValue: true,
+          newCheckValue: false,
+        },
+        {
+          initialValue: false,
+          newCheckValue: true,
+        },
+      ];
+      testCases.forEach(({ initialValue, newCheckValue }) => {
+        it(`emits ${newCheckValue} when initial value is ${initialValue} and checkbox value changes`, async () => {
+          // arrange
+          const wrapper = mountComponent({
+            properties: {
+              modelValue: initialValue,
+            },
+          });
+          const { checkboxWrapper } = getCheckboxElement(wrapper);
+
+          // act
+          await checkboxWrapper.setChecked(newCheckValue);
+          await nextTick();
+
+          // assert
+          expect(wrapper.emitted().input).to.deep.equal([[newCheckValue]]);
+        });
+      });
+    });
+    describe('no emission on identical value', () => {
+      const testCases = [
+        {
+          value: true,
+          description: 'true',
+        },
+        {
+          value: false,
+          description: 'false',
+        },
+      ];
+      testCases.forEach(({ value, description }) => {
+        it(`does not emit for an unchanged value of ${description}`, async () => {
+          // arrange
+          const wrapper = mountComponent({
+            properties: {
+              modelValue: value,
+            },
+          });
+          const { checkboxWrapper } = getCheckboxElement(wrapper);
+
+          // act
+          await checkboxWrapper.setChecked(value);
+          await nextTick();
+
+          // assert
+          expect(wrapper.emitted().input).to.equal(undefined);
+        });
+      });
+    });
+  });
+
+  describe('click propagation', () => {
+    it('stops propagation `stopClickPropagation` is true', async () => {
+      // arrange
+      const { wrapper: parentWrapper, parentClickEventName } = mountToggleSwitchParent(
+        { stopClickPropagation: true },
+      );
+      const switchWrapper = parentWrapper.getComponent(ToggleSwitch);
+
+      // act
+      switchWrapper.trigger('click');
+      await nextTick();
+
+      // assert
+      expect(switchWrapper.exists());
+      const receivedEvents = parentWrapper.emitted(parentClickEventName);
+      expect(receivedEvents).to.equal(undefined);
+    });
+    it('allows propagation `stopClickPropagation` is false', async () => {
+      // arrange
+      const { wrapper: parentWrapper, parentClickEventName } = mountToggleSwitchParent(
+        { stopClickPropagation: false },
+      );
+      const switchWrapper = parentWrapper.getComponent(ToggleSwitch);
+
+      // act
+      switchWrapper.trigger('click');
+      await nextTick();
+
+      // assert
+      expect(switchWrapper.exists());
+      const receivedEvents = parentWrapper.emitted(parentClickEventName);
+      expect(receivedEvents).to.have.lengthOf(1);
+    });
+  });
+});
+
+function getCheckboxElement(wrapper: Wrapper<Vue>) {
+  const checkboxWrapper = wrapper.find(DOM_INPUT_TOGGLE_CHECKBOX_SELECTOR);
+  const checkboxElement = checkboxWrapper.element as HTMLInputElement;
+  return {
+    checkboxWrapper,
+    checkboxElement,
+  };
+}
+
+function mountComponent(options?: {
+  readonly properties?: {
+    readonly modelValue?: boolean,
+    readonly label?: string,
+    readonly stopClickPropagation?: boolean,
+  }
+}) {
+  const wrapper = shallowMount(ToggleSwitch as unknown, {
+    propsData: {
+      value: options?.properties?.modelValue,
+      label: options?.properties?.label ?? 'test-label',
+      stopClickPropagation: options?.properties?.stopClickPropagation,
+    },
+  });
+  return wrapper;
+}
+
+function mountToggleSwitchParent(options?: {
+  readonly stopClickPropagation?: boolean,
+}) {
+  const parentClickEventName = 'parent-clicked';
+  const parentComponent = defineComponent({
+    components: {
+      ToggleSwitch,
+    },
+    emits: [parentClickEventName],
+    template: `
+      <div @click="handleParentClick">
+        <ToggleSwitch
+          :stopClickPropagation="stopClickPropagation"
+          :label="'test-label'"
+        />
+      </div>
+    `,
+    setup(_, { emit }) {
+      const stopClickPropagation = options?.stopClickPropagation;
+
+      function handleParentClick() {
+        emit(parentClickEventName);
+      }
+
+      return {
+        handleParentClick,
+        stopClickPropagation,
+      };
+    },
+  });
+  const wrapper = mount(
+    parentComponent as unknown,
+    {
+      stubs: { ToggleSwitch: false },
+    },
+  );
+  return {
+    wrapper,
+    parentClickEventName,
+  };
+}