import {initializeOrg} from 'sentry-test/initializeOrg';
import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
import OrganizationTeamProjects from 'sentry/views/settings/organizationTeams/teamProjects';
describe('OrganizationTeamProjects', function () {
let getMock!: jest.Mock;
let putMock!: jest.Mock;
let postMock!: jest.Mock;
let deleteMock!: jest.Mock;
const team = TestStubs.Team({slug: 'team-slug'});
const project = TestStubs.Project({
teams: [team],
access: ['project:read', 'project:write', 'project:admin'],
});
const project2 = TestStubs.Project({
id: '3',
slug: 'project-slug-2',
name: 'Project Name 2',
access: ['project:read', 'project:write', 'project:admin'],
});
const {routerContext, routerProps, organization} = initializeOrg({
organization: TestStubs.Organization({slug: 'org-slug'}),
projects: [project, project2],
router: {params: {teamId: team.slug}},
});
beforeEach(function () {
getMock = MockApiClient.addMockResponse({
url: '/organizations/org-slug/projects/',
body: [project, project2],
});
putMock = MockApiClient.addMockResponse({
method: 'PUT',
url: '/projects/org-slug/project-slug/',
body: project,
});
postMock = MockApiClient.addMockResponse({
method: 'POST',
url: `/projects/org-slug/${project2.slug}/teams/${team.slug}/`,
body: {...project2, teams: [team]},
status: 201,
});
deleteMock = MockApiClient.addMockResponse({
method: 'DELETE',
url: `/projects/org-slug/${project2.slug}/teams/${team.slug}/`,
body: {...project2, teams: []},
status: 204,
});
});
afterEach(function () {
MockApiClient.clearMockResponses();
});
it('should fetch linked and unlinked projects', async function () {
const {container} = render(
,
{context: routerContext, organization}
);
expect(await screen.findByText('project-slug')).toBeInTheDocument();
expect(container).toSnapshot();
expect(getMock).toHaveBeenCalledTimes(2);
expect(getMock.mock.calls[0][1].query.query).toBe('team:team-slug');
expect(getMock.mock.calls[1][1].query.query).toBe('!team:team-slug');
});
it('should allow bookmarking', async function () {
render(, {
context: routerContext,
organization,
});
const stars = await screen.findAllByRole('button', {name: 'Bookmark Project'});
expect(stars).toHaveLength(2);
await userEvent.click(stars[0]);
expect(
screen.getByRole('button', {name: 'Bookmark Project', pressed: true})
).toBeInTheDocument();
expect(putMock).toHaveBeenCalledTimes(1);
expect(putMock).toHaveBeenCalledWith(
expect.any(String),
expect.objectContaining({
data: {isBookmarked: true},
})
);
});
it('should allow adding and removing projects', async function () {
render(, {
context: routerContext,
organization,
});
expect(getMock).toHaveBeenCalledTimes(2);
await userEvent.click(await screen.findByText('Add Project'));
await userEvent.click(screen.getByRole('option', {name: 'project-slug-2'}));
expect(postMock).toHaveBeenCalledTimes(1);
// find second project's remove button
const removeButtons = await screen.findAllByRole('button', {name: 'Remove'});
await userEvent.click(removeButtons[1]);
expect(deleteMock).toHaveBeenCalledTimes(1);
});
it('handles filtering unlinked projects', async function () {
render(, {
context: routerContext,
organization,
});
expect(getMock).toHaveBeenCalledTimes(2);
await userEvent.click(await screen.findByText('Add Project'));
await userEvent.type(screen.getByRole('textbox'), 'a');
expect(getMock).toHaveBeenCalledTimes(3);
expect(getMock).toHaveBeenCalledWith(
'/organizations/org-slug/projects/',
expect.objectContaining({
query: expect.objectContaining({
query: '!team:team-slug a',
}),
})
);
});
});