Skip to content

Commit

Permalink
test: update snapshot
Browse files Browse the repository at this point in the history
  • Loading branch information
@setchy
setchy committed Jul 29, 2024
1 parent 1ae2f31 commit b256b11
Show file tree
Hide file tree
Showing 2 changed files with 142 additions and 136 deletions.
274 changes: 140 additions & 134 deletions src/components/AccountNotifications.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,137 +1,143 @@
import { act, fireEvent, render, screen } from '@testing-library/react';
import { mockGitHubCloudAccount, mockSettings } from '../__mocks__/state-mocks';
import { AppContext } from '../context/App';
import { GroupBy } from '../types';
import { mockGitHubNotifications } from '../utils/api/__mocks__/response-mocks';
import * as links from '../utils/links';
import { AccountNotifications } from './AccountNotifications';

jest.mock('./RepositoryNotifications', () => ({
RepositoryNotifications: () => <div>Repository Notifications</div>,
import { act, fireEvent, render, screen } from "@testing-library/react";
import { mockGitHubCloudAccount, mockSettings } from "../__mocks__/state-mocks";
import { AppContext } from "../context/App";
import { GroupBy } from "../types";
import { mockGitHubNotifications } from "../utils/api/__mocks__/response-mocks";
import * as links from "../utils/links";
import { AccountNotifications } from "./AccountNotifications";

jest.mock("./RepositoryNotifications", () => ({
RepositoryNotifications: () => <div>Repository Notifications</div>,
}));

describe('components/AccountNotifications.tsx', () => {
it('should render itself - group notifications by repositories', () => {
const props = {
account: mockGitHubCloudAccount,
notifications: mockGitHubNotifications,
showAccountHostname: true,
error: null,
};

const tree = render(
<AppContext.Provider
value={{ settings: { ...mockSettings, groupBy: GroupBy.REPOSITORY } }}
>
<AccountNotifications {...props} />
</AppContext.Provider>,
);
expect(tree).toMatchSnapshot();
});

it('should render itself - group notifications by date', () => {
const props = {
account: mockGitHubCloudAccount,
notifications: mockGitHubNotifications,
showAccountHostname: true,
error: null,
};

const tree = render(
<AppContext.Provider
value={{ settings: { ...mockSettings, groupBy: GroupBy.DATE } }}
>
<AccountNotifications {...props} />
</AppContext.Provider>,
);
expect(tree).toMatchSnapshot();
});

it('should render itself - no notifications', () => {
const props = {
account: mockGitHubCloudAccount,
notifications: [],
showAccountHostname: true,
error: null,
};

const tree = render(
<AppContext.Provider value={{ settings: mockSettings }}>
<AccountNotifications {...props} />
</AppContext.Provider>,
);
expect(tree).toMatchSnapshot();
});

it('should render itself - account error', () => {
const props = {
account: mockGitHubCloudAccount,
notifications: [],
error: {
title: 'Error title',
descriptions: ['Error description'],
emojis: ['🔥'],
},
showAccountHostname: true,
};

const tree = render(
<AppContext.Provider value={{ settings: mockSettings }}>
<AccountNotifications {...props} />
</AppContext.Provider>,
);
expect(tree).toMatchSnapshot();
});

it('should open profile when clicked', async () => {
const openAccountProfileMock = jest
.spyOn(links, 'openAccountProfile')
.mockImplementation();

const props = {
account: mockGitHubCloudAccount,
notifications: [],
showAccountHostname: true,
error: null,
};

await act(async () => {
render(
<AppContext.Provider value={{ settings: mockSettings }}>
<AccountNotifications {...props} />
</AppContext.Provider>,
);
});

fireEvent.click(screen.getByTitle('Open Profile'));

expect(openAccountProfileMock).toHaveBeenCalledTimes(1);
expect(openAccountProfileMock).toHaveBeenCalledWith(mockGitHubCloudAccount);
});

it('should toggle account notifications visibility', async () => {
const props = {
account: mockGitHubCloudAccount,
notifications: mockGitHubNotifications,
showAccountHostname: true,
error: null,
};

await act(async () => {
render(
<AppContext.Provider value={{ settings: mockSettings }}>
<AccountNotifications {...props} />
</AppContext.Provider>,
);
});

fireEvent.click(screen.getByTitle('Hide account notifications'));

const tree = render(
<AppContext.Provider value={{ settings: mockSettings }}>
<AccountNotifications {...props} />
</AppContext.Provider>,
);
expect(tree).toMatchSnapshot();
});
describe("components/AccountNotifications.tsx", () => {
// The read emoji randomly rotates, but then the snapshots would never match
// Have to make it consistent so the emojis are always the same
beforeEach(() => {
global.Math.random = jest.fn(() => 0.1);
});

it("should render itself - group notifications by repositories", () => {
const props = {
account: mockGitHubCloudAccount,
notifications: mockGitHubNotifications,
showAccountHostname: true,
error: null,
};

const tree = render(
<AppContext.Provider
value={{ settings: { ...mockSettings, groupBy: GroupBy.REPOSITORY } }}
>
<AccountNotifications {...props} />
</AppContext.Provider>,
);
expect(tree).toMatchSnapshot();
});

it("should render itself - group notifications by date", () => {
const props = {
account: mockGitHubCloudAccount,
notifications: mockGitHubNotifications,
showAccountHostname: true,
error: null,
};

const tree = render(
<AppContext.Provider
value={{ settings: { ...mockSettings, groupBy: GroupBy.DATE } }}
>
<AccountNotifications {...props} />
</AppContext.Provider>,
);
expect(tree).toMatchSnapshot();
});

it("should render itself - no notifications", () => {
const props = {
account: mockGitHubCloudAccount,
notifications: [],
showAccountHostname: true,
error: null,
};

const tree = render(
<AppContext.Provider value={{ settings: mockSettings }}>
<AccountNotifications {...props} />
</AppContext.Provider>,
);
expect(tree).toMatchSnapshot();
});

it("should render itself - account error", () => {
const props = {
account: mockGitHubCloudAccount,
notifications: [],
error: {
title: "Error title",
descriptions: ["Error description"],
emojis: ["🔥"],
},
showAccountHostname: true,
};

const tree = render(
<AppContext.Provider value={{ settings: mockSettings }}>
<AccountNotifications {...props} />
</AppContext.Provider>,
);
expect(tree).toMatchSnapshot();
});

it("should open profile when clicked", async () => {
const openAccountProfileMock = jest
.spyOn(links, "openAccountProfile")
.mockImplementation();

const props = {
account: mockGitHubCloudAccount,
notifications: [],
showAccountHostname: true,
error: null,
};

await act(async () => {
render(
<AppContext.Provider value={{ settings: mockSettings }}>
<AccountNotifications {...props} />
</AppContext.Provider>,
);
});

fireEvent.click(screen.getByTitle("Open Profile"));

expect(openAccountProfileMock).toHaveBeenCalledTimes(1);
expect(openAccountProfileMock).toHaveBeenCalledWith(mockGitHubCloudAccount);
});

it("should toggle account notifications visibility", async () => {
const props = {
account: mockGitHubCloudAccount,
notifications: mockGitHubNotifications,
showAccountHostname: true,
error: null,
};

await act(async () => {
render(
<AppContext.Provider value={{ settings: mockSettings }}>
<AccountNotifications {...props} />
</AppContext.Provider>,
);
});

fireEvent.click(screen.getByTitle("Hide account notifications"));

const tree = render(
<AppContext.Provider value={{ settings: mockSettings }}>
<AccountNotifications {...props} />
</AppContext.Provider>,
);
expect(tree).toMatchSnapshot();
});
});
4 changes: 2 additions & 2 deletions src/components/__snapshots__/AccountNotifications.test.tsx.snap
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit b256b11

Please sign in to comment.