Add @/modules/profile unit tests (#35)

* add profile EditField tests

* add profile EditAvatar tests

* add profile Avatar tests

tests/modules/profile/components/Avatar.test.js

@@ -0,0 +1,50 @@
+import { render, waitFor } from '@testing-library/react';
+
+import Avatar from '@/modules/profile/components/Avatar';
+
+const profileKey = 'profileKey';
+const address = '0x0000000000000000000000000000000000000000';
+const mockDownloadProfilePicture = jest.fn();
+
+jest.mock('@/modules/common/hooks', () => ({
+  __esModule: true,
+  useAppContext: jest.fn(() => ({ profileKey, profile: {} })),
+}));
+
+jest.mock('@/modules/file/utils/image', () => ({
+  __esModule: true,
+  downloadProfilePicture: jest.fn((...args) => Promise.resolve(mockDownloadProfilePicture(...args))),
+}));
+
+describe('Profile', () => {
+  const image = {
+    original: {
+      mimeType: 'image/png',
+    },
+  };
+
+  it('Verify that skeleton is rendered as default', async () => {
+    const { container } = render(<Avatar />);
+
+    const avatar = container.querySelector('span.MuiSkeleton-root');
+    expect(avatar).toBeInTheDocument();
+  });
+
+  it('Verify that skeleton is rendered if uploading', async () => {
+    const { container } = render(<Avatar uploading={true} />);
+
+    const avatar = container.querySelector('span.MuiSkeleton-root');
+    expect(avatar).toBeInTheDocument();
+  });
+
+  it('Verify that skeleton is removed after downloading', async () => {
+    const { container } = render(<Avatar profile={{ address, image }} />);
+
+    await waitFor(() => expect(container.querySelector('span.MuiSkeleton-root')).not.toBeInTheDocument());
+
+    expect(mockDownloadProfilePicture).toHaveBeenCalledWith(profileKey, address, image.original.mimeType);
+
+    const avatar = container.querySelector('div.MuiAvatar-root');
+    expect(avatar).toBeInTheDocument();
+  });
+});

tests/modules/profile/components/EditAvatar.test.js

@@ -0,0 +1,43 @@
+import { render, screen, waitFor } from '@testing-library/react';
+
+import EditAvatar from '@/modules/profile/components/EditAvatar';
+
+const pic = 'pic';
+const file = 'file';
+const address = '0x0000000000000000000000000000000000000000';
+const mockUpdateProfileImage = jest.fn();
+
+jest.mock('@/modules/common/hooks', () => ({
+  __esModule: true,
+  useAppContext: jest.fn(() => ({ profileKey: null, profile: { address }, setProfile: jest.fn() })),
+}));
+
+jest.mock('@/modules/file/utils/image', () => ({
+  __esModule: true,
+  uploadImage: jest.fn(() => Promise.resolve(file)),
+}));
+
+jest.mock('@/modules/file/utils/bucket', () => ({
+  __esModule: true,
+  default: {
+    upload: jest.fn(() => Promise.resolve(pic)),
+  },
+}));
+
+jest.mock('@/modules/profile/utils/ceramic', () => ({
+  __esModule: true,
+  updateProfileImage: jest.fn((...args) => Promise.resolve(mockUpdateProfileImage(...args))),
+}));
+
+describe('Profile', () => {
+  it('Verify that EditAvatar component can be rendered', async () => {
+    render(<EditAvatar />);
+
+    const editAvatar = screen.getByRole('button');
+    expect(editAvatar).toBeInTheDocument();
+
+    editAvatar.click();
+
+    await waitFor(() => expect(mockUpdateProfileImage).toHaveBeenCalledWith(address, pic, file));
+  });
+});

tests/modules/profile/components/EditField.test.js

@@ -0,0 +1,56 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+
+import EditField from '@/modules/profile/components/EditField';
+
+const address = '0x0000000000000000000000000000000000000000';
+const mockUpdateProfile = jest.fn();
+const mockSetProfile = jest.fn();
+
+jest.mock('@/modules/common/hooks', () => ({
+  __esModule: true,
+  useAppContext: jest.fn(() => ({ profile: { address }, setProfile: mockSetProfile })),
+}));
+
+jest.mock('@/modules/profile/utils/ceramic', () => ({
+  __esModule: true,
+  updateProfile: jest.fn((...args) => mockUpdateProfile(...args)),
+}));
+
+describe('Profile', () => {
+  const name = 'name';
+  const label = 'label';
+  const value = 'value';
+
+  it('Verify that name & label props are required', () => {
+    expect(() => render(<EditField />)).toThrowError();
+    expect(() => render(<EditField name={name} />)).toThrowError();
+    expect(() => render(<EditField label={label} />)).toThrowError();
+  });
+
+  it('Verify that EditField component can be rendered', async () => {
+    render(<EditField name={name} label={label} />);
+
+    const editField = screen.getByRole('textbox');
+    expect(editField).toBeInTheDocument();
+
+    fireEvent.change(editField, { target: { value} });
+    fireEvent.blur(editField);
+
+    await waitFor(() => expect(mockUpdateProfile).toHaveBeenCalledWith(address, name, value));
+  });
+
+  it('Verify that the validation errors are caught properly', async () => {
+    render(<EditField name={name} label={label} />);
+
+    const error = `${label} is required`;
+
+    const editField = screen.getByRole('textbox');
+    expect(editField).toBeInTheDocument();
+    expect(screen.queryByText(error)).not.toBeInTheDocument();
+
+    await waitFor(() => fireEvent.change(editField, { target: { value } }));
+    await waitFor(() => fireEvent.change(editField, { target: { value: '' } }));
+
+    expect(screen.getByText(error)).toBeInTheDocument();
+  });
+});