ICTU/quality-time

View on GitHub
components/frontend/src/header_footer/SettingsPanel.test.js

Summary

Maintainability
D
2 days
Test Coverage
import { act, fireEvent, render, screen } from "@testing-library/react"
import userEvent from "@testing-library/user-event"
import history from "history/browser"

import { createTestableSettings } from "../__fixtures__/fixtures"
import { SettingsPanel } from "./SettingsPanel"

beforeEach(() => {
    history.push("")
})

function renderSettingsPanel({
    atReportsOverview = true,
    handleDateChange = jest.fn(),
    handleSort = jest.fn(),
    reportDate = null,
    tags = [],
} = {}) {
    const settings = createTestableSettings()
    render(
        <SettingsPanel
            atReportsOverview={atReportsOverview}
            handleDateChange={handleDateChange}
            handleSort={handleSort}
            settings={{
                dateInterval: settings.dateInterval,
                dateOrder: settings.dateOrder,
                hiddenCards: settings.hiddenCards,
                hiddenColumns: settings.hiddenColumns,
                hiddenTags: settings.hiddenTags,
                metricsToHide: settings.metricsToHide,
                nrDates: settings.nrDates,
                showIssueCreationDate: settings.showIssueCreationDate,
                showIssueSummary: settings.showIssueSummary,
                showIssueUpdateDate: settings.showIssueUpdateDate,
                showIssueDueDate: settings.showIssueDueDate,
                showIssueRelease: settings.showIssueRelease,
                showIssueSprint: settings.showIssueSprint,
                sortColumn: settings.sortColumn,
                sortDirection: settings.sortDirection,
                expandedItems: settings.expandedItems,
            }}
            reportDate={reportDate}
            tags={tags}
        />,
    )
}

it("hides the metrics not requiring action", async () => {
    renderSettingsPanel()
    fireEvent.click(screen.getByText(/Metrics requiring action/))
    expect(history.location.search).toBe("?metrics_to_hide=no_action_required")
})

it("shows all metrics", async () => {
    history.push("?metrics_to_hide=no_action_required")
    renderSettingsPanel()
    fireEvent.click(screen.getByText(/All metrics/))
    expect(history.location.search).toBe("")
})

it("shows all metrics by keypress", async () => {
    history.push("?metrics_to_hide=no_action_required")
    renderSettingsPanel()
    await userEvent.type(screen.getByText(/All metrics/), " ")
    expect(history.location.search).toBe("")
})

it("hides a tag", async () => {
    renderSettingsPanel({ tags: ["security"] })
    fireEvent.click(screen.getByText(/security/))
    expect(history.location.search).toBe("?hidden_tags=security")
})

it("hides a tag by keypress", async () => {
    renderSettingsPanel({ tags: ["security"] })
    await userEvent.type(screen.getAllByText(/security/)[0], " ")
    expect(history.location.search).toBe("?hidden_tags=security")
})

it("shows a tag", async () => {
    history.push("?hidden_tags=security")
    renderSettingsPanel({ tags: ["security"] })
    fireEvent.click(screen.getAllByText(/security/)[0])
    expect(history.location.search).toBe("")
})

it("hides a column", async () => {
    renderSettingsPanel()
    fireEvent.click(screen.getByText(/Trend/))
    expect(history.location.search).toBe("?hidden_columns=trend")
})

it("hides a column by keypress", async () => {
    renderSettingsPanel()
    await userEvent.type(screen.getAllByText(/Comment/)[0], " ")
    expect(history.location.search).toBe("?hidden_columns=comment")
})

it("shows a column", async () => {
    history.push("?hidden_columns=status")
    renderSettingsPanel()
    fireEvent.click(screen.getAllByText(/Status/)[0])
    expect(history.location.search).toBe("")
})

