feat: enable users to translate loading & error messages

__tests__/JSONSchemaViewer/__snapshots__/error.test.tsx.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`JSONSchemaViewer states Can render error when something bad happens 1`] = `
+<div>
+  Something bad happens : Resolver error
+</div>
+`;

__tests__/JSONSchemaViewer/error.test.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+// For typings autocomplete whatever your IDE
+import { expect, test, describe, jest } from "@jest/globals"
+
+import { create, act } from "react-test-renderer"
+
+import JSONSchemaViewer from "../../src/theme/JSONSchemaViewer/index";
+
+// Type to prevent creating invalid mocks
+import type { JSONSchema } from "../../src/theme/JSONSchemaViewer/types"
+
+// Type for react-test-renderer
+import type { ReactTestRenderer } from "react-test-renderer"
+
+jest.mock('@stoplight/json-ref-resolver', () => {
+    const resolve = jest.fn<() => Promise<JSONSchema>>().mockRejectedValue(new Error('Resolver error'));
+    return {
+      Resolver: jest.fn(() => ({ resolve }))
+    };
+});
+
+describe("JSONSchemaViewer states", () => {
+
+    test("Can render error when something bad happens", async () => {
+        const fakeSchema3 : JSONSchema = { "type": "object" }
+
+        // render the component
+        let root: ReactTestRenderer | undefined
+        await act(async () => {
+          root = create(<JSONSchemaViewer schema={fakeSchema3} />)
+        })
+
+        // make assertions on root
+        expect(root?.toJSON()).toMatchSnapshot()
+      })
+});

src/theme/JSONSchemaViewer/index.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from "react"
 import { Resolver } from "@stoplight/json-ref-resolver"
+import Translate from "@docusaurus/Translate"
 
 import { CreateNodes, Collapsible } from "./components/index"
 import { JSVOptionsContextProvider } from "./contexts/index"
@@ -28,12 +29,43 @@ type InnerViewerProperties = {
   viewerOptions?: Omit<JSVOptions, "fullSchema">
 }
 
+// Translated labels
+function Loading(): JSX.Element {
+  return (
+    <div>
+      <Translate
+        values={{
+          id: "json-schema.labels.loading",
+        }}
+      >
+        {"Loading ...."}
+      </Translate>
+    </div>
+  )
+}
+
+function ErrorOccurred(props: { error: Error }): JSX.Element {
+  const { error } = props
+  return (
+    <div>
+      <Translate
+        values={{
+          id: "json-schema.labels.errorOccurred",
+          message: error.message,
+        }}
+      >
+        {"Something bad happens : {message}"}
+      </Translate>
+    </div>
+  )
+}
+
 // Internal
 function JSONSchemaInnerViewer(props: InnerViewerProperties): JSX.Element {
   const { schema, viewerOptions } = props
   // Title of the schema, for user friendliness
   const title =
-    typeof schema !== "boolean" && schema?.title !== undefined
+    typeof schema !== "boolean" && schema.title !== undefined
       ? schema.title
       : "Schema"
 
@@ -80,9 +112,9 @@ export default function JSONSchemaViewer(props: Props): JSX.Element {
   }, [])
 
   if (error !== undefined) {
-    return <div>Something bad happens : {error.message}</div>
+    return <ErrorOccurred error={error} />
   } else if (resolvedSchema === undefined) {
-    return <div>Loading ....</div>
+    return <Loading />
   } else {
     return (
       <JSONSchemaInnerViewer