Skip to content

Commit

Permalink
Merge branch 'master' into FLUID-5959
Browse files Browse the repository at this point in the history
  • Loading branch information
jobara committed Feb 27, 2018
2 parents 963da59 + 6e1311a commit 47cbc3a
Show file tree
Hide file tree
Showing 165 changed files with 10,524 additions and 1,825 deletions.
22 changes: 22 additions & 0 deletions .buildkite/pipeline.yml
@@ -0,0 +1,22 @@
# A block step is introduced in all pull request branches before any of the steps listed below. It
# is configured using the Buildkite web UI and has a "Run this CI job" label. It is not included
# in this YAML configuration to prevent it from being accidentally removed as part of a PR change.
steps:
- name: "Create VM"
command: "DISPLAY=:0 vagrant up --provider virtualbox && npm install"
timeout_in_minutes: 15

# Wait and make sure the VM was successfully created before proceeding. Otherwise the remaining steps will not run.
- wait

- name: "Install dependencies"
command: "vagrant ssh -c 'cd /home/vagrant/sync; npm install'"

- name: "Build Infusion"
command: "vagrant ssh -c 'cd /home/vagrant/sync; grunt clean stylus modulefiles:all pathMap:all copy:all copy:necessities uglify:all concat:all compress:all'"

- name: "Run tests"
command: "npm run test:vagrant"

