Skip to content

Commit

Permalink
Merge pull request #310 from TykTechnologies/TUI-24/loader-tests
Browse files Browse the repository at this point in the history
unit tests for the loader component
  • Loading branch information
ifrim authored Nov 6, 2023
2 parents 60eda41 + e31cf23 commit bdf8e7d
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 58 deletions.
27 changes: 25 additions & 2 deletions src/components/Loader/Loader.test.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,30 @@
import React from 'react';
import Loader from './index';

describe('Loader', () => {
it('TODO', () => {
expect(true).to.equal(true);
const selectors = {
loader: '.loading',
wrapper: '.tyk-loading__wrapper',
};

it('renders the loader component, by default with position relative and no wrapper', () => {
cy.mount(<Loader />)
.get(selectors.loader)
.should('exist')
.and('have.css', 'position', 'relative')
.get(selectors.wrapper)
.should('not.exist');
});

it('the position can be configured', () => {
cy.mount(<Loader position="absolute" />)
.get(selectors.loader)
.should('have.css', 'position', 'absolute');
});

it('the wrapper can be displayed with the "withbackground" prop', () => {
cy.mount(<Loader withbackground />)
.get(selectors.wrapper)
.should('exist');
});
});
86 changes: 30 additions & 56 deletions src/components/Loader/index.js
Original file line number Diff line number Diff line change
@@ -1,60 +1,34 @@
import React, { Component, Fragment } from 'react';
import React from 'react';
import PropTypes from 'prop-types';

export default class Loader extends Component {
static propTypes = {
/** add a class to loader */
className: PropTypes.string,
/** position of loader (absolute / relative) */
position: PropTypes.string,
/** defines weather loader should be renders with / without background */
withbackground: PropTypes.bool,
};

static defaultProps = {
position: 'relative',
withbackground: false,
}

getCssClasses() {
let cssClasses = ['loading'];
const { className, position } = this.props;

cssClasses.push(position || 'absolute');

if (className) {
cssClasses = cssClasses.concat(className.split(' '));
}

return cssClasses.join(' ');
}

getLoaderComponent() {
return (
<div className={this.getCssClasses()}>
<div className="loading-bar" />
<div className="loading-bar" />
<div className="loading-bar" />
<div className="loading-bar" />
</div>
);
}
function Loader({ className, position = 'relative', withbackground = false }) {
const classes = [
'loading',
position,
className,
].filter(Boolean).join(' ');

const loader = (
<div className={classes}>
<div className="loading-bar" />
<div className="loading-bar" />
<div className="loading-bar" />
<div className="loading-bar" />
</div>
);

return withbackground
? <div className="tyk-loading__wrapper">{loader}</div>
: loader;
}

render() {
const { withbackground } = this.props;
Loader.propTypes = {
/** add a class to loader */
className: PropTypes.string,
/** position of loader (absolute / relative) */
position: PropTypes.string,
/** defines weather loader should be renders with or without background */
withbackground: PropTypes.bool,
};

return (
<Fragment>
{
withbackground
? (
<div className="tyk-loading__wrapper">
{this.getLoaderComponent()}
</div>
)
: this.getLoaderComponent()
}
</Fragment>
);
}
}
export default Loader;

0 comments on commit bdf8e7d

Please sign in to comment.