feat(cucumber): add gherkin file type (#1224)

See https://user-images.githubusercontent.com/1828233/124322487-d2450400-db7f-11eb-9cc8-4be112e9cb07.gif
stryker-mutator · Jul 2, 2021 · 9a7fcfd · 9a7fcfd
1 parent f6b9728
commit 9a7fcfd
Show file tree

Hide file tree

Showing 30 changed files with 2,131 additions and 3 deletions.
diff --git a/packages/elements/src/components/app/theme.scss b/packages/elements/src/components/app/theme.scss
@@ -176,6 +176,7 @@
   --mut-file-html-color: #498ba7;
   --mut-file-csharp-color: #498ba7;
   --mut-file-vue-color: #7fae42;
+  --mut-file-gherkin-color: #00a818;
 }
 :host([theme='dark']) {
   --mut-file-ts-color: #519aba;
@@ -188,6 +189,7 @@
   --mut-file-html-color: #519aba;
   --mut-file-csharp-color: #519aba;
   --mut-file-vue-color: #8dc149;
+  --mut-file-gherkin-color: #10b828;
 }
 
 // Mutation testing elements custom theming ================================

diff --git a/packages/elements/src/components/drawer-test/drawer-test.scss b/packages/elements/src/components/drawer-test/drawer-test.scss
@@ -1,3 +1,4 @@
 .list-group-item {
   background-color: var(--bs-card-cap-bg);
+  color: inherit;
 }
