@atlassian/webresource-webpack-plugin 4.10.2-64a2ef2

package/test/use-cases/css-and-assets-distribution-via-mini-css-extract-plugin/css-and-assets-distribution-via-mini-css-extract-plugin.test.js

@@ -0,0 +1,72 @@
+const assert = require('chai').assert;
+const parse = require('xml-parser');
+const webpack = require('webpack');
+const fs = require('fs');
+const path = require('path');
+
+const targetDir = path.join(__dirname, 'target');
+const webresourceOutput = path.join(targetDir, 'META-INF', 'plugin-descriptor', 'wr-webpack-bundles.xml');
+
+describe('css-and-assets-distribution-via-mini-css-extract-plugin', function() {
+    const config = require('./webpack.config.js');
+
+    let stats;
+    let entryPoint;
+    let asyncChunk;
+    let assetWebResource;
+
+    function getResources(node) {
+        return node.children.filter(n => n.name === 'resource');
+    }
+
+    beforeEach(done => {
+        webpack(config, (err, st) => {
+            stats = st;
+
+            const xmlFile = fs.readFileSync(webresourceOutput, 'utf-8');
+            const results = parse(xmlFile);
+            entryPoint = results.root.children.find(n => n.attributes.key === 'entrypoint-app');
+            asyncChunk = results.root.children.find(n => n.attributes.key === '0');
+            assetWebResource = results.root.children.find(n => n.attributes.key === 'assets-DEV_PSEUDO_HASH');
+            done();
+        });
+    });
+
+    it('should build without failing', () => {
+        assert.ok(entryPoint);
+        assert.ok(asyncChunk);
+        assert.equal(stats.hasErrors(), false);
+        assert.equal(stats.hasWarnings(), false);
+    });
+
+    it('should add the stylesheet and the contained assets of the stylesheet as resources to the entry', () => {
+        const entryResources = getResources(entryPoint);
+        assert.equal(entryResources.length, 4);
+        assert.equal(entryResources[0].attributes.type, 'download');
+        assert.equal(entryResources[0].attributes.name, 'app.css');
+        assert.equal(entryResources[1].attributes.type, 'download');
+        assert.equal(entryResources[1].attributes.name, 'app.js');
+        assert.equal(path.extname(entryResources[2].attributes.name), '.png');
+        assert.equal(path.extname(entryResources[3].attributes.name), '.jpg');
+    });
+
+    it('should add the stylesheet and the contained assets of the stylesheet of the async chunk to the async chunk', () => {
+        const asyncResources = getResources(asyncChunk);
+        assert.equal(asyncResources.length, 4);
+        assert.equal(asyncResources[0].attributes.name, '0.css');
+        assert.equal(asyncResources[0].attributes.type, 'download');
+        assert.equal(asyncResources[1].attributes.name, '0.js');
+        assert.equal(asyncResources[1].attributes.type, 'download');
+        assert.equal(path.extname(asyncResources[2].attributes.name), '.svg');
+        assert.equal(path.extname(asyncResources[3].attributes.name), '.svg');
+    });
+
+    it('should create an asset resource containing all "other" assets', () => {
+        const assetWebResourceResources = getResources(assetWebResource);
+        assert.equal(assetWebResourceResources.length, 4);
+        const names = assetWebResourceResources.map(awrr => path.extname(awrr.attributes.name));
+        assert.include(names, '.jpg', 'fails to include any jpg files');
+        assert.include(names, '.svg', 'fails to include any svg files');
+        assert.include(names, '.png', 'fails to include any png files');
+    });
+});

package/test/use-cases/css-and-assets-distribution-via-mini-css-extract-plugin/src/app.js

@@ -0,0 +1,8 @@
+import $ from 'jquery';
+import styles from './styles.css';
+
+$(() => {
+    $('body').append(`<div class="${styles.wurst}"><div class="${styles.tricky}"></div></div>`);
+});
+
+import('./app2');

package/test/use-cases/css-and-assets-distribution-via-mini-css-extract-plugin/src/app2.js

@@ -0,0 +1,6 @@
+import $ from 'jquery';
+import styles from './styles2.css';
+
+$(() => {
+    $('body').append(`<div class="${styles.wurst}"><div class="${styles.tricky}"></div></div>`);
+});

package/test/use-cases/css-and-assets-distribution-via-mini-css-extract-plugin/src/rect.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="48px" height="64px" viewBox="0 0 48 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <rect width="48" height="64" style="fill:rgb(0,0,255)" />
+</svg>

