EIWFY23Q4-1 Add unit test for HTML sanitization

Author: slatlasdev

.babelrc

@@ -30,4 +30,5 @@ jobs:
           cache: 'yarn'
       - run: yarn install --frozen-lockfile
       - run: yarn lint
+      - run: yarn test
       - run: yarn build-prod

.github/workflows/node-lint.yml

@@ -0,0 +1,18 @@
+const config = {
+  presets: [
+    '@babel/preset-env',
+    '@babel/preset-typescript',
+    '@babel/preset-react',
+  ],
+  plugins: [
+    '@babel/plugin-proposal-class-properties',
+    '@compiled/babel-plugin',
+    '@babel/transform-runtime',
+  ],
+  env: {
+    test: {
+      plugins: ['@babel/plugin-transform-modules-commonjs'],
+    },
+  },
+};
+module.exports = config;

babel.config.js

@@ -0,0 +1,9 @@
+const config = {
+  testEnvironment: 'jsdom',
+  transform: {
+    '\\.[jt]sx?$': 'babel-jest',
+  },
+  // https://stackoverflow.com/questions/49263429/jest-gives-an-error-syntaxerror-unexpected-token-export
+  transformIgnorePatterns: ['node_modules/jest-runner'],
+};
+module.exports = config;

jest.config.js

@@ -39,6 +39,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.22.5",
+    "@babel/plugin-transform-modules-commonjs": "^7.22.5",
     "@babel/plugin-transform-runtime": "^7.22.5",
     "@babel/preset-env": "^7.22.5",
     "@babel/preset-react": "^7.22.5",
@@ -49,18 +50,24 @@
     "@storybook/addon-links": "^7.0.22",
     "@storybook/cli": "^7.0.22",
     "@storybook/react-webpack5": "^7.0.22",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^11.2.7",
+    "@types/jest": "^29.5.2",
     "@types/js-yaml": "^4.0.0",
     "@types/react": "^16.8",
     "@types/react-copy-to-clipboard": "^5.0.0",
     "@types/react-dom": "^16.8",
     "@types/react-router-dom": "^5.1.7",
+    "babel-jest": "^29.5.0",
     "babel-loader": "^8.2.2",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "csp-html-webpack-plugin": "^5.1.0",
     "css-loader": "^5.0.1",
     "favicons": "^7.1.3",
     "favicons-webpack-plugin": "^6.0.0",
     "html-webpack-plugin": "^5.5.3",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
     "json-schema-to-typescript": "^10.1.2",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.8",
@@ -75,6 +82,7 @@
   "scripts": {
     "start": "webpack serve -c webpack.dev.js",
     "lint": "tsc --noEmit",
+    "test": "jest",
     "postinstall": "npm run gen-schema",
     "build-dev": "webpack -c webpack.dev.js",
     "build-prod": "webpack -c webpack.prod.js",

package.json

@@ -0,0 +1,30 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { Markdown } from '../markdown';
+
+describe('markdown renderer', () => {
+  test('safely displays HTML but protects against XSS', async () => {
+    render(
+      <Markdown
+        source={`
+# Hello world
+<p title="para">This is some safe text!</p>
+<img title="xssimg" src="test.png" onerror="alert('XSS');">
+<script title="xss">alert("XSS")</script>
+<style title="xsscss">* { display: none; }</style>
+`}
+      />
+    );
+
+    // It renders markdown
+    expect(screen.getByText('Hello world')).toBeTruthy();
+    // and paragraphs
+    expect(screen.getByTitle('para')).toHaveTextContent('This is some safe text!');
+    // but blocks attributes that can run code
+    expect(screen.getByTitle('xssimg')).not.toHaveAttribute('onerror');
+    // and blocks script and style tags outright
+    expect(screen.queryByTitle('xss')).toBeNull();
+    expect(screen.queryByTitle('xsscss')).toBeNull();
+  });
+})

src/test/markdown-renderer.test.tsx

@@ -50,7 +50,7 @@
     // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
     // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
     // "typeRoots": [],                       /* List of folders to include type definitions from. */
-    // "types": [],                           /* Type declaration files to be included in compilation. */
+     "types": ["jest"],                           /* Type declaration files to be included in compilation. */
     // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
     "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
     // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */