refactor: add func getNlsConfiguration & tests

This PR refactors part of vscode.ts and adds a function to get the NLS
Configuration.

This makes the code more readable and easier to test.

And it adds multiple tests for this part of the codebase.

Author: jsjoeio

src/browser/pages/vscode.ts

@@ -5,18 +5,54 @@ const options = getOptions()
 // TODO: Add proper types.
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-let nlsConfig: any
+export const nlsConfigElementId = "vscode-remote-nls-configuration"
+
+type NlsConfiguration = {
+  locale: string
+  availableLanguages: { [key: string]: string } | {}
+  _languagePackId?: string
+  _translationsConfigFile?: string
+  _cacheRoot?: string
+  _resolvedLanguagePackCoreLocation?: string
+  _corruptedFile?: string
+  _languagePackSupport?: boolean
+  loadBundle?: any
+}
+
+/**
+ * A helper function to get the NLS Configuration settings.
+ *
+ * This is used by VSCode for localizations (i.e. changing
+ * the display language).
+ **/
+export function getNlsConfiguration(document: Document) {
+  const nlsConfigElement = document?.getElementById(nlsConfigElementId)
+  const nlsConfig = nlsConfigElement?.getAttribute("data-settings")
+
+  if (!document || !nlsConfigElement || !nlsConfig) {
+    return undefined
+  }
+
+  try {
+    return JSON.parse(nlsConfig) as NlsConfiguration
+  } catch (error) {
+    console.error("[vscode] Failed to read or parse the NLS configuration.", error)
+    return undefined
+  }
+}
+
+let nlsConfig: NlsConfiguration | undefined
 try {
-  nlsConfig = JSON.parse(document.getElementById("vscode-remote-nls-configuration")!.getAttribute("data-settings")!)
-  if (nlsConfig._resolvedLanguagePackCoreLocation) {
+  nlsConfig = getNlsConfiguration(document)
+  if (nlsConfig?._resolvedLanguagePackCoreLocation) {
     const bundles = Object.create(null)
     nlsConfig.loadBundle = (bundle: any, _language: any, cb: any): void => {
       const result = bundles[bundle]
       if (result) {
         return cb(undefined, result)
       }
       // FIXME: Only works if path separators are /.
-      const path = nlsConfig._resolvedLanguagePackCoreLocation + "/" + bundle.replace(/\//g, "!") + ".nls.json"
+      const path = nlsConfig?._resolvedLanguagePackCoreLocation + "/" + bundle.replace(/\//g, "!") + ".nls.json"
       fetch(`${options.base}/vscode/resource/?path=${encodeURIComponent(path)}`)
         .then((response) => response.json())
         .then((json) => {

test/unit/browser/vscode.test.ts

@@ -0,0 +1,88 @@
+/**
+ * @jest-environment jsdom
+ */
+import { JSDOM } from "jsdom"
+import { getNlsConfiguration, nlsConfigElementId } from "../../../src/browser/pages/vscode"
+import { createLoggerMock } from "../../utils/helpers"
+
+describe("vscode", () => {
+  describe("getNlsConfiguration", () => {
+    const loggerModule = createLoggerMock()
+    beforeEach(() => {
+      jest.clearAllMocks()
+      jest.mock("@coder/logger", () => loggerModule)
+      const { window } = new JSDOM()
+      global.window = window as unknown as Window & typeof globalThis
+      global.document = window.document
+      global.navigator = window.navigator
+      global.location = window.location
+    })
+
+    afterAll(() => {
+      jest.restoreAllMocks()
+    })
+
+    it("should return undefined if Document is undefined", () => {
+      const actual = getNlsConfiguration(undefined as any as Document)
+      const expected = undefined
+      expect(actual).toBe(expected)
+    })
+    it("should return undefined if no nlsConfigElement", () => {
+      const actual = getNlsConfiguration(global.document)
+      const expected = undefined
+      expect(actual).toBe(expected)
+    })
+    it("should return undefined if no nlsConfig", () => {
+      const mockElement = document.createElement("div")
+      mockElement.setAttribute("id", nlsConfigElementId)
+      document.body.appendChild(mockElement)
+
+      const actual = getNlsConfiguration(document)
+      const expected = undefined
+      expect(actual).toBe(expected)
+
+      document.body.removeChild(mockElement)
+    })
+    it("should log an error if it can't parse the nlsConfig", () => {
+      const consoleError = console.error
+      let errorMessage = ""
+
+      console.error = (x) => {
+        errorMessage = x
+      }
+
+      const mockElement = document.createElement("div")
+      const dataSettings = {
+        first: "Jane",
+        last: "Doe",
+      }
+
+      mockElement.setAttribute("id", nlsConfigElementId)
+      mockElement.setAttribute("data-settings", JSON.stringify(dataSettings) + ",")
+      document.body.appendChild(mockElement)
+
+      getNlsConfiguration(global.document)
+
+      expect(errorMessage).toBe("[vscode] Failed to read or parse the NLS configuration.")
+
+      console.error = consoleError
+      document.body.removeChild(mockElement)
+    })
+    it("should return the correct configuration", () => {
+      const mockElement = document.createElement("div")
+      const dataSettings = {
+        first: "Jane",
+        last: "Doe",
+      }
+
+      mockElement.setAttribute("id", nlsConfigElementId)
+      mockElement.setAttribute("data-settings", JSON.stringify(dataSettings))
+      document.body.appendChild(mockElement)
+      // TODO add element to the Dom
+      // TODO test when DOM is there b
+      const actual = getNlsConfiguration(global.document)
+      expect(actual).toStrictEqual(dataSettings)
+      document.body.removeChild(mockElement)
+    })
+  })
+})