Python Code Highlighting support

packages/elements/src/components/app/theme.css

@@ -108,6 +108,7 @@
   --mut-file-gherkin-color: #00a818;
   --mut-file-svelte-color: #b8383d;
   --mut-file-rust-color: #627379;
+  --mut-file-python-color: #498ba7;
 }
 :host([theme='dark']) {
   --mut-file-ts-color: #519aba;
@@ -123,6 +124,7 @@
   --mut-file-gherkin-color: #10b828;
   --mut-file-svelte-color: #cc3e44;
   --mut-file-rust-color: #6d8086;
+  --mut-file-python-color: #519aba;
 }
 
 /* Mutation testing elements custom theming ================================ */

packages/elements/src/components/file-icon/file-icon.component.ts

@@ -64,6 +64,8 @@ export class MutationTestReportFileIconComponent extends BaseElement {
         return svg`<svg class="${this.cssClass}" aria-label="svelte" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M10.617 10.473L14.809 7.8c2.387-1.52 5.688-.812 7.359 1.58a5.123 5.123 0 01.876 3.876 4.821 4.821 0 01-.72 1.798c.524.998.7 2.142.5 3.251a4.808 4.808 0 01-1.963 3.081l-.21.14-4.192 2.672c-2.386 1.52-5.688.812-7.36-1.58a5.125 5.125 0 01-.875-3.876c.116-.642.36-1.253.72-1.798a5.065 5.065 0 01-.5-3.251 4.81 4.81 0 011.962-3.081l.21-.14L14.81 7.8l-4.192 2.672zm9.825.008a3.33 3.33 0 00-3.573-1.324c-.226.06-.444.146-.65.256l-.202.118-4.192 2.671a2.891 2.891 0 00-1.306 1.937 3.081 3.081 0 00.526 2.33 3.33 3.33 0 003.574 1.326c.226-.06.444-.147.65-.256l.201-.118 1.6-1.02a.923.923 0 01.257-.113c.407-.105.837.054 1.077.4a.931.931 0 01.158.702.873.873 0 01-.295.512l-.099.072-4.192 2.671a.923.923 0 01-.257.113 1.003 1.003 0 01-1.076-.4.94.94 0 01-.171-.49l.002-.132.014-.156-.156-.047a5.407 5.407 0 01-1.387-.645l-.252-.174-.215-.158-.08.24a2.923 2.923 0 00-.1.392 3.082 3.082 0 00.527 2.33 3.33 3.33 0 003.38 1.37l.194-.045c.226-.06.444-.146.65-.256l.202-.118 4.192-2.671a2.892 2.892 0 001.306-1.937 3.081 3.081 0 00-.526-2.331 3.33 3.33 0 00-3.574-1.325 3.05 3.05 0 00-.65.257l-.201.117-1.6 1.02a.927.927 0 01-.257.113 1.003 1.003 0 01-1.077-.4.93.93 0 01-.158-.702.871.871 0 01.295-.512l.098-.072 4.192-2.671a.923.923 0 01.258-.113c.407-.106.836.053 1.076.399a.942.942 0 01.171.49l-.002.133-.014.156.155.047c.492.148.959.365 1.388.645l.252.175.215.157.079-.24c.042-.129.076-.26.1-.392a3.082 3.082 0 00-.526-2.33z"/></svg>`;
       case ProgrammingLanguage.rust:
         return svg`<svg class="${this.cssClass}" aria-label="rust" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M21.7 8.4V9l.1.1h.1c.3-.1.6-.1.9-.2.2-.1.4.1.3.3-.1.3-.1.6-.2.9v.1l.1.1c0 .1.1.1.2.1h.9c.2 0 .3.1.3.3v.2c-.1.3-.3.6-.4.8v.1s.1.1.1.2h.1c.3.1.6.1.9.2.2 0 .3.3.2.5-.2.3-.4.5-.5.7v.2c0 .1.1.1.2.2.3.1.5.2.8.3.2.1.3.3.1.5-.2.2-.4.4-.7.6v.3s.1.1.2.1c.2.1.4.3.7.4.2.1.2.4 0 .5-.3.2-.5.3-.8.5v.1c0 .2 0 .2.1.3.2.2.4.4.6.5.2.2.1.4-.1.5-.3.1-.6.2-.8.3 0 0-.1 0-.1.1-.1.1 0 .2 0 .3.2.2.3.4.5.7.1.1.1.3-.1.4-.1 0-.1 0-.2.1-.3 0-.5.1-.8.1h-.1c0 .1-.1.1-.1.2s0 .1.1.2c.1.2.2.5.3.7.1.1 0 .3-.1.4h-1.2c-.1.1-.1.2-.1.3.1.3.1.5.2.8.1.2-.1.4-.4.4-.3-.1-.6-.1-.9-.2H22l-.1.1s-.1.1 0 .1v.9c0 .2-.1.3-.3.3h-.2c-.3-.1-.5-.2-.8-.4h-.1c-.1 0-.2.1-.2.2 0 .3-.1.5-.1.8 0 .2-.3.3-.5.2-.2-.2-.5-.4-.7-.5h-.1c-.1 0-.2.1-.2.2-.1.3-.2.5-.3.8-.1.2-.2.2-.3.2-.1 0-.1-.1-.1-.1-.2-.2-.4-.4-.6-.7h-.2c-.1 0-.2.1-.2.2-.1.2-.3.5-.4.7-.1.2-.4.2-.5 0-.2-.3-.3-.5-.5-.8h-.2c-.1 0-.1 0-.2.1l-.6.6c-.1.1-.2.1-.4.1-.1 0-.1-.1-.1-.2l-.3-.9s0-.1-.1-.1h-.3c-.2.2-.4.3-.7.5-.4-.2-.7-.3-.7-.5-.1-.3-.1-.6-.1-.9 0 0 0-.1-.1-.1s-.1-.1-.2-.1-.1 0-.2.1c-.2.1-.5.2-.7.3-.2.1-.4 0-.4-.2V23l-.1-.1h-.1c-.3.1-.6.1-.9.2-.2.1-.4-.1-.3-.3.1-.3.1-.6.2-.9v-.1l-.1-.1H8c-.2 0-.3-.1-.3-.3v-.2c.1-.3.3-.6.4-.8v-.1s0-.1-.1-.1c0-.1-.1-.1-.1-.1-.3 0-.6-.1-.9-.1-.2 0-.3-.3-.2-.5.2-.2.4-.5.5-.7v-.1c0-.1 0-.1-.1-.2 0 0-.1-.1-.2-.1-.2-.1-.5-.2-.7-.3-.2-.1-.3-.3-.1-.5.3-.1.5-.4.8-.6v-.2c0-.1 0-.2-.1-.2-.2-.1-.5-.3-.7-.4-.2-.1-.2-.4 0-.5.3-.2.5-.3.8-.5V15l-.1-.1-.6-.6c-.1-.1-.1-.3 0-.4 0 0 .1 0 .1-.1l.9-.3v-.1c.1-.1 0-.2 0-.3-.2-.2-.3-.4-.5-.6-.1-.2 0-.5.2-.5.3-.1.6-.1.9-.2H8c0-.1.1-.1.1-.2s0-.1-.1-.2c-.1-.2-.2-.5-.3-.7-.1-.2 0-.4.2-.4H9s0-.1.1-.1v-.1c-.1-.3-.2-.6-.2-.9-.1-.2.1-.4.3-.3.3 0 .6.1.9.2h.1l.1-.1s.1-.1 0-.1V8c0-.2.1-.3.3-.3h.2c.3.1.6.3.8.4h.1s.1 0 .1-.1c.1 0 .1-.1.1-.1 0-.3.1-.6.1-.9 0-.2.3-.3.5-.2.2.2.5.4.7.5h.1c.1 0 .1 0 .2-.1 0 0 0-.1.1-.2.1-.2.2-.5.3-.7.1-.2.2-.2.4-.2l.1.1c.1.3.4.5.6.8h.1c.1 0 .2-.1.2-.1.1-.2.3-.5.4-.7.2-.2.4-.2.5-.1l.1.1c.2.3.3.5.5.8h.3c.1 0 .1-.1.1-.1.2-.2.4-.4.5-.6.1-.1.3-.1.4 0v.1c.1.3.2.6.3.8l.1.1h.2c.3-.1.6-.3.8-.5.2-.1.5 0 .5.2 0 .3.1.6.1.9 0 0 0 .1.1.1h.1c.1.1.2.1.2 0 .2-.1.5-.2.8-.3.2-.1.4 0 .4.3v.4zm-11.1 2.7h7.6c.3 0 .6 0 .9.1.6.2 1.1.5 1.4.9.3.3.5.7.5 1.2 0 .4-.1.8-.3 1.2-.2.3-.5.6-.8.8-.1.1-.2.2-.3.2.1.1.2.1.3.2.2.2.5.4.6.7.2.3.3.7.3 1 0 .1.1.2.2.3.2.2.5.2.8.2.2 0 .4-.1.5-.2.2-.2.2-.4.3-.6v-.5c0-.1 0-.1.1-.1h.7v-1.3c-.3-.1-.6-.3-.9-.4-.1-.1-.3-.1-.4-.2-.3-.1-.4-.4-.3-.8.2-.5.4-1 .7-1.5v-.1c-.4-.6-.8-1.2-1.4-1.7-1-.9-2.2-1.5-3.6-1.8h-.1c-.3.3-.6.6-1 .9-.2.2-.6.2-.8 0l-.9-.9h-.1c-.4.1-.7.2-1 .3-1.1.4-2 1-2.8 1.8-.1.1-.2.2-.2.3zm11.3 9.2h-3c-.2 0-.3 0-.4-.1-.4-.2-.6-.6-.7-1-.1-.4-.2-.7-.2-1.1 0-.2-.1-.4-.2-.6-.2-.5-.6-.8-1.1-.8h-1.8V18h1.8c.1 0 .1 0 .1.1v2c0 .1 0 .1-.1.1h-6c.2.3.4.5.6.7h.1c.4-.1.8-.2 1.2-.2.3-.1.6.1.7.4.1.4.2.9.3 1.3v.1c.8.3 1.6.6 2.4.6.7.1 1.4 0 2.1-.1.5-.1 1-.3 1.5-.5v-.1c.1-.4.2-.9.3-1.3.1-.3.3-.5.7-.4l1.2.3h.1c0-.2.2-.5.4-.7zm-11.9-7l.3.6c0 .1.1.2 0 .3 0 .2-.2.3-.3.4-.4.2-.8.4-1.2.5 0 0-.1 0-.1.1v.5c0 .7.1 1.4.3 2.2 0 0 0 .1.1.1h2.1v-4.7H10zm4.3 1.4c.1 0 .1 0 0 0h2.3c.2 0 .4 0 .6-.1.1-.1.2-.1.3-.3.1-.2.1-.5-.1-.7-.2-.2-.5-.3-.7-.3h-2.5c.1.5.1.9.1 1.4zm-6-1c0 .3.3.6.6.6s.6-.3.6-.6-.3-.6-.6-.6-.6.3-.6.6zM21 22.1c0-.3-.3-.6-.6-.6s-.6.3-.6.6.3.6.6.6.6-.2.6-.6zm-9.4-.6c-.3 0-.6.3-.6.6s.3.6.6.6.6-.3.6-.6-.3-.6-.6-.6zm5-13.1c0-.3-.2-.6-.6-.6-.3 0-.6.2-.6.6 0 .3.2.6.6.6.3 0 .5-.3.6-.6zm6.5 6c.3 0 .6-.3.6-.6s-.3-.6-.6-.6-.6.3-.6.6.2.6.6.6z"/></svg>`;
+      case ProgrammingLanguage.python:
+        return svg`<svg class="${this.cssClass}" aria-label="python" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M15.6 15.5h-2c-1.4 0-2.3.9-2.3 2.3v1.8c0 .2-.1.3-.3.3h-.9c-.9 0-1.6-.4-2-1.2-.3-.6-.5-1.2-.5-1.8-.1-1.1-.1-2.2.3-3.3.3-.9.9-1.6 1.9-1.8h5.8c.1 0 .3 0 .3-.1v-.5s-.2-.1-.3-.1h-3.4c-.3 0-.4-.1-.4-.4V9.4c0-.7.3-1.2.9-1.4.5-.2 1-.4 1.5-.5 1.2-.2 2.4-.2 3.6.1.5.1 1 .3 1.4.6.4.4.7.8.6 1.4v3.6c0 1.4-.8 2.2-2.2 2.2-.7.1-1.4.1-2 .1zm-2.8-6c0 .4.3.8.8.8.4 0 .8-.4.8-.8s-.4-.7-.8-.8c-.5 0-.8.4-.8.8zm3.6 7h2c1.4 0 2.3-.9 2.3-2.3v-1.8c0-.2.1-.3.3-.3h.9c.9 0 1.6.4 2 1.2.3.6.5 1.2.5 1.8.1 1.1.1 2.2-.3 3.3-.3.9-.9 1.6-1.9 1.8h-5.8c-.1 0-.3 0-.3.1v.5s.2.1.3.1h3.4c.3 0 .4.1.4.4v1.3c0 .7-.3 1.2-.9 1.4-.5.2-1 .4-1.5.5-1.2.2-2.4.2-3.6-.1-.5-.1-1-.3-1.4-.6-.4-.4-.7-.8-.6-1.4v-3.6c0-1.4.8-2.2 2.2-2.2.7-.1 1.4-.1 2-.1zm2.8 6c0-.4-.3-.8-.8-.8-.4 0-.8.4-.8.8s.4.7.8.8c.5 0 .8-.4.8-.8z"/></svg>`;
     }
   }
 }

