cb42f11b97
This commit introduces a batched debounce mechanism for managing user
selection state changes. It effectively reduces unnecessary processing
during rapid script checking, preventing multiple triggers for code
compilation and UI rendering.
Key improvements include:
- Enhanced performance, especially noticeable when selecting large
categories. This update resolves minor UI freezes experienced when
selecting categories with numerous scripts.
- Correction of a bug where the code area only highlighted the last
selected script when multiple scripts were chosen.
Other changes include:
- Timing functions:
- Create a `Timing` folder for `throttle` and the new
`batchedDebounce` functions.
- Move these functions to the application layer from the presentation
layer, reflecting their application-wide use.
- Refactor existing code for improved clarity, naming consistency, and
adherence to new naming conventions.
- Add missing unit tests.
- `UserSelection`:
- State modifications in `UserSelection` now utilize a singular object
inspired by the CQRS pattern, enabling batch updates and flexible
change configurations, thereby simplifying change management.
- Remove the `I` prefix from related interfaces to align with new coding
standards.
- Refactor related code for better testability in isolation with
dependency injection.
- Repository:
- Move repository abstractions to the application layer.
- Improve repository abstraction to combine `ReadonlyRepository` and
`MutableRepository` interfaces.
- E2E testing:
- Introduce E2E tests to validate the correct batch selection
behavior.
- Add a specialized data attribute in `TheCodeArea.vue` for improved
testability.
- Reorganize shared Cypress functions for a more idiomatic Cypress
approach.
- Improve test documentation with related information.
- `SelectedScript`:
- Create an abstraction for simplified testability.
- Introduce `SelectedScriptStub` in tests as a substitute for the
actual object.
58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
import { expectExists } from '@tests/shared/Assertions/ExpectExists';
|
|
import { openCard } from './support/interactions/card';
|
|
|
|
describe('revert toggle', () => {
|
|
context('toggle switch', () => {
|
|
beforeEach(() => {
|
|
cy.visit('/');
|
|
openCard({
|
|
cardIndex: 1, // first is often cleanup that may lack revert button
|
|
});
|
|
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();
|
|
expectExists(containerWidth);
|
|
expect(expectedMinimumTextWidth).to.be.lessThan(containerWidth);
|
|
});
|
|
});
|
|
});
|
|
});
|
|
|
|
function getFont(element: Element): string {
|
|
const computedStyle = window.getComputedStyle(element);
|
|
return `${computedStyle.fontWeight} ${computedStyle.fontSize} ${computedStyle.fontFamily}`;
|
|
}
|
|
|
|
function getTextWidth(text: string, font: string): number {
|
|
const canvas = document.createElement('canvas');
|
|
const ctx = canvas.getContext('2d');
|
|
if (!ctx) {
|
|
throw new Error('Unable to get 2D context from canvas element');
|
|
}
|
|
ctx.font = font;
|
|
const measuredWidth = ctx.measureText(text).width;
|
|
return measuredWidth;
|
|
}
|