refactor PageLoader common component

This commit is contained in:
Oleg Shuralev 2021-03-10 23:09:08 +03:00
parent 203f4be015
commit 3b47cf3104
No known key found for this signature in database
GPG key ID: 99C6BDC0A1C2E647
3 changed files with 17 additions and 6 deletions

View file

@ -2,14 +2,14 @@ import React from 'react';
import cx from 'classnames'; import cx from 'classnames';
interface Props { interface Props {
isFullHeight: boolean; fullHeight: boolean;
} }
const PageLoader: React.FC<Partial<Props>> = ({ isFullHeight = true }) => ( const PageLoader: React.FC<Partial<Props>> = ({ fullHeight }) => (
<section <section
className={cx( className={cx(
'hero', 'hero',
isFullHeight ? 'is-fullheight-with-navbar' : 'is-halfheight' fullHeight ? 'is-fullheight-with-navbar' : 'is-halfheight'
)} )}
> >
<div <div

View file

@ -4,7 +4,18 @@ import PageLoader from '../PageLoader';
describe('PageLoader', () => { describe('PageLoader', () => {
it('matches the snapshot', () => { it('matches the snapshot', () => {
const component = mount(<PageLoader />); expect(mount(<PageLoader />)).toMatchSnapshot();
expect(component).toMatchSnapshot(); });
it('renders half-height page loader by default', () => {
const wrapper = mount(<PageLoader />);
expect(wrapper.exists('.hero.is-halfheight')).toBeTruthy();
expect(wrapper.exists('.hero.is-fullheight-with-navbar')).toBeFalsy();
});
it('renders fullheight page loader', () => {
const wrapper = mount(<PageLoader fullHeight />);
expect(wrapper.exists('.hero.is-halfheight')).toBeFalsy();
expect(wrapper.exists('.hero.is-fullheight-with-navbar')).toBeTruthy();
}); });
}); });

View file

@ -3,7 +3,7 @@
exports[`PageLoader matches the snapshot 1`] = ` exports[`PageLoader matches the snapshot 1`] = `
<PageLoader> <PageLoader>
<section <section
className="hero is-fullheight-with-navbar" className="hero is-halfheight"
> >
<div <div
className="hero-body has-text-centered" className="hero-body has-text-centered"