Tests added for v2.3

theGC · Aug 4, 2020 · 443f8bc · 443f8bc
1 parent 130d2ec
commit 443f8bc
Show file tree

Hide file tree

Showing 9 changed files with 185 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 * BREAKING CHANGE: On the webpack configuration file the `svgoConfig` option must now go inside `HtmlWebpackInlineSVGPlugin({})` instead of `HtmlWebpackPlugin({})`. An error in console is written at build time otherwise.
 * The defaults for the `svgo` module aren't hardcoded anymore and –excepting the `cleanupIDs` option– the defaults are now set by the own module `svgo` and not `html-webpack-inline-svg-plugin`.
+
 ## v2.2.0
 
 * Ability added to load SVGs from an URL (`<img inline src="https://host.com/image.svg">`).

diff --git a/README.md b/README.md
@@ -219,7 +219,7 @@ The plugin accepts the below options:
  </div>
  ```
 
-- `svgoConfig`: defaults to `[]`. [SVGO](https://github.com/svg/svgo) is used to optimise the SVGs inlined. You can configure SVGO by setting this `svgoConfig` `Array` with the [SVGO plugins](https://github.com/svg/svgo#what-it-can-do) you need in the same way it's done in this [SVGO official Node.js example](https://github.com/svg/svgo/blob/master/examples/test.js).
+- `svgoConfig`: defaults to `[]`. [SVGO](https://github.com/svg/svgo) is used to optimise the SVGs inlined. You can configure SVGO by setting this `svgoConfig` array with the [SVGO plugins](https://github.com/svg/svgo#what-it-can-do) you need in the same way it's done in this [SVGO official Node.js example](https://github.com/svg/svgo/blob/master/examples/test.js).
 
  Note `svgoConfig` is an array of `Object`s that will be assigned to the `.plugins` SVGO config variable by `html-webpack-inline-svg-plugin`. You don't need to pass an `Object` with a `plugins` property assigned an array of SVGO plugins, just pass the array:
 
@@ -268,4 +268,4 @@ I'm happy for someone to take over the project as I don't find myself using it a
 
 ## License
 
-This project is licensed under [MIT](https://github.com/theGC/html-webpack-inline-svg-plugin/blob/master/LICENSE).
+This project is licensed under [MIT](https://github.com/theGC/html-webpack-inline-svg-plugin/blob/master/LICENSE).
diff --git a/index.js b/index.js
@@ -190,7 +190,7 @@ class HtmlWebpackInlineSVGPlugin {
  getUserConfig (htmlPluginData) {
 
  if (_.get(htmlPluginData, 'plugin.options.svgoConfig', false)) {
- console.error('html-webpack-inline-svg-plugin: svgoConfig option must now go inside HtmlWebpackInlineSVGPlugin({}) instead of HtmlWebpackPlugin({}): https://github.com/theGC/html-webpack-inline-svg-plugin#config')
+ throw new Error('html-webpack-inline-svg-plugin: on your webpack configuration file svgoConfig option must now go inside HtmlWebpackInlineSVGPlugin({}) instead of HtmlWebpackPlugin({}): https://github.com/theGC/html-webpack-inline-svg-plugin#config')
  }
 
  }
@@ -452,7 +452,9 @@ class HtmlWebpackInlineSVGPlugin {
  *
  */
  optimizeSvg ({ html, inlineImage, data, resolve }) {
- const svgo = new SVGO(this.getSvgoConfig())
+ const svgo = new SVGO({
+ plugins: this.getSvgoConfig()
+ })
 
  svgo.optimize(data)
  .then((result) => {

diff --git a/package-lock.json b/package-lock.json
diff --git a/spec/fixtures/images/moods.svg b/spec/fixtures/images/moods.svg
diff --git a/spec/fixtures/index-svgo.html b/spec/fixtures/index-svgo.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="x-ua-compatible" content="ie=edge">
+ <title>Inline SVG Tests index</title>
+ </head>
+
+ <body>
+ <div>
+ <p>
+ <span>if below SVG is inlined correctly we can reference its content:</span>
+ <svg class="icon mood-good"><use xlink:href="#icon-mood-good"></use></svg>
+ </p>
+ </div>
+
+ <h2>Inline images</h2>
+
+ <img id="replace-me" src="~img/moods.svg" inline>
+
+ <img id="not-an-svg" inline src="images/not-an-svg.png">
+
+ <div id="do-not-decode"><?= $foo->bar; ?></div>
+
+ should output broken tags</p>
+
+ <p>should output unclosed tags
+ </body>
+
+</html>
diff --git a/spec/index.spec.js b/spec/index.spec.js
@@ -8,9 +8,11 @@ var webpackPostEmitConfig = require('./webpack.post-emit.config')
 var webpackPreEmitConfig = require('./webpack.pre-emit.config')
 var webpackInlineAllConfig = require('./webpack.inline-all.config')
 var webpackAllowFromUrlConfig = require('./webpack.allow-from-url.config')
+var webpackSvgoConfig = require('./webpack.svgo.config')
 var jasmineTests = require('./jasmine.tests')
 var jasmineInlineAllTests = require('./jasmine-inline-all.tests')
 var jasmineAllowFromUrlTests = require('./jasmine-allow-from-url.tests')
+var jasmineSvgoTests = require('./jasmine-svgo.tests')
 var rm = require('rimraf')
 
 rm(webpackConfig.outputDir, (err) => {
@@ -171,3 +173,36 @@ describe('HtmlWebpackInlineSVGPlugin: inlineAll resolve', function () {
  })
 
 })
+
+
+describe('HtmlWebpackInlineSVGPlugin: custom SVGO config resolve.', function () {
+
+ beforeAll(function (done) {
+
+ // clone the config
+
+ const webpackTestConfig = Object.assign({}, webpackConfig.options, webpackSvgoConfig)
+
+
+ // run webpack
+
+ webpack(webpackTestConfig, (err) => {
+
+ expect(err).toBeFalsy()
+
+ // callback is fired before all files hve been written to disk
+ // due to use of after-emit - place a timeout to try and avoid the issue
+
+ setTimeout(done, 2000)
+
+ })
+
+ })
+
+ jasmineSvgoTests.forEach((test) => {
+
+ it(test.label, test.func)
+
+ })
+
+})
diff --git a/spec/jasmine-svgo.tests.js b/spec/jasmine-svgo.tests.js
@@ -0,0 +1,39 @@
+var path = require('path')
+var fs = require('fs')
+var cheerio = require('cheerio')
+var webpackConfig = require('./webpack.base.config')
+
+module.exports = [
+
+ {
+ label: 'It should inline SVG images following the custom SVGO config',
+ func: function (done) {
+
+ var htmlFile = path.resolve(webpackConfig.outputDir, 'index-svgo.html')
+
+ fs.readFile(htmlFile, 'utf8', function (err, data) {
+ expect(err).toBeFalsy()
+
+ var $ = cheerio.load(data)
+
+ // Assertions affecting any html-webpack-inline-svg-plugin use
+ expect($('img#replace-me').length).toBe(0)
+ expect($('svg#replace-me').length).toBe(1)
+ expect($('img#not-an-svg').length).toBe(1)
+ expect($('div#do-not-decode').length).toBe(1)
+
+ // Assertions affecting only svgoConfig option
+ // The configuration found on webpack.svgo.config.js is the opposite to SVGO defaults
+ expect($('svg#replace-me').attr('xmlns')).toBe(undefined)
+ expect($('svg#replace-me title#icon-mood-bad-title').length).toBe(1)
+ expect($('svg#replace-me symbol#icon-mood-bad').contents()[0].data).toBe('Random comment')
+
+ done()
+
+ })
+
+ },
+
+ },
+
+]
diff --git a/spec/webpack.svgo.config.js b/spec/webpack.svgo.config.js
@@ -0,0 +1,70 @@
+const path = require('path')
+const webpackConfig = require('./webpack.base.config')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const HtmlWebpackInlineSVGPlugin = require('../')
+
+module.exports = {
+
+ resolve: {
+ alias: {
+ 'img': path.join(__dirname, 'fixtures', 'images'),
+ },
+ },
+
+ module: {
+ rules: [
+ {
+ test: /\.(svg)(\?.*)?$/,
+ use: [
+ {
+ loader: 'file-loader',
+ options: {
+ name: 'images/svgs/[name].[ext]',
+ }
+ }
+ ],
+ },
+ {
+ test: /\.(png|jpe?g|gif)(\?.*)?$/,
+ use: [
+ {
+ loader: 'file-loader',
+ options: {
+ name: 'images/[name].[ext]',
+ }
+ }
+ ],
+ },
+ {
+ test: /\.(html)$/,
+ use: [
+ {
+ loader: 'html-loader',
+ options: {}
+ }
+ ],
+ },
+ ]
+ },
+
+ plugins: [
+ new HtmlWebpackPlugin({
+ filename: path.resolve(webpackConfig.outputDir, 'index-svgo.html'),
+ template: path.join(__dirname, 'fixtures', 'index-svgo.html')
+ }),
+ new HtmlWebpackInlineSVGPlugin({
+ svgoConfig: [
+ {
+ removeXMLNS: true
+ },
+ {
+ removeTitle: false
+ },
+ {
+ removeComments: false
+ }
+ ]
+ }),
+ ],
+
+}