javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-11-05 13:26:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(core): support for simultaneous pseudo states (#10656)

Browse Source
This commit is contained in:
Dimitris-Rafail Katsampas
2025-01-13 05:18:08 +02:00
committed by GitHub
parent a883a79e3b
commit f970455007
16 changed files with 210 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/automated/src/ui/button/button-tests.ts
View File

@@ -274,7 +274,7 @@ export var test_StateHighlighted_also_fires_pressedState = function () {
helper.waitUntilLayoutReady(view);
view._goToVisualState('highlighted');
view._addVisualState('highlighted');
var actualResult = buttonTestsNative.getNativeBackgroundColor(view);
TKUnit.assert(actualResult.hex === expectedNormalizedColor, 'Actual: ' + actualResult.hex + '; Expected: ' + expectedNormalizedColor);
@@ -291,7 +291,7 @@ export var test_StateHighlighted_also_fires_activeState = function () {
helper.waitUntilLayoutReady(view);
view._goToVisualState('highlighted');
view._addVisualState('highlighted');
var actualResult = buttonTestsNative.getNativeBackgroundColor(view);
TKUnit.assert(actualResult.hex === expectedNormalizedColor, 'Actual: ' + actualResult.hex + '; Expected: ' + expectedNormalizedColor);

12
apps/automated/src/ui/styling/style-tests.ts
View File

@@ -602,9 +602,9 @@ export function test_restore_original_values_when_state_is_changed() {
page.css = 'button { color: blue; } ' + 'button:pressed { color: red; } ';
helper.assertViewColor(btn, '#0000FF');
btn._goToVisualState('pressed');
btn._addVisualState('pressed');
helper.assertViewColor(btn, '#FF0000');
btn._goToVisualState('normal');
btn._removeVisualState('pressed');
helper.assertViewColor(btn, '#0000FF');
}
@@ -655,9 +655,9 @@ export const test_composite_selector_type_class_state = function () {
// The button with no class should not react to state changes.
TKUnit.assertNull(btnWithNoClass.style.color, 'Color should not have a value.');
btnWithNoClass._goToVisualState('pressed');
btnWithNoClass._addVisualState('pressed');
TKUnit.assertNull(btnWithNoClass.style.color, 'Color should not have a value.');
btnWithNoClass._goToVisualState('normal');
btnWithNoClass._removeVisualState('pressed');
TKUnit.assertNull(btnWithNoClass.style.color, 'Color should not have a value.');
TKUnit.assertNull(lblWithClass.style.color, 'Color should not have a value');
@@ -864,11 +864,11 @@ function testSelectorsPrioritiesTemplate(css: string) {
function testButtonPressedStateIsRed(btn: Button) {
TKUnit.assert(btn.style.color === undefined, 'Color should not have a value.');
btn._goToVisualState('pressed');
btn._addVisualState('pressed');
helper.assertViewColor(btn, '#FF0000');
btn._goToVisualState('normal');
btn._removeVisualState('pressed');
TKUnit.assert(btn.style.color === undefined, 'Color should not have a value after returned to normal state.');
}

51
apps/automated/src/ui/styling/visual-state-tests.ts
View File

@@ -94,3 +94,54 @@ export var test_goToVisualState_NoState_ShouldGoToNormal = function () {
helper.do_PageTest_WithButton(test);
};
export var test_addVisualState = function () {
var test = function (views: Array<view.View>) {
(<page.Page>views[0]).css = 'button:hovered { color: red; background-color: orange } button:pressed { color: white }';
var btn = views[1];
assertInState(btn, btn.defaultVisualState, ['hovered', 'pressed', btn.defaultVisualState]);
btn._addVisualState('hovered');
assertInState(btn, 'hovered', ['hovered', 'pressed', btn.defaultVisualState]);
TKUnit.assert(types.isDefined(btn.style.color) && btn.style.color.name === 'red');
TKUnit.assert(types.isDefined(btn.style.backgroundColor) && btn.style.backgroundColor.name === 'orange');
btn._addVisualState('pressed');
assertInState(btn, 'hovered', ['hovered', btn.defaultVisualState]);
assertInState(btn, 'pressed', ['pressed', btn.defaultVisualState]);
TKUnit.assert(types.isDefined(btn.style.color) && btn.style.color.name === 'white');
TKUnit.assert(types.isDefined(btn.style.backgroundColor) && btn.style.backgroundColor.name === 'orange');
};
helper.do_PageTest_WithButton(test);
};
export var test_removeVisualState = function () {
var test = function (views: Array<view.View>) {
(<page.Page>views[0]).css = 'button { background-color: yellow; color: green } button:pressed { background-color: red; color: white }';
var btn = views[1];
btn._addVisualState('pressed');
assertInState(btn, 'pressed', ['pressed', 'hovered', btn.defaultVisualState]);
TKUnit.assert(types.isDefined(btn.style.color) && btn.style.color.name === 'white');
TKUnit.assert(types.isDefined(btn.style.backgroundColor) && btn.style.backgroundColor.name === 'red');
btn._removeVisualState('pressed');
assertInState(btn, btn.defaultVisualState, ['hovered', 'pressed', btn.defaultVisualState]);
TKUnit.assert(types.isDefined(btn.style.color) && btn.style.color.name === 'green');
TKUnit.assert(types.isDefined(btn.style.backgroundColor) && btn.style.backgroundColor.name === 'yellow');
};
helper.do_PageTest_WithButton(test);
};