aboutsummaryrefslogtreecommitdiffstats
path: root/src/tests/components/FormListing.test.tsx
blob: 2730ec1a1a513838c027911594ce13116d99da42 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
import React from "react";
import { render } from "@testing-library/react";
import FormListing from "../../components/FormListing";

import { BrowserRouter as Router } from "react-router-dom";
import { Form, FormFeatures } from "../../api/forms";
import { QuestionType } from "../../api/question";

const openFormListing: Form = {
    name: "Example form listing",
    id: "example-form-listing",
    description: "My form listing",
    features: [FormFeatures.Discoverable, FormFeatures.Open],
    questions: [
        {
            "id": "my-question",
            "name": "My question",
            "type": QuestionType.ShortText,
            "data": {},
            required: false
        }
    ],
    webhook: null,
    submitted_text: null
};

const closedFormListing: Form = {
    name: "Example form listing",
    id: "example-form-listing",
    description: "My form listing",
    features: [FormFeatures.Discoverable],
    questions: [
        {
            "id": "what-should-i-ask",
            "name": "What should I ask?",
            "type": QuestionType.ShortText,
            "data": {},
            required: false
        }
    ],
    webhook: null,
    submitted_text: null
};

test("renders form listing with specified title", () => {
    const { getByText } = render(<Router><FormListing form={openFormListing} /></Router>);
    const formListing = getByText(/Example form listing/i);
    expect(formListing).toBeInTheDocument();
});

test("renders form listing with specified description", () => {
    const { getByText } = render(<Router><FormListing form={openFormListing} /></Router>);
    const formListing = getByText(/My form listing/i);
    expect(formListing).toBeInTheDocument();
});

test("renders form listing with background green colour for open", () => {
    const { container } = render(<Router><FormListing form={openFormListing} /></Router>);
    const elem = container.querySelector("a");
    expect(elem).not.toBeNull();

    if (elem) {
        const style = window.getComputedStyle(elem);
        expect(style.backgroundColor).toBe("rgb(55, 128, 94)");
    }
});

test("renders form listing with background dark colour for closed", () => {
    const { container } = render(<Router><FormListing form={closedFormListing} /></Router>);
    const elem = container.querySelector("a");
    expect(elem).not.toBeNull();

    if (elem) {
        const style = window.getComputedStyle(elem);
        expect(style.backgroundColor).toBe("rgb(44, 47, 51)");
    }
});