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

     1  import { render } from "@testing-library/react"
     2  import React from "react"
     3  import { FeaturesProvider, Flag } from "./feature"
     4  import PathBuilder, { PathBuilderProvider } from "./PathBuilder"
     5  import { SnapshotActionProvider, useSnapshotAction } from "./snapshot"
     6  
     7  // Make sure that useSnapshotAction() doesn't break memoization.
     8  it("memoizes renders", () => {
     9    let renderCount = 0
    10    let FakeEl = React.memo(() => {
    11      useSnapshotAction()
    12      renderCount++
    13      return <div></div>
    14    })
    15  
    16    let pathBuilder = PathBuilder.forTesting("localhost", "/")
    17    let openModal = () => {}
    18    let tree = (flags: Proto.v1alpha1UIFeatureFlag[]) => {
    19      return (
    20        <FeaturesProvider featureFlags={flags}>
    21          <PathBuilderProvider value={pathBuilder}>
    22            <SnapshotActionProvider openModal={openModal}>
    23              <FakeEl />
    24            </SnapshotActionProvider>
    25          </PathBuilderProvider>
    26        </FeaturesProvider>
    27      )
    28    }
    29  
    30    let flags = [{ name: "foo", value: true }]
    31    let { rerender } = render(tree(flags))
    32    expect(renderCount).toEqual(1)
    33  
    34    // Make sure we don't re-render if an irrelevant flag changes
    35    let flags2 = [{ name: "foo", value: false }]
    36    rerender(tree(flags2))
    37    expect(renderCount).toEqual(1)
    38  
    39    // Make sure we do re-render on a real update.
    40    let flags3 = [{ name: Flag.Snapshots, value: true }]
    41    rerender(tree(flags3))
    42    expect(renderCount).toEqual(2)
    43  })