Added integration tests for settings

coderPaddyS · coderPaddyS · commit 743b7448f476 · 2022-03-08T23:34:19.000+01:00
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "@sveltejs/kit": "next",
     "@testing-library/jest-dom": "^5.14.0",
     "@testing-library/svelte": "^3.0.0",
+    "@testing-library/user-event": "^14.0.0-beta",
     "@types/jest": "^27.0.0",
     "@types/testing-library__jest-dom": "^5.14.0",
     "babel-jest": "^27.0.0",
diff --git a/src/__tests__/integration/Settings.test.ts b/src/__tests__/integration/Settings.test.ts
@@ -0,0 +1,134 @@
+
+import { Framework } from "$lib/controller/framework";
+import { BlacklistEntry } from "$lib/model/tables/blacklist/Blacklist";
+import { jest } from "@jest/globals";
+import { ServerMock } from "./__setup__/serverMock";
+import { AliasSuggestionsEntry } from "$lib/model/tables/suggestions/AliasSuggestions";
+import type { Alias } from "$lib/model/tables/official/OfficialAliases";
+import { matchers } from "./__setup__/matcher";
+import render from "./__setup__/pageRenderer";
+import { clickOnButtonForRows, clickOnButtonForSomeRows, getAllInputs, getAllRows, setValueOfInput } from "./__setup__/helpers";
+import { BUTTON, INPUT } from "./__setup__/constants";
+import { fireEvent } from "@testing-library/svelte";
+
+class OpenFramework extends Framework {
+    public constructor() {
+        super();
+    }
+}
+
+expect.extend(matchers);
+
+describe("Testing interactions of settings as user", () => {
+
+    const entries = [
+        new AliasSuggestionsEntry("Infobau", "50.34", "-", 503400000, 10, 0, "tester"),
+        new AliasSuggestionsEntry("Mathebau", "20.30", "-", 203000000, 8, 1, "tester2"),
+        new AliasSuggestionsEntry("Seminarraum", "50.34", "-108", 503499108, 11, 3, "tester3"),
+        new AliasSuggestionsEntry("HSaF", "50.36", "-", 503600000, 1, 2, "tester4"),
+        new AliasSuggestionsEntry("Hörsaal am Fasanen", "50.36", "-", 503600000, 0, 7, "tester3")  
+    ];
+
+    const originalWarn = console.warn.bind(console.warn)
+    let page: HTMLElement;
+
+    let framework: OpenFramework;
+    let serverMock: ServerMock;
+    let fetchBackend: (body: string) => Promise<any>;
+
+    beforeAll(() => {
+        serverMock = new ServerMock([], [], []);
+        fetchBackend = serverMock.getFetchBackendMock();
+        framework = new OpenFramework();
+        Framework['instance'] = framework;
+        framework['backend']['fetchBackend'] = fetchBackend;
+    
+        console.warn = (msg) => !msg.toString().includes('prop') && originalWarn(msg);
+    });
+
+    afterAll(() => {
+        console.warn = originalWarn
+    });
+
+    describe("setting value", () => {
+
+        beforeEach(async () => {
+            serverMock.setBlacklist([]);
+            serverMock.setOfficial([]);
+            serverMock.setSuggestions([...entries]);
+            page = await render.settings();
+            await setValueOfInput(page, INPUT.SETTINGS.MIN_POSITIVE_SUGGESTION, 0);
+            await setValueOfInput(page, INPUT.SETTINGS.MIN_NEGATIVE_SUGGESTION, 0);
+        });
+
+        test.each([
+            [0, [0,1,2,3,4], []],
+            [-1, [0,1,2,3,4], []],
+            [1, [0,1,2,3], [4]],
+            [10, [0,2], [1,3,4]],
+            [42, [], [0,1,2,3,4]]
+        ])(`upvotes`, async (value: number, shown: number[], notShown: number[]) => {
+            page = await render.suggestion();
+            expect(page).toHaveAllRows(entries);
+
+            page = await render.settings();
+            await setValueOfInput(page, INPUT.SETTINGS.MIN_POSITIVE_SUGGESTION, value);
+
+            page = await render.suggestion();
+            if (shown.length > 0) {
+                expect(page).toHaveSomeRows(shown, entries);
+            }
+            if (notShown.length > 0) {
+                expect(page).not.toHaveSomeRows(notShown, entries);
+            }
+            expect(serverMock.getSuggestions()).toEqual(entries);
+        });
+
+        test.each([
+            [0, [0,1,2,3,4], []],
+            [-1, [0,1,2,3,4], []],
+            [1, [1,2,3,4], [0]],
+            [5, [4], [0,1,2,3]],
+            [42, [], [0,1,2,3,4]]
+        ])(`downvotes`, async (value: number, shown: number[], notShown: number[]) => {
+            page = await render.suggestion();
+            expect(page).toHaveAllRows(entries);
+
+            page = await render.settings();
+            await setValueOfInput(page, INPUT.SETTINGS.MIN_NEGATIVE_SUGGESTION, value);
+
+            page = await render.suggestion();
+            if (shown.length > 0) {
+                expect(page).toHaveSomeRows(shown, entries);
+            }
+            if (notShown.length > 0) {
+                expect(page).not.toHaveSomeRows(notShown, entries);
+            }
+            expect(serverMock.getSuggestions()).toEqual(entries);
+        });
+
+        test.each([
+            [1, -1, [0,1,2,3], [4]],
+            [4, 3, [2], [0,1,3,4]],
+            [1, 1, [1,2,3], [0,4]],
+            [-5, -8, [0,1,2,3,4], []],
+            [42, 69, [], [0,1,2,3,4]]
+        ])(`both`, async (upvotes: number, downvotes: number, shown: number[], notShown: number[]) => {
+            page = await render.suggestion();
+            expect(page).toHaveAllRows(entries);
+
+            page = await render.settings();
+            await setValueOfInput(page, INPUT.SETTINGS.MIN_POSITIVE_SUGGESTION, upvotes);
+            await setValueOfInput(page, INPUT.SETTINGS.MIN_NEGATIVE_SUGGESTION, downvotes);
+
+            page = await render.suggestion();
+            if (shown.length > 0) {
+                expect(page).toHaveSomeRows(shown, entries);
+            }
+            if (notShown.length > 0) {
+                expect(page).not.toHaveSomeRows(notShown, entries);
+            }
+            expect(serverMock.getSuggestions()).toEqual(entries);
+        });
+    });
+});
diff --git a/src/__tests__/integration/Suggestions.test.ts b/src/__tests__/integration/Suggestions.test.ts
@@ -34,7 +34,7 @@ describe("Testing interactions of suggestions as user", () => {
         Framework['instance'] = framework;
         framework['backend']['fetchBackend'] = fetchBackend;
     
-        console.warn = (msg) => !msg.toString().includes('prop') && originalWarn(msg)
+        console.warn = (msg) => !msg.toString().includes('prop') && originalWarn(msg);
     });
 
     afterAll(() => {
diff --git a/src/__tests__/integration/__setup__/constants.ts b/src/__tests__/integration/__setup__/constants.ts
@@ -15,4 +15,14 @@ export const BUTTON = {
         DELETE: 0,
         BLACKLIST: 1
     }
+}
+
+export const INPUT = {
+    BLACKLIST: {
+        ADD: 0
+    },
+    SETTINGS: {
+        MIN_NEGATIVE_SUGGESTION: 0,
+        MIN_POSITIVE_SUGGESTION: 1,
+    }
 }
diff --git a/src/__tests__/integration/__setup__/helpers.ts b/src/__tests__/integration/__setup__/helpers.ts
@@ -1,4 +1,5 @@
 import { fireEvent } from "@testing-library/dom";
+import userEvent from "@testing-library/user-event";
 
 export function getAllRows(page: HTMLElement): HTMLCollection {
     return page.getElementsByClassName("row");
@@ -8,6 +9,10 @@ export function getAllButtons(page: HTMLElement): HTMLCollection {
     return page.getElementsByTagName("button");
 }
 
+export function getAllInputs(page: HTMLElement): HTMLCollection {
+    return page.getElementsByTagName("input");
+}
+
 export function clickOnButtonForRows(page: HTMLElement, buttonIndex: number) {
     let elements = getAllRows(page);
     for (let i = 0; i < elements.length; ++i) {
@@ -18,4 +23,8 @@ export function clickOnButtonForRows(page: HTMLElement, buttonIndex: number) {
 export function clickOnButtonForSomeRows(page: HTMLElement, indices: number[], buttonIndex: number) {
     let elements = getAllRows(page);
     indices.forEach(index => fireEvent.click(getAllButtons(elements[index] as HTMLElement)[buttonIndex]))
+}
+
+export async function setValueOfInput(page: HTMLElement, index: number, value: string | number) {
+    await fireEvent.input(getAllInputs(page)[index], {target: {value: String(value)}})
 }
diff --git a/src/__tests__/integration/__setup__/pageRenderer.ts b/src/__tests__/integration/__setup__/pageRenderer.ts
@@ -4,6 +4,7 @@ import Svelte__Blacklist from "$lib/../routes/admin/panel/blacklist/index.svelte
 import Svelte__Official from "$lib/../routes/admin/panel/alias/index.svelte";
 import Svelte__Suggestions from "$lib/../routes/admin/panel/suggestions/index.svelte";
 import Svelte__Changes from "$lib/../routes/admin/panel/changes/index.svelte";
+import Svelte__Settings from "$lib/../routes/admin/panel/settings/index.svelte";
 import Svelte__Dashboard from "$lib/../routes/admin/panel/index.svelte";
 
 async function renderBlacklist(): Promise<HTMLElement> {
@@ -51,12 +52,22 @@ async function renderDashboard(): Promise<HTMLElement> {
     return page;
 }
 
+async function renderSettings(): Promise<HTMLElement> {
+    cleanup();
+    let page = r(Svelte__Settings).container;
+    // Cannot intercept on component awaiting its promise, which is resolved immediately
+    // Therefore let the browser finish the rendering of the component by awaiting a pseudo-timeout
+    await new Promise((r) => setTimeout(r, 0));
+    return page;
+}
+
 const render = {
     blacklist: renderBlacklist,
     official: renderOfficial,
     suggestion: renderSuggestions,
     changes: renderChanges,
-    dashboard: renderDashboard
+    dashboard: renderDashboard,
+    settings: renderSettings
 }
 
-export default render 
+export default render;
diff --git a/src/__tests__/integration/__setup__/serverMock.ts b/src/__tests__/integration/__setup__/serverMock.ts
@@ -57,16 +57,24 @@ export class ServerMock {
                 return Promise.resolve({data: {getAmountEntriesAlias: this.official.length}})
             }
             if (body.includes("getAliasSuggestions")) {
-                return Promise.resolve({data: {getAliasSuggestions: this.suggestions.map(e => {
-                    return {
-                        suggester: e.getSuggester(),
-                        name: e.getName(),
-                        posVotes: e.getUpvotes(),
-                        negVotes: e.getDownvotes(),
-                        mapID: e.getId(),
-                        mapObject: e.getBuilding() + "," + e.getRoom()
+
+                let { minValToShowPos, minValToShowNeg } = variables;
+                return Promise.resolve({
+                    data: {
+                        getAliasSuggestions: this.suggestions
+                            .filter(e => e.getUpvotes() >= minValToShowPos && e.getDownvotes() >= minValToShowNeg)
+                            .map(e => {
+                                return {
+                                    suggester: e.getSuggester(),
+                                    name: e.getName(),
+                                    posVotes: e.getUpvotes(),
+                                    negVotes: e.getDownvotes(),
+                                    mapID: e.getId(),
+                                    mapObject: e.getBuilding() + "," + e.getRoom()
+                                }
+                            })
                     }
-                })}});
+                });
             }
             if (body.includes("getAllAliases")) {
                 return Promise.resolve({data: {getAllAliases: this.official.map(e => {
diff --git a/src/lib/model/tables/suggestions/AliasSuggestions.ts b/src/lib/model/tables/suggestions/AliasSuggestions.ts
@@ -292,8 +292,8 @@ export class AliasSuggestions extends TableManager<AliasSuggestionsEntry, AliasS
             }[],
         }}>(JSON.stringify({
             query: `
-                query getAliasSuggestions($minPositive: Int!, $minNegative: Int!) {
-                    getAliasSuggestions(minValToShowPos: $minPositive, minValToShowNeg: $minNegative) {
+                query getAliasSuggestions($minValToShowPos: Int!, $minValToShowNeg: Int!) {
+                    getAliasSuggestions(minValToShowPos: $minValToShowPos, minValToShowNeg: $minValToShowNeg) {
                         suggester
                         name
                         posVotes
@@ -304,8 +304,8 @@ export class AliasSuggestions extends TableManager<AliasSuggestionsEntry, AliasS
                 }
             `,
             variables: {
-                minPositive: this.minUpvotes,
-                minNegative: this.minDownvotes
+                minValToShowPos: Math.trunc(this.minUpvotes),
+                minValToShowNeg: Math.trunc(this.minDownvotes)
             }
         })).then(response => {
             if (response.data) {
diff --git a/src/lib/view/components/settings/Setting.svelte b/src/lib/view/components/settings/Setting.svelte
@@ -1,12 +1,33 @@
 <script lang=ts>
     
-    type T = $$Generic;
+    type T = $$Generic<string | number>;
     export let start: T;
     let value = start;
+    let oldValue = start;
     export let text: string;
     export let update: (value: T) => void;
 
-    $: update(value);
+    function passNumbers(n: string): string {
+        let acc: string = "";
+        for (let c of n) {
+            if ("0" <= c && c <= "9") {
+                acc += c;
+            }
+        }
+        return acc;
+    }
+
+    $:  if (typeof start === 'number') {
+            if (value != undefined && value != null && value == passNumbers(String(value))) {
+                update(value);
+                oldValue = value;
+            } else {
+                value = oldValue as T;
+            }
+        } else {
+            update(value);
+            oldValue = value;
+        }
 </script>
 
 <style lang=scss>
@@ -27,7 +48,7 @@
 <div class=setting>
     <span>{text? text : ""}</span>
     {#if typeof start === 'number'}
-        <input bind:value={value} type="number">
+        <input bind:value={value} type="number" pattern="\d+" step="1">
     {:else}
         <input bind:value={value}>
     {/if}
diff --git a/yarn.lock b/yarn.lock
@@ -1362,6 +1362,13 @@
   dependencies:
     "@testing-library/dom" "^7.0.3"
 
+"@testing-library/user-event@^14.0.0-beta":
+  version "14.0.0-beta.13"
+  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.0.0-beta.13.tgz#dd7d819588ac28e96b7e7af6d6d61b6f0a99f1a5"
+  integrity sha512-KjgkzbV3TmVOU6rUvNs7coezsPEVZKAcejG+GjxpmzB4JszyX9S6hyN729bIPFE7hl/5/LbfSn9KChUaTxd22Q==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
 "@tootallnate/once@1":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
