Skip to content

Project Setup (inc. testing)

Jump to bottom
Andrew Gibbs edited this page Oct 22, 2018 · 18 revisions

JS unit testing:

The Jasmine testing library was added to the project for all unit testing of javascript code. We did this primarily because we've all had some familiarity with this. Unlike in previous uses of Jasmine however we have installed a Node-based version of Jasmine. This means that instead of having a specrunner.html file we can run all our tests from the node environment through our console (type 'npm test' to get the test results). By having the node version of Jasmine it allows us to integrate with Travis CI.

Travis CI:

A .travis.yml file was added to the root of the project. This specifies the language our project is written in and is the file Travis reads first. Travis will build our project (looking at our dependencies and also our test specs) and determine if the build is successful. Now, every time we push to github our build will be checked by Travis automatically for us.

Code coverage:

The Istanbul npm package will provide us code coverage information. In the package.json file Istanbul is instructed to cover every tests we run. It shows the same kind of information we get from SimpleCov in Ruby projects. Note that we see Istanbul's code coverage results in the command line after running the tests, it also creates a coverage folder with more detailed information but i've gitignored this for now.

Linter:

eslint! To run eslint just type 'eslint [filepath/filename]'

Selenium feature testing:

During the early stages of the project we had issues implementing Javascript/Selenium/webdriverio feature tests, as a intermediate solution we adopted a temporary approach to feature testing, see 'Temporary feature testing' section below.

To enable feature testing, Selenium and webdriverio were installed, by executing the following commands:

  • Selenium: npm install selenium-standalone --save-dev
  • webdriverio: npm install webdriverio --save-dev

Java is required on your system in order to run selenium. This can be installed via brew: brew cask install java

After installation various files were updated:

  • package.json: including an entry within 'scripts': "test-feature": "node node_modules/webdriverio/bin/wdio ./spec/features/config/jasmine.conf.js"; a list of devDependancies, including: babel-register, wdio-allure-reporter, wdio-jasmine-framework, wdio-json-reporter, wdio-junit-reporter, wdio-selenium-standalone-service, wdio-spec-reporter & webdriverio.
  • travis.yml: including the node.js version ("10.10.0")
  • jasmine.conf.js: modified the path/s to the 'specs:' & 'reporterOptions:'

Feature tests can be executed by running the command: npm run test-feature

Don't forget to 'npm install' after pulling the updated branch to your machine - the dependencies above will be needed on our local machines!

Some extra notes on testing:

  • package.json contains some extra "scripts" to ensure our feature tests run in a different environment to our unit tests. We created an extra script for "test-feature" that tells node to run webdriverio and use a config file to setup our headless browser. The config file is in ./spec/features/config/jasmine.conf.js, it does things like tell webdriverio where our tests are located, what testing library to use (Jasmine, for now) and what browser configuration we want.
  • jasmine.conf.js: for browser setup the key part of this config file is capabilities: []. It's in here we tell webdriverio to use a chrome browser and also specify the additional chromeOptions we want. One of the chrome options is extensions: []. The extension needs to be a base64 data type, so I've loaded the extension at the top of the page, and done the conversion there.
  • Also in jasmine.conf.js you can set logLevel: 'verbose' which gives us a lot more information when the tests are run. Using verbose log output I can see the steps that the selenium sever is going through and can see that the extension has been loaded as a base64 object (you can double check what capabilities the browser has through console.log(browser.desiredCapabilities). This is good! If I change the file path to a dummy one (that doesn't exist) then the selenium setup fails and we see an error (no such file or directory).
  • Using Andrew's post I can drag and drop the .crx extension into chrome://extensions --> from there you can see the unique ID for this extension. Then, hopefully, using this unique ID we can navigate to the pages we define as part of our own extension....

Temporary feature testing:

During the early going, we had issues with the above feature testing solution, so as an intermediate solution, we introduced an alternative method - using Java and Selenium. This temporary approach requires installation of Java and Eclipse - as below:

Java:

Check to see if Java is installed by going to the Terminal and type: java -version, if there’s no version, then:

  • Go to the Oracle site and download the relevant file - at the time of writing this was here: (http://www.oracle.com/technetwork/java/javase/downloads/jre10-downloads-4417026.html)

  • Install Java

  • Set the Java environment variables (JAVA_HOME).

  • Create a .bash_profile file - make sure you’re in the home directory, then type: touch ~/.bash_profile.

  • Then add the location of Java to the bash_profile file:

  • First find out the version of java, type: /Library/Java/JavaVirtualMachines/

  • Make a note of the java versions (i.e. jdk-10.0.1.jdk)

  • Enter vi ~/.bash_profile (to enable you to view the file)

  • Hit the ‘i’ key, for insert mode

  • Then type export JAVA=HOME=/Library/Java/JavaVirtualMachines//Contents/Home

  • Then, to exit, hit esc :wq!

  • To verify you’ve created the environment variable correctly, type: echo $JAVA_HOME and the path where the version of java exists should be returned.

Eclipse:

From http://www.eclipse.org install the latest Eclipse version for Java EE, at the time of writing this was available from a link on this page:

https://www.eclipse.org/downloads/download.php?file=/oomph/epp/oxygen/R2/eclipse-inst-mac64.tar.gz

Workspace directory where Eclipse will store all development artefacts: /Users/username/eclipse-workspace

Selenium:

  • Download the Selenium Java Client Driver from here: https://www.seleniumhq.org/
  • Extract the the contents of the downloaded zip file on your C drive (this directory will contain JAR files that we import in Eclipse.

Configure Eclipse with WebDriver

  • Launch the "eclipse.exe' file inside the 'eclipse' folder (should be C:\eclipse\eclipse.exe)
  • Accept the default Workspace location (/Users/username/eclipse-workspace)

Create a new project (File > New > Java Project)

  • A new pop-up window will open enter details as follows:
  • Project Name: 'newproject'
  • Select the 'Use default location' checkbox
  • Select the 'Use an execution environment JRE' radio button
  • Select the 'Create separate folders for sources and class files' radio button
  • Hit the 'Finish' button

Add a package:

  • Right-click over 'newproject'
  • Select New > Package: name it 'newpackage'
  • Click the 'Finish' button

Create a new Java class:

  • Right-click the newpackage and select New > Class
  • Name it 'MyClass'
  • Click the 'Finish' button

Add Selenium WebDriver JAR files:

  • Right-click 'newproject'
  • Select Properties
  • On the pop up, select the Java Build Path option
  • Click on the 'Libraries tab
  • Select the 'Classpath'
  • Hit the 'Add External JARs' button
  • One by one, add all jar files within the 'selenium-java-3.12.0' & 'libs' directories
  • Once all JARs have been added, hit the 'Apply and Close' button
Clone this wiki locally