BranchesTags

Repository files navigation

npmnodedepstestcoveragechat

Karma Webpack

Use webpack to preprocess files in karma

Install

npm npm i -D karma-webpack

yarn yarn add -D karma-webpack

Usage

karma.conf.js

module.exports=(config)=>{config.set({// ... normal karma configuration// make sure to include webpack as a frameworkframeworks: ['mocha','webpack'],plugins: ['karma-webpack','karma-mocha',],files: [// all files ending in ".test.js"// !!! use watched: false as we use webpacks watch{pattern: 'test/**/*.test.js',watched: false}],preprocessors: {// add webpack as preprocessor'test/**/*.test.js': ['webpack']},webpack: {// karma watches the test entry points// Do NOT specify the entry option// webpack watches dependencies// webpack configuration},});}

Default webpack configuration

This configuration will be merged with what gets provided via karma's config.webpack.

constdefaultWebpackOptions={mode: 'development',output: {filename: '[name].js',path: path.join(os.tmpdir(),'_karma_webpack_')+Math.floor(Math.random()*1000000),},stats: {modules: false,colors: true,},watch: false,optimization: {runtimeChunk: 'single',splitChunks: {chunks: 'all',minSize: 0,cacheGroups: {commons: {name: 'commons',chunks: 'initial',minChunks: 1,},},},},plugins: [],};

How it works

This project is a framework and preprocessor for Karma that combines test files and dependencies into 2 shared bundles and 1 chunk per test file. It relies on webpack to generate the bundles/chunks and to keep it updated during autoWatch=true.

The first preproccessor triggers the build of all the bundles/chunks and all following files just return the output of this one build process.

Webpack typescript support

By default karma-webpack forces *.js files so if you test *.ts files and use webpack to build typescript to javascript it works out of the box.

If you have a different need you can override by settig webpack.transformPath

// this is the by default applied transformPathwebpack: {transformPath: (filepath)=>{// force *.js files by defaultconstinfo=path.parse(filepath);return`${path.join(info.dir,info.name)}.js`;},},

Source Maps

You can use the karma-sourcemap-loader to get the source maps generated for your test bundle.

npm i -D karma-sourcemap-loader

And then add it to your preprocessors.

karma.conf.js

preprocessors: {'test/test_index.js': ['webpack','sourcemap']}

And tell webpack to generate sourcemaps.

webpack.config.js

webpack: {// ...devtool: 'inline-source-map'}

Maintainers


Ryan Clark
Cody Mikol
April Arcus

Previous Maintainers

Previous maintainers of the karma-webpack plugin that have done such amazing work to get it to where it is today.


Mika Kalathil		Joshua WiensWill FarleyDaniela Valero
Jonathan TrangCarlos Morales

About

Karma webpack Middleware

Resources

Readme
License

Contributing

Contributing
Activity
Custom properties

Stars

1 star

Watchers

0 watching

Forks

1 fork
Report repository

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
npmnodedepstestcoveragechat
Karma Webpack
Use webpack to preprocess files in karma
Install
npm npm i -D karma-webpack
yarn yarn add -D karma-webpack
Usage
karma.conf.js
module.exports=(config)=>{config.set({// ... normal karma configuration// make sure to include webpack as a frameworkframeworks: ['mocha','webpack'],plugins: ['karma-webpack','karma-mocha',],files: [// all files ending in ".test.js"// !!! use watched: false as we use webpacks watch{pattern: 'test/**/*.test.js',watched: false}],preprocessors: {// add webpack as preprocessor'test/**/*.test.js': ['webpack']},webpack: {// karma watches the test entry points// Do NOT specify the entry option// webpack watches dependencies// webpack configuration},});}
Default webpack configuration
This configuration will be merged with what gets provided via karma's config.webpack.
constdefaultWebpackOptions={mode: 'development',output: {filename: '[name].js',path: path.join(os.tmpdir(),'_karma_webpack_')+Math.floor(Math.random()*1000000),},stats: {modules: false,colors: true,},watch: false,optimization: {runtimeChunk: 'single',splitChunks: {chunks: 'all',minSize: 0,cacheGroups: {commons: {name: 'commons',chunks: 'initial',minChunks: 1,},},},},plugins: [],};
How it works
This project is a framework and preprocessor for Karma that combines test files and dependencies into 2 shared bundles and 1 chunk per test file. It relies on webpack to generate the bundles/chunks and to keep it updated during autoWatch=true.
The first preproccessor triggers the build of all the bundles/chunks and all following files just return the output of this one build process.
Webpack typescript support
By default karma-webpack forces *.js files so if you test *.ts files and use webpack to build typescript to javascript it works out of the box.
If you have a different need you can override by settig webpack.transformPath
// this is the by default applied transformPathwebpack: {transformPath: (filepath)=>{// force *.js files by defaultconstinfo=path.parse(filepath);return`${path.join(info.dir,info.name)}.js`;},},
Source Maps
You can use the karma-sourcemap-loader to get the source maps generated for your test bundle.
npm i -D karma-sourcemap-loader
And then add it to your preprocessors.
karma.conf.js
preprocessors: {'test/test_index.js': ['webpack','sourcemap']}
And tell webpack to generate sourcemaps.
webpack.config.js
webpack: {// ...devtool: 'inline-source-map'}
Maintainers

Ryan Clark
Cody Mikol
April Arcus
Previous Maintainers
Previous maintainers of the karma-webpack plugin that have done such amazing work to get it to where it is today.

Mika Kalathil		Joshua WiensWill FarleyDaniela Valero
Jonathan TrangCarlos Morales
About
Karma webpack Middleware
Resources
Readme
License
Contributing
Contributing
Activity
Custom properties
Stars
1 star
Watchers
0 watching
Forks
1 fork
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
npmnodedepstestcoveragechat
Karma Webpack
Use webpack to preprocess files in karma
Install
npm npm i -D karma-webpack
yarn yarn add -D karma-webpack
Usage
karma.conf.js
module.exports=(config)=>{config.set({// ... normal karma configuration// make sure to include webpack as a frameworkframeworks: ['mocha','webpack'],plugins: ['karma-webpack','karma-mocha',],files: [// all files ending in ".test.js"// !!! use watched: false as we use webpacks watch{pattern: 'test/**/*.test.js',watched: false}],preprocessors: {// add webpack as preprocessor'test/**/*.test.js': ['webpack']},webpack: {// karma watches the test entry points// Do NOT specify the entry option// webpack watches dependencies// webpack configuration},});}
Default webpack configuration
This configuration will be merged with what gets provided via karma's config.webpack.
constdefaultWebpackOptions={mode: 'development',output: {filename: '[name].js',path: path.join(os.tmpdir(),'_karma_webpack_')+Math.floor(Math.random()*1000000),},stats: {modules: false,colors: true,},watch: false,optimization: {runtimeChunk: 'single',splitChunks: {chunks: 'all',minSize: 0,cacheGroups: {commons: {name: 'commons',chunks: 'initial',minChunks: 1,},},},},plugins: [],};
How it works
This project is a framework and preprocessor for Karma that combines test files and dependencies into 2 shared bundles and 1 chunk per test file. It relies on webpack to generate the bundles/chunks and to keep it updated during autoWatch=true.
The first preproccessor triggers the build of all the bundles/chunks and all following files just return the output of this one build process.
Webpack typescript support
By default karma-webpack forces *.js files so if you test *.ts files and use webpack to build typescript to javascript it works out of the box.
If you have a different need you can override by settig webpack.transformPath
// this is the by default applied transformPathwebpack: {transformPath: (filepath)=>{// force *.js files by defaultconstinfo=path.parse(filepath);return`${path.join(info.dir,info.name)}.js`;},},
Source Maps
You can use the karma-sourcemap-loader to get the source maps generated for your test bundle.
npm i -D karma-sourcemap-loader
And then add it to your preprocessors.
karma.conf.js
preprocessors: {'test/test_index.js': ['webpack','sourcemap']}
And tell webpack to generate sourcemaps.
webpack.config.js
webpack: {// ...devtool: 'inline-source-map'}
Maintainers

Ryan Clark
Cody Mikol
April Arcus
Previous Maintainers
Previous maintainers of the karma-webpack plugin that have done such amazing work to get it to where it is today.

Mika Kalathil		Joshua WiensWill FarleyDaniela Valero
Jonathan TrangCarlos Morales
About
Karma webpack Middleware
Resources
Readme
License
Contributing
Contributing
Activity
Custom properties
Stars
1 star
Watchers
0 watching
Forks
1 fork
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
npmnodedepstestcoveragechat
Karma Webpack
Use webpack to preprocess files in karma
Install
npm npm i -D karma-webpack
yarn yarn add -D karma-webpack
Usage
karma.conf.js
module.exports=(config)=>{config.set({// ... normal karma configuration// make sure to include webpack as a frameworkframeworks: ['mocha','webpack'],plugins: ['karma-webpack','karma-mocha',],files: [// all files ending in ".test.js"// !!! use watched: false as we use webpacks watch{pattern: 'test/**/*.test.js',watched: false}],preprocessors: {// add webpack as preprocessor'test/**/*.test.js': ['webpack']},webpack: {// karma watches the test entry points// Do NOT specify the entry option// webpack watches dependencies// webpack configuration},});}
Default webpack configuration
This configuration will be merged with what gets provided via karma's config.webpack.
constdefaultWebpackOptions={mode: 'development',output: {filename: '[name].js',path: path.join(os.tmpdir(),'_karma_webpack_')+Math.floor(Math.random()*1000000),},stats: {modules: false,colors: true,},watch: false,optimization: {runtimeChunk: 'single',splitChunks: {chunks: 'all',minSize: 0,cacheGroups: {commons: {name: 'commons',chunks: 'initial',minChunks: 1,},},},},plugins: [],};
How it works
This project is a framework and preprocessor for Karma that combines test files and dependencies into 2 shared bundles and 1 chunk per test file. It relies on webpack to generate the bundles/chunks and to keep it updated during autoWatch=true.
The first preproccessor triggers the build of all the bundles/chunks and all following files just return the output of this one build process.
Webpack typescript support
By default karma-webpack forces *.js files so if you test *.ts files and use webpack to build typescript to javascript it works out of the box.
If you have a different need you can override by settig webpack.transformPath
// this is the by default applied transformPathwebpack: {transformPath: (filepath)=>{// force *.js files by defaultconstinfo=path.parse(filepath);return`${path.join(info.dir,info.name)}.js`;},},
Source Maps
You can use the karma-sourcemap-loader to get the source maps generated for your test bundle.
npm i -D karma-sourcemap-loader
And then add it to your preprocessors.
karma.conf.js
preprocessors: {'test/test_index.js': ['webpack','sourcemap']}
And tell webpack to generate sourcemaps.
webpack.config.js
webpack: {// ...devtool: 'inline-source-map'}
Maintainers

Ryan Clark
Cody Mikol
April Arcus
Previous Maintainers
Previous maintainers of the karma-webpack plugin that have done such amazing work to get it to where it is today.

Mika Kalathil		Joshua WiensWill FarleyDaniela Valero
Jonathan TrangCarlos Morales
About
Karma webpack Middleware
Resources
Readme
License
Contributing
Contributing
Activity
Custom properties
Stars
1 star
Watchers
0 watching
Forks
1 fork
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
npmnodedepstestcoveragechat
Karma Webpack
Use webpack to preprocess files in karma
Install
npm npm i -D karma-webpack
yarn yarn add -D karma-webpack
Usage
karma.conf.js
module.exports=(config)=>{config.set({// ... normal karma configuration// make sure to include webpack as a frameworkframeworks: ['mocha','webpack'],plugins: ['karma-webpack','karma-mocha',],files: [// all files ending in ".test.js"// !!! use watched: false as we use webpacks watch{pattern: 'test/**/*.test.js',watched: false}],preprocessors: {// add webpack as preprocessor'test/**/*.test.js': ['webpack']},webpack: {// karma watches the test entry points// Do NOT specify the entry option// webpack watches dependencies// webpack configuration},});}
Default webpack configuration
This configuration will be merged with what gets provided via karma's config.webpack.
constdefaultWebpackOptions={mode: 'development',output: {filename: '[name].js',path: path.join(os.tmpdir(),'_karma_webpack_')+Math.floor(Math.random()*1000000),},stats: {modules: false,colors: true,},watch: false,optimization: {runtimeChunk: 'single',splitChunks: {chunks: 'all',minSize: 0,cacheGroups: {commons: {name: 'commons',chunks: 'initial',minChunks: 1,},},},},plugins: [],};
How it works
This project is a framework and preprocessor for Karma that combines test files and dependencies into 2 shared bundles and 1 chunk per test file. It relies on webpack to generate the bundles/chunks and to keep it updated during autoWatch=true.
The first preproccessor triggers the build of all the bundles/chunks and all following files just return the output of this one build process.
Webpack typescript support
By default karma-webpack forces *.js files so if you test *.ts files and use webpack to build typescript to javascript it works out of the box.
If you have a different need you can override by settig webpack.transformPath
// this is the by default applied transformPathwebpack: {transformPath: (filepath)=>{// force *.js files by defaultconstinfo=path.parse(filepath);return`${path.join(info.dir,info.name)}.js`;},},
Source Maps
You can use the karma-sourcemap-loader to get the source maps generated for your test bundle.
npm i -D karma-sourcemap-loader
And then add it to your preprocessors.
karma.conf.js
preprocessors: {'test/test_index.js': ['webpack','sourcemap']}
And tell webpack to generate sourcemaps.
webpack.config.js
webpack: {// ...devtool: 'inline-source-map'}
Maintainers

Ryan Clark
Cody Mikol
April Arcus
Previous Maintainers
Previous maintainers of the karma-webpack plugin that have done such amazing work to get it to where it is today.

Mika Kalathil		Joshua WiensWill FarleyDaniela Valero
Jonathan TrangCarlos Morales
About
Karma webpack Middleware
Resources
Readme
License
Contributing
Contributing
Activity
Custom properties
Stars
1 star
Watchers
0 watching
Forks
1 fork
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
npmnodedepstestcoveragechat
Karma Webpack
Use webpack to preprocess files in karma
Install
npm npm i -D karma-webpack
yarn yarn add -D karma-webpack
Usage
karma.conf.js
module.exports=(config)=>{config.set({// ... normal karma configuration// make sure to include webpack as a frameworkframeworks: ['mocha','webpack'],plugins: ['karma-webpack','karma-mocha',],files: [// all files ending in ".test.js"// !!! use watched: false as we use webpacks watch{pattern: 'test/**/*.test.js',watched: false}],preprocessors: {// add webpack as preprocessor'test/**/*.test.js': ['webpack']},webpack: {// karma watches the test entry points// Do NOT specify the entry option// webpack watches dependencies// webpack configuration},});}
Default webpack configuration
This configuration will be merged with what gets provided via karma's config.webpack.
constdefaultWebpackOptions={mode: 'development',output: {filename: '[name].js',path: path.join(os.tmpdir(),'_karma_webpack_')+Math.floor(Math.random()*1000000),},stats: {modules: false,colors: true,},watch: false,optimization: {runtimeChunk: 'single',splitChunks: {chunks: 'all',minSize: 0,cacheGroups: {commons: {name: 'commons',chunks: 'initial',minChunks: 1,},},},},plugins: [],};
How it works
This project is a framework and preprocessor for Karma that combines test files and dependencies into 2 shared bundles and 1 chunk per test file. It relies on webpack to generate the bundles/chunks and to keep it updated during autoWatch=true.
The first preproccessor triggers the build of all the bundles/chunks and all following files just return the output of this one build process.
Webpack typescript support
By default karma-webpack forces *.js files so if you test *.ts files and use webpack to build typescript to javascript it works out of the box.
If you have a different need you can override by settig webpack.transformPath
// this is the by default applied transformPathwebpack: {transformPath: (filepath)=>{// force *.js files by defaultconstinfo=path.parse(filepath);return`${path.join(info.dir,info.name)}.js`;},},
Source Maps
You can use the karma-sourcemap-loader to get the source maps generated for your test bundle.
npm i -D karma-sourcemap-loader
And then add it to your preprocessors.
karma.conf.js
preprocessors: {'test/test_index.js': ['webpack','sourcemap']}
And tell webpack to generate sourcemaps.
webpack.config.js
webpack: {// ...devtool: 'inline-source-map'}
Maintainers

Ryan Clark
Cody Mikol
April Arcus
Previous Maintainers
Previous maintainers of the karma-webpack plugin that have done such amazing work to get it to where it is today.

Mika Kalathil		Joshua WiensWill FarleyDaniela Valero
Jonathan TrangCarlos Morales
About
Karma webpack Middleware
Resources
Readme
License
Contributing
Contributing
Activity
Custom properties
Stars
1 star
Watchers
0 watching
Forks
1 fork
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
npmnodedepstestcoveragechat
Karma Webpack
Use webpack to preprocess files in karma
Install
npm npm i -D karma-webpack
yarn yarn add -D karma-webpack
Usage
karma.conf.js
module.exports=(config)=>{config.set({// ... normal karma configuration// make sure to include webpack as a frameworkframeworks: ['mocha','webpack'],plugins: ['karma-webpack','karma-mocha',],files: [// all files ending in ".test.js"// !!! use watched: false as we use webpacks watch{pattern: 'test/**/*.test.js',watched: false}],preprocessors: {// add webpack as preprocessor'test/**/*.test.js': ['webpack']},webpack: {// karma watches the test entry points// Do NOT specify the entry option// webpack watches dependencies// webpack configuration},});}
Default webpack configuration
This configuration will be merged with what gets provided via karma's config.webpack.
constdefaultWebpackOptions={mode: 'development',output: {filename: '[name].js',path: path.join(os.tmpdir(),'_karma_webpack_')+Math.floor(Math.random()*1000000),},stats: {modules: false,colors: true,},watch: false,optimization: {runtimeChunk: 'single',splitChunks: {chunks: 'all',minSize: 0,cacheGroups: {commons: {name: 'commons',chunks: 'initial',minChunks: 1,},},},},plugins: [],};
How it works
This project is a framework and preprocessor for Karma that combines test files and dependencies into 2 shared bundles and 1 chunk per test file. It relies on webpack to generate the bundles/chunks and to keep it updated during autoWatch=true.
The first preproccessor triggers the build of all the bundles/chunks and all following files just return the output of this one build process.
Webpack typescript support
By default karma-webpack forces *.js files so if you test *.ts files and use webpack to build typescript to javascript it works out of the box.
If you have a different need you can override by settig webpack.transformPath
// this is the by default applied transformPathwebpack: {transformPath: (filepath)=>{// force *.js files by defaultconstinfo=path.parse(filepath);return`${path.join(info.dir,info.name)}.js`;},},
Source Maps
You can use the karma-sourcemap-loader to get the source maps generated for your test bundle.
npm i -D karma-sourcemap-loader
And then add it to your preprocessors.
karma.conf.js
preprocessors: {'test/test_index.js': ['webpack','sourcemap']}
And tell webpack to generate sourcemaps.
webpack.config.js
webpack: {// ...devtool: 'inline-source-map'}
Maintainers

Ryan Clark
Cody Mikol
April Arcus
Previous Maintainers
Previous maintainers of the karma-webpack plugin that have done such amazing work to get it to where it is today.

Mika Kalathil		Joshua WiensWill FarleyDaniela Valero
Jonathan TrangCarlos Morales
About
Karma webpack Middleware
Resources
Readme
License
Contributing
Contributing
Activity
Custom properties
Stars
1 star
Watchers
0 watching
Forks
1 fork
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
npmnodedepstestcoveragechat
Karma Webpack
Use webpack to preprocess files in karma
Install
npm npm i -D karma-webpack
yarn yarn add -D karma-webpack
Usage
karma.conf.js
module.exports=(config)=>{config.set({// ... normal karma configuration// make sure to include webpack as a frameworkframeworks: ['mocha','webpack'],plugins: ['karma-webpack','karma-mocha',],files: [// all files ending in ".test.js"// !!! use watched: false as we use webpacks watch{pattern: 'test/**/*.test.js',watched: false}],preprocessors: {// add webpack as preprocessor'test/**/*.test.js': ['webpack']},webpack: {// karma watches the test entry points// Do NOT specify the entry option// webpack watches dependencies// webpack configuration},});}
Default webpack configuration
This configuration will be merged with what gets provided via karma's config.webpack.
constdefaultWebpackOptions={mode: 'development',output: {filename: '[name].js',path: path.join(os.tmpdir(),'_karma_webpack_')+Math.floor(Math.random()*1000000),},stats: {modules: false,colors: true,},watch: false,optimization: {runtimeChunk: 'single',splitChunks: {chunks: 'all',minSize: 0,cacheGroups: {commons: {name: 'commons',chunks: 'initial',minChunks: 1,},},},},plugins: [],};
How it works
This project is a framework and preprocessor for Karma that combines test files and dependencies into 2 shared bundles and 1 chunk per test file. It relies on webpack to generate the bundles/chunks and to keep it updated during autoWatch=true.
The first preproccessor triggers the build of all the bundles/chunks and all following files just return the output of this one build process.
Webpack typescript support
By default karma-webpack forces *.js files so if you test *.ts files and use webpack to build typescript to javascript it works out of the box.
If you have a different need you can override by settig webpack.transformPath
// this is the by default applied transformPathwebpack: {transformPath: (filepath)=>{// force *.js files by defaultconstinfo=path.parse(filepath);return`${path.join(info.dir,info.name)}.js`;},},
Source Maps
You can use the karma-sourcemap-loader to get the source maps generated for your test bundle.
npm i -D karma-sourcemap-loader
And then add it to your preprocessors.
karma.conf.js
preprocessors: {'test/test_index.js': ['webpack','sourcemap']}
And tell webpack to generate sourcemaps.
webpack.config.js
webpack: {// ...devtool: 'inline-source-map'}
Maintainers

Ryan Clark
Cody Mikol
April Arcus
Previous Maintainers
Previous maintainers of the karma-webpack plugin that have done such amazing work to get it to where it is today.

Mika Kalathil		Joshua WiensWill FarleyDaniela Valero
Jonathan TrangCarlos Morales
About
Karma webpack Middleware
Resources
Readme
License
Contributing
Contributing
Activity
Custom properties
Stars
1 star
Watchers
0 watching
Forks
1 fork
Report repository
Releases
Packages
Used by
Contributors
Languages