WRQ-25856: Add missing ui/ss tests for Arc --> MediaPlayer (#796)

* ui and ss tests

* changed names

* fixed review issues

---------

Co-authored-by: dongsu.won <[email protected]>

tests/screenshot/apps/Agate-View.js

@@ -26,6 +26,13 @@ function getWrapperClasses ({wrapper}) {
 	return cx('wrapper', wrapper, parsed.skin);
 }
 
+function getWrapperStyle ({wrapper = {}}) {
+	const {padded} = wrapper;
+	if (padded && padded !== true) {
+		return {'--wrapper-padding': padded};
+	}
+}
+
 function prepareTest (componentName, testId) {
 	const ElementProps = {
 		'data-ui-test-id': 'test',
@@ -64,7 +71,8 @@ function prepareTest (componentName, testId) {
 
 	return {
 		testElement: cloneElement(component, ElementProps, children),
-		wrapperClasses: getWrapperClasses(agateComponents[componentName][testId])
+		wrapperClasses: getWrapperClasses(agateComponents[componentName][testId]),
+		wrapperStyle: getWrapperStyle(agateComponents[componentName][testId])
 	};
 }
 
@@ -83,7 +91,8 @@ function prepareFromUrl () {
 	}
 	return {
 		testElement: <Component {...componentProps} />,
-		wrapperClasses: getWrapperClasses({skin: parsed.skin, wrapper: wrapperProps})
+		wrapperClasses: getWrapperClasses({skin: parsed.skin, wrapper: wrapperProps}),
+		wrapperStyle: getWrapperStyle({skin: parsed.skin, wrapper: wrapperProps})
 	};
 }
 class App extends ReactComponent {
@@ -100,7 +109,7 @@ class App extends ReactComponent {
 	render () {
 		const {component, testId, locale, ...props} = this.props;
 		let testElement;
-		let wrapperClasses;
+		let wrapperClasses, wrapperStyle;
 
 		if (this.state.hasError) {
 			return (
@@ -113,14 +122,14 @@ class App extends ReactComponent {
 		}
 
 		if (testId >= 0) {
-			({testElement, wrapperClasses} = prepareTest(component, testId, locale));
+			({testElement, wrapperClasses, wrapperStyle} = prepareTest(component, testId, locale));
 		} else {
-			({testElement, wrapperClasses} = prepareFromUrl());
+			({testElement, wrapperClasses, wrapperStyle} = prepareFromUrl());
 		}
 
 		return (
 			<div {...props}>
-				<div className={wrapperClasses}>{testElement}</div>
+				<div className={wrapperClasses} style={wrapperStyle}>{testElement}</div>
 			</div>
 		);
 	}

tests/screenshot/apps/Agate-View.less

@@ -15,7 +15,7 @@
 	background-size: 12px 12px, 12px 12px;
 
 	&.padded {
-		padding: 140px;
+		padding: var(--wrapper-padding, 140px);
 	}
 
 	&.narrow {

tests/screenshot/apps/components/ArcPicker.js

@@ -1,8 +1,20 @@
 import ArcPicker from '../../../../ArcPicker';
 
+import {withConfig} from './utils';
+
 const ArcPickerTests = [
 	<ArcPicker>{[1, 2, 3, 4]}</ArcPicker>,
-	<ArcPicker endAngle={300} startAngle={10}>{[1, 2, 3, 4]}</ArcPicker>
+	<ArcPicker endAngle={300} startAngle={10}>{[1, 2, 3, 4]}</ArcPicker>,
+	<ArcPicker value={3}>{[1, 2, 3, 4]}</ArcPicker>,
+	<ArcPicker value={3} selectionType="cumulative">{[1, 2, 3, 4]}</ArcPicker>,
+	<ArcPicker disabled>{[1, 2, 3, 4]}</ArcPicker>,
+
+	// Focus
+	...withConfig({focus: true}, [
+		<ArcPicker value={3}>{[1, 2, 3, 4, 5]}</ArcPicker>,
+		<ArcPicker value={3} selectionType="cumulative">{[1, 2, 3, 4, 5]}</ArcPicker>,
+		<ArcPicker disabled>{[1, 2, 3, 4, 5]}</ArcPicker>
+	])
 ];
 
 export default ArcPickerTests;

tests/screenshot/apps/components/ColorPicker.js

@@ -3,7 +3,8 @@ import ColorPicker from '../../../../ColorPicker';
 const ColorPickerTests = [
 	<ColorPicker>{[]}</ColorPicker>,
 	<ColorPicker open>{[]}</ColorPicker>,
-	<ColorPicker extended>{[]}</ColorPicker>
+	<ColorPicker extended>{[]}</ColorPicker>,
+	<ColorPicker disabled>{[]}</ColorPicker>
 ];
 
 export default ColorPickerTests;

tests/screenshot/apps/components/ContextualPopupDecorator.js

@@ -1,28 +1,32 @@
 import Button from '../../../../Button';
 import ContextualPopupDecorator from '../../../../ContextualPopupDecorator';
 
+import {withConfig} from './utils';
+
 const ContextualButton = ContextualPopupDecorator(Button);
 const Popup = () => <div>hello</div>;
 
+const wrapper = {
+	padded: '240px'
+};
+
 const ContextualPopupDecoratorTests = [
-	{
-		component: <ContextualButton open popupComponent={Popup}>Button</ContextualButton>,
-		wrapper: {
-			padded: true
-		}
-	},
-	{
-		component: <ContextualButton open direction="right middle" popupComponent={Popup}>Button</ContextualButton>,
-		wrapper: {
-			padded: true
-		}
-	},
-	{
-		component: <ContextualButton open popupComponent={Popup} showCloseButton>Button</ContextualButton>,
-		wrapper: {
-			padded: true
-		}
-	}
+	...withConfig({wrapper}, [
+		<ContextualButton open popupComponent={Popup}>Button</ContextualButton>,
+		<ContextualButton open direction="above center" popupComponent={Popup}>Button</ContextualButton>,
+		<ContextualButton open direction="above left" popupComponent={Popup}>Button</ContextualButton>,
+		<ContextualButton open direction="above right" popupComponent={Popup}>Button</ContextualButton>,
+		<ContextualButton open direction="below center" popupComponent={Popup}>Button</ContextualButton>,
+		<ContextualButton open direction="below left" popupComponent={Popup}>Button</ContextualButton>,
+		<ContextualButton open direction="below right" popupComponent={Popup}>Button</ContextualButton>,
+		<ContextualButton open direction="left middle" popupComponent={Popup}>Button</ContextualButton>,
+		<ContextualButton open direction="left top" popupComponent={Popup}>Button</ContextualButton>,
+		<ContextualButton open direction="left bottom" popupComponent={Popup}>Button</ContextualButton>,
+		<ContextualButton open direction="right middle" popupComponent={Popup}>Button</ContextualButton>,
+		<ContextualButton open direction="right top" popupComponent={Popup}>Button</ContextualButton>,
+		<ContextualButton open direction="right bottom" popupComponent={Popup}>Button</ContextualButton>,
+		<ContextualButton open popupComponent={Popup} showCloseButton>Button</ContextualButton>
+	])
 ];
 
 export default ContextualPopupDecoratorTests;

tests/screenshot/apps/components/Drawer.js

@@ -2,7 +2,8 @@ import Drawer from '../../../../Drawer';
 
 const DrawerTests = [
 	<Drawer noAnimation>{[]}</Drawer>,
-	<Drawer noAnimation open>{[]}</Drawer>
+	<Drawer noAnimation open>{[]}</Drawer>,
+	<Drawer noAnimation open orientation="horizontal">{[]}</Drawer>
 ];
 
 export default DrawerTests;

tests/screenshot/apps/components/Input.js

@@ -71,6 +71,20 @@ const InputTests = [
 		</div>,
 		<Input value="Focused simple value" iconAfter="happyface" iconBefore="happyface" />,
 		<Input value="Focused simple value" iconAfter="happyface" iconBefore="happyface" size="small" />
+	]),
+
+	// RTL
+	...withConfig({locale: 'ar-SA'}, [
+		<Input placeholder="ar-SA placeholder" />,
+		<Input placeholder="ar-SA placeholder" disabled />,
+		<Input value="ar-SA simple value" />,
+		<Input value="ar-SA simple value" disabled />,
+		<Input value="ar-SA simple value" clearButton />,
+		<div>
+			<Input invalid invalidMessage="ar-SA custom invalid message" style={{margin:'100px'}} />
+		</div>,
+		<Input value="ar-SA simple value" iconAfter="happyface" iconBefore="happyface" />,
+		<Input value="ar-SA simple value" iconAfter="happyface" iconBefore="happyface" size="small" />
 	])
 ];
 

tests/ui/apps/Checkbox/Checkbox-View.js

@@ -0,0 +1,35 @@
+import Checkbox from '../../../../Checkbox';
+import ThemeDecorator from '../../../../ThemeDecorator';
+import spotlight from '@enact/spotlight';
+
+// NOTE: Forcing pointer mode off so we can be sure that regardless of webOS pointer mode the app
+// runs the same way
+spotlight.setPointerMode(false);
+
+const app = (props) => <div {...props}>
+	<div style={{padding: '20px'}}>
+		<Checkbox
+			id="defaultCheckbox"
+		/>
+	</div>
+	<div style={{padding: '20px'}}>
+		<Checkbox
+			id="selectedCheckbox"
+			defaultSelected
+		/>
+	</div>
+	<div style={{padding: '20px'}}>
+		<Checkbox
+			id="indeterminateCheckbox"
+			indeterminate
+		/>
+	</div>
+	<div style={{padding: '20px'}}>
+		<Checkbox
+			id="disabledCheckbox"
+			disabled
+		/>
+	</div>
+</div>;
+
+export default ThemeDecorator(app);

tests/ui/specs/Checkbox/Checkbox-specs.js

@@ -0,0 +1,114 @@
+const Page = require('./CheckboxPage');
+
+describe('Checkbox', function () {
+
+	beforeEach(async function () {
+		await Page.open();
+	});
+
+	const {
+		defaultCheckbox,
+		selectedCheckbox,
+		indeterminateCheckbox,
+		disabledCheckbox
+	} = Page.components;
+
+	describe('default', function () {
+		it('should focus on load', async function () {
+			expect(await defaultCheckbox.self.isFocused()).toBe(true);
+		});
+
+		it('should not be checked', async function () {
+			expect(await defaultCheckbox.isChecked).toBe(false);
+		});
+
+		it('should be checked', async function () {
+			expect(await selectedCheckbox.isChecked).toBe(true);
+		});
+	});
+
+	describe('5-way', function () {
+		it('should focus', async function () {
+			await Page.spotlightDown();
+
+			expect(await selectedCheckbox.self.isFocused()).toBe(true);
+
+			await Page.spotlightDown();
+
+			expect(await indeterminateCheckbox.self.isFocused()).toBe(true);
+
+			await Page.spotlightDown();
+
+			expect(await disabledCheckbox.self.isFocused()).toBe(true);
+		});
+
+		it('should get checked', async function () {
+			await Page.spotlightSelect();
+
+			expect(await defaultCheckbox.isChecked).toBe(true);
+		});
+
+		it('should get checked \'indeterminate\'', async function () {
+			await Page.spotlightDown();
+			await Page.spotlightDown();
+			await Page.spotlightSelect();
+
+			expect(await indeterminateCheckbox.isChecked).toBe(true);
+		});
+
+		it('should re-uncheck the item when selected twice', async function () {
+			await Page.spotlightSelect();
+			await Page.spotlightSelect();
+			expect(await defaultCheckbox.isChecked).toBe(false);
+		});
+
+		it('should not get checked', async function () {
+			await Page.spotlightDown();
+			await Page.spotlightDown();
+			await Page.spotlightDown();
+			await Page.spotlightSelect();
+
+			expect(await disabledCheckbox.isChecked).toBe(false);
+		});
+
+		it('should get unchecked', async function () {
+			await Page.spotlightDown();
+			await Page.spotlightSelect();
+
+			expect(await selectedCheckbox.isChecked).toBe(false);
+		});
+	});
+
+	describe('pointer', function () {
+		it('should get checked', async function () {
+			await defaultCheckbox.self.click();
+
+			expect(await defaultCheckbox.isChecked).toBe(true);
+		});
+
+		it('should get checked \'indeterminate\'', async function () {
+			await indeterminateCheckbox.self.click();
+
+			expect(await indeterminateCheckbox.isChecked).toBe(true);
+		});
+
+		it('should re-uncheck the item when selected twice', async function () {
+			await defaultCheckbox.self.click();
+			await defaultCheckbox.self.click();
+
+			expect(await defaultCheckbox.isChecked).toBe(false);
+		});
+
+		it('should not get checked', async function () {
+			await disabledCheckbox.self.click();
+
+			expect(await disabledCheckbox.isChecked).toBe(false);
+		});
+
+		it('should get unchecked', async function () {
+			await selectedCheckbox.self.click();
+
+			expect(await selectedCheckbox.isChecked).toBe(false);
+		});
+	});
+});

tests/ui/specs/Checkbox/CheckboxPage.js

@@ -0,0 +1,40 @@
+'use strict';
+const {Page} = require('@enact/ui-test-utils/utils');
+
+class CheckboxInterface {
+	constructor (id) {
+		this.id = `${id}`;
+	}
+
+	get self () {
+		return $(`#${this.id}`);
+	}
+
+	get isChecked () {
+		return $(`#${this.id}.Checkbox_Checkbox_selected`).isExisting();
+	}
+}
+
+class CheckboxPage extends Page {
+	constructor () {
+		super();
+		this.title = 'Checkbox Test';
+		const defaultCheckbox = new CheckboxInterface('defaultCheckbox');
+		const selectedCheckbox = new CheckboxInterface('selectedCheckbox');
+		const indeterminateCheckbox = new CheckboxInterface('indeterminateCheckbox');
+		const disabledCheckbox = new CheckboxInterface('disabledCheckbox');
+
+		this.components = {
+			defaultCheckbox,
+			selectedCheckbox,
+			indeterminateCheckbox,
+			disabledCheckbox
+		};
+	}
+
+	async open (urlExtra) {
+		await super.open('Checkbox-View', urlExtra);
+	}
+}
+
+module.exports = new CheckboxPage();