sentry/static/app/views/userFeedback/index.spec.jsx

import {Organization} from 'fixtures/js-stubs/organization';
import {Environments} from 'fixtures/js-stubs/environments';
import {UserFeedback} from 'fixtures/js-stubs/userFeedback';
import {Project} from 'fixtures/js-stubs/project';
import {initializeOrg} from 'sentry-test/initializeOrg';
import {render, screen} from 'sentry-test/reactTestingLibrary';

import ProjectsStore from 'sentry/stores/projectsStore';
import {OrganizationContext} from 'sentry/views/organizationContext';
import UserFeedback from 'sentry/views/userFeedback';

describe('UserFeedback', function () {
  const {organization, routerContext} = initializeOrg();
  const pageLinks =
    '<https://sentry.io/api/0/organizations/sentry/user-feedback/?statsPeriod=14d&cursor=0:0:1>; rel="previous"; results="false"; cursor="0:0:1", ' +
    '<https://sentry.io/api/0/organizations/sentry/user-feedback/?statsPeriod=14d&cursor=0:100:0>; rel="next"; results="true"; cursor="0:100:0"';

  const project = Project({isMember: true});

  beforeEach(function () {
    ProjectsStore.loadInitialData([project]);

    MockApiClient.addMockResponse({
      url: '/organizations/org-slug/user-feedback/',
      body: [UserFeedback()],
      headers: {Link: pageLinks},
    });

    MockApiClient.addMockResponse({
      url: '/organizations/org-slug/environments/',
      body: Environments(),
    });
  });

  afterEach(function () {
    ProjectsStore.reset();
  });

  it('renders', function () {
    const params = {
      organization: Organization(),
      location: {query: {}, search: ''},
      params: {
        orgId: organization.slug,
      },
    };

    MockApiClient.addMockResponse({
      url: '/organizations/org-slug/projects/',
      body: [project],
      headers: {Link: pageLinks},
    });

    render(
      <OrganizationContext.Provider value={organization}>
        <UserFeedback {...params} />
      </OrganizationContext.Provider>,
      {context: routerContext}
    );

    expect(screen.getByText('Something bad happened')).toBeInTheDocument();
  });

  it('renders no project message', function () {
    ProjectsStore.loadInitialData([]);

    const params = {
      organization: Organization(),
      location: {query: {}, search: ''},
      params: {
        orgId: organization.slug,
      },
    };
    render(
      <OrganizationContext.Provider value={organization}>
        <UserFeedback {...params} />
      </OrganizationContext.Provider>,
      {context: routerContext}
    );

    expect(
      screen.getByText('You need at least one project to use this view')
    ).toBeInTheDocument();
  });

  it('renders empty state', function () {
    MockApiClient.addMockResponse({
      url: '/organizations/org-slug/user-feedback/',
      body: [],
    });

    const params = {
      organization: Organization({
        projects: [Project({isMember: true})],
      }),
      location: {query: {}, search: ''},
      params: {
        orgId: organization.slug,
      },
    };
    render(
      <OrganizationContext.Provider value={organization}>
        <UserFeedback {...params} />
      </OrganizationContext.Provider>,
      {context: routerContext}
    );

    expect(screen.getByTestId('user-feedback-empty')).toBeInTheDocument();
  });

  it('renders empty state with project query', function () {
    MockApiClient.addMockResponse({
      url: '/organizations/org-slug/user-feedback/',
      body: [],
    });

    const params = {
      organization: Organization({
        projects: [Project({isMember: true})],
      }),
      location: {pathname: 'sentry', query: {project: '112'}, search: ''},
      params: {
        orgId: organization.slug,
      },
    };
    render(
      <OrganizationContext.Provider value={organization}>
        <UserFeedback {...params} />
      </OrganizationContext.Provider>,
      {context: routerContext}
    );

    expect(screen.getByTestId('user-feedback-empty')).toBeInTheDocument();

    expect(screen.getByRole('button', {name: 'All Issues'})).toHaveAttribute(
      'href',
      'sentry?project=112&status='
    );
  });

  it('renders empty state with multi project query', function () {
    MockApiClient.addMockResponse({
      url: '/organizations/org-slug/user-feedback/',
      body: [],
    });

    const params = {
      organization: Organization({
        projects: [Project({isMember: true})],
      }),
      location: {pathname: 'sentry', query: {project: ['112', '113']}, search: ''},
      params: {
        orgId: organization.slug,
      },
    };
    render(
      <OrganizationContext.Provider value={organization}>
        <UserFeedback {...params} />
      </OrganizationContext.Provider>,
      {context: routerContext}
    );

    expect(screen.getByTestId('user-feedback-empty')).toBeInTheDocument();

    expect(screen.getByRole('button', {name: 'All Issues'})).toHaveAttribute(
      'href',
      'sentry?project=112&project=113&status='
    );
  });
});