From 53c697312c0716b30f711197fae45ebd67e06e67 Mon Sep 17 00:00:00 2001 From: exyi Date: Sun, 18 Oct 2020 10:42:10 +0000 Subject: [PATCH] Unit tests for TaskPanel --- frontend/jest.config.js | 7 ++- frontend/src/ksp-submit-api.ts | 6 +- frontend/src/tests/grabber.test.ts | 1 - frontend/src/tests/ui-jsdom.test.js | 96 +++++++++++++++++++++++++++++ frontend/svelte.config.js | 7 +++ 5 files changed, 111 insertions(+), 6 deletions(-) create mode 100644 frontend/src/tests/ui-jsdom.test.js create mode 100644 frontend/svelte.config.js diff --git a/frontend/jest.config.js b/frontend/jest.config.js index 65c5413..0da4537 100644 --- a/frontend/jest.config.js +++ b/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'] }; diff --git a/frontend/src/ksp-submit-api.ts b/frontend/src/ksp-submit-api.ts index ff7c087..d255703 100644 --- a/frontend/src/ksp-submit-api.ts +++ b/frontend/src/ksp-submit-api.ts @@ -12,9 +12,9 @@ async function getToken(): Promise { return apitoken = token; } const form = doc.getElementById("apitoken") as HTMLFormElement - const op = form.elements.namedItem("op")!.value - const submit = form.elements.namedItem("submit")!.value - const csrfToken = form.elements.namedItem("_token")!.value + const op = (form.elements.namedItem("op") as HTMLInputElement).value + const submit = (form.elements.namedItem("submit") as HTMLInputElement).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" }) diff --git a/frontend/src/tests/grabber.test.ts b/frontend/src/tests/grabber.test.ts index 461b907..787061a 100644 --- a/frontend/src/tests/grabber.test.ts +++ b/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') diff --git a/frontend/src/tests/ui-jsdom.test.js b/frontend/src/tests/ui-jsdom.test.js new file mode 100644 index 0000000..1a0aa47 --- /dev/null +++ b/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() +}) diff --git a/frontend/svelte.config.js b/frontend/svelte.config.js new file mode 100644 index 0000000..0dff78b --- /dev/null +++ b/frontend/svelte.config.js @@ -0,0 +1,7 @@ +const sveltePreprocess = require("svelte-preprocess"); + +module.exports = { + preprocess: sveltePreprocess({ + + }), +};