WRR-14027: Added UI test when PageViews' autoFocus is 'none' (#1781)

* WRR-14027: Added UI test when PageViews' autoFocus is 'none'

Enact-DCO-1.0-Signed-off-by: Hyelyn Kim (myelyn.kim@lge.com)

* Fix typos

Enact-DCO-1.0-Signed-off-by: Juwon Jeong (juwon.jeong@lge.com)

---------

Co-authored-by: Juwon Jeong <juwon.jeong@lge.com>

tests/ui/apps/PageViews/PageViewsAutoFocus-View.js

@@ -0,0 +1,34 @@
+import Item from '../../../../Item';
+import {PageViews} from '../../../../PageViews';
+import Panels, {Panel, Header} from '../../../../Panels';
+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 PageViewsWithAutoFocus = props => (
+	<Panels {...props}>
+		<Panel autoFocus="none">
+			<Header title="PageViews with autoFocus" />
+			<PageViews autoFocus="none" pageIndicatorType="dot">
+				<PageViews.Page id="PageViewsPage1" aria-label="This is a description for page 1">
+					<div style={{padding: '24px', width: '50%'}}>
+						<Item id="PageViewsItem1">Item 1</Item>
+						<Item>Item 2</Item>
+					</div>
+				</PageViews.Page>
+				<PageViews.Page id="PageViewsPage2" aria-label="This is a description for page 2">
+					<div style={{padding: '24px', width: '50%'}}>
+						<Item id="PageViewsItem3">Item 3</Item>
+						<Item>Item 4</Item>
+					</div>
+				</PageViews.Page>
+			</PageViews>
+		</Panel>
+	</Panels>
+);
+
+export default ThemeDecorator({noAutoFocus: true}, PageViewsWithAutoFocus);
+

tests/ui/specs/PageViews/PageViews-specs.js

@@ -2,59 +2,76 @@ const Page = require('./PageViewsPage');
 
 describe('PageViews', function () {
 
-	beforeEach(async function () {
-		await Page.open();
-	});
-
 	const {
 		pageViewsPage1,
 		pageViewsPage2,
 		pageViewsItem1,
 		pageViewsItem3
 	} = Page.components;
 
-	describe('focus management', function () {
-		it('should focus item on load', async function () {
-			expect(await pageViewsItem1.self.isFocused()).toBe(true);
+	describe('default', function () {
+
+		beforeEach(async function () {
+			await Page.open();
 		});
 
-		it('should focus item after switching page', async function () {
-			await Page.spotlightRight();
-			await Page.spotlightSelect();
-			await browser.pause(500);
+		describe('focus management', function () {
+			it('should focus item on load', async function () {
+				expect(await pageViewsItem1.self.isFocused()).toBe(true);
+			});
+
+			it('should focus item after switching page', async function () {
+				await Page.spotlightRight();
+				await Page.spotlightSelect();
+				await browser.pause(500);
 
-			expect(await pageViewsItem3.self.isFocused()).toBe(true);
+				expect(await pageViewsItem3.self.isFocused()).toBe(true);
+			});
 		});
-	});
 
-	describe('5-way', function () {
-		it('should change page when selecting next/previous button', async function () {
-			expect(await pageViewsPage1.isPageExist).toBe(true);
+		describe('5-way', function () {
+			it('should change page when selecting next/previous button', async function () {
+				expect(await pageViewsPage1.isPageExist).toBe(true);
 
-			await Page.spotlightRight();
-			await Page.spotlightSelect();
+				await Page.spotlightRight();
+				await Page.spotlightSelect();
 
-			expect(await pageViewsPage2.isPageExist).toBe(true);
+				expect(await pageViewsPage2.isPageExist).toBe(true);
 
-			await browser.pause(500);
-			await Page.spotlightLeft();
-			await Page.spotlightSelect();
+				await browser.pause(500);
+				await Page.spotlightLeft();
+				await Page.spotlightSelect();
 
-			expect(await pageViewsPage1.isPageExist).toBe(true);
+				expect(await pageViewsPage1.isPageExist).toBe(true);
+			});
 		});
-	});
 
-	describe('pointer', function () {
-		it('should change page when clicking next/previous button', async function () {
-			expect(await pageViewsPage1.isPageExist).toBe(true);
+		describe('pointer', function () {
+			it('should change page when clicking next/previous button', async function () {
+				expect(await pageViewsPage1.isPageExist).toBe(true);
+
+				await pageViewsPage1.nextButton.click();
 
-			await pageViewsPage1.nextButton.click();
+				expect(await pageViewsPage2.isPageExist).toBe(true);
 
-			expect(await pageViewsPage2.isPageExist).toBe(true);
+				await pageViewsPage2.prevButton.click();
+
+				expect(await pageViewsPage1.isPageExist).toBe(true);
+			});
+		});
+	});
+
+	describe('autoFocus', function () {
+
+		beforeEach(async function () {
+			await Page.open('AutoFocus');
+		});
 
-			await pageViewsPage2.prevButton.click();
+		it('should focus nothing when `autoFocus="none"` and it`s the first page', async function () {
+			const expected = null;
+			const actual = Page.focusedText;
 
-			expect(await pageViewsPage1.isPageExist).toBe(true);
+			expect(await actual).toBe(expected);
 		});
 	});
 });

tests/ui/specs/PageViews/PageViewsPage.js

@@ -50,8 +50,14 @@ class PageViewsPage extends Page {
 		};
 	}
 
-	async open (urlExtra) {
-		await super.open('PageViews-View', urlExtra);
+	async open (specification = '', urlExtra) {
+		await super.open(`PageViews${specification}-View`, urlExtra);
+	}
+
+	get focusedText () {
+		return browser.execute(() => {
+			return document.activeElement === document.body ? null : document.activeElement.textContent;
+		});
 	}
 }