View source for JavaScript Tests for Joomla4

==The Magic Inside== <!--T:15-->
</translate>
<translate><!--T:16--> The ''karma.conf.js'' file mentioned in the command for starting the Karma server and that you can find in the root of Joomlaǃ 4.x, is the configuration file for the Karma server. Below is the content of this file.</translate>

<syntaxhighlight lang="php">
// Karma configuration

module.exports = function (config) {
	config.set({

		// base path that will be used to resolve all patterns (e.g. files, exclude)
		basePath: '',

		// frameworks to use
		// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
		frameworks: ['jasmine-ajax', 'jasmine', 'requirejs'],

		// list of files / patterns to load in the browser
		files: [
			{pattern: 'media/system/js/polyfills/webcomponents/webcomponents-ce.min.js', included: true, served: true, watched: true},
			{pattern: 'node_modules/jquery/dist/jquery.min.js', included: false},
			{pattern: 'node_modules/jasmine-jquery/lib/jasmine-jquery.js', included: false},
			{pattern: 'node_modules/text/text.js', included: false},
			{pattern: 'media/vendor/bootstrap/js/bootstrap.min.js', included: false},
			{pattern: 'media/vendor/jquery-ui/js/jquery.ui.core.min.js', included: false},
			{pattern: 'media/vendor/jquery-ui/js/jquery.ui.sortable.min.js', included: false},
			{pattern: 'media/system/js/*.js', included: false},
			{pattern: 'media/system/js/core.js', included: false,served: true, watched: true},
			{pattern: 'media/system/js/legacy/*.js', included: false},
			{pattern: 'media/system/js/fields/*.js', included: false},
			{pattern: 'media/vendor/joomla-custom-elements/js/joomla-alert.min.js', included: false, served: true, watched: true},
			{pattern: 'media/system/js/fields/calendar-locales/*.js', included: false},
			{pattern: 'media/system/js/fields/calendar-locales/date/gregorian/*.js', included: false},
			{pattern: 'tests/javascript/**/fixture.html', included: false},
			{pattern: 'tests/javascript/**/spec.js', included: false},
			{pattern: 'tests/javascript/**/spec-setup.js', included: false},
			{pattern: 'media/system/webcomponents/js/*.js', included: false},
			{pattern: 'images/*.png', included: false},

			'tests/javascript/test-main.js'
		],

		exclude: [
			'media/system/webcomponents/js/*-es5.js',
			'media/system/webcomponents/js/*.min.js',
			'media/system/webcomponents/js/*-es5.min.js',
		],

		// preprocess matching files before serving them to the browser
		// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
		preprocessors: {
			'**/system/js/*.js': ['coverage']
		},

		// coverage reporter configuration
		coverageReporter: {
			type : 'html',
			dir : 'build/coverage-js/'
		},

		// test results reporter to use
		// possible values: 'dots', 'progress'
		// available reporters: https://npmjs.org/browse/keyword/karma-reporter
		reporters: ['verbose', 'progress', 'coverage'],

		// web server port
		port: 9876,

		// enable / disable colors in the output (reporters and logs)
		colors: true,

		// level of logging
		// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
		logLevel: config.LOG_INFO,

		// enable / disable watching file and executing tests whenever any file changes
		autoWatch: true,

		// start these browsers
		// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
		browsers: ['Firefox'],

		// Continuous Integration mode
		// if true, Karma captures browsers, runs the tests and exits
		singleRun: false,

		// list of plugins
		plugins: [
			'karma-jasmine',
			'karma-jasmine-ajax',
			'karma-firefox-launcher',
			'karma-coverage',
			'karma-requirejs',
			'karma-verbose-reporter'
		],

		// Concurrency level
		// how many browser should be started simultaneous
		concurrency: Infinity
	});
};
</syntaxhighlight>
<translate>
<!--T:17-->
Let's have a look at the important configurations that make everything run smoothly.</translate>

<translate><!--T:18--> The ''files'' attribute contains a list of files that the Karma server is going to serve. Unless specified here, no tests can access any file. The set of files currently specified here are the</translate>
<translate><!--T:19-->
* third party JavaScript libraries like jQuery and jasmine-jquery,
* the set of Joomla! custom JavaScript libraries,
* the set of spec files that contain test cases along with the files that set up the spec executions and
* the files that contains the HTML fixtures the libraries are tested on and finally some sample images.</translate>

<translate><!--T:20--> We have these files specified with the ''included: false'' option because we are using ''require.js'' for that purpose. The only file that will be both '''loaded''' and '''included''' from Karma itself will be the ''test-main.js'' file generated from ''require.js''. From there on, ''require.js'' takes care of including the other loaded files.</translate>

