github.com/tilt-dev/tilt@v0.33.15-0.20240515162809-0a22ed45d8a0/web/src/LogActions.test.tsx (about)

     1  import { render, screen, waitFor } from "@testing-library/react"
     2  import userEvent from "@testing-library/user-event"
     3  import React from "react"
     4  import { AnalyticsAction } from "./analytics"
     5  import {
     6    cleanupMockAnalyticsCalls,
     7    expectIncrs,
     8    mockAnalyticsCalls,
     9  } from "./analytics_test_helpers"
    10  import {
    11    LogFontSizeScaleCSSProperty,
    12    LogFontSizeScaleLocalStorageKey,
    13    LogFontSizeScaleMinimumPercentage,
    14    LogsFontSize,
    15  } from "./LogActions"
    16  
    17  describe("LogsFontSize", () => {
    18    beforeEach(() => {
    19      // CSS won't be loaded in test context, so just explicitly set it
    20      document.documentElement.style.setProperty("--log-font-scale", "100%")
    21      mockAnalyticsCalls()
    22    })
    23    afterEach(() => {
    24      localStorage.clear()
    25      document.documentElement.style.removeProperty("--log-font-scale")
    26      cleanupMockAnalyticsCalls()
    27    })
    28  
    29    const getCSSValue = () =>
    30      getComputedStyle(document.documentElement).getPropertyValue(
    31        LogFontSizeScaleCSSProperty
    32      )
    33    // react-storage-hooks JSON (de)serializes transparently,
    34    // need to do the same when directly manipulating local storage
    35    const getLocalStorageValue = () =>
    36      JSON.parse(localStorage.getItem(LogFontSizeScaleLocalStorageKey) || "")
    37    const setLocalStorageValue = (val: string) =>
    38      localStorage.setItem(LogFontSizeScaleLocalStorageKey, JSON.stringify(val))
    39  
    40    it("restores persisted font scale on load", () => {
    41      setLocalStorageValue("360%")
    42      render(<LogsFontSize />)
    43      expect(getCSSValue()).toEqual("360%")
    44    })
    45  
    46    it("decreases font scale", async () => {
    47      render(<LogsFontSize />)
    48      userEvent.click(screen.getByLabelText("Decrease log font size"))
    49  
    50      await waitFor(() => {
    51        expect(getCSSValue()).toEqual("95%")
    52      })
    53      expect(getLocalStorageValue()).toEqual(`95%`) // JSON serialized
    54      expectIncrs({
    55        name: "ui.web.zoomLogs",
    56        tags: { action: AnalyticsAction.Click, dir: "out" },
    57      })
    58    })
    59  
    60    it("has a minimum font scale", async () => {
    61      setLocalStorageValue(`${LogFontSizeScaleMinimumPercentage}%`)
    62      render(<LogsFontSize />)
    63      userEvent.click(screen.getByLabelText("Decrease log font size"))
    64  
    65      await waitFor(() => {
    66        expect(getCSSValue()).toEqual("10%")
    67      })
    68      expect(getLocalStorageValue()).toEqual(`10%`)
    69    })
    70  
    71    it("increases font scale", async () => {
    72      render(<LogsFontSize />)
    73      userEvent.click(screen.getByLabelText("Increase log font size"))
    74  
    75      await waitFor(() => {
    76        expect(getCSSValue()).toEqual("105%")
    77      })
    78      expect(getLocalStorageValue()).toEqual(`105%`)
    79      expectIncrs({
    80        name: "ui.web.zoomLogs",
    81        tags: { action: AnalyticsAction.Click, dir: "in" },
    82      })
    83    })
    84  })