-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #310 from TykTechnologies/TUI-24/loader-tests
unit tests for the loader component
- Loading branch information
Showing
2 changed files
with
55 additions
and
58 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |