Tests added for v2.3

AntonioRedondo · AntonioRedondo · commit 443f8bc253e8 · 2020-08-04T08:29:10.000+01:00
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
@@ -2,7 +2,8 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="width:0;height:0;position:absolute;overflow:hidden;" id="inline-me">
   <defs>
     <symbol viewBox="0 0 40 40" id="icon-mood-bad">
-        <title>icon mood-bad</title>
+        <!-- Random comment -->
+        <title id="icon-mood-bad-title">icon mood-bad</title>
         <path d="M19.99 0C8.94 0 0 8.95 0 20s8.94 20 19.99 20S40 31.05 40 20 31.04 0 19.99 0zM20 36c-8.84 0-16-7.16-16-16S11.16 4 20 4s16 7.16 16 16-7.16 16-16 16zm7-18c1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3 1.34 3 3 3zm-14 0c1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3 1.34 3 3 3zm17.21 13c-1.6-4.09-5.55-7-10.21-7s-8.61 2.91-10.21 7"/>
     </symbol>
     <symbol viewBox="0 0 40 40" id="icon-mood-good">
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
+                }
+            ]
+        }),
+    ],
+
+}

Original file line number	Diff line number	Diff line change
`@@ -190,7 +190,7 @@ class HtmlWebpackInlineSVGPlugin {`
`190`	`190`	`getUserConfig (htmlPluginData) {`
`191`	`191`
`192`	`192`	`if (_.get(htmlPluginData, 'plugin.options.svgoConfig', false)) {`
`193`		`- 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')`
	`193`	`+ 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')`
`194`	`194`	`}`
`195`	`195`
`196`	`196`	`}`
`@@ -452,7 +452,9 @@ class HtmlWebpackInlineSVGPlugin {`
`452`	`452`	`*`
`453`	`453`	`*/`
`454`	`454`	`optimizeSvg ({ html, inlineImage, data, resolve }) {`
`455`		`- const svgo = new SVGO(this.getSvgoConfig())`
	`455`	`+ const svgo = new SVGO({`
	`456`	`+ plugins: this.getSvgoConfig()`
	`457`	`+ })`
`456`	`458`
`457`	`459`	`svgo.optimize(data)`
`458`	`460`	`.then((result) => {`