tidying and adding test

RaspberryPiFoundation · Dec 1, 2023 · b2bcdb3 · b2bcdb3
1 parent 9c46643
commit b2bcdb3
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 8 deletions.
diff --git a/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx b/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx
@@ -15,14 +15,10 @@ const InstructionsPanel = () => {
   const stepContent = useRef();
 
   const applySyntaxHighlighting = (container) => {
-    const elements = container.querySelectorAll(".language-python");
-    console.log("There are", elements.length, "relevant elements to highlight");
+    const codeElements = container.querySelectorAll(".language-python");
 
-    elements.forEach((element) => {
-      if (element.innerText !== "print") {
-        console.log(element.innerText);
-        window.Prism.highlightElement(element);
-      }
+    codeElements.forEach((element) => {
+      window.Prism.highlightElement(element);
     });
   };
 

diff --git a/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.test.js b/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.test.js
@@ -4,13 +4,22 @@ import { Provider } from "react-redux";
 import configureStore from "redux-mock-store";
 
 window.HTMLElement.prototype.scrollTo = jest.fn();
+window.Prism = {
+  highlightElement: jest.fn(),
+};
 
 beforeEach(() => {
   const mockStore = configureStore([]);
   const initialState = {
     instructions: {
       project: {
-        steps: [{ content: "<p>step 0</p>" }, { content: "<p>step 1</p>" }],
+        steps: [
+          { content: "<p>step 0</p>" },
+          {
+            content:
+              "<p>step 1</p><code class='language-python'>print('hello')</code>",
+          },
+        ],
       },
       currentStepPosition: 1,
     },
@@ -32,3 +41,8 @@ test("Scrolls instructions to the top", () => {
     top: 0,
   });
 });
+
+test("Applies syntax highlighting", () => {
+  const codeElement = document.getElementsByClassName("language-python")[0];
+  expect(window.Prism.highlightElement).toHaveBeenCalledWith(codeElement);
+});