How to initialize/load aurelia-dialog plugin correctly before running test cases?

Help Requests
1

I have service (no view) that depends on DialogService from aurelia-dialog, and uses that for opening a dialog. Now I want to test my service. While doing that I got the following error on dialogService.open(...).

Error: DialogRenderer must implement getDialogContainer().
at Renderer.getDialogContainer (webpack-internal:///./node_modules/aurelia-dialog/dist/native-modules/renderer.js:14:15)
at DialogService.open (webpack-internal:///./node_modules/aurelia-dialog/dist/native-modules/dialog-service.js:139:106) …

I got the idea that I need to load the plugin aurelia-dialog before running any of test cases. To this end, I tried the following.

import { bootstrap } from "aurelia-bootstrapper";
import { Aurelia, Container, PLATFORM } from "aurelia-framework";

describe("test specs", () => {
    let container: Container;

    beforeAll(async () => {

        await bootstrap(async (aurelia: Aurelia) => {
            aurelia.use
                .standardConfiguration()
                .developmentLogging()
                .plugin(PLATFORM.moduleName("aurelia-dialog"), (config) => {
                    config.useDefaults();
                    config.settings.lock = true;
                    config.settings.centerHorizontalOnly = false;
                    config.settings.startingZIndex = 5;
                    config.settings.keyboard = true;
                });

            Container.instance = container = new Container();
            aurelia.container = container;
            await aurelia.start();
        });
    });
});

But than I got the following error on aurelia.start.

Error: Loader must implement loadAllModules(ids).
at Loader.loadAllModules (webpack-internal:///./node_modules/aurelia-loader/dist/native-modules/aurelia-loader.js:113:11)
at ViewEngine.importViewResources (webpack-internal:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js:3593:24)
at eval (webpack-internal:///aurelia-framework:646:23)
at <Jasmine>
at loadResources (webpack-internal:///aurelia-framework:637:7)
at eval (webpack-internal:///aurelia-framework:731:14)
at next (webpack-internal:///aurelia-framework:577:30)
at runTasks (webpack-internal:///aurelia-framework:583:10)
at eval (webpack-internal:///aurelia-framework:936:16)
at <Jasmine>
at eval (webpack-internal:///aurelia-framework:935:21)
at <Jasmine>
at FrameworkConfiguration.apply (webpack-internal:///aurelia-framework:919:42)
at Aurelia.start (webpack-internal:///aurelia-framework:463:37) …

Thus, my question is how to correctly load the aurelia-dialog plugin in this scenario?

2

This error seems to me you didn’t run proper setup code, and no loader was registered. Probably more info of how you setting up your tests will be needed, so some other folks who have more experience here can help.

3

Thank you for your reply. Here are more details on the setup.

Folder structure:

 root
 +-src/
 +-tests/
 |  +-karma-bundle.js
 +-karma.conf.js

The relevant and simplified part of karma config (webpack config included) looks something like below.

const path = require('path');
const baseUrl = "/";

const srcDir = path.resolve(__dirname, "src");
const testDir = path.resolve(__dirname, "tests");
const outDir = path.resolve(__dirname, "dist");

module.exports = function (config) {
    config.set({
        basePath: "./",
        frameworks: ['jasmine'],
        files: [ 
            { pattern: "./node_modules/bootstrap/dist/css/bootstrap.css", watched:false},
            { pattern: "./node_modules/whatwg-fetch/fetch.js", watched:false},
            { pattern: 'tests/karma-bundle.js', watched: false }
         ],
        preprocessors: { 'tests/karma-bundle.js': ['webpack', 'sourcemap'] },
        client: { 
            clearContext: false, 
            jasmine: {
                random: true,
                seed: 'MY_SEED'
            }
        },
        webpackServer: { noInfo: true },
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: [ "SlimerJS" ],
        singleRun: true,
        concurrency: Infinity,
        webpack: {
            mode: "development",
            entry: { app: ["aurelia-bootstrapper"] },
            resolve: {
              extensions: [".ts", ".js"],
              modules: [srcDir, testDir, "node_modules"],
              symlinks: false,
              alias
            },
            output: {
              path: outDir,
              publicPath: baseUrl,
              filename: "[name].[hash].js",
              sourceMapFilename: "[name].[hash].bundle.map",
              chunkFilename: "[name].[hash].js"
            },
            devServer: {
              contentBase: outDir,
              historyApiFallback: true
            },
            devtool: "cheap-module-eval-source-map",   
            module: {
              rules: [
                { test: /\.css$/i, issuer: [{ not: [{ test: /\.html$/i }] }], use: ["style-loader", ...cssRules] },
                { test: /\.css$/i, issuer: [{ test: /\.html$/i }], use: [ "css-loader" ] },
                { test: /app\.scss$/, loaders: ["style-loader", "css-loader", "sass-loader"] },
                { 
                  test: /\.ts$/i, 
                  use:[
                      { loader: "istanbul-instrumenter-loader" },
                      { loader: "ts-loader", options: { reportFiles: [ srcDir+'/**/*.ts'] } }
                  ], 
                  include: srcDir 
                },
                { test: /\.ts$/i, loader: "ts-loader", include: testDir, options: { reportFiles: [testDir+'/**/*.ts'] } },
                { test: /\.html$/i, loader: "html-loader" },
                { test: /\.(png|gif|jpg|cur)$/i, loader: "url-loader", options: { limit: 8192 } },      
                { test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: "url-loader", options: { limit: 10000, mimetype: "application/font-woff2" } },
                { test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: "url-loader", options: { limit: 10000, mimetype: "application/font-woff" } },      
                { test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: "file-loader" },
                { test: /[\/\\]node_modules[\/\\]bluebird[\/\\].+\.js$/, loader: 'expose-loader?Promise' },
              ]
            },  
            plugins: [
              new AureliaPlugin({aureliaApp: path.resolve(testDir, "./main") }),
              new ModuleDependenciesPlugin({ 'aurelia-testing': ['./compile-spy', './view-spy'] }),
              new ProvidePlugin({ 
                'Promise': 'bluebird',
                $: "jquery",
                jQuery: "jquery",
                "window.jQuery": "jquery"
              })
            ]
          },        
    })
};

And lastly, the tests/karma-bundle.js looks like below.

import 'aurelia-polyfills';
import 'aurelia-loader-webpack';

Error.stackTraceLimit = Infinity;

var testModuleContexts = loadTestModules();
runTests(testModuleContexts);

function loadTestModules() {
    var srcContext = require.context('../src', true, /\.ts$/im);
    var testContext = require.context('./', true, /\.spec\.[tj]s$/im);

    return [srcContext, testContext];
}

function runTests(contexts) {
    contexts.forEach(requireAllInContext);
}

function requireAllInContext(requireContext) {
    return requireContext.keys().map(requireContext);
}