Skip to content

Commit

Permalink
feat: Suppress draft and closed detour tables for non-dispatchers
Browse files Browse the repository at this point in the history
  • Loading branch information
@joshlarson
joshlarson committed Sep 24, 2024
1 parent 5bb0d8e commit ef73d8c
Show file tree
Hide file tree
Showing 3 changed files with 280 additions and 26 deletions.
52 changes: 28 additions & 24 deletions assets/src/components/detourListPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,30 +80,34 @@ export const DetourListPage = () => {
onOpenDetour={onOpenDetour}
classNames={["mb-5"]}
/>
<Title
title="Draft detours"
icon={LockFill}
visibility="Only you"
classNames={["u-hide-for-mobile", "d-md-flex"]}
/>
<DetoursTable
data={detours.draft}
status={DetourStatus.Draft}
onOpenDetour={onOpenDetour}
classNames={["mb-5", "u-hide-for-mobile"]}
/>
<Title
title="Closed detours"
icon={PeopleFill}
visibility="Dispatchers and supervisors"
classNames={["u-hide-for-mobile", "d-md-flex"]}
/>
<DetoursTable
data={detours.past}
status={DetourStatus.Closed}
onOpenDetour={onOpenDetour}
classNames={["u-hide-for-mobile"]}
/>
{userInTestGroup(TestGroups.DetoursPilot) && (
<>
<Title
title="Draft detours"
icon={LockFill}
visibility="Only you"
classNames={["u-hide-for-mobile", "d-md-flex"]}
/>
<DetoursTable
data={detours.draft}
status={DetourStatus.Draft}
onOpenDetour={onOpenDetour}
classNames={["mb-5", "u-hide-for-mobile"]}
/>
<Title
title="Closed detours"
icon={PeopleFill}
visibility="Dispatchers and supervisors"
classNames={["u-hide-for-mobile", "d-md-flex"]}
/>
<DetoursTable
data={detours.past}
status={DetourStatus.Closed}
onOpenDetour={onOpenDetour}
classNames={["u-hide-for-mobile"]}
/>
</>
)}
</>
)}

Expand Down
171 changes: 170 additions & 1 deletion assets/tests/components/detours/__snapshots__/detourListPage.test.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,37 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`DetourListPage renders detour list page 1`] = `
exports[`DetourListPage renders detour list page for dispatchers 1`] = `
<body>
<div>
<div
class="c-detour-list-page h-100 overflow-y-auto p-0 p-md-4 bg-white"
>
<button
class="c-detour-list-page__button icon-link fw-light px-3 py-2 u-hide-for-mobile btn btn-primary"
type="button"
>
<svg
aria-hidden="true"
class="bi bi-plus-square"
fill="currentColor"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"
/>
<path
d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"
/>
</svg>
<span
class="c-detour-list-page__button-text"
>
Add detour
</span>
</button>
<div
class="d-flex mt-3 mt-md-0 mb-3 mx-3 mx-md-0"
>
Expand Down Expand Up @@ -370,3 +396,146 @@ exports[`DetourListPage renders detour list page 1`] = `
</div>
</body>
`;

