diff --git a/tests/xts/entry/src/main/ets/pages/components/TogglePage.ets b/tests/xts/entry/src/main/ets/pages/components/TogglePage.ets index 675769a185a7ed3b05d48cf390863aed638da10b..858ced8a02b88685d0f314aad9b7d7a666dd085f 100644 --- a/tests/xts/entry/src/main/ets/pages/components/TogglePage.ets +++ b/tests/xts/entry/src/main/ets/pages/components/TogglePage.ets @@ -13,23 +13,31 @@ * limitations under the License. */ import { storage } from '../../entryability/EntryAbility' -import { redCustomTheme } from '../../themes/CustomTheme' +import { brownCustomTheme, redCustomTheme } from '../../themes/CustomTheme' import { CustomTheme } from '@ohos.arkui.theme' export const toggleThemeProperty: string = `toggleThemeProperty` +export const toggleThemeSetProperty: string = `toggleThemeSetProperty` export class ToggleKeys { static readonly toggleButtonSystem = `toggleButtonSystem` static readonly toggleSwitchSystem = `toggleSwitchSystem` - static readonly toggleCheckBoxSystem = `toggleCheckBoxMultiSystem` + static readonly toggleCheckBoxSystem = `toggleCheckBoxSystem` + static readonly toggleButtonSystemCustomAttrs = `toggleButtonSystem_CustomAttrs` + static readonly toggleSwitchSystemCustomAttrs = `toggleSwitchSystem_CustomAttrs` + static readonly toggleCheckBoxSystemCustomAttrs = `toggleCheckBoxSystem_CustomAttrs` static readonly toggleButtonWithTheme = `toggleButtonWithTheme` static readonly toggleSwitchWithTheme = `toggleSwitchWithTheme` static readonly toggleCheckBoxWithTheme = `toggleCheckBoxWithTheme` + static readonly toggleButtonWithThemeCustomAttrs = `toggleButtonWithTheme_CustomAttrs` + static readonly toggleSwitchWithThemeCustomAttrs = `toggleSwitchWithTheme_CustomAttrs` + static readonly toggleCheckBoxWithThemeCustomAttrs = `toggleCheckBoxWithTheme_CustomAttrs` } @Entry(storage) @Component struct TogglePage { - @LocalStorageProp(toggleThemeProperty) localTheme: CustomTheme | undefined = redCustomTheme + @LocalStorageLink(toggleThemeProperty) localTheme: CustomTheme | undefined = redCustomTheme + @LocalStorageLink(toggleThemeSetProperty) themeSet: boolean = true build() { Row() { @@ -39,20 +47,57 @@ struct TogglePage { .height(`30vp`) .width(`30vp`) .key(ToggleKeys.toggleButtonSystem) + Toggle({ type: ToggleType.Switch }) .key(ToggleKeys.toggleSwitchSystem) + Toggle({ type: ToggleType.Checkbox }) .key(ToggleKeys.toggleCheckBoxSystem) - WithTheme({ theme: this.localTheme }) { + + Toggle({ type: ToggleType.Button }) + .backgroundColor(brownCustomTheme.colors?.compBackgroundTertiary) + .selectedColor(brownCustomTheme.colors?.compEmphasizeSecondary) + .height(`30vp`) + .width(`30vp`) + .key(ToggleKeys.toggleButtonSystemCustomAttrs) + + Toggle({ type: ToggleType.Switch }) + .switchPointColor(brownCustomTheme.colors?.compBackgroundPrimaryContrary) + .selectedColor(brownCustomTheme.colors?.compBackgroundEmphasize) + .key(ToggleKeys.toggleSwitchSystemCustomAttrs) + + Toggle({ type: ToggleType.Checkbox }) + .selectedColor(brownCustomTheme.colors?.compBackgroundEmphasize) + .key(ToggleKeys.toggleCheckBoxSystemCustomAttrs) + + WithTheme({ theme: this.themeSet ? this.localTheme : undefined }) { Column({ space: '8vp' }) { Toggle({ type: ToggleType.Button }) .height(`30vp`) .width(`30vp`) .key(ToggleKeys.toggleButtonWithTheme) + Toggle({ type: ToggleType.Switch }) .key(ToggleKeys.toggleSwitchWithTheme) + Toggle({ type: ToggleType.Checkbox }) .key(ToggleKeys.toggleCheckBoxWithTheme) + + Toggle({ type: ToggleType.Button }) + .backgroundColor(brownCustomTheme.colors?.compBackgroundTertiary) + .selectedColor(brownCustomTheme.colors?.compEmphasizeSecondary) + .height(`30vp`) + .width(`30vp`) + .key(ToggleKeys.toggleButtonWithThemeCustomAttrs) + + Toggle({ type: ToggleType.Switch }) + .switchPointColor(brownCustomTheme.colors?.compBackgroundPrimaryContrary) + .selectedColor(brownCustomTheme.colors?.compBackgroundEmphasize) + .key(ToggleKeys.toggleSwitchWithThemeCustomAttrs) + + Toggle({ type: ToggleType.Checkbox }) + .selectedColor(brownCustomTheme.colors?.compBackgroundEmphasize) + .key(ToggleKeys.toggleCheckBoxWithThemeCustomAttrs) } } } diff --git a/tests/xts/entry/src/main/ets/test/components/Toggle.test.ets b/tests/xts/entry/src/main/ets/test/components/Toggle.test.ets index ef0275963d94664e55d09db7be354108d79de6b3..decb71aca9d0c6a6c0aa842ff427642b8c84eebd 100644 --- a/tests/xts/entry/src/main/ets/test/components/Toggle.test.ets +++ b/tests/xts/entry/src/main/ets/test/components/Toggle.test.ets @@ -15,26 +15,45 @@ import router from '@ohos.router' import { afterAll, beforeAll, beforeEach, describe, it } from '@ohos/hypium' import { storage } from '../../entryability/EntryAbility' -import { greenCustomTheme, redCustomTheme } from '../../themes/CustomTheme' +import { brownCustomTheme, greenCustomTheme, redCustomTheme } from '../../themes/CustomTheme' import { checkValue, frameTime, sleep } from '../Utils' import { Theme, CustomTheme } from '@ohos.arkui.theme' -import { toggleThemeProperty } from '../../pages/components/TogglePage' +import { ToggleKeys, toggleThemeProperty, toggleThemeSetProperty } from '../../pages/components/TogglePage' import { colorValues } from '../../pages/Index' -const toggleKeys: string [] = [ - `toggleButtonSystem`, - `toggleSwitchSystem`, - `toggleCheckBoxMultiSystem`, - `toggleButtonWithTheme`, - `toggleSwitchWithTheme`, - `toggleCheckBoxWithTheme` -] + +const EMPTY_CHECK: string = 'emptyCheck'; +const EMPTY_ATTR: string = 'emptyAttr'; export default function toggleThemeTest() { const SUITE: string = `ToggleThemeTest` - let localTheme: CustomTheme | undefined - let changeTheme: boolean = false + const toggleKeys: string [] = [ + ToggleKeys.toggleButtonSystem, + ToggleKeys.toggleSwitchSystem, + ToggleKeys.toggleCheckBoxSystem, + ToggleKeys.toggleButtonSystemCustomAttrs, + ToggleKeys.toggleSwitchSystemCustomAttrs, + ToggleKeys.toggleCheckBoxSystemCustomAttrs, + ToggleKeys.toggleButtonWithTheme, + ToggleKeys.toggleSwitchWithTheme, + ToggleKeys.toggleCheckBoxWithTheme, + ToggleKeys.toggleButtonWithThemeCustomAttrs, + ToggleKeys.toggleSwitchWithThemeCustomAttrs, + ToggleKeys.toggleCheckBoxWithThemeCustomAttrs, + ] + + // themes for each testcase + const themes: (CustomTheme | undefined)[] = [ + redCustomTheme, + redCustomTheme, + greenCustomTheme, + undefined + ] + + // testcase index: starting with -1 to get 0 in 1st testcase + let index: number = -1; + describe(SUITE, () => { beforeAll(async () => { try { @@ -44,7 +63,6 @@ export default function toggleThemeTest() { const pages: router.RouterState = router.getState() if (pages?.name !== `TogglePage`) { await router.pushUrl(options).then(() => { - localTheme = storage.get(toggleThemeProperty) console.info(`${SUITE} router.pushUrl success`) }) } @@ -54,17 +72,17 @@ export default function toggleThemeTest() { } }) beforeEach(() => { - if (!changeTheme) - return - if ((storage.get(toggleThemeProperty) as Theme)?.colors?.fontEmphasize - == redCustomTheme?.colors?.fontEmphasize) { - storage.setOrCreate(toggleThemeProperty, greenCustomTheme) - } - else { - storage.setOrCreate(toggleThemeProperty, redCustomTheme) + // setting preconditions for each testcase + index = index + 1 + // if theme is empty + if (themes[index] === undefined) { + // sending themeSet=false to TogglePage to use withTheme(undefined) + AppStorage.setOrCreate(toggleThemeSetProperty, false) + } else { + // sending theme=current theme to TogglePage to use withTheme(current theme) + AppStorage.setOrCreate(toggleThemeProperty, themes[index] ?? redCustomTheme) + AppStorage.setOrCreate(toggleThemeSetProperty, true) } - localTheme = storage.get(toggleThemeProperty) - changeTheme = false }) afterAll(() => { try { @@ -82,23 +100,7 @@ export default function toggleThemeTest() { console.info(`${SUITE} ${CASE} START`) toggleKeys.forEach((key) => { if (key.search(`WithTheme`) > 0) return - const toggleJSON = getInspectorByKey(key) - const toggleAttrs: ToggleAttribute = JSON.parse(toggleJSON).$attrs - if (key.toLowerCase().search(`button`) > 0) { - const backgroundColor: string = toggleAttrs?.backgroundColor?.toString().toUpperCase() - checkValue(backgroundColor, colorValues?.get(`compBackgroundTertiary`)) - } - if (key.toLowerCase().search(`switch`) > 0) { - const switchPointColor: string = toggleAttrs?.switchPointColor?.toString().toUpperCase() - checkValue(switchPointColor, colorValues?.get(`compBackgroundPrimaryContrary`)) - } - if (key.toLowerCase().search('switch') > 0 || key.toLowerCase().search('checkbox') > 0) { - const selectedColor: string = toggleAttrs?.selectedColor?.toString().toUpperCase() - checkValue(selectedColor, colorValues?.get(`compBackgroundEmphasize`)) - } else { - const selectedColor: string = toggleAttrs?.selectedColor?.toString().toUpperCase() - checkValue(selectedColor, colorValues?.get(`compEmphasizeSecondary`)) - } + checkWithTheme(key, checkValue, undefined, key.search(`CustomAttrs`) > 0) }) console.info(`${SUITE} ${CASE} END`) }) @@ -108,43 +110,77 @@ export default function toggleThemeTest() { it(`ActsToggleThemeColors_0200`, 0, () => { const CASE: string = `ActsToggleThemeColors_0200` console.info(`${SUITE} ${CASE} START`) - checkWithTheme(checkValue, localTheme) - changeTheme = true + toggleKeys.forEach((key) => { + if (key.search(`System`) > 0) return + checkWithTheme(key, checkValue, themes[index], key.search(`CustomAttrs`) > 0) + }) console.info(`${SUITE} ${CASE} END`) }) /** * check custom colors values of the Toggle component + * after changing theme */ it(`ActsToggleThemeColors_0300`, 0, async () => { const CASE: string = `ActsToggleThemeColors_0300` console.info(`${SUITE} ${CASE} START`) await sleep(frameTime) - checkWithTheme(checkValue, localTheme) - changeTheme = true + toggleKeys.forEach((key) => { + if (key.search(`System`) > 0) return + checkWithTheme(key, checkValue, themes[index], key.search(`CustomAttrs`) > 0) + }) + console.info(`${SUITE} ${CASE} END`) + }) + /** + * check system colors values of the Toggle component + * after resetting theme + */ + it(`ActsToggleThemeColors_0400`, 0, async () => { + const CASE: string = `ActsToggleThemeColors_0400` + console.info(`${SUITE} ${CASE} START`) + await sleep(frameTime) + toggleKeys.forEach((key) => { + checkWithTheme(key, checkValue, undefined, key.search(`CustomAttrs`) > 0) + }) console.info(`${SUITE} ${CASE} END`) }) }) } -function checkWithTheme(checkValue: Function, localTheme: CustomTheme | undefined) { - toggleKeys.forEach((key) => { - if (key.search(`System`) > 0) return - const toggleJSON = getInspectorByKey(key) - const toggleAttrs: ToggleAttribute = JSON.parse(toggleJSON).$attrs - if (key.toLowerCase().search(`button`) > 0) { - const backgroundColor: string = toggleAttrs?.backgroundColor?.toString().toUpperCase() - checkValue(backgroundColor, localTheme?.colors?.compBackgroundTertiary) - } - if (key.toLowerCase().search(`switch`) > 0) { - const switchPointColor: string = toggleAttrs?.switchPointColor?.toString().toUpperCase() - checkValue(switchPointColor, localTheme?.colors?.compBackgroundPrimaryContrary) - } - if (key.toLowerCase().search('switch') > 0 || key.toLowerCase().search('checkbox') > 0) { - const selectedColor: string = toggleAttrs?.selectedColor?.toString().toUpperCase() - checkValue(selectedColor, localTheme?.colors?.compBackgroundEmphasize) - } else { - const selectedColor: string = toggleAttrs?.selectedColor?.toString().toUpperCase() - checkValue(selectedColor, localTheme?.colors?.compEmphasizeSecondary) - } - }) +function checkWithTheme(key: string, checkValue: Function, localTheme: CustomTheme | undefined, customAttrs: boolean) { + const toggleJSON = getInspectorByKey(key) + const toggleAttrs: ToggleAttribute = JSON.parse(toggleJSON).$attrs + if (key.toLowerCase().search(`button`) > 0) { + const backgroundColor: string = toggleAttrs?.backgroundColor?.toString().toUpperCase() ?? EMPTY_ATTR + const checkBackgroundColor: string = (customAttrs ? brownCustomTheme : localTheme)?.colors?.compBackgroundTertiary?.toString().toUpperCase() + ?? colorValues.get(`compBackgroundTertiary`) + ?? EMPTY_CHECK + checkValue(backgroundColor, checkBackgroundColor) + + const selectedColor: string = toggleAttrs?.selectedColor?.toString().toUpperCase() ?? EMPTY_ATTR + const checkSelectedColor: string = (customAttrs ? brownCustomTheme : localTheme)?.colors?.compEmphasizeSecondary?.toString().toUpperCase() + ?? colorValues.get(`compEmphasizeSecondary`) + ?? EMPTY_CHECK + checkValue(selectedColor, checkSelectedColor) + } + else if (key.toLowerCase().search(`switch`) > 0) { + const switchPointColor: string = toggleAttrs?.switchPointColor?.toString().toUpperCase() ?? EMPTY_ATTR + const checkSwitchPointColor: string = (customAttrs ? brownCustomTheme : localTheme)?.colors?.compBackgroundPrimaryContrary?.toString().toUpperCase() + ?? colorValues.get(`compBackgroundPrimaryContrary`) + ?? EMPTY_CHECK + checkValue(switchPointColor, checkSwitchPointColor) + + const selectedColor: string = toggleAttrs?.selectedColor?.toString().toUpperCase() ?? EMPTY_ATTR + const checkSelectedColor: string = (customAttrs ? brownCustomTheme : localTheme)?.colors?.compBackgroundEmphasize?.toString().toUpperCase() + ?? colorValues.get(`compBackgroundEmphasize`) + ?? EMPTY_CHECK + checkValue(selectedColor, checkSelectedColor) + } + else if (key.toLowerCase().search('checkbox') > 0) { + const selectedColor: string = toggleAttrs?.selectedColor?.toString().toUpperCase() ?? EMPTY_ATTR + const checkSelectedColor: string = + (customAttrs ? brownCustomTheme : localTheme)?.colors?.compBackgroundEmphasize?.toString().toUpperCase() + ?? colorValues.get(`compBackgroundEmphasize`) + ?? EMPTY_CHECK + checkValue(selectedColor, checkSelectedColor) + } } \ No newline at end of file