github.com/tilt-dev/tilt@v0.36.0/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 {
     5    LogFontSizeScaleCSSProperty,
     6    LogFontSizeScaleLocalStorageKey,
     7    LogFontSizeScaleMinimumPercentage,
     8    LogsFontSize,
     9  } from "./LogActions"
    10  
    11  describe("LogsFontSize", () => {
    12    beforeEach(() => {
    13      // CSS won't be loaded in test context, so just explicitly set it
    14      document.documentElement.style.setProperty("--log-font-scale", "100%")
    15    })
    16    afterEach(() => {
    17      localStorage.clear()
    18      document.documentElement.style.removeProperty("--log-font-scale")
    19    })
    20  
    21    const getCSSValue = () =>
    22      getComputedStyle(document.documentElement).getPropertyValue(
    23        LogFontSizeScaleCSSProperty
    24      )
    25    // react-storage-hooks JSON (de)serializes transparently,
    26    // need to do the same when directly manipulating local storage
    27    const getLocalStorageValue = () =>
    28      JSON.parse(localStorage.getItem(LogFontSizeScaleLocalStorageKey) || "")
    29    const setLocalStorageValue = (val: string) =>
    30      localStorage.setItem(LogFontSizeScaleLocalStorageKey, JSON.stringify(val))
    31  
    32    it("restores persisted font scale on load", () => {
    33      setLocalStorageValue("360%")
    34      render(<LogsFontSize />)
    35      expect(getCSSValue()).toEqual("360%")
    36    })
    37  
    38    it("decreases font scale", async () => {
    39      render(<LogsFontSize />)
    40      userEvent.click(screen.getByLabelText("Decrease log font size"))
    41  
    42      await waitFor(() => {
    43        expect(getCSSValue()).toEqual("95%")
    44      })
    45      expect(getLocalStorageValue()).toEqual(`95%`) // JSON serialized
    46    })
    47  
    48    it("has a minimum font scale", async () => {
    49      setLocalStorageValue(`${LogFontSizeScaleMinimumPercentage}%`)
    50      render(<LogsFontSize />)
    51      userEvent.click(screen.getByLabelText("Decrease log font size"))
    52  
    53      await waitFor(() => {
    54        expect(getCSSValue()).toEqual("10%")
    55      })
    56      expect(getLocalStorageValue()).toEqual(`10%`)
    57    })
    58  
    59    it("increases font scale", async () => {
    60      render(<LogsFontSize />)
    61      userEvent.click(screen.getByLabelText("Increase log font size"))
    62  
    63      await waitFor(() => {
    64        expect(getCSSValue()).toEqual("105%")
    65      })
    66      expect(getLocalStorageValue()).toEqual(`105%`)
    67    })
    68  })