Added Karma/Jasmine test framework for client code, added unit test, …

…client code optimizations

Makefile

@@ -34,4 +34,5 @@ pack:
 	tar -czvf mattermost-pr0gramm-plugin.tar.gz mattermost-pr0gramm-plugin
 
 test:
-	go test ./server -v
+	go test ./server -v
+	npm test

client/index.jsx

@@ -8,7 +8,7 @@ import {
     ClientSettings,
 } from './types.jsx';
 
-class PostWillRenderEmbed extends React.Component {
+export class PostWillRenderEmbed extends React.Component {
     static plugin;
     /**
      * @type {ClientSettings}
@@ -219,25 +219,24 @@ class PostWillRenderEmbed extends React.Component {
         const img = document.createElement('img');
         img.src = url;
         img.className = 'mt-1';
-        img.style.maxHeight = maxHeight + 'px';
-        img.onclick = e => {
-            try {
-                const modal = document.getElementById(this.uid + '_modal');
-                const modalImg = document.getElementById(this.uid + '_modal_img');
-                modalImg.src = e.target.src;
-                modal.style.zIndex = 1000;
-                const self = this;
-                document.body.appendChild(modal);
-                modal.style.display = 'block';
-                modal.onclick = () => {
-                    const uidElem = document.getElementById(self.uid);
-                    modal.style.display = 'none';
-                    modal.style.zIndex = 1;
-                    uidElem.parentElement.appendChild(modal);
-                }
-            } catch {
-            }
+        img.style.maxHeight = `${maxHeight}px`;
+
+        const showModal = () => {
+            const modal = document.getElementById(`${this.uid}_modal`);
+            const modalImg = document.getElementById(`${this.uid}_modal_img`);
+            modalImg.src = img.src;
+            modal.style.zIndex = 1000;
+            const uidElem = document.getElementById(this.uid);
+            document.body.appendChild(modal);
+            modal.style.display = 'block';
+            modal.addEventListener('click', () => {
+                modal.style.display = 'none';
+                modal.style.zIndex = 1;
+                uidElem.parentElement.appendChild(modal);
+            });
         }
+        img.addEventListener('click', showModal);
+
         return img;
     }
 
@@ -288,4 +287,6 @@ class Pr0grammPlugin {
     }
 }
 
-window.registerPlugin('pr0gramm', new Pr0grammPlugin());
+if (window.registerPlugin != null) {
+    window.registerPlugin('pr0gramm', new Pr0grammPlugin());
+}

client/index.spec.jsx

@@ -0,0 +1,10 @@
+import { PostWillRenderEmbed } from './index.jsx';
+
+describe('PostWillRenderEmbed', () => {
+    it('should return a valid UUIDv4 string', () => {
+        const post = new PostWillRenderEmbed(null);
+        const uuid = post.uuidv4();
+        const uuidRegex = /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-4[0-9a-fA-F]{3}-[8|9|aA|bB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$/;
+        expect(uuid).toMatch(uuidRegex);
+    });
+});

karma.conf.js

@@ -0,0 +1,45 @@
+module.exports = function (config) {
+    config.set({
+        basePath: '',
+        frameworks: ['jasmine', 'webpack'],
+        files: [
+            'client/*.spec.jsx'
+        ],
+        preprocessors: {
+            'client/*.spec.jsx': ['webpack', 'sourcemap']
+        },
+        webpack: {
+            module: {
+                rules: [
+                    {
+                        test: /\.(js|jsx)$/,
+                        exclude: /node_modules/,
+                        use: {
+                            loader: 'babel-loader',
+                            options: {
+                                presets: ['@babel/preset-react',
+                                    [
+                                        "@babel/preset-env",
+                                        {
+                                            "modules": "commonjs",
+                                            "targets": {
+                                                "node": "current"
+                                            }
+                                        }
+                                    ]
+                                ],
+                            },
+                        },
+                    },
+                    {
+                        test: /\.(css)$/,
+                        use: ['style-loader', 'css-loader'],
+                    },
+                ],
+            }
+        },
+        reporters: ['progress'],
+        browsers: ['ChromeHeadless'],
+        singleRun: true,
+    })
+}