Unit tests for TaskPanel

frontend/jest.config.js

@@ -1,9 +1,12 @@
 module.exports = {
     transform: {
         '^.+\\.ts?$': 'ts-jest',
-        '^.+\\.svelte$': 'svelte-jester',
+        '^.+\\.svelte$': [
+            'svelte-jester',
+            { "preprocess": true }
+        ]
     },
     testEnvironment: 'jsdom',
-    testRegex: '.*\\.test?\\.ts$',
+    testRegex: '.*\\.test?\\.[tj]s$',
     moduleFileExtensions: ['ts', 'js', 'svelte']
 };

frontend/src/ksp-submit-api.ts

@@ -12,9 +12,9 @@ async function getToken(): Promise<string | undefined> {
         return apitoken = token;
     }
     const form = doc.getElementById("apitoken") as HTMLFormElement
-    const op = form.elements.namedItem("op")!.value
+    const op = (form.elements.namedItem("op") as HTMLInputElement).value
-    const submit = form.elements.namedItem("submit")!.value
+    const submit = (form.elements.namedItem("submit") as HTMLInputElement).value
-    const csrfToken = form.elements.namedItem("_token")!.value
+    const csrfToken = (form.elements.namedItem("_token") as HTMLInputElement).value
     const body = `op=${encodeURIComponent(op)}&submit=${encodeURIComponent(submit)}&_token=${encodeURIComponent(csrfToken)}`
     console.log(`Creating new API token`)
     await fetch("/auth/apitoken.cgi", { method: "POST", body, headers: [["Content-Type", "application/x-www-form-urlencoded"]], redirect: "manual" })

frontend/src/tests/grabber.test.ts

@@ -2,7 +2,6 @@ import * as g from '../ksp-task-grabber'
 import { readFileSync, readdirSync } from 'fs';
 import { resolve } from 'path';
 import type { TaskDescriptor, TasksFile } from '../tasks';
-import { action_destroyer } from 'svelte/internal';
 
 const node_fetch: any = require('node-fetch')
 

frontend/src/tests/ui-jsdom.test.js

@@ -0,0 +1,96 @@
+const { readFileSync, readdirSync } = require('fs');
+const { resolve } = require('path');
+const TaskPanel = require('../TaskPanel.svelte').default
+
+
+const node_fetch = require('node-fetch')
+
+const delay = (time=5) => new Promise((resolve) => window.setTimeout(resolve, time))
+const allPromises = []
+
+global.fetch = function(url, init) {
+    const p = node_fetch(new URL(url, "https://ksp.mff.cuni.cz").href, init)
+    allPromises.push(p)
+    return p
+}
+
+const tasks_json = readFileSync("../tasks.json").toString()
+const tasks = JSON.parse(tasks_json)
+
+test("TaskPanel - display", async () => {
+    allPromises.length = 0
+
+    const element = document.createElement("div")
+    const tp = new TaskPanel({
+        target: element,
+        props: { tasks, selectedTaskId: "26-Z1-1" }
+    })
+    await Promise.all(allPromises)
+    await delay()
+    expect(element.querySelector("h3").textContent).toEqual("Kevin a magnety")
+    expect(element.querySelector(".leftfloat pre").textContent.trim()).toEqual("4\n+-\n+-\n-+\n+-")
+    expect(element.querySelector(".status").textContent.trim()).toEqual("26-Z1-1 | 8 bodů")
+    expect(element.textContent).toContain("Pro odevzdávání je potřeba se přihlásit.")
+})
+
+test("TaskPanel - solution", async () => {
+    allPromises.length = 0
+
+    const element = document.createElement("div")
+    const tp = new TaskPanel({
+        target: element,
+        props: { tasks, selectedTaskId: "26-Z1-1" }
+    })
+    await Promise.all(allPromises)
+    await delay()
+
+    const showSolution = element.querySelector(".solution a")
+    expect(showSolution).toBeTruthy()
+    showSolution.click()
+    await delay()
+
+    const sol = element.querySelector(".solution")
+    expect(sol.textContent).toContain("opravdu si chceš vyzradit řešení?")
+    sol.querySelector("p").remove()
+    const result = eval(sol.textContent.replace("=", ""))
+    const input = sol.querySelector("input")
+
+    input.value = result + 1
+    input.dispatchEvent(new Event('input', {
+        bubbles: true,
+        cancelable: true
+    }))
+    await delay()
+
+    expect(element.querySelector(".solution input")).toBe(input)
+    expect(element.querySelector(".solution").textContent).not.toContain("Načítám")
+
+
+    input.value = result
+    input.dispatchEvent(new Event('input', {
+        bubbles: true,
+        cancelable: true
+    }))
+    await delay()
+    expect(element.querySelector(".solution input")).toBeFalsy()
+    expect(element.querySelector(".solution").textContent).toContain("Načítám")
+    await Promise.all(allPromises)
+    await delay()
+
+    expect(sol.textContent).toContain("Magnety se přitahují tehdy, když mají naproti sobě opačné póly,")
+    expect(sol.textContent).toContain("Program (C)")
+
+    tp.$set({ selectedTaskId: "32-Z2-2" })
+    await delay()
+    await Promise.all(allPromises)
+    await delay()
+    // check that solution is not displayed
+    expect(element.querySelector(".solution").textContent.trim()).toEqual("Zobrazit řešení úlohy")
+
+    tp.$set({ selectedTaskId: "kucharka-zakladni-pole" })
+    await delay()
+    await Promise.all(allPromises)
+    await delay()
+    // solution does not make sense
+    expect(element.querySelector(".solution")).toBeNull()
+})

frontend/svelte.config.js

@@ -0,0 +1,7 @@
+const sveltePreprocess = require("svelte-preprocess");
+
+module.exports = {
+  preprocess: sveltePreprocess({
+    
+  }),
+};