package/test/use-cases/css-and-assets-distribution-via-mini-css-extract-plugin/src/rect2.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="64" height="48" viewBox="0 0 64 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <rect width="64" height="48" style="fill:rgb(255,0,0)" />
+</svg>

package/test/use-cases/css-and-assets-distribution-via-mini-css-extract-plugin/src/styles.css

@@ -0,0 +1,8 @@
+.wurst {
+    background-color: red;
+    background-image: url('./ice2.jpg');
+}
+
+.tricky {
+    background: url('./ice.png');
+}

package/test/use-cases/css-and-assets-distribution-via-mini-css-extract-plugin/src/styles2.css

@@ -0,0 +1,8 @@
+.wurst {
+    background-color: red;
+    background-image: url('./rect2.svg');
+}
+
+.tricky {
+    background: url('./rect.svg');
+}

package/test/use-cases/css-and-assets-distribution-via-mini-css-extract-plugin/webpack.config.js

@@ -0,0 +1,51 @@
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const WrmPlugin = require('../../../src/WrmPlugin');
+const FRONTEND_SRC_DIR = path.join(__dirname, 'src');
+const OUTPUT_DIR = path.join(__dirname, 'target');
+
+module.exports = {
+    mode: 'development',
+    devtool: false,
+    entry: {
+        app: path.join(FRONTEND_SRC_DIR, 'app.js'),
+    },
+    module: {
+        rules: [
+            {
+                test: /\.(css)$/,
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    {
+                        loader: 'css-loader',
+                        options: {
+                            modules: true,
+                        },
+                    },
+                ],
+            },
+            {
+                test: /\.(jpg|png|svg)$/,
+                loader: 'file-loader',
+            },
+        ],
+    },
+    plugins: [
+        new WrmPlugin({
+            pluginKey: 'com.atlassian.plugin.test',
+            xmlDescriptors: path.join(OUTPUT_DIR, 'META-INF', 'plugin-descriptor', 'wr-webpack-bundles.xml'),
+            verbose: false,
+        }),
+        new MiniCssExtractPlugin({
+            // Options similar to the same options in webpackOptions.output
+            // both options are optional
+            filename: '[name].css',
+            chunkFilename: '[id].css',
+        }),
+    ],
+    output: {
+        filename: '[name].js',
+        path: OUTPUT_DIR,
+    },
+};

package/test/use-cases/css-and-assets-via-extract-text-plugin/css-and-assets-via-extract-text-plugin.test.js

@@ -0,0 +1,87 @@
+const assert = require('chai').assert;
+const parse = require('xml-parser');
+const webpack = require('webpack');
+const fs = require('fs');
+const path = require('path');
+
+const targetDir = path.join(__dirname, 'target');
+const webresourceOutput = path.join(targetDir, 'META-INF', 'plugin-descriptor', 'wr-webpack-bundles.xml');
+
+describe('css-and-assets-via-extract-text-plugin', function() {
+    const config = require('./webpack.config.js');
+
+    let stats;
+    let error;
+    let entrypoints;
+
+    const getResourceNodes = webresource => webresource && webresource.children.filter(n => n.name === 'resource');
+
+    before(done => {
+        webpack(config, (err, st) => {
+            error = err;
+            stats = st;
+
+            const xmlFile = fs.readFileSync(webresourceOutput, 'utf-8');
+            const results = parse(xmlFile);
+            entrypoints = results.root.children.filter(n => n.attributes.key.startsWith('entry'));
+            done();
+        });
+    });
+
+    it('should build without failing', () => {
+        assert.ok(entrypoints);
+        assert.equal(stats.hasErrors(), false);
+        assert.equal(stats.hasWarnings(), false);
+    });
+
+    describe('for feature one', function() {
+        let resources;
+
+        before(() => {
+            let webresource = entrypoints.find(n => n.attributes.key.endsWith('feature-one'));
+            resources = getResourceNodes(webresource);
+        });
+
+        it('should have three resources', () => {
+            assert.equal(resources.length, 3);
+        });
+
+        it('should include the feature JS file', () => {
+            assert.equal(resources[0].attributes.type, 'download');
+            assert.equal(resources[0].attributes.name, 'feature-one.js');
+        });
+
+        it('should add the stylesheet to the entry', () => {
+            assert.equal(resources[1].attributes.type, 'download');
+            assert.equal(resources[1].attributes.name, 'feature-one.css');
+        });
+
+        it('should add assets contained within the stylesheet as resources to the entry', () => {
+            assert.equal(resources[2].attributes.type, 'download');
+            assert.equal(path.extname(resources[2].attributes.name), '.png');
+        });
+    });
+
+    describe('for feature two', function() {
+        let resources;
+
+        before(() => {
+            let webresource = entrypoints.find(n => n.attributes.key.endsWith('feature-two'));
+            resources = getResourceNodes(webresource);
+        });
+
+        it('should have two resources', () => {
+            assert.equal(resources.length, 2);
+        });
+
+        it('should include the feature JS file', () => {
+            assert.equal(resources[0].attributes.type, 'download');
+            assert.equal(resources[0].attributes.name, 'feature-two.js');
+        });
+
+        it('should add the stylesheet to the entry', () => {
+            assert.equal(resources[1].attributes.type, 'download');
+            assert.equal(resources[1].attributes.name, 'feature-two.css');
+        });
+    });
+});

