ec98d8417f
This commit progresses the migration from Vue CLI to Vite (#230). TypeScript migration: - Convert JavaScript Cypress tests and configurations to TypeScript. - Introduce `tsconfig.json` for Cypress, following official recommendation. Test execution: - Use Cypress CLI to run the tests. - Rename Cypress commands to reflect official naming conventions. - Start Vue server prior to Cypress execution, using `start-server-and-test` package based on official documentation. - Remove dependency on Vue CLI plugin ((`@vue/cli-plugin-e2e-cypress`). Configuration standardization (based on Cypress docs): - Delete unused `plugins/` directory. - Move test (spec) files to to the root directory. - Add official ESLint plugin (`eslint-plugin-cypress`). Changes for importing `vite.config.ts` into `cypress.config.ts`: - Add TypeScript import assertations to files importing JSON files. - Use ESM friendly way instead of `__dirname` to solve `ReferenceError: __dirname is not defined in ES module scrope`. Other changes: - Simplify comments in placeholder files. - Create Cypress specific `.gitignore` for enhanced maintainability, clarity and scalability. - Remove redundant `vue.config.cjs`.
51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
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;
|
|
}
|