- name: "Destroy VM"
command: "vagrant destroy -f"
3 changes: 3 additions & 0 deletions .gitignore
Expand Up @@ -7,3 +7,6 @@
/.bundle/
/.vagrant/
report.tap
instrumented
coverage
reports
1 change: 1 addition & 0 deletions .npmignore
@@ -1,3 +1,4 @@
.buildkite
.settings
.gitignore
.npmignore
Expand Down
8 changes: 0 additions & 8 deletions Gruntfile.js
Expand Up @@ -288,11 +288,6 @@ module.exports = function (grunt) {
tasks: "buildStylus"
}
},
shell: {
runTests: {
command: "vagrant ssh -c 'cd /home/vagrant/sync/; DISPLAY=:0 testem ci --file tests/testem.json'"
}
},
distributions:
{
"all": {},
Expand Down Expand Up @@ -349,7 +344,6 @@ module.exports = function (grunt) {
grunt.loadNpmTasks("grunt-jsonlint");
grunt.loadNpmTasks("grunt-modulefiles");
grunt.loadNpmTasks("grunt-contrib-stylus");
grunt.loadNpmTasks("grunt-shell");
grunt.loadNpmTasks("grunt-contrib-watch");

// Custom tasks:
Expand Down Expand Up @@ -533,6 +527,4 @@ module.exports = function (grunt) {
grunt.registerTask("custom", ["build:custom"]);

grunt.registerTask("lint", "Apply eslint and jsonlint", ["eslint", "jsonlint"]);

grunt.registerTask("tests", "Run tests", ["shell:runTests"]);
};
115 changes: 90 additions & 25 deletions README.md
@@ -1,7 +1,8 @@

## What Is Infusion? ##

Infusion is a different kind of JavaScript framework. Our approach is to leave you in control—it's your interface, using your markup, your way. Infusion is accessible and very, very configurable.
Infusion is a different kind of JavaScript framework. Our approach is to leave you in control—it's your interface,
using your markup, your way. Infusion is accessible and very, very configurable.

Infusion includes:
* an application framework for developing flexible stuff with JavaScript and jQuery
Expand All @@ -20,34 +21,45 @@ Infusion includes:
* [Use from the CDNJS Content Distribution Network](https://cdnjs.com/libraries/infusion)
* To try out Infusion quickly you can use the following `script` tag to include the full framework from the CDN: `<script src='https://cdnjs.cloudflare.com/ajax/libs/infusion/2.0.0/infusion-all.min.js'></script>`

See [How Do I Create an Infusion Package?](#how-do-i-create-an-infusion-package), for details on creating complete or custom packages of Infusion.
See [How Do I Create an Infusion Package?](#how-do-i-create-an-infusion-package), for details on creating complete or
custom packages of Infusion.

## Where is the Infusion Documentation? ##

Infusion has comprehensive documentation at <http://docs.fluidproject.org/infusion>.

## Who Makes Infusion, and How Can I Help? ##

The Fluid community is an international group of designers, developers, and testers who focus on a common mission: improving the user experience and accessibility of the open web.
The Fluid community is an international group of designers, developers, and testers who focus on a common mission:
improving the user experience and accessibility of the open web.

The best way to join the Fluid Community is to jump into any of our community activities. Visit our [website](http://fluidproject.org/) for links to our mailing lists, chat room, wiki, etc.
The best way to join the Fluid Community is to jump into any of our community activities. Visit our
[website](http://fluidproject.org/) for links to our mailing lists, chat room, wiki, etc.

## Inclusion ##

The Fluid community is dedicated to inclusive design&mdash;design that considers the full range of human diversity with respect to ability, language, culture, gender, age and other forms of human difference. To help ensure that our community is a safe space for all contributors, we have adopted a [code of conduct](https://wiki.fluidproject.org/display/fluid/Inclusion+in+the+Fluid+Community) based on the [Contributor Covenant](http://contributor-covenant.org/). All participants and contributors have the responsibility to uphold this code. Please contact the [Advocacy working group](mailto:fluid-advocacy@fluidproject.org) if you encounter unacceptable behaviour.

## Where is Infusion Used? ##

Infusion is the cornerstone of a number of Fluid's own projects dedicated to supporting inclusive design on the Web. You can see some of them featured on our [Projects page](http://fluidproject.org/projects.html). Infusion is also used in a variety of third-party applications, which are listed on the [Infusion Integrations](https://wiki.fluidproject.org/display/fluid/Infusion+Integrations) wiki page.
Infusion is the cornerstone of a number of Fluid's own projects dedicated to supporting inclusive design on the Web. You
can see some of them featured on our [Projects page](http://fluidproject.org/projects.html). Infusion is also used in a
variety of third-party applications, which are listed on the
[Infusion Integrations](https://wiki.fluidproject.org/display/fluid/Infusion+Integrations) wiki page.

## How Do I Create an Infusion Package? ##

For simplicity and performance reasons, you may wish to create a concatenated, minified file. However, such a file is often difficult to read. To address this, source maps for the minified file are automatically generated to make debugging easier.
For simplicity and performance reasons, you may wish to create a concatenated, minified file. However, such a file is
often difficult to read. To address this, source maps for the minified file are automatically generated to make
debugging easier.

### Source Maps ###

Source maps are supported in all of the major browsers: [Chrome](https://developer.chrome.com/devtools/docs/javascript-debugging#source-maps), [Firefox](https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Use_a_source_map),
[IE 11](https://msdn.microsoft.com/library/dn255007#source_maps), and Safari. To make use of them, enable source maps in your debugging environment, and ensure that the source maps are hosted adjacent to the file they are associated with.
Source maps are supported in all of the major browsers:
[Chrome](https://developer.chrome.com/devtools/docs/javascript-debugging#source-maps),
[Firefox](https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Use_a_source_map),
[IE 11](https://msdn.microsoft.com/library/dn255007#source_maps), and Safari. To make use of them, enable source maps
in your debugging environment, and ensure that the source maps are hosted adjacent to the file they are associated with.

#### Source Map Example ####

Expand Down Expand Up @@ -77,15 +89,17 @@ npm install

#### Infusion All Build ####

Will include all of Infusion. The source files packaged along with the single concatenated js file will include all of the demos and unit tests. This is a good choice if you are trying to learn Infusion.
Will include all of Infusion. The source files packaged along with the single concatenated js file will include all of
the demos and unit tests. This is a good choice if you are trying to learn Infusion.

```bash
grunt
```

##### Custom Build #####

Will only include the modules you request, and all of their dependencies, minus any that are explicitly excluded. Unlike the "all" build, none of the demos or tests are included with a custom package.
Will only include the modules you request, and all of their dependencies, minus any that are explicitly excluded. Unlike
the "all" build, none of the demos or tests are included with a custom package.

```bash
grunt custom
Expand All @@ -111,7 +125,8 @@ grunt custom --source=true
__value__: "module(s)" (String)
_only available to custom packages_

The `--include` option takes in a comma-separated string of the [Modules](#modules) to be included in a custom package. If omitted, all modules will be included (demos and tests will not be included).
The `--include` option takes in a comma-separated string of the [Modules](#modules) to be included in a custom package.
If omitted, all modules will be included (demos and tests will not be included).

```bash
grunt custom --include="inlineEdit, uiOptions"
Expand All @@ -122,7 +137,8 @@ grunt custom --include="inlineEdit, uiOptions"
__value__: "module(s)" (String)
_only available to custom packages_

The exclude option takes in a comma-separated string of the [Modules](#modules) to be excluded from a custom package. The `--exclude` option takes priority over `--include`.
The exclude option takes in a comma-separated string of the [Modules](#modules) to be excluded from a custom package.
The `--exclude` option takes priority over `--include`.

```bash
grunt custom --exclude="jQuery"
Expand All @@ -135,7 +151,9 @@ grunt custom --include="framework" --exclude="jQuery"
__value__: "custom suffix" (String)
_only available to custom packages_

By default, custom packages are given a name with the form _infusion-custom-<version>.zip_ and the concatenated js file is called _infusion-custom.js_. By supplying the `--name` option, you can replace "custom" with any other valid string you like.
By default, custom packages are given a name with the form _infusion-custom-<version>.zip_ and the concatenated js file
is called _infusion-custom.js_. By supplying the `--name` option, you can replace "custom" with any other valid string
you like.

```bash
# this produces infusion-myPackage.js
Expand Down Expand Up @@ -181,37 +199,84 @@ All of these libraries are already bundled within the Infusion image.

## How Do I Run Tests? ##

There are two options available for running tests. The first option involves using browsers installed on your computer and the second uses browsers available in a VM.
There are two options available for running tests. The first option involves using the browsers installed on your
compute. The second uses browsers available in a VM.

### Run Tests Using Browsers Installed On Your Computer ###
### Run Tests On Your Computer ###

Using this option requires the installation of [Testem](https://github.com/testem/testem/#installation) and then running ``testem ci --file tests/testem.json`` in this directory. Any browsers that Testem finds on your platform will be launched sequentially with each browser running the full Infusion test suite. The results will be returned in your terminal in the [TAP](https://testanything.org/) format. You can use the ``testem launchers`` command to get a list of available browsers.
To run both the browser and node tests for this package, use the command `npm test` or `yarn test`.

**Note:** Any browser launched will need to be focused and remain the active window. Some of the tests require focus, and will report errors if they are not focused.
To run only the node tests, use the command `npm run test:node` or `yarn run test:node`.

### Run Tests Using Browsers Installed In a VM ###
To run only the browser tests, use the command `npm run test:browser` or `yarn run test:browser`. Any browsers that Testem
finds on your system will be launched sequentially with each browser running the full Infusion test suite. The results
will be returned in your terminal in the [TAP](https://testanything.org/) format. Once you have run `npm install`, you
can use the command ``node node_modules/testem/testem.js launchers`` from the root of this repository to get a list of
browsers that Testem can launch on your system.

A [Fedora VM](https://github.com/idi-ops/packer-fedora) can be automatically created using tools provided by the [Prosperity4All Quality Infrastructure](https://github.com/GPII/qi-development-environments/). After meeting the [QI development VM requirements](https://github.com/GPII/qi-development-environments/#requirements) the ``vagrant up`` command can be used to launch a VM which will contain Testem and several browsers. Typing ``grunt tests`` will run the Infusion tests in the VM and the results will be displayed in your terminal.
If you would like to debug individual tests or view the test summary in a browser, you can:

When this VM is first created Chrome and Firefox will be upgraded to the latest versions available in the Fedora and Google package repositories. The ``vagrant provision`` command can be used at a later time to trigger the browser upgrade and general VM provisioning mechanism.
1. Host the working directory, for example, using a command like the following from the root of the repository: `python -m SimpleHTTPServer 4102`
2. Open the "rollup" file `tests/all-tests.html` that runs all tests in a browser. Continuing the above example, you would load the URL `http://localhost:4102/tests/all-tests.html`.

The benefits of using a VM include the following:
**Note:** Any browser launched will need to be focused and remain the active window. Some of the tests require focus,
and will report errors if they are not focused. If you want to run the tests consistently, your best option is to run
the tests in a VM (see below).

* Does not require testem to be installed on the host machine
* Allows other applications on the host machine to have focus while the tests are run
### Run Tests In a VM ###

The tests in this package can be run within a virtual machine (VM). The benefits of using a VM include the following:

* Does not require Testem to be installed on the host machine.
* Allows other applications on the host machine to have focus while the tests are run.
* Isolates the test run from issues specific to one operating system or machine.

Before you can run tests within a VM, your machine will need to meet the
[QI development VM requirements](https://github.com/GPII/qi-development-environments/#requirements). Once you have that,
a [Fedora VM](https://github.com/idi-ops/packer-fedora) can be automatically created using tools provided by the
[Prosperity4All Quality Infrastructure](https://github.com/GPII/qi-development-environments/).

- To run both the Node and browser tests in a VM: `npm run test:vagrant`
- To run the Node tests only: `npm run test:vagrantNode`
- To run the browser tests only: `npm run test:vagrantBrowser`

Each of these commands will create the VM (if needed). The test results from the VM will be displayed in your terminal.

If you just want to create the VM yourself, you can use a command like ``vagrant up``, and connect to it the VM either
from VirtualBox, or from the command line using a command like ``vagrant ssh``.

When this VM is first created, Chrome and Firefox will be upgraded to the latest versions available in the Fedora and
Google package repositories. The ``vagrant provision`` command can be used at a later time to trigger the browser
upgrade and general VM provisioning mechanism.

#### Coverage Reporting

The preferred way to consistently generate a code coverage report is to use Vagrant as described above. When you
start a VM using `vagrant up` and run `npm run test:vagrant`, the full test suite will run in the VM, and a coverage
report will be saved to the `reports` directory. You can also run the `npm test` command on your local machine, but
you will need to ensure that browsers receive focus when they are launched (see above).

The `npm test` command has [two additional associated scripts](https://docs.npmjs.com/misc/scripts). The `pretest`
script runs before the command defined for the `test` script. The `posttest` script runs after. In our case
we use a `pretest` script to clean up previous coverage data before we run the tests, and a `posttest` script to
compile the actual report. You should not need to run the `pretest` scripts manually before running either the node or
browser tests, or to run the `posttest` scripts afterward.

## Developing with the Preferences Framework ##

Infusion is in the process of switching to use [Stylus](http://learnboost.github.io/stylus/) for CSS pre-processing.
CSS files for the Preferences Framework have been re-written in Stylus. Only Stylus files are pushed into the github repository.
CSS files for the Preferences Framework have been re-written in Stylus. Only Stylus files are pushed into the GitHub
repository.

For developing the Preferences Framework, run the following from the project root to compile Stylus files to CSS:

```bash
grunt buildStylus
```

A `watch` task using [grunt-contrib-watch](https://github.com/gruntjs/grunt-contrib-watch) is also supplied to ease Stylus development. This task launches a process that watches all Stylus files in the `src` directory and recompiles them when they are changed. This task can be run using the following command:
A `watch` task using [grunt-contrib-watch](https://github.com/gruntjs/grunt-contrib-watch) is also supplied to ease
Stylus development. This task launches a process that watches all Stylus files in the `src` directory and recompiles
them when they are changed. This task can be run using the following command:

```bash
grunt watch:buildStylus
Expand Down
2 changes: 1 addition & 1 deletion Vagrantfile
Expand Up @@ -24,7 +24,7 @@ ram = ENV["VM_RAM"] || 2048

Vagrant.configure(2) do |config|

config.vm.box = "inclusivedesign/fedora26"
config.vm.box = "inclusivedesign/fedora27"

# Your working directory will be synced to /home/vagrant/sync in the VM.
config.vm.synced_folder ".", "#{app_directory}"
Expand Down
1 change: 1 addition & 0 deletions demos/inlineEdit/index.html
Expand Up @@ -28,6 +28,7 @@
<script type="text/javascript" src="../../src/framework/core/js/FluidRequests.js"></script>
<script type="text/javascript" src="../../src/lib/fastXmlPull/js/fastXmlPull.js"></script>
<script type="text/javascript" src="../../src/framework/renderer/js/fluidParser.js"></script>
<script type="text/javascript" src="../../src/framework/core/js/MessageResolver.js"></script>
<script type="text/javascript" src="../../src/framework/renderer/js/fluidRenderer.js"></script>
<script type="text/javascript" src="../../src/framework/renderer/js/RendererUtilities.js"></script>
<script type="text/javascript" src="../../src/components/overviewPanel/js/OverviewPanel.js"></script>
Expand Down
1 change: 1 addition & 0 deletions demos/keyboard-a11y/index.html
Expand Up @@ -25,6 +25,7 @@
<script type="text/javascript" src="../../src/framework/core/js/FluidRequests.js"></script>
<script type="text/javascript" src="../../src/lib/fastXmlPull/js/fastXmlPull.js"></script>
<script type="text/javascript" src="../../src/framework/renderer/js/fluidParser.js"></script>
<script type="text/javascript" src="../../src/framework/core/js/MessageResolver.js"></script>
<script type="text/javascript" src="../../src/framework/renderer/js/fluidRenderer.js"></script>
<script type="text/javascript" src="../../src/framework/renderer/js/RendererUtilities.js"></script>
<script type="text/javascript" src="../../src/components/overviewPanel/js/OverviewPanel.js"></script>
Expand Down
1 change: 1 addition & 0 deletions demos/overviewPanel/index.html
Expand Up @@ -18,6 +18,7 @@
<script type="text/javascript" src="../../src/framework/core/js/FluidRequests.js"></script>
<script type="text/javascript" src="../../src/lib/fastXmlPull/js/fastXmlPull.js"></script>
<script type="text/javascript" src="../../src/framework/renderer/js/fluidParser.js"></script>
<script type="text/javascript" src="../../src/framework/core/js/MessageResolver.js"></script>
<script type="text/javascript" src="../../src/framework/renderer/js/fluidRenderer.js"></script>
<script type="text/javascript" src="../../src/framework/renderer/js/RendererUtilities.js"></script>
<script type="text/javascript" src="../../src/components/overviewPanel/js/OverviewPanel.js"></script>
Expand Down

0 comments on commit 47cbc3a

Please sign in to comment.