package/test/use-cases/css-and-assets-via-extract-text-plugin/src/feature-one.css

@@ -0,0 +1,7 @@
+.wurst {
+    background: red;
+}
+
+.tricky {
+    background: url('./ice.png');
+}

package/test/use-cases/css-and-assets-via-extract-text-plugin/src/feature-one.js

@@ -0,0 +1,3 @@
+import styles from './feature-one.css';
+
+document.body.innerHTML = `<div class="${styles.wurst}"><div class="${styles.tricky}"></div></div>`;

package/test/use-cases/css-and-assets-via-extract-text-plugin/src/feature-two.css

@@ -0,0 +1,3 @@
+.best {
+    font-weight: bold;
+}

package/test/use-cases/css-and-assets-via-extract-text-plugin/src/feature-two.js

@@ -0,0 +1 @@
+import './feature-two.css';

package/test/use-cases/css-and-assets-via-extract-text-plugin/webpack.config.js

@@ -0,0 +1,46 @@
+const path = require('path');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+const WrmPlugin = require('../../../src/WrmPlugin');
+const FRONTEND_SRC_DIR = path.join(__dirname, 'src');
+const OUTPUT_DIR = path.join(__dirname, 'target');
+
+module.exports = {
+    mode: 'production',
+    entry: {
+        'feature-one': path.join(FRONTEND_SRC_DIR, 'feature-one.js'),
+        'feature-two': path.join(FRONTEND_SRC_DIR, 'feature-two.js'),
+    },
+    module: {
+        rules: [
+            {
+                test: /\.(css)$/,
+                loader: ExtractTextPlugin.extract({
+                    fallback: 'style-loader',
+                    use: {
+                        loader: 'css-loader',
+                        options: {
+                            modules: true,
+                        },
+                    },
+                }),
+            },
+            {
+                test: /\.(png|svg)$/,
+                loader: 'file-loader',
+            },
+        ],
+    },
+    plugins: [
+        new ExtractTextPlugin('[name].css'),
+        new WrmPlugin({
+            pluginKey: 'com.atlassian.plugin.test',
+            xmlDescriptors: path.join(OUTPUT_DIR, 'META-INF', 'plugin-descriptor', 'wr-webpack-bundles.xml'),
+            verbose: false,
+        }),
+    ],
+    output: {
+        filename: '[name].js',
+        path: OUTPUT_DIR,
+    },
+};

package/test/use-cases/css-and-assets-via-style-loader/css-and-assets-via-style-loader.test.js

@@ -0,0 +1,46 @@
+const assert = require('chai').assert;
+const parse = require('xml-parser');
+const webpack = require('webpack');
+const fs = require('fs');
+const path = require('path');
+
+const targetDir = path.join(__dirname, 'target');
+const webresourceOutput = path.join(targetDir, 'META-INF', 'plugin-descriptor', 'wr-webpack-bundles.xml');
+
+describe('css-and-assets-via-style-loader', function() {
+    const config = require('./webpack.config.js');
+
+    let stats;
+    let error;
+    let assets;
+    let resources;
+
+    beforeEach(done => {
+        webpack(config, (err, st) => {
+            error = err;
+            stats = st;
+
+            const xmlFile = fs.readFileSync(webresourceOutput, 'utf-8');
+            const results = parse(xmlFile);
+            assets = results.root.children.find(n => n.attributes.key.startsWith('assets'));
+            resources = assets.children.filter(n => n.name === 'resource');
+            done();
+        });
+    });
+
+    it('should create an "asset"-webresource containing the image referenced in the stylesheet', () => {
+        assert.ok(assets);
+        assert.equal(stats.hasErrors(), false);
+        assert.equal(stats.hasWarnings(), false);
+        assert.equal(resources[0].attributes.type, 'download');
+        assert.equal(path.extname(resources[0].attributes.name), '.png');
+    });
+
+    it('should overwrite webpack output path to point to a wrm-resource', () => {
+        // setup
+        const bundleFile = fs.readFileSync(path.join(targetDir, 'app.js'), 'utf-8');
+        const expectedLine = `jquery__WEBPACK_IMPORTED_MODULE_0___default()('body').append(\`<div class="\${_styles_css__WEBPACK_IMPORTED_MODULE_1___default.a.wurst}"><div class="\${_styles_css__WEBPACK_IMPORTED_MODULE_1___default.a.tricky}"></div></div>\`);`;
+
+        assert.include(bundleFile, expectedLine);
+    });
+});

