sentry/tests/js/spec/components/events/contexts/state.spec.tsx

import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
import {textWithMarkupMatcher} from 'sentry-test/utils';

import {StateEventContext} from 'sentry/components/events/contexts/state';

describe('StateContext', function () {
  it('renders', function () {
    render(
      <StateEventContext
        data={{
          state: {
            type: 'redux',
            value: {
              a: 'abc',
            },
          },
          otherState: {
            value: {
              b: 'bcd',
            },
          },
        }}
        event={TestStubs.Event()}
      />
    );

    expect(screen.getByText('State (Redux)')).toBeInTheDocument();
    expect(screen.getByText('otherState')).toBeInTheDocument();

    expect(screen.getByText(textWithMarkupMatcher('{a: abc}'))).toBeInTheDocument();
    expect(screen.getByText(textWithMarkupMatcher('{b: bcd}'))).toBeInTheDocument();
  });

  it('display redacted data', async function () {
    const event = {
      ...TestStubs.Event(),
      _meta: {
        contexts: {
          state: {
            state: {
              value: {
                '': {
                  rem: [['project:1', 's', 0, 0]],
                  len: 25,
                },
              },
            },
          },
        },
      },
    };

    render(
      <StateEventContext
        data={{
          state: {
            type: 'redux',
            value: null,
          },
          otherState: {
            value: {
              b: 'bcd',
            },
          },
        }}
        event={event}
      />
    );

    expect(screen.getByText('State (Redux)')).toBeInTheDocument();
    userEvent.hover(screen.getByText('None'));
    expect(
      await screen.findByText('Replaced because of PII rule "project:1"')
    ).toBeInTheDocument(); // tooltip description
  });
});