diff --git a/packages/elements/src/components/file-icon/file-icon.component.ts b/packages/elements/src/components/file-icon/file-icon.component.ts
@@ -45,13 +45,15 @@ export class MutationTestReportFileIconComponent extends LitElement {
       case ProgrammingLanguage.javascript:
         return svg`<svg class="${this.cssClass}" aria-label="js" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path  d="M11.4 10h2.7v7.6c0 3.4-1.6 4.6-4.3 4.6-.6 0-1.5-.1-2-.3l.3-2.2c.4.2.9.3 1.4.3 1.1 0 1.9-.5 1.9-2.4V10zm5.1 9.2c.7.4 1.9.8 3 .8 1.3 0 1.9-.5 1.9-1.3s-.6-1.2-2-1.7c-2-.7-3.3-1.8-3.3-3.6 0-2.1 1.7-3.6 4.6-3.6 1.4 0 2.4.3 3.1.6l-.6 2.2c-.5-.2-1.3-.6-2.5-.6s-1.8.5-1.8 1.2c0 .8.7 1.1 2.2 1.7 2.1.8 3.1 1.9 3.1 3.6 0 2-1.6 3.7-4.9 3.7-1.4 0-2.7-.4-3.4-.7l.6-2.3z"/></svg>`;
       case ProgrammingLanguage.typescript:
-        return svg`<svg class="${this.cssClass}" aria-label="ts" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M15.6 11.8h-3.4V22H9.7V11.8H6.3V10h9.2v1.8zm7.7 7.1c0-.5-.2-.8-.5-1.1-.3-.3-.9-.5-1.7-.8-1.4-.4-2.5-.9-3.3-1.5-.7-.6-1.1-1.3-1.1-2.3 0-1 .4-1.8 1.3-2.4.8-.6 1.9-.9 3.2-.9 1.3 0 2.4.4 3.2 1.1.8.7 1.2 1.6 1.2 2.6h-2.3c0-.6-.2-1-.6-1.4-.4-.3-.9-.5-1.6-.5-.6 0-1.1.1-1.5.4-.4.3-.5.7-.5 1.1 0 .4.2.7.6 1 .4.3 1 .5 2 .8 1.3.4 2.3.9 3 1.5.7.6 1 1.4 1 2.4s-.4 1.9-1.2 2.4c-.8.6-1.9.9-3.2.9-1.3 0-2.5-.3-3.4-1s-1.5-1.6-1.4-2.9h2.4c0 .7.2 1.2.7 1.6.4.3 1.1.5 1.8.5s1.2-.1 1.5-.4c.2-.3.4-.7.4-1.1z" fill="var(--mut-file-ts-color)"/></svg>`;
+        return svg`<svg class="${this.cssClass}" aria-label="ts" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M15.6 11.8h-3.4V22H9.7V11.8H6.3V10h9.2v1.8zm7.7 7.1c0-.5-.2-.8-.5-1.1-.3-.3-.9-.5-1.7-.8-1.4-.4-2.5-.9-3.3-1.5-.7-.6-1.1-1.3-1.1-2.3 0-1 .4-1.8 1.3-2.4.8-.6 1.9-.9 3.2-.9 1.3 0 2.4.4 3.2 1.1.8.7 1.2 1.6 1.2 2.6h-2.3c0-.6-.2-1-.6-1.4-.4-.3-.9-.5-1.6-.5-.6 0-1.1.1-1.5.4-.4.3-.5.7-.5 1.1 0 .4.2.7.6 1 .4.3 1 .5 2 .8 1.3.4 2.3.9 3 1.5.7.6 1 1.4 1 2.4s-.4 1.9-1.2 2.4c-.8.6-1.9.9-3.2.9-1.3 0-2.5-.3-3.4-1s-1.5-1.6-1.4-2.9h2.4c0 .7.2 1.2.7 1.6.4.3 1.1.5 1.8.5s1.2-.1 1.5-.4c.2-.3.4-.7.4-1.1z"/></svg>`;
       case ProgrammingLanguage.scala:
         return svg`<svg class="${this.cssClass}" aria-label="scala" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M21.6 7v4.2c-.1.1-.1.2-.2.2-.3.3-.7.5-1.1.6-.9.3-1.9.5-2.8.7-1.6.3-3.1.5-4.7.7-.8.1-1.6.2-2.4.4V9.6c.1-.1.2-.1.4-.1 1.2-.2 2.5-.4 3.8-.5 1.9-.3 3.8-.5 5.6-1.1.5-.2 1.1-.4 1.4-.9zm0 5.6v4.2l-.2.2c-.5.4-1.1.6-1.6.8-.8.2-1.6.4-2.4.5-1 .2-1.9.3-2.9.5-1.4.2-2.7.3-4.1.6v-4.2c.1-.1.2-.1.3-.1 1.7-.2 3.4-.5 5.1-.7 1.4-.2 2.9-.5 4.3-.9.6-.2 1.1-.4 1.5-.9zM10.5 25h-.1v-4.2c.1-.1.2-.1.3-.1 1.2-.2 2.3-.3 3.5-.5 2-.3 3.9-.5 5.8-1.1.6-.2 1.2-.4 1.6-.9v4.2c-.1.2-.3.3-.5.5-.6.3-1.2.5-1.9.7-1.2.3-2.5.5-3.7.7-1.3.2-2.6.4-3.9.5-.4 0-.7.1-1.1.2z"/></svg>`;
       case ProgrammingLanguage.php:
         return svg`<svg class="${this.cssClass}" aria-label="php" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M12.7 19.7c-.1-.6-.4-1.1-1-1.3-.2-.1-.5-.3-.7-.4-.3-.1-.6-.2-.8-.3-.2-.1-.4 0-.6.2-.1.2 0 .4.1.5.1.2.2.3.4.5.2.3.4.5.7.8.2.3.4.5.3.9-.1.7-.4 1.4-.9 1.9-.1.1-.2.1-.2.1-.3 0-.7-.2-.9-.4-.3-.3-.2-.6.1-.8.1 0 .2-.1.2-.2.2-.2.3-.4.2-.7-.1-.1-.1-.2-.2-.3-.4-.4-.9-.8-1.4-1.2-1.3-1-1.9-2.2-2-3.6-.1-1.6.3-3.1 1.1-4.5.3-.5.7-1 1.3-1.3.4-.2.8-.3 1.2-.4 1.1-.3 2.3-.5 3.5-.3 1 .2 1.8.7 2.1 1.7.2.7.3 1.3.2 2-.1 1.4-1.2 2.6-2.5 3-.6.2-.9.1-1.2-.4-.2-.3-.5-.7-.7-1.1V14c0-.1-.1-.1-.1-.2.1.6.2 1.2.5 1.7.2.3.4.5.8.5 1.3.1 2.3-.3 3.1-1.3.8-1.1 1-2.4.8-3.8 0-.3-.1-.5-.2-.8 0-.2 0-.3.2-.4.1 0 .2 0 .2-.1 1-.2 2.1-.3 3.1-.2 1.2.1 2.3.4 3.3 1.1 1.6 1 2.6 2.5 3.1 4.3.1.3.1.5.1.8 0 .2-.1.2-.3.1-.2-.1-.3-.3-.4-.4-.1-.1-.2-.3-.3-.4-.1-.1-.2-.1-.2 0s-.1.2-.1.3c-.3 1-.7 1.9-1.4 2.6-.1.1-.2.3-.2.4 0 .4-.1.8 0 1.2.1.8.2 1.7.3 2.5.1.5-.1.7-.5.9-.3.1-.6.2-1 .2h-1.6c0-.6 0-1.2-.5-1.5.1-.4.2-.8.3-1.3.1-.4 0-.7-.2-1-.2-.3-.5-.3-.8-.2-.8.5-1.6.5-2.5.2-.4-.1-.7-.1-.9.3-.2.4-.3.8-.3 1.2 0 .5.1 1.1.2 1.6 0 .3 0 .4-.3.5-.7.2-1.4.2-2 .1h-.1c0-.6 0-1.2-.7-1.5.4-.4.4-1.1.3-1.7zm-4.1-2.3c.1-.1.2-.2.2-.4.1-.3-.2-.8-.5-.9-.2-.1-.3 0-.4.1-.3.3-.5.6-.8.9 0 .1-.1.1-.1.2-.1.2 0 .4.2.4.1 0 .3 0 .4.1.4 0 .7-.1 1-.4zm0-3.3c0-.2-.2-.4-.4-.4s-.5.2-.4.5c0 .2.2.4.5.4.1-.1.3-.3.3-.5z"/></svg>`;
       case ProgrammingLanguage.vue:
-        return svg`<svg class="${this.cssClass}" aria-label="vue" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1000"><path d="M600 495.9l159.1-275.4h-84.4L600 349.7l-74.6-129.2h-84.5z"/><path fill="var(--mut-file-vue-color)" d="M793.7 220.5L600 555.9 406.3 220.5H277l323 559 323-559z"/></svg>`;
+        return svg`<svg class="${this.cssClass}" aria-label="vue" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1000"><path d="M600 495.9l159.1-275.4h-84.4L600 349.7l-74.6-129.2h-84.5z"/><path d="M793.7 220.5L600 555.9 406.3 220.5H277l323 559 323-559z"/></svg>`;
+      case ProgrammingLanguage.gherkin:
+        return svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16.129,2a12.348,12.348,0,0,0-2.35,24.465V30c7.371-1.114,13.9-6.982,14.384-14.684a12.8,12.8,0,0,0-5.9-11.667c-.223-.132-.449-.262-.682-.377s-.481-.231-.729-.33c-.079-.033-.156-.063-.235-.094-.216-.08-.435-.17-.658-.236A12.188,12.188,0,0,0,16.129,2Z" style="fill:var(--mut-file-gherkin-color)"/><path d="M18.68,6.563a1.345,1.345,0,0,0-1.178.472,5.493,5.493,0,0,0-.518.9,2.9,2.9,0,0,0,.377,3.023A3.317,3.317,0,0,0,19.763,9,2.388,2.388,0,0,0,20,8,1.411,1.411,0,0,0,18.68,6.563Zm-5.488.071A1.441,1.441,0,0,0,11.85,8,2.388,2.388,0,0,0,12.085,9a3.427,3.427,0,0,0,2.473,1.96,3.141,3.141,0,0,0-.212-3.85,1.322,1.322,0,0,0-1.154-.472Zm-3.7,3.637a1.3,1.3,0,0,0-.73,2.338,5.663,5.663,0,0,0,.895.543,3.386,3.386,0,0,0,3.179-.307,3.492,3.492,0,0,0-2.049-2.338,2.69,2.69,0,0,0-1.06-.236,1.369,1.369,0,0,0-.236,0Zm11.611,4.582a3.44,3.44,0,0,0-1.955.567A3.492,3.492,0,0,0,21.2,17.758a2.69,2.69,0,0,0,1.06.236,1.329,1.329,0,0,0,.966-2.362,5.47,5.47,0,0,0-.895-.52,3.247,3.247,0,0,0-1.225-.26Zm-10.292.071a3.247,3.247,0,0,0-1.225.26,2.575,2.575,0,0,0-.895.543A1.34,1.34,0,0,0,9.73,18.065a2.426,2.426,0,0,0,1.06-.236,3.185,3.185,0,0,0,1.955-2.338,3.366,3.366,0,0,0-1.931-.567Zm3.815,2.314a3.317,3.317,0,0,0-2.4,1.96,2.286,2.286,0,0,0-.236.968,1.4,1.4,0,0,0,2.426.992,5.492,5.492,0,0,0,.518-.9,3.109,3.109,0,0,0-.306-3.023Zm2.8.071a3.141,3.141,0,0,0,.212,3.85,1.47,1.47,0,0,0,2.5-.9,2.388,2.388,0,0,0-.236-.992,3.427,3.427,0,0,0-2.473-1.96Z" style="fill:#fff"/></svg>`;
     }
   }
 }
