123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384 |
- import React from 'react';
- import {initializeOrg} from 'sentry-test/initializeOrg';
- import {mockRouterPush} from 'sentry-test/mockRouterPush';
- import {mountWithTheme} from 'sentry-test/enzyme';
- import {setActiveOrganization} from 'app/actionCreators/organizations';
- import GlobalSelectionStore from 'app/stores/globalSelectionStore';
- import EventsContainer from 'app/views/events';
- import ProjectsStore from 'app/stores/projectsStore';
- describe('EventsContainer', function() {
- let wrapper;
- const environments = ['production', 'staging'];
- const params = {
- orgId: 'org-slug',
- };
- const {organization, router, routerContext} = initializeOrg({
- projects: [
- {isMember: true, environments, isBookmarked: true},
- {isMember: true, slug: 'new-project', id: 3, environments},
- ],
- organization: {
- features: ['events', 'global-views'],
- },
- router: {
- location: {
- pathname: '/organizations/org-slug/events/',
- query: {},
- },
- params,
- },
- });
- beforeAll(async function() {
- MockApiClient.addMockResponse({
- url: '/organizations/org-slug/projects/',
- body: [],
- });
- MockApiClient.addMockResponse({
- url: '/organizations/org-slug/tags/',
- body: [
- {count: 1, key: 'transaction', name: 'Transaction'},
- {count: 2, key: 'mechanism', name: 'Mechanism'},
- ],
- });
- setActiveOrganization(organization);
- await tick();
- });
- describe('Header', function() {
- beforeEach(function() {
- GlobalSelectionStore.reset();
- ProjectsStore.loadInitialData(organization.projects);
- router.location = {
- pathname: '/organizations/org-slug/events/',
- query: {},
- };
- wrapper = mountWithTheme(
- <EventsContainer
- router={router}
- organization={organization}
- location={router.location}
- >
- <div />
- </EventsContainer>,
- routerContext
- );
- mockRouterPush(wrapper, router);
- });
- it('updates router when changing environments', async function() {
- expect(wrapper.find('PageContent')).toHaveLength(1);
- expect(wrapper.find('MultipleEnvironmentSelector').prop('value')).toEqual([]);
- wrapper.find('MultipleEnvironmentSelector HeaderItem').simulate('click');
- await tick();
- wrapper.update();
- wrapper
- .find('EnvironmentSelectorItem')
- .at(0)
- .simulate('click');
- await tick();
- wrapper.update();
- expect(router.push).toHaveBeenLastCalledWith({
- pathname: '/organizations/org-slug/events/',
- query: {
- environment: ['production'],
- },
- });
- await tick();
- wrapper.update();
- expect(wrapper.find('MultipleEnvironmentSelector').prop('value')).toEqual([
- 'production',
- ]);
- // Select a second environment, "staging"
- wrapper.find('MultipleEnvironmentSelector HeaderItem').simulate('click');
- await tick();
- wrapper.update();
- wrapper
- .find('EnvironmentSelectorItem')
- .at(1)
- .find('CheckboxHitbox')
- .simulate('click');
- expect(wrapper.find('MultipleEnvironmentSelector').prop('value')).toEqual([
- 'production',
- 'staging',
- ]);
- // close dropdown
- wrapper
- .find('MultipleEnvironmentSelector StyledInput')
- .simulate('keyDown', {key: 'Escape'});
- await tick();
- wrapper.update();
- expect(router.push).toHaveBeenLastCalledWith({
- pathname: '/organizations/org-slug/events/',
- query: {
- environment: ['production', 'staging'],
- },
- });
- expect(wrapper.find('MultipleEnvironmentSelector').prop('value')).toEqual([
- 'production',
- 'staging',
- ]);
- // Can clear
- wrapper.find('MultipleEnvironmentSelector HeaderItem').simulate('click');
- await tick();
- wrapper.update();
- wrapper
- .find('MultipleEnvironmentSelector HeaderItem StyledClose')
- .simulate('click');
- await tick();
- wrapper.update();
- expect(wrapper.find('MultipleEnvironmentSelector').prop('value')).toEqual([]);
- expect(router.push).toHaveBeenCalledWith({
- pathname: '/organizations/org-slug/events/',
- query: {
- environment: [],
- },
- });
- });
- it('updates router when changing projects', async function() {
- expect(wrapper.find('MultipleProjectSelector').prop('value')).toEqual([]);
- wrapper.find('MultipleProjectSelector HeaderItem').simulate('click');
- wrapper
- .find('MultipleProjectSelector AutoCompleteItem ProjectSelectorItem')
- .first()
- .simulate('click');
- await tick();
- wrapper.update();
- expect(router.push).toHaveBeenCalledWith({
- pathname: '/organizations/org-slug/events/',
- query: {
- project: [2],
- },
- });
- expect(wrapper.find('MultipleProjectSelector').prop('value')).toEqual([2]);
- });
- it('selects multiple projects', async function() {
- expect(wrapper.find('MultipleProjectSelector').prop('value')).toEqual([]);
- wrapper.find('MultipleProjectSelector HeaderItem').simulate('click');
- wrapper
- .find('MultipleProjectSelector AutoCompleteItem CheckboxHitbox')
- .at(0)
- .simulate('click');
- expect(wrapper.find('MultipleProjectSelector').prop('value')).toEqual([2]);
- wrapper
- .find('MultipleProjectSelector AutoCompleteItem CheckboxHitbox')
- .at(1)
- .simulate('click');
- expect(wrapper.find('MultipleProjectSelector').prop('value')).toEqual([2, 3]);
- wrapper.find('MultipleProjectSelector StyledChevron').simulate('click');
- expect(router.push).toHaveBeenCalledWith({
- pathname: '/organizations/org-slug/events/',
- query: {
- project: [2, 3],
- },
- });
- });
- it('changes to absolute time (utc is default)', async function() {
- const start = new Date('2017-10-01T00:00:00.000Z');
- const end = new Date('2017-10-01T23:59:59.000Z');
- wrapper.find('TimeRangeSelector HeaderItem').simulate('click');
- await wrapper.find('SelectorItem[value="absolute"]').simulate('click');
- // Oct 1st
- wrapper
- .find('DayCell')
- .at(0)
- .simulate('mouseUp');
- expect(wrapper.find('UtcPicker Checkbox').prop('checked')).toBe(true);
- wrapper.find('TimeRangeSelector StyledChevron').simulate('click');
- await tick();
- wrapper.update();
- expect(router.push).toHaveBeenCalledWith({
- pathname: '/organizations/org-slug/events/',
- query: {
- start: '2017-10-01T00:00:00',
- end: '2017-10-01T23:59:59',
- utc: true,
- },
- });
- expect(wrapper.find('TimeRangeSelector').prop('start')).toEqual(start);
- expect(wrapper.find('TimeRangeSelector').prop('end')).toEqual(end);
- expect(wrapper.find('TimeRangeSelector').prop('relative')).toEqual(null);
- // Open menu and make sure UTC is checked
- wrapper.find('TimeRangeSelector HeaderItem').simulate('click');
- await tick();
- wrapper.update();
- expect(wrapper.find('UtcPicker Checkbox').prop('checked')).toBe(true);
- });
- it('does not update router when toggling environment selector without changes', async function() {
- const prevCallCount = router.push.mock.calls.length;
- wrapper.setProps({
- router: {
- ...router,
- location: {
- ...router.location,
- query: {
- environment: ['production'],
- utc: 'true',
- },
- },
- },
- });
- // Toggle MultipleProjectSelector
- wrapper.find('MultipleEnvironmentSelector HeaderItem').simulate('click');
- wrapper
- .find('MultipleEnvironmentSelector StyledInput')
- .simulate('keyDown', {key: 'Escape'});
- expect(router.push).toHaveBeenCalledTimes(prevCallCount);
- });
- it('updates router when changing periods', async function() {
- expect(wrapper.find('TimeRangeSelector').prop('start')).toEqual(null);
- expect(wrapper.find('TimeRangeSelector').prop('end')).toEqual(null);
- expect(wrapper.find('TimeRangeSelector').prop('relative')).toEqual('14d');
- wrapper.find('TimeRangeSelector HeaderItem').simulate('click');
- expect(wrapper.find('[data-test-id="date-range"]')).toHaveLength(0);
- wrapper.find('SelectorItem[value="absolute"]').simulate('click');
- wrapper.find('TimeRangeSelector HeaderItem').simulate('click');
- await tick();
- wrapper.update();
- // The current date in local timezone is 2017-10-16T22:41:20-04:00
- // we take the local date and subtract 14d
- // If "UTC" override is true then we strip timezone and use that date for the range
- expect(router.push).toHaveBeenCalledWith({
- pathname: '/organizations/org-slug/events/',
- query: {
- end: '2017-10-16T22:41:20',
- start: '2017-10-02T22:41:20',
- utc: true,
- },
- });
- expect(wrapper.find('TimeRangeSelector').props()).toEqual(
- expect.objectContaining({
- end: new Date('2017-10-16T22:41:20.000Z'),
- start: new Date('2017-10-02T22:41:20.000Z'),
- utc: true,
- })
- );
- // Can switch back to relative date
- wrapper.find('TimeRangeSelector HeaderItem').simulate('click');
- wrapper.find('SelectorItem[value="7d"]').simulate('click');
- wrapper.find('TimeRangeSelector HeaderItem').simulate('click');
- await tick();
- wrapper.update();
- expect(wrapper.find('TimeRangeSelector').prop('relative')).toEqual('7d');
- // Note this is NOT called with utc true like the above because 1) it's a relative date
- // and we do not need UTC value (which is default true in tests because timezone is set to UTC)
- // and 2) we removed forcing a default value in url params so there is no explicit utc value
- expect(router.push).toHaveBeenCalledWith({
- pathname: '/organizations/org-slug/events/',
- query: {
- statsPeriod: '7d',
- },
- });
- expect(wrapper.find('TimeRangeSelector').props()).toEqual(
- expect.objectContaining({
- end: null,
- start: null,
- relative: '7d',
- })
- );
- });
- it('updates TimeRangeSelector when changing routes', async function() {
- let newRouter = {
- router: {
- ...router,
- location: {
- pathname: '/organizations/org-slug/events2/',
- query: {
- end: '2017-10-17T02:41:20',
- start: '2017-10-03T02:41:20',
- utc: 'true',
- },
- },
- },
- };
- wrapper.setProps(newRouter);
- wrapper.setContext(newRouter);
- await tick();
- wrapper.update();
- expect(wrapper.find('TimeRangeSelector').text()).toEqual(
- 'Oct 3, 201702:41toOct 17, 201702:41'
- );
- newRouter = {
- router: {
- ...router,
- location: {
- pathname: '/organizations/org-slug/events/',
- query: {
- statsPeriod: '7d',
- end: null,
- start: null,
- utc: 'true',
- },
- },
- },
- };
- wrapper.setProps(newRouter);
- wrapper.setContext(newRouter);
- await tick();
- wrapper.update();
- expect(wrapper.find('TimeRangeSelector').text()).toEqual('Last 7 days');
- });
- });
- });
|