@@ -24,58 +79,6 @@ const VisualOutputPane = ({ visuals, setVisuals }) => {
);
};
-const showVisuals = (visuals, output) =>
- visuals.map((v) => (v.showing ? v : showVisual(v, output)));
-
-const showVisual = (visual, output) => {
- switch (visual.origin) {
- case "sense_hat":
- output.current.textContent = JSON.stringify(visual.content);
- break;
- case "pygal":
- const chartContent = {
- ...visual.content,
- chart: {
- ...visual.content.chart,
- events: {
- ...visual.content.chart.events,
- load: function () {
- this.renderTo.style.overflow = "visible";
- },
- },
- },
- tooltip: {
- ...visual.content.tooltip,
- formatter:
- visual.content.chart.type === "pie"
- ? function () {
- return this.key + ": " + this.y;
- }
- : null,
- },
- };
- Highcharts.chart(output.current, chartContent);
- break;
- case "turtle":
- output.current.innerHTML = elementFromProps(visual.content).outerHTML;
- break;
- case "matplotlib":
- // convert visual.content from Uint8Array to jpg
- const img = document.createElement("img");
- img.style = "max-width: 100%; max-height: 100%;";
- img.src = `data:image/jpg;base64,${window.btoa(
- String.fromCharCode(...new Uint8Array(visual.content)),
- )}`;
- output.current.innerHTML = img.outerHTML;
- break;
- default:
- throw new Error(`Unsupported origin: ${visual.origin}`);
- }
-
- visual.showing = true;
- return visual;
-};
-
const elementFromProps = (map) => {
const tag = map.get("tag");
if (!tag) {
diff --git a/src/components/Editor/Runners/PythonRunner/PythonRunner.jsx b/src/components/Editor/Runners/PythonRunner/PythonRunner.jsx
index 48babc88b..85baefbbf 100644
--- a/src/components/Editor/Runners/PythonRunner/PythonRunner.jsx
+++ b/src/components/Editor/Runners/PythonRunner/PythonRunner.jsx
@@ -92,7 +92,10 @@ const PythonRunner = ({ outputPanels = ["text", "visual"] }) => {
}, [project, codeRunTriggered, senseHatAlwaysEnabled, skulptFallback, t]);
return (
<>
-
+
{
+ const [showModal, setShowModal] = useState(false);
+ const instructionsEditable = useSelector(
+ (state) => state.editor?.instructionsEditable,
+ );
+ const project = useSelector((state) => state.editor?.project);
const steps = useSelector((state) => state.instructions.project?.steps);
const quiz = useSelector((state) => state.instructions?.quiz);
const dispatch = useDispatch();
@@ -22,22 +37,30 @@ const InstructionsPanel = () => {
const stepContent = useRef();
const [isQuiz, setIsQuiz] = useState(false);
+ const [instructionsTab, setInstructionsTab] = useState(0);
const quizCompleted = useMemo(() => {
return quiz?.currentQuestion === quiz?.questionCount;
}, [quiz]);
const numberOfSteps = useSelector(
- (state) => state.instructions.project.steps.length,
+ (state) => state.instructions.project?.steps?.length || 0,
);
+ const hasInstructions = steps && steps.length > 0;
+ const hasMultipleSteps = numberOfSteps > 1;
+
const applySyntaxHighlighting = (container) => {
const codeElements = container.querySelectorAll(
- ".language-python, .language-html, .language-css",
+ ".language-python, .language-html, .language-css, .language-javascript",
);
codeElements.forEach((element) => {
- window.Prism.highlightElement(element);
+ if (window.syntaxHighlight) {
+ window.syntaxHighlight.highlightElement(element);
+ } else {
+ Prism.highlightElement(element);
+ }
});
};
@@ -54,17 +77,27 @@ const InstructionsPanel = () => {
useEffect(() => {
const setStepContent = (content) => {
- stepContent.current.parentElement.scrollTo({ top: 0 });
- stepContent.current.innerHTML = content;
- applySyntaxHighlighting(stepContent.current);
+ if (stepContent.current) {
+ stepContent.current?.parentElement.scrollTo({ top: 0 });
+ stepContent.current.innerHTML = content;
+ applySyntaxHighlighting(stepContent.current);
+ }
};
if (isQuiz && !quizCompleted) {
setStepContent(quiz.questions[quiz.currentQuestion]);
document.dispatchEvent(quizReadyEvent);
- } else if (steps[currentStepPosition]) {
+ } else if (hasInstructions && steps[currentStepPosition]) {
setStepContent(steps[currentStepPosition].content);
}
- }, [steps, currentStepPosition, quiz, quizCompleted, isQuiz]);
+ }, [
+ hasInstructions,
+ steps,
+ currentStepPosition,
+ quiz,
+ quizCompleted,
+ isQuiz,
+ instructionsTab,
+ ]);
useEffect(() => {
if (quizCompleted && isQuiz) {
@@ -76,13 +109,145 @@ const InstructionsPanel = () => {
}
}, [quizCompleted, currentStepPosition, numberOfSteps, dispatch, isQuiz]);
+ const addInstructions = () => {
+ dispatch(setProjectInstructions(demoInstructions));
+ };
+
+ const removeInstructions = () => {
+ dispatch(setProjectInstructions(null));
+ setShowModal(false);
+ };
+
+ const AddInstructionsButton = () => {
+ return (
+
+ );
+ };
+
+ const RemoveInstructionsButton = () => {
+ return (
+ {
+ setShowModal(true);
+ }}
+ fill
+ textAlways
+ small
+ />
+ );
+ };
+ const onChange = (e) => {
+ dispatch(setProjectInstructions(e.target.value));
+ };
+
return (
-
+
+ {instructionsEditable ? (
+ hasInstructions ? (
+
+
{
+ setInstructionsTab(index);
+ }}
+ >
+
+ {t("instructionsPanel.edit")}
+ {t("instructionsPanel.view")}
+
+
+
+
+
+ <>
+
+
+
+
+
+ ) : (
+
+
+ {t("instructionsPanel.emptyState.purpose")}
+
+
+ {t("instructionsPanel.emptyState.location")}
+
+
+ ,
+ ]}
+ />
+
+
+ {t("instructionsPanel.emptyState.edits")}
+
+
+ )
+ ) : (
+
+ )}
+
step 0
" },
- {
- content: `step 1
- print('hello')
- Hello world
.hello { color: purple }
- `,
- },
- ],
+}));
+
+describe("When instructionsEditable is true", () => {
+ describe("When there are instructions", () => {
+ let store;
+
+ beforeAll(() => {
+ const root = global.document.createElement("div");
+ root.setAttribute("id", "app");
+ global.document.body.appendChild(root);
+ Modal.setAppElement("#app");
+ });
+
+ beforeEach(() => {
+ const mockStore = configureStore([]);
+ const initialState = {
+ editor: {
+ project: {},
+ instructionsEditable: true,
},
- quiz: {},
- currentStepPosition: 1,
- },
- };
- const store = mockStore(initialState);
- render(
-
-
- ,
- );
- });
+ instructions: {
+ project: {
+ steps: [{ content: "instructions" }],
+ },
+ quiz: {},
+ currentStepPosition: 1,
+ },
+ };
+ store = mockStore(initialState);
+ render(
+
+
+ ,
+ );
+ });
- test("Renders with correct instruction step content", () => {
- expect(screen.queryByText("step 1")).toBeInTheDocument();
- });
+ test("Renders two tab titles", () => {
+ expect(screen.getAllByRole("tab")).toHaveLength(2);
+ });
- test("Scrolls instructions to the top", () => {
- expect(window.HTMLElement.prototype.scrollTo).toHaveBeenCalledWith({
- top: 0,
+ test("Renders two tab panels", () => {
+ expect(screen.getAllByRole("tabpanel")).toHaveLength(2);
});
- });
- test("Renders the progress bar", () => {
- expect(screen.queryByRole("progressbar")).toBeInTheDocument();
- });
+ test("Renders the edit panel", () => {
+ expect(screen.getByTestId("instructionTextarea")).toBeInTheDocument();
+ });
- test("Applies syntax highlighting to python code", () => {
- const codeElement = document.getElementsByClassName("language-python")[0];
- expect(window.Prism.highlightElement).toHaveBeenCalledWith(codeElement);
- });
+ test("saves content", async () => {
+ const textarea = screen.getByTestId("instructionTextarea");
+ const testString = "SomeInstructions";
+
+ fireEvent.change(textarea, { target: { value: testString } });
+
+ await waitFor(() => {
+ expect(store.getActions()).toEqual(
+ expect.arrayContaining([setProjectInstructions(testString)]),
+ );
+ });
+ });
+
+ test("Does not render the add instructions button", () => {
+ expect(
+ screen.queryByText("instructionsPanel.emptyState.addInstructions"),
+ ).not.toBeInTheDocument();
+ });
- test("Applies syntax highlighting to HTML code", () => {
- const codeElement = document.getElementsByClassName("language-html")[0];
- expect(window.Prism.highlightElement).toHaveBeenCalledWith(codeElement);
+ test("Renders the remove instructions button", () => {
+ expect(
+ screen.queryByText("instructionsPanel.removeInstructions"),
+ ).toBeInTheDocument();
+ });
+
+ test("Remove instructions modal is opened", () => {
+ const button = screen.queryByText("instructionsPanel.removeInstructions");
+ fireEvent.click(button);
+
+ expect(
+ screen.queryByText("instructionsPanel.removeInstructionsModal.heading"),
+ ).toBeInTheDocument();
+ });
});
- test("Applies syntax highlighting to CSS code", () => {
- const codeElement = document.getElementsByClassName("language-css")[0];
- expect(window.Prism.highlightElement).toHaveBeenCalledWith(codeElement);
+ describe("When there are no instructions", () => {
+ let store;
+
+ beforeEach(() => {
+ const mockStore = configureStore([]);
+ const initialState = {
+ editor: {
+ project: {},
+ instructionsEditable: true,
+ },
+ instructions: {
+ project: {
+ steps: [],
+ },
+ quiz: {},
+ currentStepPosition: 1,
+ },
+ };
+ store = mockStore(initialState);
+ render(
+
+
+ ,
+ );
+ });
+
+ test("Renders the add instrucitons button", () => {
+ expect(
+ screen.queryByText("instructionsPanel.emptyState.addInstructions"),
+ ).toBeInTheDocument();
+ });
+
+ test("Does not render the remove instructions button", () => {
+ expect(
+ screen.queryByText("instructionsPanel.removeInstructions"),
+ ).not.toBeInTheDocument();
+ });
+
+ test("Clicking the add instructions button adds the demo instructions", () => {
+ const addInstructionsButton = screen.getByText(
+ "instructionsPanel.emptyState.addInstructions",
+ );
+ act(() => {
+ fireEvent.click(addInstructionsButton);
+ });
+
+ expect(store.getActions()).toEqual(
+ expect.arrayContaining([setProjectInstructions("demoInstructions.md")]),
+ );
+ });
+
+ test("Renders the instructions explanation", () => {
+ expect(
+ screen.queryByText("instructionsPanel.emptyState.purpose"),
+ ).toBeInTheDocument();
+ });
});
});
-describe("It renders a quiz when it has one", () => {
- const quizHandler = jest.fn();
+describe("When instructions are not editable", () => {
+ describe("When there are no instructions", () => {
+ beforeEach(() => {
+ const mockStore = configureStore([]);
+ const initialState = {
+ editor: {
+ project: {},
+ instructionsEditable: false,
+ },
+ instructions: {
+ project: {
+ steps: [],
+ },
+ quiz: {},
+ currentStepPosition: 1,
+ },
+ };
+ const store = mockStore(initialState);
+ render(
+
+
+ ,
+ );
+ });
+
+ test("Does not render the add instructions button", () => {
+ expect(
+ screen.queryByText("instructionsPanel.emptyState.addInstructions"),
+ ).not.toBeInTheDocument();
+ });
+
+ test("Does not render the remove instructions button", () => {
+ expect(
+ screen.queryByText("instructionsPanel.removeInstructions"),
+ ).not.toBeInTheDocument();
+ });
+
+ test("Does not render the instructions explanation", () => {
+ expect(
+ screen.queryByText("instructionsPanel.emptyState.purpose"),
+ ).not.toBeInTheDocument();
+ });
+
+ test("It renders without crashing", () => {
+ expect(
+ screen.queryByText("instructionsPanel.projectSteps"),
+ ).toBeInTheDocument();
+ });
- beforeAll(() => {
- document.addEventListener("editor-quizReady", quizHandler);
+ test("Does not render the progress bar", () => {
+ expect(screen.queryByRole("progressbar")).not.toBeInTheDocument();
+ });
});
- beforeEach(() => {
- const mockStore = configureStore([]);
- const initialState = {
- instructions: {
- project: {
- steps: [
- { content: "step 0
" },
- { content: "step 1
", knowledgeQuiz: "quizPath" },
- ],
+
+ describe("When there are instructions", () => {
+ beforeEach(() => {
+ const mockStore = configureStore([]);
+ const initialState = {
+ editor: {
+ project: {},
+ instructionsEditable: false,
},
- quiz: {
- questions: [
- "Test quiz
step 1
print('hello')",
- ],
- questionCount: 1,
- currentQuestion: 0,
+ instructions: {
+ project: {
+ steps: [
+ { content: "step 0
" },
+ {
+ content: `step 1
+ print('hello')
+ Hello world
.hello { color: purple }
+ const element = document.getElementById("my-element")
+ `,
+ },
+ ],
+ },
+ quiz: {},
+ currentStepPosition: 1,
},
- currentStepPosition: 1,
- },
- };
- const store = mockStore(initialState);
- render(
-
-
- ,
- );
- });
+ };
+ const store = mockStore(initialState);
+ render(
+
+
+ ,
+ );
+ });
- test("Renders the quiz content", () => {
- expect(screen.queryByText("Test quiz")).toBeInTheDocument();
- });
+ test("Renders no tab titles", () => {
+ expect(screen.queryAllByRole("tab")).toHaveLength(0);
+ });
+
+ test("Renders no tab panels", () => {
+ expect(screen.queryAllByRole("tabpanel")).toHaveLength(0);
+ });
+
+ test("Renders with correct instruction step content", () => {
+ expect(screen.queryByText("step 1")).toBeInTheDocument();
+ });
+
+ test("Scrolls instructions to the top", () => {
+ expect(window.HTMLElement.prototype.scrollTo).toHaveBeenCalledWith({
+ top: 0,
+ });
+ });
- test("Scrolls instructions to the top", () => {
- expect(window.HTMLElement.prototype.scrollTo).toHaveBeenCalledWith({
- top: 0,
+ test("Renders the progress bar", () => {
+ expect(screen.queryByRole("progressbar")).toBeInTheDocument();
+ });
+
+ test("Applies syntax highlighting to python code", () => {
+ const codeElement = document.getElementsByClassName("language-python")[0];
+ expect(Prism.highlightElement).toHaveBeenCalledWith(codeElement);
+ });
+
+ test("Applies syntax highlighting to HTML code", () => {
+ const codeElement = document.getElementsByClassName("language-html")[0];
+ expect(Prism.highlightElement).toHaveBeenCalledWith(codeElement);
+ });
+
+ test("Applies syntax highlighting to CSS code", () => {
+ const codeElement = document.getElementsByClassName("language-css")[0];
+ expect(Prism.highlightElement).toHaveBeenCalledWith(codeElement);
+ });
+
+ test("Applies syntax highlighting to javascript code", () => {
+ const codeElement = document.getElementsByClassName(
+ "language-javascript",
+ )[0];
+ expect(Prism.highlightElement).toHaveBeenCalledWith(codeElement);
});
});
- test("Retains the progress bar", () => {
- expect(screen.queryByRole("progressbar")).toBeInTheDocument();
+ describe("When window.syntaxHighlight is defined", () => {
+ beforeEach(() => {
+ window.syntaxHighlight = {
+ highlightElement: jest.fn(),
+ };
+ const mockStore = configureStore([]);
+ const initialState = {
+ editor: {
+ project: {},
+ instructionsEditable: false,
+ },
+ instructions: {
+ project: {
+ steps: [
+ {
+ content: "print('hello')",
+ },
+ ],
+ },
+ quiz: {},
+ currentStepPosition: 0,
+ },
+ };
+ const store = mockStore(initialState);
+ render(
+
+
+ ,
+ );
+ });
+
+ test("Applies syntax highlighting using window.syntaxHighlight", () => {
+ const codeElement = document.getElementsByClassName("language-python")[0];
+ expect(window.syntaxHighlight.highlightElement).toHaveBeenCalledWith(
+ codeElement,
+ );
+ });
+
+ afterEach(() => {
+ delete window.syntaxHighlight;
+ });
});
- test("Applies syntax highlighting", () => {
- const codeElement = document.getElementsByClassName("language-python")[0];
- expect(window.Prism.highlightElement).toHaveBeenCalledWith(codeElement);
+ describe("When there is only one step", () => {
+ beforeEach(() => {
+ const mockStore = configureStore([]);
+ const initialState = {
+ editor: {
+ instructionsEditable: false,
+ },
+ instructions: {
+ project: {
+ steps: [{ content: "step 0
" }],
+ },
+ quiz: {},
+ currentStepPosition: 0,
+ },
+ };
+ const store = mockStore(initialState);
+ render(
+
+
+ ,
+ );
+ });
+
+ test("Does not render the progress bar", () => {
+ expect(screen.queryByRole("progressbar")).not.toBeInTheDocument();
+ });
});
- test("Fires a quizIsReady event", () => {
- expect(quizHandler).toHaveBeenCalled();
+ describe("When there is a quiz", () => {
+ const quizHandler = jest.fn();
+
+ beforeAll(() => {
+ document.addEventListener("editor-quizReady", quizHandler);
+ });
+ beforeEach(() => {
+ const mockStore = configureStore([]);
+ const initialState = {
+ instructions: {
+ project: {
+ steps: [
+ { content: "step 0
" },
+ { content: "step 1
", knowledgeQuiz: "quizPath" },
+ ],
+ },
+ quiz: {
+ questions: [
+ "Test quiz
step 1
print('hello')",
+ ],
+ questionCount: 1,
+ currentQuestion: 0,
+ },
+ currentStepPosition: 1,
+ },
+ };
+ const store = mockStore(initialState);
+ render(
+
+
+ ,
+ );
+ });
+
+ test("Renders the quiz content", () => {
+ expect(screen.queryByText("Test quiz")).toBeInTheDocument();
+ });
+
+ test("Scrolls instructions to the top", () => {
+ expect(window.HTMLElement.prototype.scrollTo).toHaveBeenCalledWith({
+ top: 0,
+ });
+ });
+
+ test("Retains the progress bar", () => {
+ expect(screen.queryByRole("progressbar")).toBeInTheDocument();
+ });
+
+ test("Applies syntax highlighting", () => {
+ const codeElement = document.getElementsByClassName("language-python")[0];
+ expect(Prism.highlightElement).toHaveBeenCalledWith(codeElement);
+ });
+
+ test("Fires a quizIsReady event", () => {
+ expect(quizHandler).toHaveBeenCalled();
+ });
});
});
diff --git a/src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.jsx b/src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.jsx
index 01487a7da..27d4993ed 100644
--- a/src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.jsx
+++ b/src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.jsx
@@ -30,6 +30,7 @@ const ProgressBar = () => {
const goToPreviousStep = () => {
dispatch(setCurrentStepPosition(Math.max(currentStepPosition - 1, 0)));
};
+
return (
';
+ let generatedHtml;
+ beforeEach(() => {
+ const middlewares = [];
+ const mockStore = configureStore(middlewares);
+ const initialState = {
+ editor: {
+ project: {
+ components: [
+ { name: "index", extension: "html", content: mediaHTML },
+ ],
+ image_list: [
+ {
+ filename: "image.jpeg",
+ url: "https://example.com/image.jpeg",
+ },
+ ],
+ videos: [
+ {
+ filename: "video.mp4",
+ url: "https://example.com/video.mp4",
+ },
+ ],
+ audio: [
+ {
+ filename: "audio.mp3",
+ url: "https://example.com/audio.mp3",
+ },
+ ],
+ },
+ focussedFileIndices: [0],
+ openFiles: [["index.html"]],
+ codeRunTriggered: true,
+ codeHasBeenRun: true,
+ errorModalShowing: false,
+ },
+ };
+ const store = mockStore(initialState);
+ render(
+ 
{
+ expect(generatedHtml).toContain(
+ '