39e650cf11
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.
51 lines
1.4 KiB
JavaScript
51 lines
1.4 KiB
JavaScript
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;
|
|
}
|