it("changes the sorting of an unsorted column", async () => {
    const handleSort = jest.fn()
    renderSettingsPanel({ handleSort: handleSort })
    fireEvent.click(screen.getAllByText(/Comment/)[1])
    expect(handleSort).toHaveBeenCalledWith("comment")
})
;["ascending", "descending"].forEach((sortOrder) => {
    it("changes the sorting of a column", async () => {
        history.push(`?sort_column=comment&sort_direction=${sortOrder}`)
        const handleSort = jest.fn()
        renderSettingsPanel({ handleSort: handleSort })
        fireEvent.click(screen.getAllByText(/Comment/)[1])
        expect(handleSort).toHaveBeenCalledWith("comment")
    })
})

it("sorts a column by keypress", async () => {
    const handleSort = jest.fn()
    renderSettingsPanel({ handleSort: handleSort })
    await userEvent.type(screen.getAllByText(/Comment/)[1], " ")
    expect(handleSort).toHaveBeenCalledWith("comment")
})

it("ignores a keypress if the menu item is disabled", async () => {
    history.push("?hidden_columns=comment")
    const handleSort = jest.fn()
    renderSettingsPanel({ handleSort: handleSort })
    await userEvent.type(screen.getAllByText(/Comment/)[1], " ")
    expect(handleSort).not.toHaveBeenCalledWith("comment")
})

it("sets the number of dates", async () => {
    history.push("?nr_dates=2")
    renderSettingsPanel()
    fireEvent.click(screen.getByText(/7 dates/))
    expect(history.location.search).toBe("?nr_dates=7")
})

it("sets the number of dates by keypress", async () => {
    renderSettingsPanel()
    await userEvent.type(screen.getByText(/5 dates/), " ")
    expect(history.location.search).toBe("?nr_dates=5")
})

it("sets the date interval to weeks", async () => {
    history.push("?nr_dates=2")
    renderSettingsPanel()
    await act(async () => fireEvent.click(screen.getByText(/2 weeks/)))
    expect(history.location.search).toBe("?nr_dates=2&date_interval=14")
})

it("sets the date interval to one day", () => {
    history.push("?nr_dates=2")
    renderSettingsPanel()
    fireEvent.click(screen.getByText(/1 day/))
    expect(history.location.search).toBe("?nr_dates=2&date_interval=1")
})

it("sets the date interval by keypress", async () => {
    history.push("?nr_dates=2&date_interval=7")
    renderSettingsPanel()
    await userEvent.type(screen.getByText(/1 day/), " ")
    expect(history.location.search).toBe("?nr_dates=2&date_interval=1")
})

it("sorts the dates descending", () => {
    history.push("?nr_dates=2&date_order=ascending")
    renderSettingsPanel()
    fireEvent.click(screen.getByText(/Descending/))
    expect(history.location.search).toBe("?nr_dates=2")
})

it("sorts the dates ascending by keypress", async () => {
    history.push("?nr_dates=2")
    renderSettingsPanel()
    await userEvent.type(screen.getByText(/Ascending/), " ")
    expect(history.location.search).toBe("?nr_dates=2&date_order=ascending")
})

it("shows issue summaries", async () => {
    renderSettingsPanel()
    await act(async () => {
        fireEvent.click(screen.getAllByText(/Summary/)[0])
    })
    expect(history.location.search).toBe("?show_issue_summary=true")
})

it("shows issue summaries by keypress", async () => {
    renderSettingsPanel()
    await userEvent.type(screen.getAllByText(/Summary/)[0], " ")
    expect(history.location.search).toBe("?show_issue_summary=true")
})

it("hides the reports cards", async () => {
    renderSettingsPanel()
    await act(async () => fireEvent.click(screen.getByText(/Reports/)))
    expect(history.location.search).toBe("?hidden_cards=reports")
})

it("hides the subject cards", async () => {
    renderSettingsPanel({ atReportsOverview: false })
    await act(async () => fireEvent.click(screen.getByText(/Subjects/)))
    expect(history.location.search).toBe("?hidden_cards=subjects")
})

it("hides the tag cards", async () => {
    renderSettingsPanel()
    await act(async () => fireEvent.click(screen.getAllByText(/Tags/)[0]))
    expect(history.location.search).toBe("?hidden_cards=tags")
})