github.com/tilt-dev/tilt@v0.33.15-0.20240515162809-0a22ed45d8a0/web/src/AnalyticsNudge.test.tsx (about) 1 import { render, screen, waitFor } from "@testing-library/react" 2 import userEvent from "@testing-library/user-event" 3 import fetchMock, { MockResponseObject } from "fetch-mock" 4 import React from "react" 5 import AnalyticsNudge, { NUDGE_TIMEOUT_MS } from "./AnalyticsNudge" 6 import { 7 cleanupMockAnalyticsCalls, 8 mockAnalyticsCalls, 9 } from "./analytics_test_helpers" 10 11 function mockAnalyticsOptInOnce(optIn = true, error = false) { 12 const response: MockResponseObject = error ? { status: 500 } : {} 13 const opt = optIn ? "opt-in" : "opt-out" 14 fetchMock.postOnce("//localhost/api/analytics_opt", response, { 15 body: { opt }, 16 }) 17 } 18 19 describe("AnalyticsNudge", () => { 20 beforeEach(() => mockAnalyticsCalls()) 21 22 afterEach(() => cleanupMockAnalyticsCalls()) 23 24 it("shows nudge if `needNudge` is true and no request has been made", () => { 25 render(<AnalyticsNudge needsNudge={true} />) 26 27 expect(screen.getByLabelText("Tilt analytics options")).toBeInTheDocument() 28 }) 29 30 it("does NOT show nudge if `needsNudge` is false and no request has been made", () => { 31 render(<AnalyticsNudge needsNudge={false} />) 32 33 expect(screen.queryByLabelText("Tilt analytics options")).toBeNull() 34 }) 35 36 it("does NOT show nudge after it has been dismissed", async () => { 37 mockAnalyticsOptInOnce(false) 38 39 render(<AnalyticsNudge needsNudge={true} />) 40 41 expect(screen.getByLabelText("Tilt analytics options")).toBeInTheDocument() 42 43 userEvent.click(screen.getByRole("button", { name: /nope/i })) 44 45 await waitFor(() => { 46 userEvent.click(screen.getByRole("button", { name: /dismiss/i })) 47 }) 48 49 expect(screen.queryByLabelText("Tilt analytics options")).toBeNull() 50 }) 51 52 it("shows request-in-progress message when a request is in progress", () => { 53 mockAnalyticsOptInOnce(false) 54 55 render(<AnalyticsNudge needsNudge={true} />) 56 57 userEvent.click(screen.getByRole("button", { name: /nope/i })) 58 59 expect(screen.getByTestId("opt-loading")) 60 }) 61 62 it("shows success message for opt out", async () => { 63 mockAnalyticsOptInOnce(false) 64 render(<AnalyticsNudge needsNudge={true} />) 65 66 userEvent.click(screen.getByRole("button", { name: /nope/i })) 67 68 await waitFor(() => { 69 expect(screen.getByTestId("optout-success")).toBeInTheDocument() 70 }) 71 }) 72 73 it("shows success message for opt in", async () => { 74 mockAnalyticsOptInOnce(true) 75 render(<AnalyticsNudge needsNudge={true} />) 76 77 userEvent.click(screen.getByRole("button", { name: /I'm in/i })) 78 79 await waitFor(() => { 80 expect(screen.getByTestId("option-success")).toBeInTheDocument() 81 }) 82 }) 83 84 it("shows a failure message when request fails", async () => { 85 mockAnalyticsOptInOnce(true, true) 86 render(<AnalyticsNudge needsNudge={true} />) 87 88 userEvent.click(screen.getByRole("button", { name: /I'm in/i })) 89 90 await waitFor(() => { 91 expect(screen.getByRole("alert")).toBeInTheDocument() 92 }) 93 }) 94 95 it("dismisses the success message after a set delay", async () => { 96 jest.useFakeTimers() 97 mockAnalyticsOptInOnce(true) 98 render(<AnalyticsNudge needsNudge={true} />) 99 100 userEvent.click(screen.getByRole("button", { name: /I'm in/i })) 101 102 await waitFor(() => { 103 expect(screen.getByTestId("option-success")).toBeInTheDocument() 104 }) 105 106 jest.advanceTimersByTime(NUDGE_TIMEOUT_MS) 107 108 expect(screen.queryByLabelText("Tilt analytics options")).toBeNull() 109 }) 110 })