import {OrganizationFixture} from 'sentry-fixture/organization';
import {ProjectFixture} from 'sentry-fixture/project';
import {RouteComponentPropsFixture} from 'sentry-fixture/routeComponentPropsFixture';
import {TeamFixture} from 'sentry-fixture/team';
import {initializeOrg} from 'sentry-test/initializeOrg';
import {
act,
render,
screen,
userEvent,
waitFor,
within,
} from 'sentry-test/reactTestingLibrary';
import * as projectsActions from 'sentry/actionCreators/projects';
import ProjectsStatsStore from 'sentry/stores/projectsStatsStore';
import ProjectsStore from 'sentry/stores/projectsStore';
import TeamStore from 'sentry/stores/teamStore';
import {Dashboard} from 'sentry/views/projectsDashboard';
jest.unmock('lodash/debounce');
jest.mock('lodash/debounce', () => {
const debounceMap = new Map();
const mockDebounce =
(fn: (...args: any[]) => void, timeout: number) =>
(...args: any[]) => {
if (debounceMap.has(fn)) {
clearTimeout(debounceMap.get(fn));
}
debounceMap.set(
fn,
setTimeout(() => {
fn.apply(fn, args);
debounceMap.delete(fn);
}, timeout)
);
};
return mockDebounce;
});
describe('ProjectsDashboard', function () {
const api = new MockApiClient();
const org = OrganizationFixture();
const team = TeamFixture();
const teams = [team];
beforeEach(function () {
TeamStore.loadInitialData(teams);
MockApiClient.addMockResponse({
url: `/teams/${org.slug}/${team.slug}/members/`,
body: [],
});
MockApiClient.addMockResponse({
url: `/organizations/${org.slug}/projects/`,
body: [],
});
ProjectsStatsStore.reset();
ProjectsStore.loadInitialData([]);
});
afterEach(function () {
TeamStore.reset();
projectsActions._projectStatsToFetch.clear();
MockApiClient.clearMockResponses();
});
describe('empty state', function () {
it('renders with no projects', async function () {
const noProjectTeams = [TeamFixture({isMember: false, projects: []})];
render(
);
expect(
await screen.findByRole('button', {name: 'Join a Team'})
).toBeInTheDocument();
expect(screen.getByTestId('create-project')).toBeInTheDocument();
expect(screen.queryByTestId('loading-placeholder')).not.toBeInTheDocument();
});
it('renders with 1 project, with no first event', async function () {
const projects = [ProjectFixture({teams, firstEvent: null, stats: []})];
ProjectsStore.loadInitialData(projects);
const teamsWithOneProject = [TeamFixture({projects})];
render(
);
expect(await screen.findByTestId('join-team')).toBeInTheDocument();
expect(screen.getByTestId('create-project')).toBeInTheDocument();
expect(
screen.getByPlaceholderText('Search for projects by name')
).toBeInTheDocument();
expect(screen.getByText('My Teams')).toBeInTheDocument();
expect(screen.getByText('Resources')).toBeInTheDocument();
expect(screen.getByTestId('badge-display-name')).toBeInTheDocument();
expect(screen.queryByTestId('loading-placeholder')).not.toBeInTheDocument();
});
});
describe('with projects', function () {
it('renders with two projects', async function () {
const teamA = TeamFixture({slug: 'team1', isMember: true});
const projects = [
ProjectFixture({
id: '1',
slug: 'project1',
teams: [teamA],
firstEvent: new Date().toISOString(),
stats: [],
}),
ProjectFixture({
id: '2',
slug: 'project2',
teams: [teamA],
isBookmarked: true,
firstEvent: new Date().toISOString(),
stats: [],
}),
];
ProjectsStore.loadInitialData(projects);
const teamsWithTwoProjects = [TeamFixture({projects})];
render(
);
expect(await screen.findByText('My Teams')).toBeInTheDocument();
expect(screen.getAllByTestId('badge-display-name')).toHaveLength(2);
expect(screen.queryByTestId('loading-placeholder')).not.toBeInTheDocument();
});
it('renders only projects for my teams by default', async function () {
const teamA = TeamFixture({slug: 'team1', isMember: true});
const teamProjects = [
ProjectFixture({
id: '1',
slug: 'project1',
teams: [teamA],
firstEvent: new Date().toISOString(),
stats: [],
}),
];
ProjectsStore.loadInitialData([
...teamProjects,
ProjectFixture({
id: '2',
slug: 'project2',
teams: [],
isBookmarked: true,
firstEvent: new Date().toISOString(),
stats: [],
}),
]);
const teamsWithTwoProjects = [TeamFixture({projects: teamProjects})];
render(
);
expect(await screen.findByText('My Teams')).toBeInTheDocument();
expect(screen.getAllByTestId('badge-display-name')).toHaveLength(1);
});
it('renders all projects if open membership is enabled and user selects all teams', async function () {
const {
organization: openOrg,
router,
routerProps,
} = initializeOrg({
organization: {features: ['open-membership']},
router: {
// team='' removes the default selection of 'myteams', same as clicking "clear"
location: {query: {team: ''}},
},
});
const teamA = TeamFixture({slug: 'team1', isMember: true});
const teamB = TeamFixture({id: '2', slug: 'team2', name: 'team2', isMember: false});
TeamStore.loadInitialData([teamA, teamB]);
const teamProjects = [
ProjectFixture({
id: '1',
slug: 'project1',
teams: [teamA],
firstEvent: new Date().toISOString(),
stats: [],
}),
];
ProjectsStore.loadInitialData([
...teamProjects,
ProjectFixture({
id: '2',
slug: 'project2',
teams: [teamB],
firstEvent: new Date().toISOString(),
stats: [],
}),
]);
const teamsWithTwoProjects = [TeamFixture({projects: teamProjects})];
render(
,
{
router,
organization: openOrg,
}
);
expect(await screen.findByText('All Teams')).toBeInTheDocument();
expect(screen.getAllByTestId('badge-display-name')).toHaveLength(2);
await userEvent.click(screen.getByText('All Teams'));
expect(await screen.findByText('Other Teams')).toBeInTheDocument();
expect(screen.getByText('#team2')).toBeInTheDocument();
});
it('renders only projects for my teams if open membership is disabled', async function () {
const {
organization: closedOrg,
router,
routerProps,
} = initializeOrg({
organization: {features: []},
router: {
location: {query: {team: ''}},
},
});
const teamA = TeamFixture({slug: 'team1', isMember: true});
const teamProjects = [
ProjectFixture({
id: '1',
slug: 'project1',
teams: [teamA],
firstEvent: new Date().toISOString(),
stats: [],
}),
];
ProjectsStore.loadInitialData([
...teamProjects,
ProjectFixture({
id: '2',
slug: 'project2',
teams: [],
firstEvent: new Date().toISOString(),
stats: [],
}),
]);
const teamsWithTwoProjects = [TeamFixture({projects: teamProjects})];
render(
,
{
router,
organization: closedOrg,
}
);
expect(await screen.findByText('All Teams')).toBeInTheDocument();
expect(screen.getAllByTestId('badge-display-name')).toHaveLength(1);
});
it('renders correct project with selected team', async function () {
const teamC = TeamFixture({
id: '1',
slug: 'teamC',
isMember: true,
projects: [
ProjectFixture({
id: '1',
slug: 'project1',
stats: [],
}),
ProjectFixture({
id: '2',
slug: 'project2',
stats: [],
}),
],
});
const teamD = TeamFixture({
id: '2',
slug: 'teamD',
isMember: true,
projects: [
ProjectFixture({
id: '3',
slug: 'project3',
}),
],
});
const teamsWithSpecificProjects = [teamC, teamD];
MockApiClient.addMockResponse({
url: `/organizations/${org.slug}/teams/?team=2`,
body: teamsWithSpecificProjects,
});
const projects = [
ProjectFixture({
id: '1',
slug: 'project1',
teams: [teamC],
firstEvent: new Date().toISOString(),
stats: [],
}),
ProjectFixture({
id: '2',
slug: 'project2',
teams: [teamC],
isBookmarked: true,
firstEvent: new Date().toISOString(),
stats: [],
}),
ProjectFixture({
id: '3',
slug: 'project3',
teams: [teamD],
firstEvent: new Date().toISOString(),
stats: [],
}),
];
ProjectsStore.loadInitialData(projects);
MockApiClient.addMockResponse({
url: `/organizations/${org.slug}/projects/`,
body: projects,
});
render(
);
expect(await screen.findByText('project3')).toBeInTheDocument();
expect(screen.queryByText('project2')).not.toBeInTheDocument();
});
it('renders projects by search', async function () {
const teamA = TeamFixture({slug: 'team1', isMember: true});
MockApiClient.addMockResponse({
url: `/organizations/${org.slug}/projects/`,
body: [],
});
const projects = [
ProjectFixture({
id: '1',
slug: 'project1',
teams: [teamA],
firstEvent: new Date().toISOString(),
stats: [],
}),
ProjectFixture({
id: '2',
slug: 'project2',
teams: [teamA],
isBookmarked: true,
firstEvent: new Date().toISOString(),
stats: [],
}),
];
ProjectsStore.loadInitialData(projects);
const teamsWithTwoProjects = [TeamFixture({projects})];
render(
);
await userEvent.type(
screen.getByPlaceholderText('Search for projects by name'),
'project2{enter}'
);
expect(screen.getByText('project2')).toBeInTheDocument();
await waitFor(() => {
expect(screen.queryByText('project1')).not.toBeInTheDocument();
});
expect(screen.queryByTestId('loading-placeholder')).not.toBeInTheDocument();
});
it('renders bookmarked projects first in team list', async function () {
const teamA = TeamFixture({slug: 'team1', isMember: true});
const projects = [
ProjectFixture({
id: '11',
slug: 'm',
teams: [teamA],
isBookmarked: false,
stats: [],
}),
ProjectFixture({
id: '12',
slug: 'm-fave',
teams: [teamA],
isBookmarked: true,
stats: [],
}),
ProjectFixture({
id: '13',
slug: 'a-fave',
teams: [teamA],
isBookmarked: true,
stats: [],
}),
ProjectFixture({
id: '14',
slug: 'z-fave',
teams: [teamA],
isBookmarked: true,
stats: [],
}),
ProjectFixture({
id: '15',
slug: 'a',
teams: [teamA],
isBookmarked: false,
stats: [],
}),
ProjectFixture({
id: '16',
slug: 'z',
teams: [teamA],
isBookmarked: false,
stats: [],
}),
];
ProjectsStore.loadInitialData(projects);
const teamsWithFavProjects = [TeamFixture({projects})];
MockApiClient.addMockResponse({
url: `/organizations/${org.slug}/projects/`,
body: [
ProjectFixture({
teams,
stats: [
[1517281200, 2],
[1517310000, 1],
],
}),
],
});
render(
);
// check that all projects are displayed
await waitFor(() =>
expect(screen.getAllByTestId('badge-display-name')).toHaveLength(6)
);
const projectName = screen.getAllByTestId('badge-display-name');
// check that projects are in the correct order - alphabetical with bookmarked projects in front
expect(within(projectName[0]!).getByText('a-fave')).toBeInTheDocument();
expect(within(projectName[1]!).getByText('m-fave')).toBeInTheDocument();
expect(within(projectName[2]!).getByText('z-fave')).toBeInTheDocument();
expect(within(projectName[3]!).getByText('a')).toBeInTheDocument();
expect(within(projectName[4]!).getByText('m')).toBeInTheDocument();
expect(within(projectName[5]!).getByText('z')).toBeInTheDocument();
});
});
describe('ProjectsStatsStore', function () {
const teamA = TeamFixture({slug: 'team1', isMember: true});
const projects = [
ProjectFixture({
id: '1',
slug: 'm',
teams,
isBookmarked: false,
}),
ProjectFixture({
id: '2',
slug: 'm-fave',
teams: [teamA],
isBookmarked: true,
}),
ProjectFixture({
id: '3',
slug: 'a-fave',
teams: [teamA],
isBookmarked: true,
}),
ProjectFixture({
id: '4',
slug: 'z-fave',
teams: [teamA],
isBookmarked: true,
}),
ProjectFixture({
id: '5',
slug: 'a',
teams: [teamA],
isBookmarked: false,
}),
ProjectFixture({
id: '6',
slug: 'z',
teams: [teamA],
isBookmarked: false,
}),
];
const teamsWithStatTestProjects = [TeamFixture({projects})];
it('uses ProjectsStatsStore to load stats', async function () {
ProjectsStore.loadInitialData(projects);
jest.useFakeTimers();
ProjectsStatsStore.onStatsLoadSuccess([
{...projects[0]!, stats: [[1517281200, 2]]},
]);
const loadStatsSpy = jest.spyOn(projectsActions, 'loadStatsForProject');
const mock = MockApiClient.addMockResponse({
url: `/organizations/${org.slug}/projects/`,
body: projects.map(project => ({
...project,
stats: [
[1517281200, 2],
[1517310000, 1],
],
})),
});
const {unmount} = render(
);
expect(loadStatsSpy).toHaveBeenCalledTimes(6);
expect(mock).not.toHaveBeenCalled();
const projectSummary = screen.getAllByTestId('summary-links');
// Has 5 Loading Cards because 1 project has been loaded in store already
expect(
within(projectSummary[0]!).getByTestId('loading-placeholder')
).toBeInTheDocument();
expect(
within(projectSummary[1]!).getByTestId('loading-placeholder')
).toBeInTheDocument();
expect(
within(projectSummary[2]!).getByTestId('loading-placeholder')
).toBeInTheDocument();
expect(
within(projectSummary[3]!).getByTestId('loading-placeholder')
).toBeInTheDocument();
expect(within(projectSummary[4]!).getByText('Errors: 2')).toBeInTheDocument();
expect(
within(projectSummary[5]!).getByTestId('loading-placeholder')
).toBeInTheDocument();
// Advance timers so that batched request fires
act(() => jest.advanceTimersByTime(51));
expect(mock).toHaveBeenCalledTimes(1);
// query ids = 3, 2, 4 = bookmarked
// 1 - already loaded in store so shouldn't be in query
expect(mock).toHaveBeenCalledWith(
expect.anything(),
expect.objectContaining({
query: expect.objectContaining({
query: 'id:3 id:2 id:4 id:5 id:6',
}),
})
);
jest.useRealTimers();
// All cards have loaded
await waitFor(() => {
expect(within(projectSummary[0]!).getByText('Errors: 3')).toBeInTheDocument();
});
expect(within(projectSummary[1]!).getByText('Errors: 3')).toBeInTheDocument();
expect(within(projectSummary[2]!).getByText('Errors: 3')).toBeInTheDocument();
expect(within(projectSummary[3]!).getByText('Errors: 3')).toBeInTheDocument();
expect(within(projectSummary[4]!).getByText('Errors: 3')).toBeInTheDocument();
expect(within(projectSummary[5]!).getByText('Errors: 3')).toBeInTheDocument();
// Resets store when it unmounts
unmount();
expect(ProjectsStatsStore.getAll()).toEqual({});
});
it('renders an error from withTeamsForUser', function () {
ProjectsStore.loadInitialData(projects);
render(
);
expect(
screen.getByText('An error occurred while fetching your projects')
).toBeInTheDocument();
});
});
});