Writing a Plugin

Introduction

ICE plugins allows for easy modification, customization, and enhancement of the ice.core library. Instead of changing the core programming of ICE, you can add functionality with ICE plugins.

Creating a plugin

• First download this repository. This is the basic template of an ICE plugin.

Notes

1. ICE Core uses require.js so every plugin has to have a main.js in the src folder.

Folder Structure

|Folder | Description| |-------|------------| | demo/ | This is where your demo pages for you plugin goes. In ice-core, these are html pages but this folder can contain anything that can showcase your project.| | dist/ | This is where any files needed to use your plugin goes.| | documents/ | This is where your documentation goes. ICE and it's plugins will use Beautiful Docs. This library converts md files into static html files.| | drivers/ | This folder contains all the drivers to run Selenium.| | grunt/ | This folder contains all the configs and task for grunt that ICE currently uses. You can add to this folder but it isn't reccommended to remove any of the tasks or configs.| | src/ | This is where you write your plugin.| | test/ | This is where all the testing goes.| | test/fixtures/ | ICE needs a config or a geometry to run, store your testing configs here.| | test/functional/ | This is where you will write your functional tests.| | test/helpers/ | You can provide helper libraries here to help with unit tests and automated ones.| | test/lib/ |You can provide any additional libraries needed to help you run your tests.| | test/manual/ | If you want to test a feature manually, you can put the pages here.| | test/pages/ | Pages that your test run. | | test/specs/ | This is where your unit test should go.|

ICE Plugin Hooks

registerProxy

This function is used to access plugin functions through the core.

Parameters | Type | Description| ------------|---------|---------------------------------------------------------------------------------| name | String | The name that the core associates the callback with. callback | Function | The function that gets associated to the name.

This is how you use the registerProxy function:

ice.registerProxy('return-one', function(){
  return 1;
});

execute

This function is used run the callbacks you registered to the proxy.

Parameters | Type | Description | ------------------------|--------|----------------------------------------------------------------------| name | String | The name of the plugin function you want to access.|

This is how you use the execute function:

ice.execute('return-one');

Using Plugins

1. Include ICE Plugin and the css:

   <script src="dist/js/ice.<name>.plugin.js"></script>
   <link  href="dist/css/ice.<name>.pugin.css"></link>

2. Include ICE CORE:

   <script src="bower_components/ice-core/dist/js/ice.core.min.js"></script>

3. Include DIV to be the venue map container and a DIV for the selection tool buttons:

   <div id="venue_page" ></div>
   <div id="buttons" ></div>

   (note: if you want the buttons to be positioned a particular way, you will likely need to wrap both the venue map and buttons in a div that is set with position: relative and then set the buttons div to position:absolute)

4. Create an ice instance:

   var ice = new ICE.create({'div':'canvas div'});

5.  Pass the ice instance to the <name>Plugin.create function:

```javascript
ICE.<name>Plugin.create(ice, options);

Compiling

Ice Core uses node and grunt with convenient methods for working with the library. It's how we compile our code, run tests, and run the documentation server. To use it, install the required dependencies as directed and then run some Grunt commands.

Install Grunt

From the command line:

1. Install grunt-cli globally with npm install -g grunt-cli.
2. Install bower globally with npm install -g bower.
3. Navigate to the root directory of the project, then run npm install. npm will look at [package.json] and run bower install. bower will look at [bower.json]
4. Navigate to the root directory of the project, then run bower install.

When completed, you'll be able to run the various Grunt commands provided from the command line.

Unfamiliar with npm? Don't have node installed? That's a-okay. npm stands for node packaged modules and is a way to manage development dependencies through node.js. Download and install node.js before proceeding.

Available Grunt commands

Build - grunt bundle

creates the /dist/js directory with compiled files. Uses UglifyJS.

creates the '/docs/'

Tests - grunt concurrent:test

Runs a selenium server. Required to run all cucumber tests

Tests - grunt cucumber

Runs all cucumber tests. Requires a selenium server to be running.

Tests - grunt karma:dev

Runs all unit tests present in the test/specs folder. Generates a coverage report in the coverage folder. Can be viewed by navigating to localhost/coverage.

Server - grunt server

This is used to run the demo folder. After you run the command, open http://localhost:9000 in your browser and it will open up the demo files.

Troubleshooting dependencies

Should you encounter problems with installing dependencies or running Grunt commands, uninstall all previous dependency versions (global and local). Then, rerun npm install.

Running the BDD

You need to run three seperate commands to run the bdd

node ./node_modules/selenium-standalone/bin/selenium-standalone start // This is to start the selenium server

grunt test-servers // This is to run the connect server to serve the html pages

grunt cucumber:functional:debug // This runs the cucumber tests

License

Ticketmaster Terms of Use