Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: fix maintainers images being squished #576

Merged
merged 1 commit into from
Oct 22, 2023
Merged

chore: fix maintainers images being squished #576

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
121 changes: 71 additions & 50 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,14 +24,15 @@ yarn `yarn add -D karma-webpack`
<h2 align="center">Usage</h2>

**karma.conf.js**

```js
module.exports = (config) => {
config.set({
// ... normal karma configuration

// make sure to include webpack as a framework
frameworks: ['mocha', 'webpack'],

plugins: [
'karma-webpack',
'karma-mocha',
Expand All @@ -40,12 +41,12 @@ module.exports = (config) => {
files: [
// all files ending in ".test.js"
// !!! use watched: false as we use webpacks watch
{ pattern: 'test/**/*.test.js', watched: false }
{pattern: 'test/**/*.test.js', watched: false}
],

preprocessors: {
// add webpack as preprocessor
'test/**/*.test.js': [ 'webpack' ]
'test/**/*.test.js': ['webpack']
},

webpack: {
Expand Down Expand Up @@ -95,25 +96,30 @@ const defaultWebpackOptions = {

### 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.
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.
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.
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`

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

### `Source Maps`
Expand All @@ -127,98 +133,113 @@ npm i -D karma-sourcemap-loader
And then add it to your preprocessors.

**karma.conf.js**

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

And tell `webpack` to generate sourcemaps.

**webpack.config.js**

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

<style>

.maintainer-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

.maintainer {
display: flex;
flex-direction: column;
padding: 8px;
}

.maintainer > a {
padding-top: 8px;
}

</style>

<h2 align="center">Current Maintainers</h2>

<table>
<tbody>
<tr>
<td>
<img width="150" height="150"
src="https://avatars.githubusercontent.com/u/13606342?s=460&u=467cf9a106d2bb474cf627ffd4e0eac80d0b4705&v=4">
<br>
<a href="http://codymikol.com">Cody Mikol</a>
</td>
</tr>
<tbody>
</table>
<div class="maintainer-container">
<div class="maintainer">
<img width="150" height="150" src="https://avatars.githubusercontent.com/u/13606342?s=460&u=467cf9a106d2bb474cf627ffd4e0eac80d0b4705&v=4">
<a href="http://codymikol.com">Cody Mikol</a>
</div>
</div>


<h2 align="center">Previous Maintainers</h2>

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

<table class="maintainers">
<tbody>
<tr>
<td align="center">
<div class="maintainer-container">
<div class="maintainer">
<img width="150" height="150"
src="https://avatars0.githubusercontent.com/u/7922109?v=4&s=150">
<br>
<a href="https://github.com/ryanclark">Ryan Clark</a>
</td>
<td align="center">
</div>
<div class="maintainer">
<img width="150" height="150"
src="https://avatars3.githubusercontent.com/u/2045543?v=4&s=150">
<br>
<a href="https://github.com/AprilArcus">April Arcus</a>
</td>
<td align="center">
</div>
<div class="maintainer">
<img width="150" height="150"
src="https://avatars.githubusercontent.com/u/4650931?v=3&s=150">
</br>
<a href="https://github.com/MikaAK">Mika Kalathil</a>
</td>
<td align="center">
</div>
<div class="maintainer">
<img width="150" height="150"
src="https://avatars.githubusercontent.com/u/8420490?v=3&s=150">
<a href="https://github.com/d3viant0ne">Joshua Wiens</a>
</td>
<td align="center">
</div>
<div class="maintainer">
<img width="150" height="150" src="https://avatars.githubusercontent.com/u/1919664?v=3&s=150">
<a href="https://github.com/goldhand">Will Farley</a>
</td>
<td align="center">
</div>
<div class="maintainer">
<img width="150" height="150"
src="https://avatars.githubusercontent.com/u/1307954?v=3&s=150">
<a href="https://github.com/DanielaValero">Daniela Valero</a>
</td>
</div>
</tr>
<tr>
<td align="center">
<div class="maintainer">
<img width="150" height="150"
src="https://avatars.githubusercontent.com/u/122108?v=3&s=150">
<a href="https://github.com/jon301">Jonathan Trang</a>
</td>
<td align="center">
</div>
<div class="maintainer">
<img width="150" height="150"
src="https://avatars.githubusercontent.com/u/3285723?v=3&s=150">
<a href="https://github.com/carlos-">Carlos Morales</a>
</td>
</tr>
<tbody>
</table>
</div>
</div>


[npm]: https://img.shields.io/npm/v/karma-webpack.svg

[npm-url]: https://npmjs.com/package/karma-webpack

[node]: https://img.shields.io/node/v/karma-webpack.svg

[node-url]: https://nodejs.org

[cover]: https://codecov.io/gh/webpack-contrib/karma-webpack/branch/master/graph/badge.svg

[cover-url]: https://codecov.io/gh/webpack-contrib/karma-webpack
Loading