Merge pull request #314 from skohub-io/313-markdown-render

Add Markdown Rendering for Documentary Notes

Author: sroertgen

src/components/Concept.jsx

@@ -60,7 +60,9 @@ const Concept = ({
           <h3 id="note">Note</h3>
           <ul aria-labelledby="note">
             {i18n(language)(concept.note).map((note, i) => (
-              <li key={i}>{note}</li>
+              <li key={i}>
+                <Markdown>{note}</Markdown>
+              </li>
             ))}
           </ul>
         </div>
@@ -70,7 +72,9 @@ const Concept = ({
           <h3 id="changenote">ChangeNote</h3>
           <ul aria-labelledby="changenote">
             {i18n(language)(concept.changeNote).map((changeNote, i) => (
-              <li key={i}>{changeNote}</li>
+              <li key={i}>
+                <Markdown>{changeNote}</Markdown>
+              </li>
             ))}
           </ul>
         </div>
@@ -81,7 +85,9 @@ const Concept = ({
             <h3 id="editorialnote">EditorialNote</h3>
             <ul aria-labelledby="editorialnote">
               {i18n(language)(concept.editorialNote).map((editorialNote, i) => (
-                <li key={i}>{editorialNote}</li>
+                <li key={i}>
+                  <Markdown>{editorialNote}</Markdown>
+                </li>
               ))}
             </ul>
           </div>
@@ -91,7 +97,9 @@ const Concept = ({
           <h3 id="historynote">HistoryNote</h3>
           <ul aria-labelledby="historynote">
             {i18n(language)(concept.historyNote).map((historyNote, i) => (
-              <li key={i}>{historyNote}</li>
+              <li key={i}>
+                <Markdown>{historyNote}</Markdown>
+              </li>
             ))}
           </ul>
         </div>
@@ -101,7 +109,9 @@ const Concept = ({
           <h3 id="scopenote">ScopeNote</h3>
           <ul aria-labelledby="scopenote">
             {i18n(language)(concept.scopeNote).map((scopeNote, i) => (
-              <li key={i}>{scopeNote}</li>
+              <li key={i}>
+                <Markdown>{scopeNote}</Markdown>
+              </li>
             ))}
           </ul>
         </div>

test/concept.test.jsx

@@ -63,7 +63,11 @@ describe.concurrent("Concept", () => {
     expect(
       screen.getByRole("heading", { name: "Definition" })
     ).toBeInTheDocument()
-    expect(screen.getByText("Meine Definition")).toBeInTheDocument()
+    const definition = screen.getByText("Meine Definition")
+    expect(definition).toBeInTheDocument()
+
+    const linkElement = within(definition).getByRole("link", { name: /link/i })
+    expect(linkElement).toBeInTheDocument()
   })
 
   it("renders no definition if not provided in language", () => {
@@ -120,15 +124,25 @@ describe.concurrent("Concept", () => {
 
   it("renders examples", () => {
     render(<Concept pageContext={ConceptPC} />)
-    expect(
-      screen.getByRole("heading", { name: /^example$/i })
-    ).toBeInTheDocument()
+
+    const exampleHeading = screen.getByRole("heading", { name: /^example$/i })
+    expect(exampleHeading).toBeInTheDocument()
+
+    const example = screen.getByText(/Ein Beispiel/i)
+    expect(example).toBeInTheDocument()
+
+    const linkElement = within(example).getByRole("link", { name: /link/i })
+    expect(linkElement).toBeInTheDocument()
   })
 
   it("renders notes", () => {
     render(<Concept pageContext={ConceptPC} />)
 
-    expect(screen.getByText(/Meine Anmerkung/i)).toBeInTheDocument()
+    const note = screen.getByText(/Meine Anmerkung/i)
+    expect(note).toBeInTheDocument()
+
+    const linkElement = within(note).getByRole("link", { name: /link/i })
+    expect(linkElement).toBeInTheDocument()
 
     const list = screen.getByRole("list", {
       name: "Note",
@@ -141,7 +155,11 @@ describe.concurrent("Concept", () => {
   it("renders changeNotes", () => {
     render(<Concept pageContext={ConceptPC} />)
 
-    expect(screen.getByText(/Meine Change Note/i)).toBeInTheDocument()
+    const changeNote = screen.getByText(/Meine Change Note/i)
+    expect(changeNote).toBeInTheDocument()
+
+    const linkElement = within(changeNote).getByRole("link", { name: /link/i })
+    expect(linkElement).toBeInTheDocument()
 
     const list = screen.getByRole("list", {
       name: /changenote/i,
@@ -154,7 +172,13 @@ describe.concurrent("Concept", () => {
   it("renders editorialNotes", () => {
     render(<Concept pageContext={ConceptPC} />)
 
-    expect(screen.getByText(/Meine Editorial Note/i)).toBeInTheDocument()
+    const editorialNote = screen.getByText(/Meine Editorial Note/i)
+    expect(editorialNote).toBeInTheDocument()
+
+    const linkElement = within(editorialNote).getByRole("link", {
+      name: /link/i,
+    })
+    expect(linkElement).toBeInTheDocument()
 
     const list = screen.getByRole("list", {
       name: /editorialnote/i,
@@ -167,7 +191,11 @@ describe.concurrent("Concept", () => {
   it("renders historyNotes", () => {
     render(<Concept pageContext={ConceptPC} />)
 
-    expect(screen.getByText(/Meine History Note/i)).toBeInTheDocument()
+    const historyNote = screen.getByText(/Meine History Note/i)
+    expect(historyNote).toBeInTheDocument()
+
+    const linkElement = within(historyNote).getByRole("link", { name: /link/i })
+    expect(linkElement).toBeInTheDocument()
 
     const list = screen.getByRole("list", {
       name: /historynote/i,
@@ -180,7 +208,11 @@ describe.concurrent("Concept", () => {
   it("renders scopeNotes", () => {
     render(<Concept pageContext={ConceptPC} />)
 
-    expect(screen.getByText(/Meine Scope Note/i)).toBeInTheDocument()
+    const scopeNote = screen.getByText(/Meine Scope Note/i)
+    expect(scopeNote).toBeInTheDocument()
+
+    const linkElement = within(scopeNote).getByRole("link", { name: /link/i })
+    expect(linkElement).toBeInTheDocument()
 
     const list = screen.getByRole("list", {
       name: /scopenote/i,

test/data/pageContext.js

@@ -44,25 +44,31 @@ export const topConcept = {
     de: ["Verstecktes Label 1", "Verstecktes Label 2"],
   },
   definition: {
-    de: "Meine Definition",
+    de: "Meine Definition [Link](https://w3c.org)",
   },
   example: {
-    de: "Ein Beispiel",
+    de: "Ein Beispiel [Link](https://w3c.org)",
   },
   note: {
-    de: ["Meine Anmerkung", "Noch eine Anmerkung"],
+    de: ["Meine Anmerkung mit [Link](https://w3c.org)", "Noch eine Anmerkung"],
   },
   changeNote: {
-    de: ["Meine Change Note", "Noch eine Change Note"],
+    de: ["Meine Change Note [Link](https://w3c.org)", "Noch eine Change Note"],
   },
   editorialNote: {
-    de: ["Meine Editorial Note", "Noch eine Editorial Note"],
+    de: [
+      "Meine Editorial Note [Link](https://w3c.org)",
+      "Noch eine Editorial Note",
+    ],
   },
   historyNote: {
-    de: ["Meine History Note", "Noch eine History Note"],
+    de: [
+      "Meine History Note [Link](https://w3c.org)",
+      "Noch eine History Note",
+    ],
   },
   scopeNote: {
-    de: ["Meine Scope Note", "Noch eine Scope Note"],
+    de: ["Meine Scope Note [Link](https://w3c.org)", "Noch eine Scope Note"],
   },
   notation: ["1"],
   narrower: [concept2],