exports[`DetourListPage renders limited detour list page for non-dispatchers 1`] = `
<body>
<div>
<div
class="c-detour-list-page h-100 overflow-y-auto p-0 p-md-4 bg-white"
>
<div
class="d-flex mt-3 mt-md-0 mb-3 mx-3 mx-md-0"
>
<h2
class="my-auto fw-semibold fs-1 me-3 text-nowrap"
>
Active detours
</h2>
<svg
aria-hidden="true"
class="c-detour-list-page__header-icon my-auto me-1"
fill="currentColor"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0M2.04 4.326c.325 1.329 2.532 2.54 3.717 3.19.48.263.793.434.743.484q-.121.12-.242.234c-.416.396-.787.749-.758 1.266.035.634.618.824 1.214 1.017.577.188 1.168.38 1.286.983.082.417-.075.988-.22 1.52-.215.782-.406 1.48.22 1.48 1.5-.5 3.798-3.186 4-5 .138-1.243-2-2-3.5-2.5-.478-.16-.755.081-.99.284-.172.15-.322.279-.51.216-.445-.148-2.5-2-1.5-2.5.78-.39.952-.171 1.227.182.078.099.163.208.273.318.609.304.662-.132.723-.633.039-.322.081-.671.277-.867.434-.434 1.265-.791 2.028-1.12.712-.306 1.365-.587 1.579-.88A7 7 0 1 1 2.04 4.327Z"
/>
</svg>
<span
class="c-detour-list-page__header-visibility my-auto"
>
All Skate users
</span>
</div>
<table
class="mb-5 c-detours-table table table-hover"
>
<thead
class="u-hide-for-mobile"
>
<tr>
<th
class="px-3 py-4"
>
Route and direction
</th>
<th
class="px-3 py-4 u-hide-for-mobile"
>
Starting Intersection
</th>
<th
class="px-3 py-4 u-hide-for-mobile"
>
On detour since
</th>
</tr>
</thead>
<tbody>
<tr>
<td
class="align-middle p-3"
>
<div
class="d-flex"
>
<div
class="c-route-pill c-route-pill--bus"
>
1
</div>
<div
class="c-detours-table__route-info-text d-inline-block"
>
<div
class="pb-1 fs-4 fw-semibold"
>
Headsign A
</div>
<div
class="c-detours-table__route-info-direction fs-6"
>
Inbound
</div>
</div>
</div>
</td>
<td
class="align-middle p-3 u-hide-for-mobile"
>
Street A & Avenue B
</td>
<td
class="align-middle p-3 u-hide-for-mobile"
>
26 hours ago
</td>
</tr>
<tr>
<td
class="align-middle p-3"
>
<div
class="d-flex"
>
<div
class="c-route-pill c-route-pill--bus"
>
2
</div>
<div
class="c-detours-table__route-info-text d-inline-block"
>
<div
class="pb-1 fs-4 fw-semibold"
>
Headsign B
</div>
<div
class="c-detours-table__route-info-direction fs-6"
>
Outbound
</div>
</div>
</div>
</td>
<td
class="align-middle p-3 u-hide-for-mobile"
>
Street C & Avenue D
</td>
<td
class="align-middle p-3 u-hide-for-mobile"
>
29 hours ago
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
`;
83 changes: 82 additions & 1 deletion assets/tests/components/detours/detourListPage.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,36 @@
import { describe, test, expect, jest, beforeEach } from "@jest/globals"
import "@testing-library/jest-dom/jest-globals"
import React from "react"
import { DetourListPage } from "../../../src/components/detourListPage"
import { fetchDetours } from "../../../src/api"
import { neverPromise } from "../../testHelpers/mockHelpers"
import { Ok } from "../../../src/util/result"
import { render, screen } from "@testing-library/react"
import getTestGroups from "../../../src/userTestGroups"
import { TestGroups } from "../../../src/userInTestGroup"
import { byRole } from "testing-library-selector"

jest.useFakeTimers().setSystemTime(new Date("2024-08-29T20:00:00"))

jest.mock("../../../src/api")
jest.mock("../../../src/userTestGroups")

beforeEach(() => {
jest.mocked(fetchDetours).mockReturnValue(neverPromise())

jest
.mocked(getTestGroups)
.mockReturnValue([TestGroups.DetoursPilot, TestGroups.DetoursList])
})

const activeTableHeading = byRole("heading", { name: "Active detours" })
const draftTableHeading = byRole("heading", { name: "Draft detours" })
const closedTableHeading = byRole("heading", { name: "Closed detours" })

const addDetourButton = byRole("button", { name: "Add detour" })

describe("DetourListPage", () => {
test("renders detour list page", async () => {
test("renders detour list page for dispatchers", async () => {
jest.mocked(fetchDetours).mockResolvedValue(
Ok({
active: [
Expand Down Expand Up @@ -62,6 +77,72 @@ describe("DetourListPage", () => {

await screen.findByText("Headsign Z")

expect(activeTableHeading.get()).toBeVisible()
expect(draftTableHeading.get()).toBeVisible()
expect(closedTableHeading.get()).toBeVisible()

expect(addDetourButton.get()).toBeVisible()

expect(baseElement).toMatchSnapshot()
})

test("renders limited detour list page for non-dispatchers", async () => {
jest.mocked(getTestGroups).mockReturnValue([TestGroups.DetoursList])

jest.mocked(fetchDetours).mockResolvedValue(
Ok({
active: [
{
id: 1,
route: "1",
direction: "Inbound",
name: "Headsign A",
intersection: "Street A & Avenue B",
updatedAt: 1724866392,
},
{
id: 8,
route: "2",
direction: "Outbound",
name: "Headsign B",
intersection: "Street C & Avenue D",
updatedAt: 1724856392,
},
],
draft: undefined,
past: [
{
id: 10,
route: "1",
direction: "Inbound",
name: "Headsign A",
intersection: "Street E & Avenue F",
updatedAt: 1724866392,
},
{
id: 7,
route: "1",
direction: "Outbound",
name: "Headsign Z",
intersection: "Street C & Avenue D",
updatedAt: 1724866392,
},
],
})
)

const { baseElement } = render(<DetourListPage />)

await screen.findByText("Headsign B")

expect(screen.queryByText("Headsign Z")).not.toBeInTheDocument()

expect(activeTableHeading.get()).toBeVisible()
expect(draftTableHeading.query()).not.toBeInTheDocument()
expect(closedTableHeading.query()).not.toBeInTheDocument()

expect(addDetourButton.query()).not.toBeInTheDocument()

expect(baseElement).toMatchSnapshot()
})
})

0 comments on commit ef73d8c

Please sign in to comment.