packages/elements/src/components/file-icon/file-icon.css

@@ -44,6 +44,9 @@ svg.svelte {
 svg.rust {
   fill: var(--mut-file-rust-color);
 }
+svg.python {
+  fill: var(--mut-file-python-color);
+}
 
 svg {
   width: 20px;

packages/elements/src/lib/code-helpers.ts

@@ -14,6 +14,7 @@ export enum ProgrammingLanguage {
   gherkin = 'gherkin',
   svelte = 'svelte',
   rust = 'rust',
+  python = 'python',
 }
 
 /**
@@ -59,6 +60,8 @@ export function determineLanguage(fileName: string): ProgrammingLanguage | undef
       return ProgrammingLanguage.svelte;
     case 'rs':
       return ProgrammingLanguage.rust;
+    case 'py':
+      return ProgrammingLanguage.python;
     default:
       return undefined;
   }

packages/elements/src/style/prism-plugins.ts

@@ -8,6 +8,7 @@ import 'prismjs/components/prism-java';
 import 'prismjs/components/prism-scala';
 import 'prismjs/components/prism-gherkin';
 import 'prismjs/components/prism-rust';
+import 'prismjs/components/prism-python';
 // Markup and markup-templating are needed for php
 import 'prismjs/components/prism-markup';
 import 'prismjs/components/prism-markup-templating';

packages/elements/test/unit/lib/code-helpers.spec.ts

@@ -18,6 +18,7 @@ describe(highlightCode.name, () => {
     ['foo.feature', ProgrammingLanguage.gherkin, 'Feature: foo'],
     ['foo.scala', ProgrammingLanguage.scala, 'object Foo { def main(args: Array[String]) = println("Hello, world!") }'],
     ['foo.rs', ProgrammingLanguage.rust, 'fn main() { println!("Hello, world!"); }'],
+    ['foo.py', ProgrammingLanguage.python, 'a = 10'],
   ])(`should parse %s as %s`, (fileName, language, code) => {
     const highlightedCode = highlightCode(code, fileName);
     expect(highlightedCode).contains('<span'); // actual highlighting is not tested, in prism we trust
@@ -197,6 +198,7 @@ describe(determineLanguage.name, () => {
     ['php', ProgrammingLanguage.php],
     ['vue', ProgrammingLanguage.vue],
     ['feature', ProgrammingLanguage.gherkin],
+    ['py', ProgrammingLanguage.python],
   ] as const)(`should recognize file.%s as language %s`, (extension, expected) => {
     expect(determineLanguage(`file.${extension}`)).eq(expected);
   });

packages/elements/testResources/index.html

@@ -25,6 +25,7 @@ <h1 class="display-1">Test resources</h1>
             <a class="list-group-item list-group-item-action" href="/testResources/rust-example/">Rust example</a>
             <a class="list-group-item list-group-item-action" href="/testResources/deep-dir-example/">Deep dir example</a>
             <a class="list-group-item list-group-item-action" href="/testResources/pitest-example/">Pitest example</a>
+            <a class="list-group-item list-group-item-action" href="/testResources/python-example/">Python example</a>
             <a class="list-group-item list-group-item-action" href="/testResources/infection-php-example/">InfectionPHP example</a>
             <a class="list-group-item list-group-item-action" href="/testResources/tests-example/">Tests example</a>
             <a class="list-group-item list-group-item-action" href="/testResources/test-files-example/">Test files example</a>

packages/elements/testResources/python-example/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+
+<body>
+  <a href="/">Back</a>
+  <mutation-test-report-app title-postfix="Stryker report"></mutation-test-report-app>
+  <script type="module" src="/mutation-test-elements.js"></script>
+  <script src="report.js"></script>
+  <script>
+    const app = document.getElementsByTagName('mutation-test-report-app').item(0);
+    function updateTheme() {
+      document.body.style.backgroundColor = app.themeBackgroundColor;
+    }
+    app.addEventListener('theme-changed', updateTheme);
+    updateTheme();
+  </script>
+</body>
+
+</html>