diff --git a/packages/elements/src/components/file-icon/file-icon.scss b/packages/elements/src/components/file-icon/file-icon.scss
@@ -33,6 +33,10 @@ svg.typescript.test {
   fill: var(--mut-file-js-test-color);
 }
 
+svg.gherkin {
+  fill: var(--mut-file-gherkin-color);
+}
+
 svg {
   vertical-align: middle;
 }
diff --git a/packages/elements/src/lib/code-helpers.ts b/packages/elements/src/lib/code-helpers.ts
@@ -12,6 +12,7 @@ export enum ProgrammingLanguage {
   scala = 'scala',
   typescript = 'typescript',
   vue = 'vue',
+  gherkin = 'gherkin',
 }
 
 /**
@@ -47,6 +48,8 @@ export function determineLanguage(fileName: string): ProgrammingLanguage | undef
       return ProgrammingLanguage.php;
     case 'vue':
       return ProgrammingLanguage.vue;
+    case 'feature':
+      return ProgrammingLanguage.gherkin;
     default:
       return undefined;
   }

diff --git a/packages/elements/src/style/prism-plugins.ts b/packages/elements/src/style/prism-plugins.ts
@@ -8,6 +8,7 @@ import 'prismjs/components/prism-typescript';
 import 'prismjs/components/prism-csharp';
 import 'prismjs/components/prism-java';
 import 'prismjs/components/prism-scala';
+import 'prismjs/components/prism-gherkin';
 
 // Markup and markup-templating are needed for php
 import 'prismjs/components/prism-markup';

diff --git a/...iew-when-a-mutant-is-opened-should-look-as-expected-in-dark-mode.linux.snap.png b/...iew-when-a-mutant-is-opened-should-look-as-expected-in-dark-mode.linux.snap.png
diff --git a/...iew-when-a-mutant-is-opened-should-look-as-expected-in-dark-mode.win32.snap.png b/...iew-when-a-mutant-is-opened-should-look-as-expected-in-dark-mode.win32.snap.png
diff --git a/...awer-mutant-view-when-a-mutant-is-opened-should-look-as-expected.linux.snap.png b/...awer-mutant-view-when-a-mutant-is-opened-should-look-as-expected.linux.snap.png
diff --git a/...awer-mutant-view-when-a-mutant-is-opened-should-look-as-expected.win32.snap.png b/...awer-mutant-view-when-a-mutant-is-opened-should-look-as-expected.win32.snap.png
diff --git a/...d-when-read-more-is-toggled-should-look-as-expected-in-dark-mode.linux.snap.png b/...d-when-read-more-is-toggled-should-look-as-expected-in-dark-mode.linux.snap.png
diff --git a/...d-when-read-more-is-toggled-should-look-as-expected-in-dark-mode.win32.snap.png b/...d-when-read-more-is-toggled-should-look-as-expected-in-dark-mode.win32.snap.png
diff --git a/...tant-is-opened-when-read-more-is-toggled-should-look-as-expected.linux.snap.png b/...tant-is-opened-when-read-more-is-toggled-should-look-as-expected.linux.snap.png
diff --git a/...tant-is-opened-when-read-more-is-toggled-should-look-as-expected.win32.snap.png b/...tant-is-opened-when-read-more-is-toggled-should-look-as-expected.win32.snap.png
diff --git a/...w-when-read-more-is-toggled-should-look-as-expected-in-dark-mode.linux.snap.png b/...w-when-read-more-is-toggled-should-look-as-expected-in-dark-mode.linux.snap.png
diff --git a/...w-when-read-more-is-toggled-should-look-as-expected-in-dark-mode.win32.snap.png b/...w-when-read-more-is-toggled-should-look-as-expected-in-dark-mode.win32.snap.png
diff --git a/...awer-test-view-when-read-more-is-toggled-should-look-as-expected.linux.snap.png b/...awer-test-view-when-read-more-is-toggled-should-look-as-expected.linux.snap.png
diff --git a/...awer-test-view-when-read-more-is-toggled-should-look-as-expected.win32.snap.png b/...awer-test-view-when-read-more-is-toggled-should-look-as-expected.win32.snap.png
diff --git a/...n/theming.it.spec/theming-dark-theme-should-match-the-dark-theme.linux.snap.png b/...n/theming.it.spec/theming-dark-theme-should-match-the-dark-theme.linux.snap.png
diff --git a/...n/theming.it.spec/theming-dark-theme-should-match-the-dark-theme.win32.snap.png b/...n/theming.it.spec/theming-dark-theme-should-match-the-dark-theme.win32.snap.png
diff --git a/...-dark-theme-when-opening-a-code-file-should-match-the-dark-theme.linux.snap.png b/...-dark-theme-when-opening-a-code-file-should-match-the-dark-theme.linux.snap.png
diff --git a/...-dark-theme-when-opening-a-code-file-should-match-the-dark-theme.win32.snap.png b/...-dark-theme-when-opening-a-code-file-should-match-the-dark-theme.win32.snap.png
diff --git a/...theming.it.spec/theming-light-theme-should-match-the-light-theme.linux.snap.png b/...theming.it.spec/theming-light-theme-should-match-the-light-theme.linux.snap.png
diff --git a/...theming.it.spec/theming-light-theme-should-match-the-light-theme.win32.snap.png b/...theming.it.spec/theming-light-theme-should-match-the-light-theme.win32.snap.png
diff --git a/...ight-theme-when-opening-a-code-file-should-match-the-light-theme.linux.snap.png b/...ight-theme-when-opening-a-code-file-should-match-the-light-theme.linux.snap.png
diff --git a/...ight-theme-when-opening-a-code-file-should-match-the-light-theme.win32.snap.png b/...ight-theme-when-opening-a-code-file-should-match-the-light-theme.win32.snap.png
diff --git a/packages/elements/test/unit/lib/code-helpers.spec.ts b/packages/elements/test/unit/lib/code-helpers.spec.ts
@@ -129,6 +129,7 @@ describe(determineLanguage.name, () => {
       ['scala', ProgrammingLanguage.scala],
       ['php', ProgrammingLanguage.php],
       ['vue', ProgrammingLanguage.vue],
+      ['feature', ProgrammingLanguage.gherkin],
     ] as const
   ).forEach(([extension, expected]) => {
     it(`should recognize file.${extension} as language ${expected}`, () => {

diff --git a/packages/elements/testResources/cucumber-example/index.html b/packages/elements/testResources/cucumber-example/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>🥒 Cucumber example - Mutation test elements</title>
+    <script src="/mutation-test-elements.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=0.5" />
+  </head>
+
+  <body>
+    <a href="/">Back</a>
+    <mutation-test-report-app src="mutation.json"></mutation-test-report-app>
+    <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>