123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195 |
- import {GroupFixture} from 'sentry-fixture/group';
- import {TagsFixture} from 'sentry-fixture/tags';
- import {TagValuesFixture} from 'sentry-fixture/tagvalues';
- import {initializeOrg} from 'sentry-test/initializeOrg';
- import {
- render,
- screen,
- userEvent,
- waitFor,
- waitForElementToBeRemoved,
- within,
- } from 'sentry-test/reactTestingLibrary';
- import {browserHistory} from 'sentry/utils/browserHistory';
- import GroupTagValues from 'sentry/views/issueDetails/groupTagValues';
- const group = GroupFixture();
- const tags = TagsFixture();
- function init(tagKey: string) {
- return initializeOrg({
- router: {
- location: {
- query: {},
- pathname: '/organizations/:orgId/issues/:groupId/tags/:tagKey/',
- },
- params: {orgId: 'org-slug', groupId: group.id, tagKey},
- },
- });
- }
- describe('GroupTagValues', () => {
- beforeEach(() => {
- MockApiClient.addMockResponse({
- url: '/organizations/org-slug/issues/1/tags/user/',
- body: tags.find(({key}) => key === 'user'),
- });
- });
- afterEach(() => {
- MockApiClient.clearMockResponses();
- });
- it('renders a list of tag values', async () => {
- const {router, routerProps, project} = init('user');
- MockApiClient.addMockResponse({
- url: '/organizations/org-slug/issues/1/tags/user/values/',
- body: TagValuesFixture(),
- });
- render(
- <GroupTagValues
- environments={[]}
- group={group}
- project={project}
- baseUrl=""
- {...routerProps}
- />,
- {router}
- );
- await waitForElementToBeRemoved(() => screen.getByTestId('loading-indicator'));
- // Special case for user tag - column title changes to Affected Users
- expect(screen.getByText('Affected Users')).toBeInTheDocument();
- // Affected user column
- expect(screen.getByText('David Cramer')).toBeInTheDocument();
- // Percent column
- expect(screen.getByText('16.67%')).toBeInTheDocument();
- // Count column
- expect(screen.getByText('3')).toBeInTheDocument();
- });
- it('can page through tag values', async () => {
- const {router, routerProps, project} = init('user');
- MockApiClient.addMockResponse({
- url: '/organizations/org-slug/issues/1/tags/user/values/',
- body: TagValuesFixture(),
- headers: {
- Link:
- '<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"',
- },
- });
- render(
- <GroupTagValues
- environments={[]}
- group={group}
- project={project}
- baseUrl=""
- {...routerProps}
- />,
- {router}
- );
- await waitForElementToBeRemoved(() => screen.getByTestId('loading-indicator'));
- expect(screen.getByRole('button', {name: 'Previous'})).toBeDisabled();
- expect(screen.getByRole('button', {name: 'Next'})).toBeEnabled();
- // Clicking next button loads page with query param ?cursor=0:100:0
- await userEvent.click(screen.getByRole('button', {name: 'Next'}));
- await waitFor(() => {
- expect(browserHistory.push).toHaveBeenCalledWith(
- expect.objectContaining({query: expect.objectContaining({cursor: '0:100:0'})})
- );
- });
- });
- it('navigates to issue details events tab with correct query params', async () => {
- const {routerProps, router, project} = init('user');
- MockApiClient.addMockResponse({
- url: '/organizations/org-slug/issues/1/tags/user/values/',
- body: TagValuesFixture(),
- });
- render(
- <GroupTagValues
- environments={[]}
- group={group}
- project={project}
- baseUrl=""
- {...routerProps}
- />,
- {
- router,
- }
- );
- await userEvent.click(await screen.findByRole('button', {name: 'More'}));
- await userEvent.click(
- within(
- screen.getByRole('menuitemradio', {name: 'Search All Issues with Tag Value'})
- ).getByRole('link')
- );
- expect(router.push).toHaveBeenCalledWith({
- pathname: '/organizations/org-slug/issues/',
- query: {query: 'user.username:david'},
- });
- });
- it('renders an error message if tag values request fails', async () => {
- const {router, routerProps, project} = init('user');
- MockApiClient.addMockResponse({
- url: '/organizations/org-slug/issues/1/tags/user/values/',
- statusCode: 500,
- });
- render(
- <GroupTagValues
- environments={['staging']}
- group={group}
- project={project}
- baseUrl=""
- {...routerProps}
- />,
- {router}
- );
- expect(
- await screen.findByText('There was an error loading tag details')
- ).toBeInTheDocument();
- });
- it('renders an error message if no tag values are returned because of environment selection', async () => {
- const {router, routerProps, project} = init('user');
- MockApiClient.addMockResponse({
- url: '/organizations/org-slug/issues/1/tags/user/values/',
- body: [],
- });
- render(
- <GroupTagValues
- environments={['staging']}
- group={group}
- project={project}
- baseUrl=""
- {...routerProps}
- />,
- {router}
- );
- expect(
- await screen.findByText(
- 'No tags were found for the currently selected environments'
- )
- ).toBeInTheDocument();
- });
- });
|