<translate><!--T:21--> The '''exclude''' attribute does what the name suggests and is used since the ''media/system/js'' directory contains both the minified as well as the uncompressed version of the same library. We need to exclude the uncompressed versions from the loaded files list and that's what this does.</translate>
<translate>
<!--T:22-->
'''Preprocessors''' attribute has the externally added ''coverage'' reporter specified in it. The output in the command line is also made verbose by the ''verbose'' reporter.</translate>

<translate><!--T:23--> Autowatch is set to true so that whenever a change to any loaded file is made, the Karma server would detect that and rerun the tests. This makes the life of the tester easy.</translate>

<translate><!--T:24--> The ''browsers'' attribute accepts an array of browsers that the tests run on and currently has only Firefox set. In order to use any other browser, the relevant browser launcher needs to be installed and of course you need to have that browser installed on your local machine.</translate>

<translate><!--T:25--> If ''singleRun'' is set to ''true'', Karma will start and capture all configured browsers, run tests and then exit with an exit code of 0 or 1 depending on whether all tests passed or any tests failed. That obviously would not be what we expect when we have ''autowatch'' also set to true. For the ease of development the option is set to ''false''. Still it is possible to run the server in the 'single run' fashion by passing ''--single-run'' option in the Karma start command.</translate>
''node node_modules/karma/bin/karma start karma.conf.js --single-run''

<translate><!--T:26--> The next important file to look at is ''test-main.js'' which is an auto-generated file from ''require.js''. We use ''require.js'' to make the dynamic loading of dependencies in test specs possible. You can find this file in the folder ''/test/javascript/''.</translate>

<translate><!--T:27--> Below you can see the contents of this file.</translate>

<syntaxhighlight lang="php">
const allTestFiles = [];
const TEST_REGEXP = /(spec|test)\.js$/i;

// Get a list of all the test files to include
Object.keys(window.__karma__.files).forEach((file) => {
	if (TEST_REGEXP.test(file)) {
		// Normalize paths to RequireJS module names.
		// If you require sub-dependencies of test files to be loaded as-is (requiring file extension)
		// then do not normalize the paths
		const normalizedTestModule = file.replace(/^\/base\/|\.js$/g, '');
		allTestFiles.push(normalizedTestModule);
	}
});

require.config({
	// Karma serves files under /base, which is the basePath from your config file
	baseUrl: '/base',

	paths: {
		'core': 'media/system/js/core.min',
		'jquery': 'node_modules/jquery/dist/jquery.min',
		'jui': 'media/vendor/jquery-ui/js/jquery.ui.core.min',
		'jui-sortable': 'media/vendor/jquery-ui/js/jquery.ui.sortable.min',
		'bootstrap': 'media/vendor/bootstrap/js/bootstrap.min',
		'jasmineJquery': 'node_modules/jasmine-jquery/lib/jasmine-jquery',
		'libs': 'media/system/js',
		'legacy_libs': 'media/system/js/legacy',
		'testsRoot': 'tests/javascript',
		'text': 'node_modules/text/text',
		'fields': 'media/system/js/fields',
		'calLang': 'media/system/js/fields/calendar-locales/en',
		'calDate': 'media/system/js/fields/calendar-locales/date/gregorian/date-helper',
		'JCE': 'media/system/webcomponents/js'
	},

	shim: {
		jasmineJquery: ['jquery'],
		bootstrap: ['jquery'],
		'jui-sortable': ['jquery'],
		'libs/validate': {
			deps: []
		},
		'libs/subform-repeatable': {
			deps: ['jquery', 'jui', 'jui-sortable']
		},
		'JCE/joomla-field-send-test-mail': {
			deps: ['jquery']
		},
		'libs/fields/calendar': {
			deps: ['calLang', 'calDate']
		}
	},

	// dynamically load all test files
	deps: allTestFiles,

	// we have to kickoff jasmine, as it is asynchronous
	callback: window.__karma__.start
});
</syntaxhighlight>
<translate><!--T:28--> Two important changes are made to the auto-generated file.</translate>
<translate><!--T:29--> * The first is the ''paths'' attribute set in in the require configuration. These paths allow us to have aliases assigned to specific JavaScript files. Whenever we need to add ''node_modules/jquery/dist/jquery.min'' as a dependency, all we do is specify the alias ''jquery'' in the dependency list.</translate>
<translate><!--T:30--> * The next change made to the auto-generated file is the ''shim'' attribute. This is a simple option where we get to specify the dependencies among the paths set above. For example: ''shim: {jasmineJquery: ['jquery']}'' tells ''require.js'' to load jquery before loading jasmineJquery.</translate>

<translate>