0ct0pu5/kafka-ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor PageLoader common component

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

6
kafka-ui-react-app/src/components/common/PageLoader/PageLoader.tsx
View file

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

15
kafka-ui-react-app/src/components/common/PageLoader/__tests__/PageLoader.spec.tsx
View file

@ -4,7 +4,18 @@ import PageLoader from '../PageLoader';
describe('PageLoader', () => {
it('matches the snapshot', () => {
const component = mount(<PageLoader />);
expect(component).toMatchSnapshot();
expect(mount(<PageLoader />)).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();
});
});

2
kafka-ui-react-app/src/components/common/PageLoader/__tests__/__snapshots__/PageLoader.spec.tsx.snap
View file

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