Merge pull request #2920 from Particular/john/stack_tests

Refactor stack trace formatter and add unit tests

Author: johnsimons

src/Frontend/src/components/messages/StacktraceFormatter.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { ref, watch } from "vue";
+import { type Language, type StackTraceElement, languages, detectLanguagesInOrder, formatStackTrace } from "./StacktraceFormatter/stacktraceFormatter";
 
 // Define TypeScript interfaces for settings and supported languages
 interface NetStackOptions {
@@ -13,26 +14,6 @@ interface NetStackOptions {
   line?: string;
 }
 
-interface Language {
-  name: string;
-  at: string;
-  in: string;
-  line: string;
-}
-
-type Text = string;
-
-interface Node {
-  params: Array<{ name: string; type: string }>;
-  type: string;
-  lineNumber?: number;
-  file?: string;
-  method: string;
-  spaces: string;
-}
-
-type Element = Text | Node;
-
 // Props
 const props = withDefaults(defineProps<{ stackTrace: string; options?: NetStackOptions }>(), {
   options: () => ({
@@ -47,80 +28,10 @@ const props = withDefaults(defineProps<{ stackTrace: string; options?: NetStackO
   }),
 });
 
-// Supported languages and their keywords
-const languages: Language[] = [
-  { name: "english", at: "at", in: "in", line: "line" },
-  { name: "danish", at: "ved", in: "i", line: "linje" },
-  { name: "german", at: "bei", in: "in", line: "Zeile" },
-  { name: "spanish", at: "en", in: "en", line: "línea" },
-  { name: "russian", at: "в", in: "в", line: "строка" },
-  { name: "chinese", at: "在", in: "位置", line: "行号" },
-];
-
 // Reactive variables and setup state
-const formattedStack = ref<Element[]>([]);
+const formattedStack = ref<StackTraceElement[]>([]);
 const selectedLanguage = ref<Language>(languages[0]);
 
-// Helper function to detect languages in the stack trace
-const detectLanguagesInOrder = (text: string): Language[] => {
-  const languageRegexes = {
-    english: /\s+at .*?\)/g,
-    danish: /\s+ved .*?\)/g,
-    german: /\s+bei .*?\)/g,
-    spanish: /\s+en .*?\)/g,
-    russian: /\s+в .*?\)/g,
-    chinese: /\s+在 .*?\)/g,
-  };
-
-  const detectedLanguages: Language[] = [];
-  for (const lang in languageRegexes) {
-    if (languageRegexes[lang as keyof typeof languageRegexes].test(text)) {
-      const foundLang = languages.find((l) => l.name === lang);
-      if (foundLang) {
-        detectedLanguages.push(foundLang);
-      }
-    }
-  }
-
-  return detectedLanguages;
-};
-
-// Core formatting logic
-const formatStackTrace = (stackTrace: string, selectedLang: Language): Element[] => {
-  const lines = stackTrace.split("\n");
-  const fileAndLineNumberRegEx = new RegExp(`${selectedLang.in} (.+):${selectedLang.line} (\\d+)`);
-  const atRegex = new RegExp(`^(\\s+)(${selectedLang.at}) (.+?)\\((.*?)\\)`);
-
-  return lines.map((line) => {
-    const match = line.match(atRegex);
-    if (match) {
-      const [, spaces, , methodWithType, paramsWithFile] = match;
-
-      const [type, method] = (() => {
-        const parts = methodWithType.split(".");
-        const method = parts.pop() ?? "";
-        const type = parts.join(".");
-        return [type, method];
-      })();
-
-      const params = paramsWithFile.split(", ").map((param) => {
-        const [paramType, paramName] = param.split(" ");
-        return { name: paramName, type: paramType };
-      });
-
-      const matchFile = line.match(fileAndLineNumberRegEx);
-      let file, lineNumber;
-      if (matchFile) {
-        [, file, lineNumber] = matchFile;
-      }
-
-      return <Node>{ method, type, params, file, lineNumber, spaces };
-    } else {
-      return line;
-    }
-  });
-};
-
 // Process the provided stack trace
 const processStackTrace = (): void => {
   const rawContent = props.stackTrace;