test: add form fields test cases
This commit is contained in:
Awais Ansari
24
src/profile-v2/NotFoundPage.test.jsx
Normal file
24
src/profile-v2/NotFoundPage.test.jsx
Normal file
@@ -0,0 +1,24 @@
|
||||
import React from 'react';
|
||||
import { render } from '@testing-library/react';
|
||||
import { IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
import NotFoundPage from './NotFoundPage';
|
||||
|
||||
describe('NotFoundPage Snapshot Tests', () => {
|
||||
it('renders correctly', () => {
|
||||
const { asFragment } = render(
|
||||
<IntlProvider locale="en">
|
||||
<NotFoundPage />
|
||||
</IntlProvider>,
|
||||
);
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders with custom props', () => {
|
||||
const { asFragment } = render(
|
||||
<IntlProvider locale="en">
|
||||
<NotFoundPage message="Custom not found message" />
|
||||
</IntlProvider>,
|
||||
);
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -256,4 +256,261 @@ describe('<ProfilePage />', () => {
|
||||
expect(navigate).toHaveBeenCalledWith('/notfound');
|
||||
});
|
||||
});
|
||||
|
||||
describe('form fields', () => {
|
||||
it('renders all form fields for own profile', () => {
|
||||
const contextValue = {
|
||||
authenticatedUser: { userId: 123, username: 'staff', administrator: true },
|
||||
config: getConfig(),
|
||||
};
|
||||
const { getByText } = render(
|
||||
<ProfilePageWrapper
|
||||
contextValue={contextValue}
|
||||
store={mockStore(storeMocks.viewOwnProfile)}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(getByText('Full name')).toBeInTheDocument();
|
||||
expect(getByText('Country')).toBeInTheDocument();
|
||||
expect(getByText('Bio')).toBeInTheDocument();
|
||||
expect(getByText('Education')).toBeInTheDocument();
|
||||
expect(getByText('Primary language spoken')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('handles invalid user', () => {
|
||||
it('navigates to not found page for invalid user', () => {
|
||||
const contextValue = {
|
||||
authenticatedUser: { userId: 123, username: 'staff', administrator: true },
|
||||
config: getConfig(),
|
||||
};
|
||||
const navigate = jest.fn();
|
||||
useNavigate.mockReturnValue(navigate);
|
||||
render(
|
||||
<ProfilePageWrapper
|
||||
contextValue={contextValue}
|
||||
store={mockStore(storeMocks.invalidUser)}
|
||||
params={{ username: 'invalidUser' }}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(navigate).toHaveBeenCalledWith('/notfound');
|
||||
});
|
||||
});
|
||||
|
||||
describe('handles empty profile', () => {
|
||||
it('renders empty profile state', () => {
|
||||
const contextValue = {
|
||||
authenticatedUser: { userId: 123, username: 'staff', administrator: true },
|
||||
config: getConfig(),
|
||||
};
|
||||
const component = (
|
||||
<ProfilePageWrapper
|
||||
contextValue={contextValue}
|
||||
store={mockStore(storeMocks.viewOtherProfile)}
|
||||
params={{ username: 'empty' }}
|
||||
/>
|
||||
);
|
||||
const { container: tree } = render(component);
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
describe('handles profile with only username', () => {
|
||||
it('renders profile with only username', () => {
|
||||
const contextValue = {
|
||||
authenticatedUser: { userId: 123, username: 'staff', administrator: true },
|
||||
config: getConfig(),
|
||||
};
|
||||
const component = (
|
||||
<ProfilePageWrapper
|
||||
contextValue={contextValue}
|
||||
store={mockStore(storeMocks.viewOtherProfile)}
|
||||
params={{ username: 'onlyUsername' }}
|
||||
/>
|
||||
);
|
||||
const { container: tree } = render(component);
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
describe('handles profile with no social links', () => {
|
||||
it('renders profile without social links', () => {
|
||||
const contextValue = {
|
||||
authenticatedUser: { userId: 123, username: 'staff', administrator: true },
|
||||
config: getConfig(),
|
||||
};
|
||||
const component = (
|
||||
<ProfilePageWrapper
|
||||
contextValue={contextValue}
|
||||
store={mockStore(storeMocks.viewOtherProfile)}
|
||||
params={{ username: 'noSocialLinks' }}
|
||||
/>
|
||||
);
|
||||
const { container: tree } = render(component);
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
describe('handles profile with only social links', () => {
|
||||
it('renders profile with only social links', () => {
|
||||
const contextValue = {
|
||||
authenticatedUser: { userId: 123, username: 'staff', administrator: true },
|
||||
config: getConfig(),
|
||||
};
|
||||
const component = (
|
||||
<ProfilePageWrapper
|
||||
contextValue={contextValue}
|
||||
store={mockStore(storeMocks.viewOtherProfile)}
|
||||
params={{ username: 'onlySocialLinks' }}
|
||||
/>
|
||||
);
|
||||
const { container: tree } = render(component);
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
describe('handles profile with only bio', () => {
|
||||
it('renders profile with only bio', () => {
|
||||
const contextValue = {
|
||||
authenticatedUser: { userId: 123, username: 'staff', administrator: true },
|
||||
config: getConfig(),
|
||||
};
|
||||
const component = (
|
||||
<ProfilePageWrapper
|
||||
contextValue={contextValue}
|
||||
store={mockStore(storeMocks.viewOtherProfile)}
|
||||
params={{ username: 'onlyBio' }}
|
||||
/>
|
||||
);
|
||||
const { container: tree } = render(component);
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
describe('handles profile with only country', () => {
|
||||
it('renders profile with only country', () => {
|
||||
const contextValue = {
|
||||
authenticatedUser: { userId: 123, username: 'staff', administrator: true },
|
||||
config: getConfig(),
|
||||
};
|
||||
const component = (
|
||||
<ProfilePageWrapper
|
||||
contextValue={contextValue}
|
||||
store={mockStore(storeMocks.viewOtherProfile)}
|
||||
params={{ username: 'onlyCountry' }}
|
||||
/>
|
||||
);
|
||||
const { container: tree } = render(component);
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
describe('handles profile with only level of education', () => {
|
||||
it('renders profile with only level of education', () => {
|
||||
const contextValue = {
|
||||
authenticatedUser: { userId: 123, username: 'staff', administrator: true },
|
||||
config: getConfig(),
|
||||
};
|
||||
const component = (
|
||||
<ProfilePageWrapper
|
||||
contextValue={contextValue}
|
||||
store={mockStore(storeMocks.viewOtherProfile)}
|
||||
params={{ username: 'onlyLevelOfEducation' }}
|
||||
/>
|
||||
);
|
||||
const { container: tree } = render(component);
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
describe('handles profile with only language proficiencies', () => {
|
||||
it('renders profile with only language proficiencies', () => {
|
||||
const contextValue = {
|
||||
authenticatedUser: { userId: 123, username: 'staff', administrator: true },
|
||||
config: getConfig(),
|
||||
};
|
||||
const component = (
|
||||
<ProfilePageWrapper
|
||||
contextValue={contextValue}
|
||||
store={mockStore(storeMocks.viewOtherProfile)}
|
||||
params={{ username: 'onlyLanguageProficiencies' }}
|
||||
/>
|
||||
);
|
||||
const { container: tree } = render(component);
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
describe('handles profile with only course certificates', () => {
|
||||
it('renders profile with only course certificates', () => {
|
||||
const contextValue = {
|
||||
authenticatedUser: { userId: 123, username: 'staff', administrator: true },
|
||||
config: getConfig(),
|
||||
};
|
||||
const component = (
|
||||
<ProfilePageWrapper
|
||||
contextValue={contextValue}
|
||||
store={mockStore(storeMocks.viewOtherProfile)}
|
||||
params={{ username: 'onlyCourseCertificates' }}
|
||||
/>
|
||||
);
|
||||
const { container: tree } = render(component);
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
describe('handles profile with only name', () => {
|
||||
it('renders profile with only name', () => {
|
||||
const contextValue = {
|
||||
authenticatedUser: { userId: 123, username: 'staff', administrator: true },
|
||||
config: getConfig(),
|
||||
};
|
||||
const component = (
|
||||
<ProfilePageWrapper
|
||||
contextValue={contextValue}
|
||||
store={mockStore(storeMocks.viewOtherProfile)}
|
||||
params={{ username: 'onlyName' }}
|
||||
/>
|
||||
);
|
||||
const { container: tree } = render(component);
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
describe('handles profile with only username and no other fields', () => {
|
||||
it('renders profile with only username', () => {
|
||||
const contextValue = {
|
||||
authenticatedUser: { userId: 123, username: 'staff', administrator: true },
|
||||
config: getConfig(),
|
||||
};
|
||||
const component = (
|
||||
<ProfilePageWrapper
|
||||
contextValue={contextValue}
|
||||
store={mockStore(storeMocks.viewOtherProfile)}
|
||||
params={{ username: 'onlyUsernameNoFields' }}
|
||||
/>
|
||||
);
|
||||
const { container: tree } = render(component);
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
describe('handles profile with no fields and no username', () => {
|
||||
it('renders empty profile state', () => {
|
||||
const contextValue = {
|
||||
authenticatedUser: { userId: 123, username: 'staff', administrator: true },
|
||||
config: getConfig(),
|
||||
};
|
||||
const component = (
|
||||
<ProfilePageWrapper
|
||||
contextValue={contextValue}
|
||||
store={mockStore(storeMocks.viewOtherProfile)}
|
||||
params={{ username: '' }}
|
||||
/>
|
||||
);
|
||||
const { container: tree } = render(component);
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
29
src/profile-v2/__snapshots__/NotFoundPage.test.jsx.snap
Normal file
29
src/profile-v2/__snapshots__/NotFoundPage.test.jsx.snap
Normal file
@@ -0,0 +1,29 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`NotFoundPage Snapshot Tests renders correctly 1`] = `
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="container-fluid d-flex py-5 justify-content-center align-items-start text-center"
|
||||
>
|
||||
<p
|
||||
class="my-0 py-5 text-muted max-width-32em"
|
||||
>
|
||||
The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.
|
||||
</p>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`NotFoundPage Snapshot Tests renders with custom props 1`] = `
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="container-fluid d-flex py-5 justify-content-center align-items-start text-center"
|
||||
>
|
||||
<p
|
||||
class="my-0 py-5 text-muted max-width-32em"
|
||||
>
|
||||
The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.
|
||||
</p>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
@@ -2017,3 +2017,1655 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<ProfilePage /> handles empty profile renders empty profile state 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="profile-page"
|
||||
>
|
||||
<div
|
||||
class="profile-page-bg-banner bg-primary d-md-block align-items-center h-100 w-100 px-120px py-5.5"
|
||||
>
|
||||
<div
|
||||
class="col container-fluid w-100 h-100 bg-white py-0 rounded-75 px-40px"
|
||||
>
|
||||
<div
|
||||
class="col h-100 w-100 px-0 justify-content-start g-15rem py-36px"
|
||||
>
|
||||
<div
|
||||
class="row-auto d-flex flex-wrap align-items-center h-100 w-100 justify-content-start g-15rem flex-row"
|
||||
>
|
||||
<div
|
||||
class="profile-avatar-wrap position-relative"
|
||||
>
|
||||
<div
|
||||
class="profile-avatar rounded-circle bg-light"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="text-muted"
|
||||
data-testid="IconMock"
|
||||
focusable="false"
|
||||
role="img"
|
||||
viewbox="0 0 24 24"
|
||||
/>
|
||||
</div>
|
||||
<form
|
||||
enctype="multipart/form-data"
|
||||
>
|
||||
<input
|
||||
accept=".jpg, .jpeg, .png"
|
||||
class="d-none form-control-file"
|
||||
id="photo-file"
|
||||
name="file"
|
||||
type="file"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
<div
|
||||
class="col h-100 w-100 m-0 p-0 justify-content-start align-items-start"
|
||||
>
|
||||
<p
|
||||
class="row m-0 font-weight-bold text-truncate text-primary-500 h3"
|
||||
>
|
||||
empty
|
||||
</p>
|
||||
<div
|
||||
class="row pt-2 m-0 g-1rem"
|
||||
>
|
||||
<span
|
||||
class="small mb-0 text-gray-800"
|
||||
>
|
||||
Member since
|
||||
<span
|
||||
class="font-weight-bold"
|
||||
>
|
||||
|
||||
2017
|
||||
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="p-0 col-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ml-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col d-inline-flex h-100 w-100 align-items-start justify-content-start g-3rem px-120px py-6"
|
||||
>
|
||||
<div
|
||||
class="w-100 p-0"
|
||||
>
|
||||
<div
|
||||
class="col justify-content-start align-items-start p-0"
|
||||
>
|
||||
<div
|
||||
class="col align-self-stretch height-42px justify-content-start align-items-start p-0"
|
||||
>
|
||||
<p
|
||||
class="font-weight-bold text-primary-500 m-0 h2"
|
||||
>
|
||||
Profile information
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="row m-0 px-0 w-100 d-inline-flex align-items-start justify-content-start pt-5.5"
|
||||
>
|
||||
<div
|
||||
class="col p-0 col-6"
|
||||
>
|
||||
<div
|
||||
class="m-0"
|
||||
>
|
||||
<div
|
||||
class="row m-0 pb-1.5 align-items-center"
|
||||
>
|
||||
<p
|
||||
class="h5 font-weight-bold m-0"
|
||||
data-hj-suppress="true"
|
||||
>
|
||||
Username
|
||||
</p>
|
||||
<svg
|
||||
class="m-0 info-icon"
|
||||
fill="none"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M11 7h2v2h-2V7Zm0 4h2v6h-2v-6Zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h4
|
||||
class="edit-section-header text-gray-700"
|
||||
>
|
||||
empty
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col m-0 pr-0 pl-40px col-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col container-fluid d-inline-flex bg-color-grey-FBFAF9 h-100 w-100 align-items-start justify-content-start g-3rem px-120px py-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<ProfilePage /> handles profile with no fields and no username renders empty profile state 1`] = `<div />`;
|
||||
|
||||
exports[`<ProfilePage /> handles profile with no social links renders profile without social links 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="profile-page"
|
||||
>
|
||||
<div
|
||||
class="profile-page-bg-banner bg-primary d-md-block align-items-center h-100 w-100 px-120px py-5.5"
|
||||
>
|
||||
<div
|
||||
class="col container-fluid w-100 h-100 bg-white py-0 rounded-75 px-40px"
|
||||
>
|
||||
<div
|
||||
class="col h-100 w-100 px-0 justify-content-start g-15rem py-36px"
|
||||
>
|
||||
<div
|
||||
class="row-auto d-flex flex-wrap align-items-center h-100 w-100 justify-content-start g-15rem flex-row"
|
||||
>
|
||||
<div
|
||||
class="profile-avatar-wrap position-relative"
|
||||
>
|
||||
<div
|
||||
class="profile-avatar rounded-circle bg-light"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="text-muted"
|
||||
data-testid="IconMock"
|
||||
focusable="false"
|
||||
role="img"
|
||||
viewbox="0 0 24 24"
|
||||
/>
|
||||
</div>
|
||||
<form
|
||||
enctype="multipart/form-data"
|
||||
>
|
||||
<input
|
||||
accept=".jpg, .jpeg, .png"
|
||||
class="d-none form-control-file"
|
||||
id="photo-file"
|
||||
name="file"
|
||||
type="file"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
<div
|
||||
class="col h-100 w-100 m-0 p-0 justify-content-start align-items-start"
|
||||
>
|
||||
<p
|
||||
class="row m-0 font-weight-bold text-truncate text-primary-500 h3"
|
||||
>
|
||||
noSocialLinks
|
||||
</p>
|
||||
<div
|
||||
class="row pt-2 m-0 g-1rem"
|
||||
>
|
||||
<span
|
||||
class="small mb-0 text-gray-800"
|
||||
>
|
||||
Member since
|
||||
<span
|
||||
class="font-weight-bold"
|
||||
>
|
||||
|
||||
2017
|
||||
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="p-0 col-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ml-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col d-inline-flex h-100 w-100 align-items-start justify-content-start g-3rem px-120px py-6"
|
||||
>
|
||||
<div
|
||||
class="w-100 p-0"
|
||||
>
|
||||
<div
|
||||
class="col justify-content-start align-items-start p-0"
|
||||
>
|
||||
<div
|
||||
class="col align-self-stretch height-42px justify-content-start align-items-start p-0"
|
||||
>
|
||||
<p
|
||||
class="font-weight-bold text-primary-500 m-0 h2"
|
||||
>
|
||||
Profile information
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="row m-0 px-0 w-100 d-inline-flex align-items-start justify-content-start pt-5.5"
|
||||
>
|
||||
<div
|
||||
class="col p-0 col-6"
|
||||
>
|
||||
<div
|
||||
class="m-0"
|
||||
>
|
||||
<div
|
||||
class="row m-0 pb-1.5 align-items-center"
|
||||
>
|
||||
<p
|
||||
class="h5 font-weight-bold m-0"
|
||||
data-hj-suppress="true"
|
||||
>
|
||||
Username
|
||||
</p>
|
||||
<svg
|
||||
class="m-0 info-icon"
|
||||
fill="none"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M11 7h2v2h-2V7Zm0 4h2v6h-2v-6Zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h4
|
||||
class="edit-section-header text-gray-700"
|
||||
>
|
||||
noSocialLinks
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col m-0 pr-0 pl-40px col-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col container-fluid d-inline-flex bg-color-grey-FBFAF9 h-100 w-100 align-items-start justify-content-start g-3rem px-120px py-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<ProfilePage /> handles profile with only bio renders profile with only bio 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="profile-page"
|
||||
>
|
||||
<div
|
||||
class="profile-page-bg-banner bg-primary d-md-block align-items-center h-100 w-100 px-120px py-5.5"
|
||||
>
|
||||
<div
|
||||
class="col container-fluid w-100 h-100 bg-white py-0 rounded-75 px-40px"
|
||||
>
|
||||
<div
|
||||
class="col h-100 w-100 px-0 justify-content-start g-15rem py-36px"
|
||||
>
|
||||
<div
|
||||
class="row-auto d-flex flex-wrap align-items-center h-100 w-100 justify-content-start g-15rem flex-row"
|
||||
>
|
||||
<div
|
||||
class="profile-avatar-wrap position-relative"
|
||||
>
|
||||
<div
|
||||
class="profile-avatar rounded-circle bg-light"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="text-muted"
|
||||
data-testid="IconMock"
|
||||
focusable="false"
|
||||
role="img"
|
||||
viewbox="0 0 24 24"
|
||||
/>
|
||||
</div>
|
||||
<form
|
||||
enctype="multipart/form-data"
|
||||
>
|
||||
<input
|
||||
accept=".jpg, .jpeg, .png"
|
||||
class="d-none form-control-file"
|
||||
id="photo-file"
|
||||
name="file"
|
||||
type="file"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
<div
|
||||
class="col h-100 w-100 m-0 p-0 justify-content-start align-items-start"
|
||||
>
|
||||
<p
|
||||
class="row m-0 font-weight-bold text-truncate text-primary-500 h3"
|
||||
>
|
||||
onlyBio
|
||||
</p>
|
||||
<div
|
||||
class="row pt-2 m-0 g-1rem"
|
||||
>
|
||||
<span
|
||||
class="small mb-0 text-gray-800"
|
||||
>
|
||||
Member since
|
||||
<span
|
||||
class="font-weight-bold"
|
||||
>
|
||||
|
||||
2017
|
||||
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="p-0 col-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ml-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col d-inline-flex h-100 w-100 align-items-start justify-content-start g-3rem px-120px py-6"
|
||||
>
|
||||
<div
|
||||
class="w-100 p-0"
|
||||
>
|
||||
<div
|
||||
class="col justify-content-start align-items-start p-0"
|
||||
>
|
||||
<div
|
||||
class="col align-self-stretch height-42px justify-content-start align-items-start p-0"
|
||||
>
|
||||
<p
|
||||
class="font-weight-bold text-primary-500 m-0 h2"
|
||||
>
|
||||
Profile information
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="row m-0 px-0 w-100 d-inline-flex align-items-start justify-content-start pt-5.5"
|
||||
>
|
||||
<div
|
||||
class="col p-0 col-6"
|
||||
>
|
||||
<div
|
||||
class="m-0"
|
||||
>
|
||||
<div
|
||||
class="row m-0 pb-1.5 align-items-center"
|
||||
>
|
||||
<p
|
||||
class="h5 font-weight-bold m-0"
|
||||
data-hj-suppress="true"
|
||||
>
|
||||
Username
|
||||
</p>
|
||||
<svg
|
||||
class="m-0 info-icon"
|
||||
fill="none"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M11 7h2v2h-2V7Zm0 4h2v6h-2v-6Zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h4
|
||||
class="edit-section-header text-gray-700"
|
||||
>
|
||||
onlyBio
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col m-0 pr-0 pl-40px col-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col container-fluid d-inline-flex bg-color-grey-FBFAF9 h-100 w-100 align-items-start justify-content-start g-3rem px-120px py-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<ProfilePage /> handles profile with only country renders profile with only country 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="profile-page"
|
||||
>
|
||||
<div
|
||||
class="profile-page-bg-banner bg-primary d-md-block align-items-center h-100 w-100 px-120px py-5.5"
|
||||
>
|
||||
<div
|
||||
class="col container-fluid w-100 h-100 bg-white py-0 rounded-75 px-40px"
|
||||
>
|
||||
<div
|
||||
class="col h-100 w-100 px-0 justify-content-start g-15rem py-36px"
|
||||
>
|
||||
<div
|
||||
class="row-auto d-flex flex-wrap align-items-center h-100 w-100 justify-content-start g-15rem flex-row"
|
||||
>
|
||||
<div
|
||||
class="profile-avatar-wrap position-relative"
|
||||
>
|
||||
<div
|
||||
class="profile-avatar rounded-circle bg-light"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="text-muted"
|
||||
data-testid="IconMock"
|
||||
focusable="false"
|
||||
role="img"
|
||||
viewbox="0 0 24 24"
|
||||
/>
|
||||
</div>
|
||||
<form
|
||||
enctype="multipart/form-data"
|
||||
>
|
||||
<input
|
||||
accept=".jpg, .jpeg, .png"
|
||||
class="d-none form-control-file"
|
||||
id="photo-file"
|
||||
name="file"
|
||||
type="file"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
<div
|
||||
class="col h-100 w-100 m-0 p-0 justify-content-start align-items-start"
|
||||
>
|
||||
<p
|
||||
class="row m-0 font-weight-bold text-truncate text-primary-500 h3"
|
||||
>
|
||||
onlyCountry
|
||||
</p>
|
||||
<div
|
||||
class="row pt-2 m-0 g-1rem"
|
||||
>
|
||||
<span
|
||||
class="small mb-0 text-gray-800"
|
||||
>
|
||||
Member since
|
||||
<span
|
||||
class="font-weight-bold"
|
||||
>
|
||||
|
||||
2017
|
||||
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="p-0 col-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ml-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col d-inline-flex h-100 w-100 align-items-start justify-content-start g-3rem px-120px py-6"
|
||||
>
|
||||
<div
|
||||
class="w-100 p-0"
|
||||
>
|
||||
<div
|
||||
class="col justify-content-start align-items-start p-0"
|
||||
>
|
||||
<div
|
||||
class="col align-self-stretch height-42px justify-content-start align-items-start p-0"
|
||||
>
|
||||
<p
|
||||
class="font-weight-bold text-primary-500 m-0 h2"
|
||||
>
|
||||
Profile information
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="row m-0 px-0 w-100 d-inline-flex align-items-start justify-content-start pt-5.5"
|
||||
>
|
||||
<div
|
||||
class="col p-0 col-6"
|
||||
>
|
||||
<div
|
||||
class="m-0"
|
||||
>
|
||||
<div
|
||||
class="row m-0 pb-1.5 align-items-center"
|
||||
>
|
||||
<p
|
||||
class="h5 font-weight-bold m-0"
|
||||
data-hj-suppress="true"
|
||||
>
|
||||
Username
|
||||
</p>
|
||||
<svg
|
||||
class="m-0 info-icon"
|
||||
fill="none"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M11 7h2v2h-2V7Zm0 4h2v6h-2v-6Zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h4
|
||||
class="edit-section-header text-gray-700"
|
||||
>
|
||||
onlyCountry
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col m-0 pr-0 pl-40px col-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col container-fluid d-inline-flex bg-color-grey-FBFAF9 h-100 w-100 align-items-start justify-content-start g-3rem px-120px py-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<ProfilePage /> handles profile with only course certificates renders profile with only course certificates 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="profile-page"
|
||||
>
|
||||
<div
|
||||
class="profile-page-bg-banner bg-primary d-md-block align-items-center h-100 w-100 px-120px py-5.5"
|
||||
>
|
||||
<div
|
||||
class="col container-fluid w-100 h-100 bg-white py-0 rounded-75 px-40px"
|
||||
>
|
||||
<div
|
||||
class="col h-100 w-100 px-0 justify-content-start g-15rem py-36px"
|
||||
>
|
||||
<div
|
||||
class="row-auto d-flex flex-wrap align-items-center h-100 w-100 justify-content-start g-15rem flex-row"
|
||||
>
|
||||
<div
|
||||
class="profile-avatar-wrap position-relative"
|
||||
>
|
||||
<div
|
||||
class="profile-avatar rounded-circle bg-light"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="text-muted"
|
||||
data-testid="IconMock"
|
||||
focusable="false"
|
||||
role="img"
|
||||
viewbox="0 0 24 24"
|
||||
/>
|
||||
</div>
|
||||
<form
|
||||
enctype="multipart/form-data"
|
||||
>
|
||||
<input
|
||||
accept=".jpg, .jpeg, .png"
|
||||
class="d-none form-control-file"
|
||||
id="photo-file"
|
||||
name="file"
|
||||
type="file"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
<div
|
||||
class="col h-100 w-100 m-0 p-0 justify-content-start align-items-start"
|
||||
>
|
||||
<p
|
||||
class="row m-0 font-weight-bold text-truncate text-primary-500 h3"
|
||||
>
|
||||
onlyCourseCertificates
|
||||
</p>
|
||||
<div
|
||||
class="row pt-2 m-0 g-1rem"
|
||||
>
|
||||
<span
|
||||
class="small mb-0 text-gray-800"
|
||||
>
|
||||
Member since
|
||||
<span
|
||||
class="font-weight-bold"
|
||||
>
|
||||
|
||||
2017
|
||||
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="p-0 col-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ml-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col d-inline-flex h-100 w-100 align-items-start justify-content-start g-3rem px-120px py-6"
|
||||
>
|
||||
<div
|
||||
class="w-100 p-0"
|
||||
>
|
||||
<div
|
||||
class="col justify-content-start align-items-start p-0"
|
||||
>
|
||||
<div
|
||||
class="col align-self-stretch height-42px justify-content-start align-items-start p-0"
|
||||
>
|
||||
<p
|
||||
class="font-weight-bold text-primary-500 m-0 h2"
|
||||
>
|
||||
Profile information
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="row m-0 px-0 w-100 d-inline-flex align-items-start justify-content-start pt-5.5"
|
||||
>
|
||||
<div
|
||||
class="col p-0 col-6"
|
||||
>
|
||||
<div
|
||||
class="m-0"
|
||||
>
|
||||
<div
|
||||
class="row m-0 pb-1.5 align-items-center"
|
||||
>
|
||||
<p
|
||||
class="h5 font-weight-bold m-0"
|
||||
data-hj-suppress="true"
|
||||
>
|
||||
Username
|
||||
</p>
|
||||
<svg
|
||||
class="m-0 info-icon"
|
||||
fill="none"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M11 7h2v2h-2V7Zm0 4h2v6h-2v-6Zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h4
|
||||
class="edit-section-header text-gray-700"
|
||||
>
|
||||
onlyCourseCertificates
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col m-0 pr-0 pl-40px col-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col container-fluid d-inline-flex bg-color-grey-FBFAF9 h-100 w-100 align-items-start justify-content-start g-3rem px-120px py-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<ProfilePage /> handles profile with only language proficiencies renders profile with only language proficiencies 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="profile-page"
|
||||
>
|
||||
<div
|
||||
class="profile-page-bg-banner bg-primary d-md-block align-items-center h-100 w-100 px-120px py-5.5"
|
||||
>
|
||||
<div
|
||||
class="col container-fluid w-100 h-100 bg-white py-0 rounded-75 px-40px"
|
||||
>
|
||||
<div
|
||||
class="col h-100 w-100 px-0 justify-content-start g-15rem py-36px"
|
||||
>
|
||||
<div
|
||||
class="row-auto d-flex flex-wrap align-items-center h-100 w-100 justify-content-start g-15rem flex-row"
|
||||
>
|
||||
<div
|
||||
class="profile-avatar-wrap position-relative"
|
||||
>
|
||||
<div
|
||||
class="profile-avatar rounded-circle bg-light"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="text-muted"
|
||||
data-testid="IconMock"
|
||||
focusable="false"
|
||||
role="img"
|
||||
viewbox="0 0 24 24"
|
||||
/>
|
||||
</div>
|
||||
<form
|
||||
enctype="multipart/form-data"
|
||||
>
|
||||
<input
|
||||
accept=".jpg, .jpeg, .png"
|
||||
class="d-none form-control-file"
|
||||
id="photo-file"
|
||||
name="file"
|
||||
type="file"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
<div
|
||||
class="col h-100 w-100 m-0 p-0 justify-content-start align-items-start"
|
||||
>
|
||||
<p
|
||||
class="row m-0 font-weight-bold text-truncate text-primary-500 h3"
|
||||
>
|
||||
onlyLanguageProficiencies
|
||||
</p>
|
||||
<div
|
||||
class="row pt-2 m-0 g-1rem"
|
||||
>
|
||||
<span
|
||||
class="small mb-0 text-gray-800"
|
||||
>
|
||||
Member since
|
||||
<span
|
||||
class="font-weight-bold"
|
||||
>
|
||||
|
||||
2017
|
||||
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="p-0 col-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ml-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col d-inline-flex h-100 w-100 align-items-start justify-content-start g-3rem px-120px py-6"
|
||||
>
|
||||
<div
|
||||
class="w-100 p-0"
|
||||
>
|
||||
<div
|
||||
class="col justify-content-start align-items-start p-0"
|
||||
>
|
||||
<div
|
||||
class="col align-self-stretch height-42px justify-content-start align-items-start p-0"
|
||||
>
|
||||
<p
|
||||
class="font-weight-bold text-primary-500 m-0 h2"
|
||||
>
|
||||
Profile information
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="row m-0 px-0 w-100 d-inline-flex align-items-start justify-content-start pt-5.5"
|
||||
>
|
||||
<div
|
||||
class="col p-0 col-6"
|
||||
>
|
||||
<div
|
||||
class="m-0"
|
||||
>
|
||||
<div
|
||||
class="row m-0 pb-1.5 align-items-center"
|
||||
>
|
||||
<p
|
||||
class="h5 font-weight-bold m-0"
|
||||
data-hj-suppress="true"
|
||||
>
|
||||
Username
|
||||
</p>
|
||||
<svg
|
||||
class="m-0 info-icon"
|
||||
fill="none"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M11 7h2v2h-2V7Zm0 4h2v6h-2v-6Zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h4
|
||||
class="edit-section-header text-gray-700"
|
||||
>
|
||||
onlyLanguageProficiencies
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col m-0 pr-0 pl-40px col-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col container-fluid d-inline-flex bg-color-grey-FBFAF9 h-100 w-100 align-items-start justify-content-start g-3rem px-120px py-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<ProfilePage /> handles profile with only level of education renders profile with only level of education 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="profile-page"
|
||||
>
|
||||
<div
|
||||
class="profile-page-bg-banner bg-primary d-md-block align-items-center h-100 w-100 px-120px py-5.5"
|
||||
>
|
||||
<div
|
||||
class="col container-fluid w-100 h-100 bg-white py-0 rounded-75 px-40px"
|
||||
>
|
||||
<div
|
||||
class="col h-100 w-100 px-0 justify-content-start g-15rem py-36px"
|
||||
>
|
||||
<div
|
||||
class="row-auto d-flex flex-wrap align-items-center h-100 w-100 justify-content-start g-15rem flex-row"
|
||||
>
|
||||
<div
|
||||
class="profile-avatar-wrap position-relative"
|
||||
>
|
||||
<div
|
||||
class="profile-avatar rounded-circle bg-light"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="text-muted"
|
||||
data-testid="IconMock"
|
||||
focusable="false"
|
||||
role="img"
|
||||
viewbox="0 0 24 24"
|
||||
/>
|
||||
</div>
|
||||
<form
|
||||
enctype="multipart/form-data"
|
||||
>
|
||||
<input
|
||||
accept=".jpg, .jpeg, .png"
|
||||
class="d-none form-control-file"
|
||||
id="photo-file"
|
||||
name="file"
|
||||
type="file"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
<div
|
||||
class="col h-100 w-100 m-0 p-0 justify-content-start align-items-start"
|
||||
>
|
||||
<p
|
||||
class="row m-0 font-weight-bold text-truncate text-primary-500 h3"
|
||||
>
|
||||
onlyLevelOfEducation
|
||||
</p>
|
||||
<div
|
||||
class="row pt-2 m-0 g-1rem"
|
||||
>
|
||||
<span
|
||||
class="small mb-0 text-gray-800"
|
||||
>
|
||||
Member since
|
||||
<span
|
||||
class="font-weight-bold"
|
||||
>
|
||||
|
||||
2017
|
||||
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="p-0 col-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ml-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col d-inline-flex h-100 w-100 align-items-start justify-content-start g-3rem px-120px py-6"
|
||||
>
|
||||
<div
|
||||
class="w-100 p-0"
|
||||
>
|
||||
<div
|
||||
class="col justify-content-start align-items-start p-0"
|
||||
>
|
||||
<div
|
||||
class="col align-self-stretch height-42px justify-content-start align-items-start p-0"
|
||||
>
|
||||
<p
|
||||
class="font-weight-bold text-primary-500 m-0 h2"
|
||||
>
|
||||
Profile information
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="row m-0 px-0 w-100 d-inline-flex align-items-start justify-content-start pt-5.5"
|
||||
>
|
||||
<div
|
||||
class="col p-0 col-6"
|
||||
>
|
||||
<div
|
||||
class="m-0"
|
||||
>
|
||||
<div
|
||||
class="row m-0 pb-1.5 align-items-center"
|
||||
>
|
||||
<p
|
||||
class="h5 font-weight-bold m-0"
|
||||
data-hj-suppress="true"
|
||||
>
|
||||
Username
|
||||
</p>
|
||||
<svg
|
||||
class="m-0 info-icon"
|
||||
fill="none"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M11 7h2v2h-2V7Zm0 4h2v6h-2v-6Zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h4
|
||||
class="edit-section-header text-gray-700"
|
||||
>
|
||||
onlyLevelOfEducation
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col m-0 pr-0 pl-40px col-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col container-fluid d-inline-flex bg-color-grey-FBFAF9 h-100 w-100 align-items-start justify-content-start g-3rem px-120px py-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<ProfilePage /> handles profile with only name renders profile with only name 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="profile-page"
|
||||
>
|
||||
<div
|
||||
class="profile-page-bg-banner bg-primary d-md-block align-items-center h-100 w-100 px-120px py-5.5"
|
||||
>
|
||||
<div
|
||||
class="col container-fluid w-100 h-100 bg-white py-0 rounded-75 px-40px"
|
||||
>
|
||||
<div
|
||||
class="col h-100 w-100 px-0 justify-content-start g-15rem py-36px"
|
||||
>
|
||||
<div
|
||||
class="row-auto d-flex flex-wrap align-items-center h-100 w-100 justify-content-start g-15rem flex-row"
|
||||
>
|
||||
<div
|
||||
class="profile-avatar-wrap position-relative"
|
||||
>
|
||||
<div
|
||||
class="profile-avatar rounded-circle bg-light"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="text-muted"
|
||||
data-testid="IconMock"
|
||||
focusable="false"
|
||||
role="img"
|
||||
viewbox="0 0 24 24"
|
||||
/>
|
||||
</div>
|
||||
<form
|
||||
enctype="multipart/form-data"
|
||||
>
|
||||
<input
|
||||
accept=".jpg, .jpeg, .png"
|
||||
class="d-none form-control-file"
|
||||
id="photo-file"
|
||||
name="file"
|
||||
type="file"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
<div
|
||||
class="col h-100 w-100 m-0 p-0 justify-content-start align-items-start"
|
||||
>
|
||||
<p
|
||||
class="row m-0 font-weight-bold text-truncate text-primary-500 h3"
|
||||
>
|
||||
onlyName
|
||||
</p>
|
||||
<div
|
||||
class="row pt-2 m-0 g-1rem"
|
||||
>
|
||||
<span
|
||||
class="small mb-0 text-gray-800"
|
||||
>
|
||||
Member since
|
||||
<span
|
||||
class="font-weight-bold"
|
||||
>
|
||||
|
||||
2017
|
||||
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="p-0 col-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ml-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col d-inline-flex h-100 w-100 align-items-start justify-content-start g-3rem px-120px py-6"
|
||||
>
|
||||
<div
|
||||
class="w-100 p-0"
|
||||
>
|
||||
<div
|
||||
class="col justify-content-start align-items-start p-0"
|
||||
>
|
||||
<div
|
||||
class="col align-self-stretch height-42px justify-content-start align-items-start p-0"
|
||||
>
|
||||
<p
|
||||
class="font-weight-bold text-primary-500 m-0 h2"
|
||||
>
|
||||
Profile information
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="row m-0 px-0 w-100 d-inline-flex align-items-start justify-content-start pt-5.5"
|
||||
>
|
||||
<div
|
||||
class="col p-0 col-6"
|
||||
>
|
||||
<div
|
||||
class="m-0"
|
||||
>
|
||||
<div
|
||||
class="row m-0 pb-1.5 align-items-center"
|
||||
>
|
||||
<p
|
||||
class="h5 font-weight-bold m-0"
|
||||
data-hj-suppress="true"
|
||||
>
|
||||
Username
|
||||
</p>
|
||||
<svg
|
||||
class="m-0 info-icon"
|
||||
fill="none"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M11 7h2v2h-2V7Zm0 4h2v6h-2v-6Zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h4
|
||||
class="edit-section-header text-gray-700"
|
||||
>
|
||||
onlyName
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col m-0 pr-0 pl-40px col-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col container-fluid d-inline-flex bg-color-grey-FBFAF9 h-100 w-100 align-items-start justify-content-start g-3rem px-120px py-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<ProfilePage /> handles profile with only social links renders profile with only social links 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="profile-page"
|
||||
>
|
||||
<div
|
||||
class="profile-page-bg-banner bg-primary d-md-block align-items-center h-100 w-100 px-120px py-5.5"
|
||||
>
|
||||
<div
|
||||
class="col container-fluid w-100 h-100 bg-white py-0 rounded-75 px-40px"
|
||||
>
|
||||
<div
|
||||
class="col h-100 w-100 px-0 justify-content-start g-15rem py-36px"
|
||||
>
|
||||
<div
|
||||
class="row-auto d-flex flex-wrap align-items-center h-100 w-100 justify-content-start g-15rem flex-row"
|
||||
>
|
||||
<div
|
||||
class="profile-avatar-wrap position-relative"
|
||||
>
|
||||
<div
|
||||
class="profile-avatar rounded-circle bg-light"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="text-muted"
|
||||
data-testid="IconMock"
|
||||
focusable="false"
|
||||
role="img"
|
||||
viewbox="0 0 24 24"
|
||||
/>
|
||||
</div>
|
||||
<form
|
||||
enctype="multipart/form-data"
|
||||
>
|
||||
<input
|
||||
accept=".jpg, .jpeg, .png"
|
||||
class="d-none form-control-file"
|
||||
id="photo-file"
|
||||
name="file"
|
||||
type="file"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
<div
|
||||
class="col h-100 w-100 m-0 p-0 justify-content-start align-items-start"
|
||||
>
|
||||
<p
|
||||
class="row m-0 font-weight-bold text-truncate text-primary-500 h3"
|
||||
>
|
||||
onlySocialLinks
|
||||
</p>
|
||||
<div
|
||||
class="row pt-2 m-0 g-1rem"
|
||||
>
|
||||
<span
|
||||
class="small mb-0 text-gray-800"
|
||||
>
|
||||
Member since
|
||||
<span
|
||||
class="font-weight-bold"
|
||||
>
|
||||
|
||||
2017
|
||||
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="p-0 col-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ml-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col d-inline-flex h-100 w-100 align-items-start justify-content-start g-3rem px-120px py-6"
|
||||
>
|
||||
<div
|
||||
class="w-100 p-0"
|
||||
>
|
||||
<div
|
||||
class="col justify-content-start align-items-start p-0"
|
||||
>
|
||||
<div
|
||||
class="col align-self-stretch height-42px justify-content-start align-items-start p-0"
|
||||
>
|
||||
<p
|
||||
class="font-weight-bold text-primary-500 m-0 h2"
|
||||
>
|
||||
Profile information
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="row m-0 px-0 w-100 d-inline-flex align-items-start justify-content-start pt-5.5"
|
||||
>
|
||||
<div
|
||||
class="col p-0 col-6"
|
||||
>
|
||||
<div
|
||||
class="m-0"
|
||||
>
|
||||
<div
|
||||
class="row m-0 pb-1.5 align-items-center"
|
||||
>
|
||||
<p
|
||||
class="h5 font-weight-bold m-0"
|
||||
data-hj-suppress="true"
|
||||
>
|
||||
Username
|
||||
</p>
|
||||
<svg
|
||||
class="m-0 info-icon"
|
||||
fill="none"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M11 7h2v2h-2V7Zm0 4h2v6h-2v-6Zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h4
|
||||
class="edit-section-header text-gray-700"
|
||||
>
|
||||
onlySocialLinks
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col m-0 pr-0 pl-40px col-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col container-fluid d-inline-flex bg-color-grey-FBFAF9 h-100 w-100 align-items-start justify-content-start g-3rem px-120px py-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<ProfilePage /> handles profile with only username and no other fields renders profile with only username 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="profile-page"
|
||||
>
|
||||
<div
|
||||
class="profile-page-bg-banner bg-primary d-md-block align-items-center h-100 w-100 px-120px py-5.5"
|
||||
>
|
||||
<div
|
||||
class="col container-fluid w-100 h-100 bg-white py-0 rounded-75 px-40px"
|
||||
>
|
||||
<div
|
||||
class="col h-100 w-100 px-0 justify-content-start g-15rem py-36px"
|
||||
>
|
||||
<div
|
||||
class="row-auto d-flex flex-wrap align-items-center h-100 w-100 justify-content-start g-15rem flex-row"
|
||||
>
|
||||
<div
|
||||
class="profile-avatar-wrap position-relative"
|
||||
>
|
||||
<div
|
||||
class="profile-avatar rounded-circle bg-light"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="text-muted"
|
||||
data-testid="IconMock"
|
||||
focusable="false"
|
||||
role="img"
|
||||
viewbox="0 0 24 24"
|
||||
/>
|
||||
</div>
|
||||
<form
|
||||
enctype="multipart/form-data"
|
||||
>
|
||||
<input
|
||||
accept=".jpg, .jpeg, .png"
|
||||
class="d-none form-control-file"
|
||||
id="photo-file"
|
||||
name="file"
|
||||
type="file"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
<div
|
||||
class="col h-100 w-100 m-0 p-0 justify-content-start align-items-start"
|
||||
>
|
||||
<p
|
||||
class="row m-0 font-weight-bold text-truncate text-primary-500 h3"
|
||||
>
|
||||
onlyUsernameNoFields
|
||||
</p>
|
||||
<div
|
||||
class="row pt-2 m-0 g-1rem"
|
||||
>
|
||||
<span
|
||||
class="small mb-0 text-gray-800"
|
||||
>
|
||||
Member since
|
||||
<span
|
||||
class="font-weight-bold"
|
||||
>
|
||||
|
||||
2017
|
||||
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="p-0 col-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ml-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col d-inline-flex h-100 w-100 align-items-start justify-content-start g-3rem px-120px py-6"
|
||||
>
|
||||
<div
|
||||
class="w-100 p-0"
|
||||
>
|
||||
<div
|
||||
class="col justify-content-start align-items-start p-0"
|
||||
>
|
||||
<div
|
||||
class="col align-self-stretch height-42px justify-content-start align-items-start p-0"
|
||||
>
|
||||
<p
|
||||
class="font-weight-bold text-primary-500 m-0 h2"
|
||||
>
|
||||
Profile information
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="row m-0 px-0 w-100 d-inline-flex align-items-start justify-content-start pt-5.5"
|
||||
>
|
||||
<div
|
||||
class="col p-0 col-6"
|
||||
>
|
||||
<div
|
||||
class="m-0"
|
||||
>
|
||||
<div
|
||||
class="row m-0 pb-1.5 align-items-center"
|
||||
>
|
||||
<p
|
||||
class="h5 font-weight-bold m-0"
|
||||
data-hj-suppress="true"
|
||||
>
|
||||
Username
|
||||
</p>
|
||||
<svg
|
||||
class="m-0 info-icon"
|
||||
fill="none"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M11 7h2v2h-2V7Zm0 4h2v6h-2v-6Zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h4
|
||||
class="edit-section-header text-gray-700"
|
||||
>
|
||||
onlyUsernameNoFields
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col m-0 pr-0 pl-40px col-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col container-fluid d-inline-flex bg-color-grey-FBFAF9 h-100 w-100 align-items-start justify-content-start g-3rem px-120px py-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<ProfilePage /> handles profile with only username renders profile with only username 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="profile-page"
|
||||
>
|
||||
<div
|
||||
class="profile-page-bg-banner bg-primary d-md-block align-items-center h-100 w-100 px-120px py-5.5"
|
||||
>
|
||||
<div
|
||||
class="col container-fluid w-100 h-100 bg-white py-0 rounded-75 px-40px"
|
||||
>
|
||||
<div
|
||||
class="col h-100 w-100 px-0 justify-content-start g-15rem py-36px"
|
||||
>
|
||||
<div
|
||||
class="row-auto d-flex flex-wrap align-items-center h-100 w-100 justify-content-start g-15rem flex-row"
|
||||
>
|
||||
<div
|
||||
class="profile-avatar-wrap position-relative"
|
||||
>
|
||||
<div
|
||||
class="profile-avatar rounded-circle bg-light"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="text-muted"
|
||||
data-testid="IconMock"
|
||||
focusable="false"
|
||||
role="img"
|
||||
viewbox="0 0 24 24"
|
||||
/>
|
||||
</div>
|
||||
<form
|
||||
enctype="multipart/form-data"
|
||||
>
|
||||
<input
|
||||
accept=".jpg, .jpeg, .png"
|
||||
class="d-none form-control-file"
|
||||
id="photo-file"
|
||||
name="file"
|
||||
type="file"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
<div
|
||||
class="col h-100 w-100 m-0 p-0 justify-content-start align-items-start"
|
||||
>
|
||||
<p
|
||||
class="row m-0 font-weight-bold text-truncate text-primary-500 h3"
|
||||
>
|
||||
onlyUsername
|
||||
</p>
|
||||
<div
|
||||
class="row pt-2 m-0 g-1rem"
|
||||
>
|
||||
<span
|
||||
class="small mb-0 text-gray-800"
|
||||
>
|
||||
Member since
|
||||
<span
|
||||
class="font-weight-bold"
|
||||
>
|
||||
|
||||
2017
|
||||
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="p-0 col-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ml-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col d-inline-flex h-100 w-100 align-items-start justify-content-start g-3rem px-120px py-6"
|
||||
>
|
||||
<div
|
||||
class="w-100 p-0"
|
||||
>
|
||||
<div
|
||||
class="col justify-content-start align-items-start p-0"
|
||||
>
|
||||
<div
|
||||
class="col align-self-stretch height-42px justify-content-start align-items-start p-0"
|
||||
>
|
||||
<p
|
||||
class="font-weight-bold text-primary-500 m-0 h2"
|
||||
>
|
||||
Profile information
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="row m-0 px-0 w-100 d-inline-flex align-items-start justify-content-start pt-5.5"
|
||||
>
|
||||
<div
|
||||
class="col p-0 col-6"
|
||||
>
|
||||
<div
|
||||
class="m-0"
|
||||
>
|
||||
<div
|
||||
class="row m-0 pb-1.5 align-items-center"
|
||||
>
|
||||
<p
|
||||
class="h5 font-weight-bold m-0"
|
||||
data-hj-suppress="true"
|
||||
>
|
||||
Username
|
||||
</p>
|
||||
<svg
|
||||
class="m-0 info-icon"
|
||||
fill="none"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M11 7h2v2h-2V7Zm0 4h2v6h-2v-6Zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h4
|
||||
class="edit-section-header text-gray-700"
|
||||
>
|
||||
onlyUsername
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col m-0 pr-0 pl-40px col-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col container-fluid d-inline-flex bg-color-grey-FBFAF9 h-100 w-100 align-items-start justify-content-start g-3rem px-120px py-6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
Reference in New Issue
Block a user