Book Image

Instant Galleria How-to

By : Nathan Van Gheem
Book Image

Instant Galleria How-to

By: Nathan Van Gheem

Overview of this book

Providing beautiful and usable galleries is an important aspect of the Web today. A gallery solution needs to integrate into your web application easily and seamlessly. Users expect mobile sites that function on par with their desktop counterparts‚Äîespecially for image galleries. In order to accomplish these tasks, you need to use a JavaScript (not Flash) that is extensible and scales to mobile devices. "Instant Galleria How-to" will teach you how to use Galleria in advanced scenarios to become an expert and integrate Galleria into your next project using themes and plugins to accomplish any task. This book teaches you how to use and create themes and plugins,  using the Galleria API through a series of recipes that include a plethora of code examples. You'll be taken through detailed instructions on the usage of JavaScript to customize Galleria. You will create your own theme (mobile friendly), plugin, and learn all the configuration options of Galleria. You'll learn how to customize Galleria by using its extensive API, optimize Galleria, integrate with Google Analytics, create tests for your customization, and integrate into your web application. You'll become an expert user of the Galleria framework, which will enable you to deploy beautiful, mobile friendly galleries for your next web project.
Table of Contents (7 chapters)

Creating tests for customizations (Advanced)


This recipe creates tests for Galleria customizations that can be run across many browsers. This will allow you to ensure the quality of your customizations via automated testing.

Getting ready

In the tests we're going to write, we'll be using the Selenium test framework with the Firefox web browser. The advantage of Selenium is that it comes with an IDE plugin so novices can even write tests. The difficultly level is ideal to cover in this book.

We'll be using Selenium to record user interactions with our Galleria customizations. Once these interactions are recorded, they can then be tested against any additional functionality or changes to ensure that everything is still working as expected.

Before we get started, please download the Firefox web browser if you have not already done so, available at http://www.mozilla.org/firefox. Follow the instructions to download and install.

Then, open Firefox and visit http://seleniumhq.org/download/ and follow the instructions to download and install the Firefox Selenium IDE plugin. Make sure to restart Firefox after the plugin is installed.

Finally, open up Selenium IDE by clicking on Tools in the menu bar and then selecting the Selenium IDE item in the menu. There should be a Selenium IDE window like the one in the following screenshot:

Once Selenium is set up, locate the myfirstgallery.html file that we created in the Setting up the development environment recipe. We'll be creating tests for that gallery.

How to do it...

  1. First, open the myfirstgallery.html file in Firefox.

  2. Then, click on the record button (red button in the upper right-hand corner) and then start using the gallery as the user would. Selenium will be recording all the actions that we perform.

  3. Once all the functionality is tested, click on the record button once more to stop recording.

  4. Now, before we run the test just created, reduce the speed all the way down. It should look like the following screenshot:

    Modifying this prevents Selenium from running the test action too quickly. If it ran too quickly, Galleria wouldn't finish the transitions before the next action is performed.

  5. Finally, click the play button to run the test we just recorded. The whole test suite should run without failure if it was done correctly.

  6. Inspect the source tab of the recorded test. It should contain something similar to the following code snippet:

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head profile="http://selenium-ide.openqa.org/profiles/test-case">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="selenium.base" href="http://change-this-to-the-site-you-are-testing/" />
    <title>New Test</title>
    </head>
    <body>
    <!-- Each test is specified in table format.
         Each row specifies an action the Selenium is
         automating -->
    <table cellpadding="1" cellspacing="1" border="1">
     <thead>
      <tr><td rowspan="1" colspan="3">New Test</td></tr>
     </thead>
     <tbody>
      <tr>
    	<td>open</td>
    <td>file:///path/to/galleria/development/myfirstgallery.html</td>
    	<td></td>
      </tr>
      <tr>
      <td>click</td>
      <td>css=div.galleria-image-nav-right</td>
      <td></td>
      </tr>
      <tr>
      <td>click</td>
      <td>css=div.galleria-image-nav-right</td>
      <td></td>
      </tr>
      <tr>
      <td>click</td>
      <td>css=div.galleria-image-nav-right</td>
      <td></td>
      </tr>
    <!-- more tests would follow →
    </tbody></table>
    </body>
    </html>

    The test code is actually just simple HTML table markup with events and element selectors, so from here it's possible to save these tests as files to version control and run them on different machines and browsers.

In addition to the actions that were recorded, it would be beneficial to also include assert statements to make sure certain elements are present in the DOM as each action is performed. Inspect Selenium IDE for details on using more commands and tests.

How it works...

Selenium IDE allows us to record all the actions being performed in the browser. Then the Selenium test driver plays the tests defined against a web browser, in our case Firefox.

Those tests can be run against a Selenium server that is set up to test against multiple browsers and operating systems.

Read more about the selenium testing framework

Selenium has a vast API and documentation area on its website. Anyone who is interested in learning more about it should read it, available at http://seleniumhq.org/.