package/test/use-cases/css-and-assets-via-style-loader/src/app.js

@@ -0,0 +1,6 @@
+import $ from 'jquery';
+import styles from './styles.css';
+
+$(() => {
+    $('body').append(`<div class="${styles.wurst}"><div class="${styles.tricky}"></div></div>`);
+});

package/test/use-cases/css-and-assets-via-style-loader/src/styles.css

@@ -0,0 +1,7 @@
+.wurst {
+    background: red;
+}
+
+.tricky {
+    background: url('./ice.png');
+}

package/test/use-cases/css-and-assets-via-style-loader/webpack.config.js

@@ -0,0 +1,46 @@
+const path = require('path');
+const WrmPlugin = require('../../../src/WrmPlugin');
+const FRONTEND_SRC_DIR = path.join(__dirname, 'src');
+const OUTPUT_DIR = path.join(__dirname, 'target');
+
+module.exports = {
+    mode: 'development',
+    devtool: false,
+    entry: {
+        app: path.join(FRONTEND_SRC_DIR, 'app.js'),
+    },
+    module: {
+        rules: [
+            {
+                test: /\.(css)$/,
+                use: [
+                    {
+                        loader: 'style-loader',
+                    },
+                    {
+                        loader: 'css-loader',
+                        options: {
+                            modules: true,
+                            localIdentName: '[local]',
+                        },
+                    },
+                ],
+            },
+            {
+                test: /\.(png|svg)$/,
+                loader: 'file-loader',
+            },
+        ],
+    },
+    plugins: [
+        new WrmPlugin({
+            pluginKey: 'com.atlassian.plugin.test',
+            xmlDescriptors: path.join(OUTPUT_DIR, 'META-INF', 'plugin-descriptor', 'wr-webpack-bundles.xml'),
+            verbose: false,
+        }),
+    ],
+    output: {
+        filename: '[name].js',
+        path: OUTPUT_DIR,
+    },
+};

package/test/use-cases/cyclic-dependencies/cyclic.test.js

@@ -0,0 +1,24 @@
+const assert = require('chai').assert;
+const parse = require('xml-parser');
+const webpack = require('webpack');
+const fs = require('fs');
+const path = require('path');
+
+const targetDir = path.join(__dirname, 'target');
+const webresourceOutput = path.join(targetDir, 'META-INF', 'plugin-descriptor', 'wr-webpack-bundles.xml');
+
+describe('cyclic', function() {
+    let config = require('./webpack.config.js');
+
+    it('compiles an xml file', done => {
+        webpack(config, (err, stats) => {
+            if (err) {
+                throw err;
+            }
+            assert.equal(stats.hasErrors(), false);
+            assert.equal(stats.hasWarnings(), false);
+            assert.equal(fs.existsSync(webresourceOutput), true);
+            done();
+        });
+    });
+});

package/test/use-cases/cyclic-dependencies/src/a.js

@@ -0,0 +1,3 @@
+define(['./b'], function(b) {
+    return 'A';
+});

package/test/use-cases/cyclic-dependencies/src/b.js

@@ -0,0 +1,3 @@
+define(['./a'], function(a) {
+    return 'B';
+});

package/test/use-cases/cyclic-dependencies/src/root.js

@@ -0,0 +1,3 @@
+define('module/root', ['./a', './b'], function(a, b) {
+    console.log(a + b + b + a);
+});

package/test/use-cases/cyclic-dependencies/webpack.config.js

@@ -0,0 +1,24 @@
+const path = require('path');
+const WrmPlugin = require('../../../src/WrmPlugin');
+const FRONTEND_SRC_DIR = path.resolve(__dirname, 'src');
+const OUTPUT_DIR = path.resolve(__dirname, 'target');
+
+module.exports = {
+    mode: 'development',
+    context: FRONTEND_SRC_DIR,
+    entry: {
+        'cyclic-entry': path.join(FRONTEND_SRC_DIR, 'root.js'),
+    },
+    plugins: [
+        new WrmPlugin({
+            pluginKey: 'com.atlassian.plugin.test',
+            contextMap: { 'cyclic-entry': [''] },
+            xmlDescriptors: path.join(__dirname, 'target', 'META-INF', 'plugin-descriptor', 'wr-webpack-bundles.xml'),
+            verbose: false,
+        }),
+    ],
+    output: {
+        filename: '[name].js',
+        path: path.resolve(OUTPUT_DIR),
+    },
+};

