diff --git a/src/presentation/components/Scripts/View/Tree/NodeContent/RevertToggle.vue b/src/presentation/components/Scripts/View/Tree/NodeContent/RevertToggle.vue
index aa3582ce..862038e5 100644
--- a/src/presentation/components/Scripts/View/Tree/NodeContent/RevertToggle.vue
+++ b/src/presentation/components/Scripts/View/Tree/NodeContent/RevertToggle.vue
@@ -2,7 +2,7 @@
diff --git a/src/presentation/components/Scripts/View/Tree/NodeContent/ToggleSwitch.vue b/src/presentation/components/Scripts/View/Tree/NodeContent/ToggleSwitch.vue
index 4aff760c..9622fd4a 100644
--- a/src/presentation/components/Scripts/View/Tree/NodeContent/ToggleSwitch.vue
+++ b/src/presentation/components/Scripts/View/Tree/NodeContent/ToggleSwitch.vue
@@ -10,8 +10,15 @@
>
-
{{ label }}
-
{{ label }}
+
+ {{ label }}
+
@@ -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;
+ }
}
}
diff --git a/tests/e2e/revert-toggle.cy.ts b/tests/e2e/revert-toggle.cy.ts
index 64218f41..3dce30a3 100644
--- 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
index 412537f4..d58851da 100644
--- 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({