NXT-16966: Improve screenshot tests

tests/screenshot/apps/components/ActionGuide.js

@@ -1,6 +1,6 @@
 import ActionGuide from '../../../../ActionGuide';
 
-import {withConfig} from './utils';
+import {withConfig, withTallglyphLocale} from './utils';
 
 const actionGuideSmokeTests = [
 	<ActionGuide>This is some text</ActionGuide>,
@@ -10,7 +10,7 @@ const actionGuideSmokeTests = [
 
 const ActionGuideTests = [
 	...actionGuideSmokeTests,
-	...withConfig({locale: 'vi-VN'}, actionGuideSmokeTests),  // Tallglyph validation
+	...withTallglyphLocale(actionGuideSmokeTests),
 	...withConfig({locale: 'ar-SA'}, actionGuideSmokeTests),
 	...withConfig({skinVariants: ['largeText']}, actionGuideSmokeTests) // Large Text
 ];

tests/screenshot/apps/components/Alert.js

@@ -9,7 +9,7 @@ import Scroller from '../../../../Scroller';
 
 import img from '../../images/300x300.png';
 
-import {withConfig, withProps, LoremString} from './utils';
+import {withConfig, withProps, withTallglyphLocale, LoremString} from './utils';
 
 import css from './Alert.module.less';
 
@@ -311,7 +311,7 @@ const alertPortraitTests = [
 const AlertTests = [
 	...alertQwtcTests,
 	...alertExtendedTests,
-	...withConfig({locale: 'vi-VN'}, alertTallglyphTests),
+	...withTallglyphLocale(alertTallglyphTests),
 	...withConfig({locale: 'ar-SA'}, alertRtlTests),
 	...withConfig({portrait: true}, alertPortraitTests)
 ];

tests/screenshot/apps/components/BodyText.js

@@ -1,6 +1,6 @@
 import BodyText from '../../../../BodyText';
 
-import {withConfig, LoremString} from './utils';
+import {withConfig, withTallglyphLocale, LoremString} from './utils';
 
 const bodyTextSmokeTests = [
 	<BodyText>This is some text</BodyText>, // [QWTC - 2022]
@@ -31,15 +31,17 @@ const bodyTextLocaleSmokeTests = [
 	<BodyText centered size="small">This is some text</BodyText> // [QWTC - 2026]
 ];
 
+const bodyTextTallglyphTests = [
+	<BodyText>RTL sample</BodyText>,  // [QWTC - 2022]
+	<BodyText size="small">RTL sample small</BodyText>  // [QWTC - 2023]
+];
+
 const BodyTextTests = [
 	...bodyTextSmokeTests,
 	...bodyTextQwtcTests,
 
 	// Tallglyph validation
-	...withConfig({locale: 'vi-VN'}, [
-		<BodyText>RTL sample</BodyText>,  // [QWTC - 2022]
-		<BodyText size="small">RTL sample small</BodyText>  // [QWTC - 2023]
-	]),
+	...withTallglyphLocale(bodyTextTallglyphTests),
 
 	...withConfig({locale: 'ar-SA'}, bodyTextLocaleSmokeTests),
 	...withConfig({skinVariants: ['largeText']}, bodyTextLocaleSmokeTests)

tests/screenshot/apps/components/Button.js

@@ -1,6 +1,6 @@
 import Button from '../../../../Button';
 
-import {withConfig, withProps} from './utils';
+import {withConfig, withProps, withTallglyphLocale, TallglyphKhmer, TallglyphLatin, TallglyphMultiScript} from './utils';
 
 import css from './Button.module.less';
 
@@ -32,7 +32,7 @@ const buttonSmokeTests = [
 
 ];
 
-const buttonCommentedTests = [
+const buttonExtendedTests = [
 	// iconPosition = before (Default) + small (default) + large
 	// Leaving size small here as example, but it is not required since it is the default.
 	<Button size="large">click me</Button>,
@@ -162,10 +162,10 @@ const buttonQwtcTests = [
 	<Button color="red" disabled>plus</Button>,
 
 	// [QWTC-1837]
-	<Button> ฟิ้  ไั  ஒ  து</Button>,
-	<Button>ÃÑÕÂÊÎÔÛÄËÏÖÜŸ</Button>,
+	<Button>{TallglyphMultiScript}</Button>,
+	<Button>{TallglyphLatin}</Button>,
 	<Button>Bản văn</Button>,
-	<Button>តន្ត្រី</Button>,
+	<Button>{TallglyphKhmer}</Button>,
 	// end [QWTC-1837]
 
 	<Button selected backgroundOpacity="transparent">click me</Button>, // [QWTC-1828]
@@ -228,33 +228,29 @@ const buttonRtlTests = [
 	<Button icon="arrowhookright" iconFlip="auto">click me</Button>
 ];
 
+const buttonTallglyphViTests = [
+	<Button>Vietnamese Text</Button>,
+	<Button icon="star">Vietnamese Text</Button>,
+	<Button>{TallglyphMultiScript}</Button>,
+	<Button>{TallglyphLatin}</Button>
+];
+
+const buttonTallglyphKmTests = [
+	<Button>Cambodian Text</Button>,
+	<Button icon="star">Cambodian Text</Button>,
+	<Button size="small">{TallglyphKhmer}</Button>
+];
+
 const ButtonTests = [
 	...buttonSmokeTests,
 	...buttonQwtcTests,
-	...buttonCommentedTests,
+	...buttonExtendedTests,
 
 	...withConfig({focus: true, wrapper: {light: true, padded: true}}, buttonFocusTests),
 
-	// *************************************************************
-	// Tallglyph validation
-	// locale = 'vi-VN'
-	// *************************************************************
-	...withConfig({locale: 'vi-VN'}, [
-		<Button>Vietnamese Text</Button>,
-		<Button icon="star">Vietnamese Text</Button>,
-		<Button> ฟิ้  ไั  ஒ  து</Button>,
-		<Button>ÃÑÕÂÊÎÔÛÄËÏÖÜŸ</Button>
-	]),
-
-	// *************************************************************
 	// Tallglyph validation
-	// locale = 'km-KH'
-	// *************************************************************
-	...withConfig({locale: 'km-KH'}, [
-		<Button>Cambodian Text</Button>,
-		<Button icon="star">Cambodian Text</Button>,
-		<Button size="small">តន្ត្រី</Button>
-	]),
+	...withTallglyphLocale(buttonTallglyphViTests),
+	...withConfig({locale: 'km-KH'}, buttonTallglyphKmTests),
 
 	// *************************************************************
 	// RTL

tests/screenshot/apps/components/Card.js

@@ -2,7 +2,7 @@ import Card from '../../../../Card';
 import Icon from '../../../../Icon';
 import Image from '../../../../Image';
 
-import {withConfig, withProps} from './utils';
+import {withConfig, withProps, withTallglyphLocale, TallglyphLatin, TallglyphMultiScript} from './utils';
 
 import img from '../../images/600x600.png';
 
@@ -81,7 +81,7 @@ const cardSmokeTests = [
 	...defaultCardTests.slice(36, 41)
 ];
 
-const cardCommentedTests = [
+const cardExtendedTests = [
 	// Disabled
 	...withProps({disabled: true}, defaultCardTests),
 
@@ -110,12 +110,18 @@ const cardLargeTextTests = [
 	...withConfig({skinVariants: ['largeText']}, defaultCardTests)
 ];
 
+const cardTallglyphTests = [
+	<Card src={img} label={TallglyphMultiScript}>{TallglyphMultiScript}</Card>,
+	<Card src={img} orientation="horizontal" label={TallglyphLatin}>{TallglyphLatin}</Card>
+];
+
 const CardTests = [
 	...defaultCardTests,
 	...newTypeCardTests,
-	...cardCommentedTests,
+	...cardExtendedTests,
 	...cardFocusTests,
-	...cardLargeTextTests
+	...cardLargeTextTests,
+	...withTallglyphLocale(cardTallglyphTests)
 ];
 
 export default CardTests;

tests/screenshot/apps/components/CheckboxItem.js

@@ -1,7 +1,7 @@
 import Icon from '../../../../Icon';
 import CheckboxItem from '../../../../CheckboxItem';
 
-import {withConfig} from './utils';
+import {withConfig, withTallglyphLocale, TallglyphLatin, TallglyphMultiScript} from './utils';
 
 const checkboxItemSmokeTests = [
 	<CheckboxItem />,
@@ -110,21 +110,27 @@ const checkboxItemRtlTests = [
 	<CheckboxItem indeterminate>CheckboxItem Checked</CheckboxItem>
 ];
 
-const checkboxItemCommentedTests = [
+const checkboxItemExtendedTests = [
 	...checkboxItemFormCheckboxTests,
 	...checkboxItemIconSlotBeforeTests,
 	...checkboxItemCenteredTests,
 	...checkboxItemLabelPositionTests
 ];
 
+const checkboxItemTallglyphTests = [
+	<CheckboxItem>{TallglyphMultiScript}</CheckboxItem>,
+	<CheckboxItem label={TallglyphLatin}>{TallglyphLatin}</CheckboxItem>
+];
+
 const CheckboxItemTests = [
 	...checkboxItemSmokeTests,
 	...checkboxItemQwtcTests,
-	...checkboxItemCommentedTests,
+	...checkboxItemExtendedTests,
 	...withConfig({focus: true}, checkboxItemFocusTests),
 	...withConfig({textSize: 'large'}, checkboxItemLargeTextTests),
 	...withConfig({locale: 'ar-SA'}, checkboxItemRtlTests),
-	...withConfig({locale: 'ar-SA'}, checkboxItemCenteredRtlTests)
+	...withConfig({locale: 'ar-SA'}, checkboxItemCenteredRtlTests),
+	...withTallglyphLocale(checkboxItemTallglyphTests)
 ];
 
 export default CheckboxItemTests;

tests/screenshot/apps/components/Chip.js

@@ -1,7 +1,7 @@
 import {Chip} from '../../../../Chips';
 import gameHomeIcon from '../../images/icon_app_game.png';
 
-import {withConfig} from './utils';
+import {withConfig, withTallglyphLocale, TallglyphLatin, TallglyphMultiScript} from './utils';
 
 const chipSmokeTests = [
 	<Chip>Default Chip</Chip>,
@@ -49,10 +49,16 @@ const chipLargeTextTests = [
 	<Chip deleteButton={{icon: 'closex', position: 'right'}}>Chip with Delete Button (Right)</Chip>
 ];
 
+const chipTallglyphTests = [
+	<Chip>{TallglyphMultiScript}</Chip>,
+	<Chip icon="home">{TallglyphLatin}</Chip>
+];
+
 const ChipTests = [
 	...chipSmokeTests,
 	...withConfig({focus: true}, chipFocusTests),
-	...withConfig({skinVariants: ['largeText']}, chipLargeTextTests)
+	...withConfig({skinVariants: ['largeText']}, chipLargeTextTests),
+	...withTallglyphLocale(chipTallglyphTests)
 ];
 
 export default ChipTests;

tests/screenshot/apps/components/Chips.js

@@ -1,7 +1,7 @@
 import Chips, {Chip} from '../../../../Chips';
 import gameHomeIcon from '../../images/icon_app_game.png';
 
-import {withConfig} from './utils';
+import {withConfig, withTallglyphLocale, TallglyphLatin, TallglyphMultiScript} from './utils';
 
 const chipsSmokeTests = [
 	<Chips>
@@ -54,9 +54,17 @@ const chipsFocusTests = [
 	</Chips>
 ];
 
+const chipsTallglyphTests = [
+	<Chips>
+		<Chip>{TallglyphMultiScript}</Chip>
+		<Chip>{TallglyphLatin}</Chip>
+	</Chips>
+];
+
 const ChipsTests = [
 	...chipsSmokeTests,
-	...withConfig({focus: true}, chipsFocusTests)
+	...withConfig({focus: true}, chipsFocusTests),
+	...withTallglyphLocale(chipsTallglyphTests)
 ];
 
 export default ChipsTests;

tests/screenshot/apps/components/ContextualPopupDecorator.js

@@ -68,7 +68,7 @@ const contextualPopupRtlTests = [
 	<ContextualPopupButtonNoArrow offset="none" />
 ];
 
-const contextualPopupCommentedTests = [
+const contextualPopupExtendedTests = [
 	// *************************************************************
 	// Test auto swapping side at boundaries
 	// *************************************************************
@@ -97,7 +97,7 @@ const contextualPopupCommentedTests = [
 const ContextualPopupDecoratorTests = [
 	<ContextualPopupButton open={false} />,
 	...withConfig({wrapper}, contextualPopupSmokeTests),
-	...contextualPopupCommentedTests,
+	...contextualPopupExtendedTests,
 	...withConfig({wrapper, locale: 'ar-SA'}, contextualPopupRtlTests)
 ];
 

tests/screenshot/apps/components/Dropdown.js

@@ -2,7 +2,7 @@ import {scaleToRem} from '@enact/ui/resolution';
 
 import Dropdown from '../../../../Dropdown';
 
-import {withProps} from './utils';
+import {withProps, withTallglyphLocale, TallglyphLatin, TallglyphMultiScript} from './utils';
 
 const children = (itemCount) => (new Array(itemCount)).fill().map((i, index) => `Option ${index + 1}`);
 
@@ -39,7 +39,7 @@ const dropdownQwtcTests = [
 	...withProps({size: 'small'}, Widths)
 ];
 
-const dropdownCommentedTests = [
+const dropdownExtendedTests = [
 	// open with number type width
 	<Dropdown open width={360} title="Number type width">
 		{children(5)}
@@ -81,12 +81,18 @@ const dropdownRtlTests = [
 	}
 ];
 
+const dropdownTallglyphTests = [
+	<Dropdown placeholder={TallglyphMultiScript} />,
+	<Dropdown title={TallglyphLatin} placeholder={TallglyphMultiScript} />
+];
+
 const DropdownTests = [
 	...dropdownSmokeTests,
 	...dropdownQwtcTests,
-	...dropdownCommentedTests,
+	...dropdownExtendedTests,
 	...dropdownFocusTests,
-	...dropdownRtlTests
+	...dropdownRtlTests,
+	...withTallglyphLocale(dropdownTallglyphTests)
 ];
 
 export default DropdownTests;

tests/screenshot/apps/components/FixedPopupPanels.js

@@ -101,7 +101,7 @@ const fixedPopupPanelsSmokeTests = [
 	}
 ];
 
-const fixedPopupPanelsCommentedTests = [
+const fixedPopupPanelsExtendedTests = [
 	...withProps(
 		{fullHeight: true},
 		fixedPopupPanelsQwtcTests.map(o => ({...o, title: `${o.title} fullHeight`}))
@@ -119,7 +119,7 @@ const fixedPopupPanelsRtlTests = [
 const FixedPopupPanelsTests = [
 	...fixedPopupPanelsSmokeTests,
 	...fixedPopupPanelsQwtcTests,
-	...fixedPopupPanelsCommentedTests,
+	...fixedPopupPanelsExtendedTests,
 	...fixedPopupPanelsRtlTests
 ];
 

tests/screenshot/apps/components/FlexiblePopupPanels.js

@@ -130,7 +130,7 @@ const flexiblePopupPanelsSmokeTests = [
 	}
 ];
 
-const flexiblePopupPanelsCommentedTests = [
+const flexiblePopupPanelsExtendedTests = [
 	...withProps(
 		{fullHeight: true},
 		flexiblePopupPanelsQwtcTests.map(o => ({...o, title: `${o.title} fullHeight`}))
@@ -160,7 +160,7 @@ const flexiblePopupPanelsRtlTests = [
 const FlexiblePopupPanelsTests = [
 	...flexiblePopupPanelsSmokeTests,
 	...flexiblePopupPanelsQwtcTests,
-	...flexiblePopupPanelsCommentedTests,
+	...flexiblePopupPanelsExtendedTests,
 	...flexiblePopupPanelsRtlTests
 ];