sentry/static/app/utils/profiling/differentialFlamegraph.spec.tsx

import {DifferentialFlamegraph} from 'sentry/utils/profiling/differentialFlamegraph';
import {Flamegraph} from 'sentry/utils/profiling/flamegraph';
import {FlamegraphTheme} from 'sentry/utils/profiling/flamegraph/flamegraphTheme';
import {EventedProfile} from 'sentry/utils/profiling/profile/eventedProfile';
import {createFrameIndex} from 'sentry/utils/profiling/profile/utils';

const makeEvent = (times: number, frame: number): Profiling.Event[] => {
  return new Array(times * 2).fill(0).map((_, i) => {
    return {type: i % 2 === 0 ? 'O' : 'C', at: i, frame};
  });
};

const baseProfile: Profiling.EventedProfile = {
  name: 'profile',
  startValue: 0,
  endValue: 1000,
  unit: 'milliseconds',
  threadID: 0,
  type: 'evented',
  events: [],
};
const makeFlamegraph = (profile: Profiling.EventedProfile) => {
  return new Flamegraph(
    EventedProfile.FromProfile(
      profile,
      createFrameIndex('mobile', [{name: 'f0'}, {name: 'f1'}, {name: 'f2'}, {name: 'f3'}])
    ),
    0,
    {
      inverted: false,
      leftHeavy: false,
    }
  );
};

const THEME = {
  COLORS: {
    DIFFERENTIAL_DECREASE: [0, 0, 1],
    DIFFERENTIAL_INCREASE: [1, 0, 0],
  },
} as FlamegraphTheme;

describe('differentialFlamegraph', () => {
  it('INCREASE: color encodes new frames red', () => {
    const from = makeFlamegraph({
      ...baseProfile,
      events: [],
    });
    const to = makeFlamegraph({
      ...baseProfile,
      events: [...makeEvent(1, 0)],
    });

    const flamegraph = DifferentialFlamegraph.Diff(from, to, THEME);
    expect(flamegraph.colors?.get('f0')).toEqual([1, 0, 0, 1]);
  });
  it('INCREASE: color encodes relative increase in red', () => {
    const from = makeFlamegraph({
      ...baseProfile,
      events: [...makeEvent(2, 0)],
    });
    const to = makeFlamegraph({
      ...baseProfile,
      events: [...makeEvent(3, 0)],
    });

    const flamegraph = DifferentialFlamegraph.Diff(from, to, THEME);
    expect(flamegraph.colors?.get('f0')).toEqual([1, 0, 0, 0.5]);
  });
  it('DECREASE: color encodes relative decrease in blue', () => {
    const from = makeFlamegraph({
      ...baseProfile,
      events: [...makeEvent(4, 0)],
    });
    const to = makeFlamegraph({
      ...baseProfile,
      events: [...makeEvent(2, 0)],
    });

    const flamegraph = DifferentialFlamegraph.Diff(from, to, THEME);
    expect(flamegraph.colors?.get('f0')).toEqual([0, 0, 1, 0.5]);
  });
  it('No change: no color is set', () => {
    const from = makeFlamegraph({
      ...baseProfile,
      events: [...makeEvent(2, 0)],
    });
    const to = makeFlamegraph({
      ...baseProfile,
      events: [...makeEvent(2, 0)],
    });

    const flamegraph = DifferentialFlamegraph.Diff(from, to, THEME);
    expect(flamegraph.colors?.get('f0')).toBe(undefined);
  });
});