package/test/use-cases/data-providers/data-providers.test.js

@@ -0,0 +1,111 @@
+const assert = require('chai').assert;
+const parse = require('xml-parser');
+const webpack = require('webpack');
+const fs = require('fs');
+const path = require('path');
+
+const targetDir = path.join(__dirname, 'target');
+const webresourceOutput = path.join(targetDir, 'META-INF', 'plugin-descriptor', 'wr-webpack-bundles.xml');
+
+describe('data-providers', function() {
+    let stats;
+    let error;
+    let entrypoints;
+
+    function getEntrypointByKey(key) {
+        return entrypoints.find(entrypoint => entrypoint.attributes.key === key);
+    }
+
+    function getDataProviders(entryPointNode) {
+        return entryPointNode.children.filter(node => node.name === 'data');
+    }
+
+    function getDataProviderByKey(dataProvidersNodes, key) {
+        return dataProvidersNodes.find(node => node.attributes.key === key);
+    }
+
+    function runWebpack(config, done) {
+        const options = typeof config === 'function' ? config() : config;
+
+        webpack(options, (err, st) => {
+            error = err;
+            stats = st;
+
+            const xmlFile = fs.readFileSync(webresourceOutput, 'utf-8');
+            const results = parse(xmlFile);
+            entrypoints = results.root.children.filter(n => n.attributes.key.startsWith('entry'));
+            done();
+        });
+    }
+
+    function runTheTestsFor(config) {
+        beforeEach(done => runWebpack(config, done));
+
+        it('should generate one data provider for first entry point', () => {
+            const entryPointNode = getEntrypointByKey('entrypoint-my-first-entry-point');
+
+            assert.ok(entryPointNode);
+
+            const dataProviders = getDataProviders(entryPointNode);
+            assert.isArray(dataProviders, 'data providers should be an array');
+            assert.lengthOf(dataProviders, 1, 'data providers should include one provider');
+
+            const dataProvider = getDataProviderByKey(dataProviders, 'first-data-provider');
+
+            assert.ok(dataProvider);
+
+            assert.include(
+                dataProvider.attributes,
+                { key: 'first-data-provider', class: 'data.provider.JavaClass' },
+                'data provider should match given shape'
+            );
+        });
+
+        it('should generate two data providers for second entry point', () => {
+            const entryPointNode = getEntrypointByKey('entrypoint-my-second-entry-point');
+
+            assert.ok(entryPointNode);
+
+            const dataProviders = getDataProviders(entryPointNode);
+            assert.isArray(dataProviders, 'data providers should be an array');
+            assert.lengthOf(dataProviders, 2, 'data providers should include two providers');
+
+            const fooDataProvider = getDataProviderByKey(dataProviders, 'foo-data-provider');
+            const barDataProvider = getDataProviderByKey(dataProviders, 'bar-data-provider');
+
+            assert.ok(fooDataProvider);
+            assert.ok(barDataProvider);
+
+            assert.include(
+                fooDataProvider.attributes,
+                { key: 'foo-data-provider', class: 'data.provider.FooClass' },
+                'foo data provider should match given shape'
+            );
+
+            assert.include(
+                barDataProvider.attributes,
+                { key: 'bar-data-provider', class: 'data.provider.BarClass' },
+                'bar data provider should match given shape'
+            );
+        });
+
+        it('should not generate any data providers for third entry point', () => {
+            const entryPointNode = getEntrypointByKey('entrypoint-my-third-entry-point');
+
+            assert.ok(entryPointNode);
+
+            const dataProviders = getDataProviders(entryPointNode);
+            assert.lengthOf(dataProviders, 0, "data providers shouldn't be defined");
+        });
+    }
+
+    describe('using a map', () => {
+        const config = require('./webpack.config.with-map.js');
+        runTheTestsFor(config);
+    });
+
+    describe('using a plain object', () => {
+        const config = require('./webpack.config.js');
+        runTheTestsFor(config);
+    });
+});

package/test/use-cases/data-providers/src/first.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-console
+console.log('first entry point');

package/test/use-cases/data-providers/src/second.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-console
+console.log('second entry point');

package/test/use-cases/data-providers/src/third.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-console
+console.log('third entry point');