WComponents Theme

This directory contains the client side codebase for WComponents.

Fixtures

You will need either Java + Maven and/or Node + Yarn or NPM. The examples below use yarn but you can substitute with npm.

By default tests require Firefox browser to be installed on your system.

Building

Without Maven

# First time only run yarn install
yarn install

# thenceforth
yarn run build

With Maven

mvn compile

Build Options

Custom build options are configured in the package.json under the section "com_github_bordertech".

To override these without modifying a file tracked by source control:

1. Create a file in this directory with the format {username}.json, for example on Mac vi $USER.json
2. Make sure you add this to your global gitignore
3. Add com_github_bordertech properties you want to override, for example your file contents may look like this:

{
  "testMinOrMax": "max",
  "internOverrides": {
    "tunnelOptions": {
      "baseUrl": "http://nexus.example.com/repository/my_raw/selenium/",
      "drivers": [{
          "baseUrl": "http://nexus.example.com/repository/my_raw/selenium/driver/gecko/",
          "name": "firefox"
        }]
    }
  }
}

Testing

TL;DR

cd wcomponents-theme
# "mvn test" or the commands below
yarn install
yarn run test

Configuring Tests

We use Intern to run tests.

Using Build Options

Tests can be configured using Build Options (see above). Test specific options include:

• internOverrides

  Here you can override anything the intern configuration file, this is often an easier alternative to using INTERN_ARGS.

• testMinOrMax

  By default we test the minified code but for debugging you will want to use the unminified version: set testMinOrMax to "max"

Using INTERN_ARGS

Because we use Intern for testing, you can override much of the configuration such as what tests, which browser, etc using the INTERN_ARGS environment variable.

Auto-Detect Test Environment

Auto-detect local headless firefox or remote saucelabs:

# If SAUCE_USERNAME and SAUCE_ACCESS_KEY env variables are set it will tunnel to saucelabs.

yarn run test

OR

mvn test

Local Browser

Run the tests in a browser on your machine:

yarn run test:local

Server Mode

Create a test server which you can visit in your browser to run tests:

# Run this then visit http://localhost:9000/__intern/

yarn run test:serve

Selenium Grid Mode

Test against a running selenium server.

yarn run test:grid

Developing

Automatic Code Compilation

Client side development is facilitated by automatic code compilation. This will detect changes as you work and selectively rebuild automatically. To enable this:

# Watches for changes to source code and compiles automatically

yarn run watch

Hot Module Reloading

When code is rebuilt using automatic code completion (see above) it is possible to have this loaded into a running browser without a page reload.

For example, when developing against the WComponents Java Examples.

1. Run Automatic Code Completion (as described above) - this automatically starts a hot reload server.
2. Make the examples use your locally built theme.
3. Ensure you are running in debug mode
4. In your browser:

EITHER:

/*
This will set a cookie that tells the hot reload client to automatically connect when the page loads.
You only need to do this once every 800 days (or whatever you set it to).
*/

require("wc/dom/cookie").create("wchotmod", "true", 800);

OR:

// This will force the hot reload client to connect to the server you are running

require("wc/debug/hotReloadClient").getConnection(true);