How to test jQuery UI Dialog during headless execution

Question

Our app uses jQuery dialogs for modal popups. We're trying to write some unit tests for our javascript, and part of this is the creation of the dialogs. We're using Jasmine and the Jasmine Maven plugin. When running the tests in a browser, it all works fine. However, when we trying to run a headless execution of the tests (mvn jasmine:test), the tests fail on the lines creating the dialog. There error looks something like this:

* TypeError: Cannot find function dialog in object [object Object].

The line this happens on is simply like this:

$(element).dialog(popupProperties);

If it helps, our pom.xml has this for the plugin:

        <plugin>
            <groupId>com.github.searls</groupId>
            <artifactId>jasmine-maven-plugin</artifactId>
            <version>1.2.0.0</version>
            <extensions>true</extensions>
            <executions>
                <execution>
                <goals>
                    <goal>test</goal>
                </goals>
                </execution>
            </executions>
            <configuration>
                <preloadSources>
                    <source>${project.basedir}/src/main/webapp/resources/jquery.js</source>
                    <source>${project.basedir}/src/main/webapp/resources/jquery-ui.js</source>
                    <source>${project.basedir}/src/main/webapp/resources/angular.js</source>
                    <source>${project.basedir}/src/test/javascript/lib/angular-mocks.js</source>
                    <source>${project.basedir}/src/test/javascript/lib/jasmine-fixture.js</source>
                </preloadSources>
                <jsSrcDir>${project.basedir}/src/main/webapp/resources/</jsSrcDir>
                <jsTestSrcDir>${project.basedir}/src/test/javascript/unit/</jsTestSrcDir>
            </configuration>
        </plugin>

Is there something we can do to get the headless execution working with the dialog stuff?

Answer 1

We figured out what the problem was. Basically the preloadSources from our src directory were getting added twice to the spec runner. It would do all the preoloadSources first, and then add everything from the src directory. So, jquery.js got added a 2nd time under the 2nd jquery-ui.js, and thus it didn't know what dialog was. We fixed it by changing our pom.xml to the following:

        <plugin>
            <groupId>com.github.searls</groupId>
            <artifactId>jasmine-maven-plugin</artifactId>
            <version>1.2.0.0</version>
            <extensions>true</extensions>
            <executions>
                <execution>
                <goals>
                    <goal>test</goal>
                </goals>
                </execution>
            </executions>
            <configuration>
                <preloadSources>
                    <source>${project.basedir}/src/main/webapp/resources/${ivplugin.client.version}/jquery.js</source>
                    <source>${project.basedir}/src/main/webapp/resources/${ivplugin.client.version}/jquery-ui.js</source>
                    <source>${project.basedir}/src/main/webapp/resources/${ivplugin.client.version}/angular.js</source>
                    <source>${project.basedir}/src/test/javascript/lib/angular-mocks.js</source>
                    <source>${project.basedir}/src/test/javascript/lib/jasmine-fixture.js</source>
                </preloadSources>
                <jsSrcDir>${project.basedir}/src/main/webapp/resources/${ivplugin.client.version}/</jsSrcDir>
                <jsTestSrcDir>${project.basedir}/src/test/javascript/unit/</jsTestSrcDir>
                <sourceExcludes>
                    <exclude>**/jquery.js</exclude>
                    <exclude>**/jquery-ui.js</exclude>
                    <exclude>**/angular.js</exclude>
                </sourceExcludes>
            </configuration>
        </plugin>

The sourceExcludes prevents it from getting added the 2nd time. This all seems like a bug with the plugin, but this allowed us to get around it.