Sg run UI tests

[gillilands19]

What is it?

This combines a previous pull request that was never merged. This is an update to the UI test runner from PR# 247 to complete tasks for the final sprint.

Description

The changes account for updates to the UI and complete the automated runner and logger for the final sprint.

This pull request implements a series of functions and JS scripts using the puppeteer UI automation library to test our react app. Currently the public URL for our react app does not allow us to go directly to the endpoint we want to test by typing it in the browser. These test traverse our React app simulating user input and fires React onChange events in order for input validation and propagation of state to our Components.

How To Test/Run

In your terminal:

$ cd test/ui
$ npm install --save-dev

This should install the necessary packages to run the puppeteer test. You can run the test by typing the following: npm run ui-tests

API Documentation

ui-test-tasks.js

ui/ui-test-tasks

UI Test Module.

• ui/ui-test-tasks
  • static
    • .startBrowser ⇒ PuppetInstance
    • .goToHomePage ⇒ Void
    • .fillInputs ⇒ Void
    • .goToEndpointPage ⇒ Void
    • .getSelectorContent ⇒ String
  • inner
    • ~getIdParams(endpoint) ⇒ Array.<String>
    • ~PuppetInstance : Object
    • ~Page : Object

ui/ui-test-tasks.startBrowser ⇒ PuppetInstance

Starts instance of headless chrome. Returns the browser and page objects.

Kind: static constant of ui/ui-test-tasks
Returns: PuppetInstance - - The puppeteer intance

ui/ui-test-tasks.goToHomePage ⇒ Void

Navigates to the url and waits for initial selector.

Kind: static constant of ui/ui-test-tasks
Returns: Void - void

Param	Type	Description
url	String	The URL to navigate to.
page	page	The Puppeteer Page Object.

ui/ui-test-tasks.fillInputs ⇒ Void

Fills in forms for endpoint that is being tested

Kind: static constant of ui/ui-test-tasks
Returns: Void - void

Param	Type	Description
page	Page	The puppeteer page object
endpoint	String	The endpoint to test
selector	String	the document selector to retreive contents of

ui/ui-test-tasks.goToEndpointPage ⇒ Void

Finds and clicks on the trigger element to go the the endpoint page.

Kind: static constant of ui/ui-test-tasks
Returns: Void - void

Param	Type	Description
page	Page	The puppeteer page object
endpoint	string	The endpoint to test

ui/ui-test-tasks.getSelectorContent ⇒ String

Gets the innerText of the specified selector.

Kind: static constant of ui/ui-test-tasks
Returns: String - - the text content of HTML element

Param	Type	Description
page	Page	The puppeteer page object
contentSelector	String	the document selector to retreive contents of
targetSelector	String	the document selector to detect re-render on

ui/ui-test-tasks~getIdParams(endpoint) ⇒ Array.<String>

splits and filters the endpoint string. Returns an array of the endpoints that need integers as a parameter.

Kind: inner method of ui/ui-test-tasks
Returns: Array.<String> - - An array with endpoint params that need an integer value

Param	Type	Description
endpoint	string	the endpoint string

ui/ui-test-tasks~PuppetInstance : Object

The puppeteer instance made up of the browser and page objects. Most of the functions in this module use one or the other.

Kind: inner typedef of ui/ui-test-tasks
Properties

Name	Type	Description
browser	browser	The puppeteer Browser Object
page	page	The puppeteer Page object

ui/ui-test-tasks~Page : Object

The puppeteer Page object

Kind: inner typedef of ui/ui-test-tasks

run-ui-tests.js

ui/run-ui-tests

Main UI test runner and logger.

• ui/run-ui-tests
  • ~runUiTest(url, endpoints, selectors, numRuns) ⇒ PuppetInstance
  • ~timeRenderPerf(callback, params) ⇒ Promise.<object>
  • ~logRenderPerf(logEntry, directory, name, ext) ⇒
  • ~dateifyFileName(directory, namePrefix) ⇒ String

ui/run-ui-tests~runUiTest(url, endpoints, selectors, numRuns) ⇒ PuppetInstance

The Main UI test runner.

Kind: inner method of ui/run-ui-tests
Returns: PuppetInstance - - The puppeteer intance.

Param	Type	Default	Description
url	String		The URL to navigate to.
endpoints	Iterable.<String>		An iterable of strings representing endpoints.
selectors	Array.<String>		an array of selectors.
numRuns	Number	10	Number of times to run the test. One run equal to one iteration through all endpoints.

ui/run-ui-tests~timeRenderPerf(callback, params) ⇒ Promise.<object>

Times and returns performance of an operation measured in milliseconds. In our case, the amount of time it takes to get a response from the API server and for the UI to render. Can be used to time the performance of any function.

Kind: inner method of ui/run-ui-tests
Returns: Promise.<object> - - {timeElapsed, cbReturn} Object containing the time elapsed and the return value of callback function.

Param	Type	Description
callback	function	the operation to test performance of.
params	Array	array of params to pass to the callback function.

ui/run-ui-tests~logRenderPerf(logEntry, directory, name, ext) ⇒

stringifys the logEntry object and creates a new UI test results file in the specified directory

Kind: inner method of ui/run-ui-tests
Returns: - the relative file path where the log file is saved.

Param	Type	Description
logEntry	object	Object Containing the performance log details
directory	String	The directory path to save the results file to.
name	String	The main body of the file name.
ext	String	the file extension without the leading '.'

ui/run-ui-tests~dateifyFileName(directory, namePrefix) ⇒ String

Takes a directory path, filename, and extension and adds the current datetime as a prefix to the file name.

Kind: inner method of ui/run-ui-tests
Returns: String - - A new string with the current datetime appended to the file name.

Param	Type	Description
directory	String	The Directory path.
namePrefix	String	Body of filename.