javascript - 如何在 headless 执行期间测试 jQuery UI 对话框

Question

我们的应用使用 jQuery dialogs对于模态弹出窗口。我们正在尝试为我们的 javascript 编写一些单元测试，其中一部分是创建对话框。我们正在使用 Jasmine 和 Jasmine Maven plugin .在浏览器中运行测试时，一切正常。但是，当我们尝试运行测试的 headless 执行时 (mvn jasmine:test)，测试在创建对话框的行上失败。错误看起来像这样:

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

发生这种情况的行很简单:

$(element).dialog(popupProperties);

如果有帮助，我们的 pom.xml 有这个插件:

        <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>

我们可以做些什么来让 headless 执行与对话相关联吗？

Answer 1

我们弄清楚了问题所在。基本上我们的 src 目录中的 preloadSources 被添加到规范运行器中两次。它会首先执行所有 preoloadSources，然后添加 src 目录中的所有内容。所以，jquery.js 被第二次添加到第 2 个 jquery-ui.js 下，因此它不知道 dialog 是什么.我们通过将 pom.xml 更改为以下内容来修复它:

        <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>

sourceExcludes 防止它被第二次添加。这一切看起来像是插件的错误，但这让我们能够绕过它。