Skip to content

Commit

Permalink
Add bounce and shake along with tests (#469)
Browse files Browse the repository at this point in the history
  • Loading branch information
jasonlundien authored Feb 24, 2022
1 parent 83a50e0 commit 6b6af65
Show file tree
Hide file tree
Showing 4 changed files with 71 additions and 5 deletions.
4 changes: 4 additions & 0 deletions src/components/FontAwesomeIcon.js
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,8 @@ FontAwesomeIcon.propTypes = {

border: PropTypes.bool,

bounce: PropTypes.bool,

className: PropTypes.string,

fade: PropTypes.bool,
Expand Down Expand Up @@ -97,6 +99,8 @@ FontAwesomeIcon.propTypes = {

rotation: PropTypes.oneOf([0, 90, 180, 270]),

shake: PropTypes.bool,

size: PropTypes.oneOf([
'2xs',
'xs',
Expand Down
30 changes: 30 additions & 0 deletions src/components/__tests__/FontAwesomeIcon.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -233,6 +233,36 @@ test('using size', () => {
})
})

describe('using bounce', () => {
test('setting bounce prop to true adds fa-bounce class', () => {
const vm = mount({ icon: faCoffee, bounce: true })

expect(vm.props.className.includes('fa-bounce')).toBeTruthy()
})

test('setting bounce prop to false after setting it to true results in no fa-bounce class', () => {
let vm = mount({ icon: faCoffee, bounce: true })
expect(vm.props.className.includes('fa-bounce')).toBeTruthy()
vm = mount({ icon: faCoffee, bounce: false })
expect(vm.props.className.includes('fa-bounce')).toBeFalsy()
})
})

describe('using shake', () => {
test('setting shake prop to true adds fa-shake class', () => {
const vm = mount({ icon: faCoffee, shake: true })

expect(vm.props.className.includes('fa-shake')).toBeTruthy()
})

test('setting shake prop to false after setting it to true results in no fa-shake class', () => {
let vm = mount({ icon: faCoffee, shake: true })
expect(vm.props.className.includes('fa-shake')).toBeTruthy()
vm = mount({ icon: faCoffee, shake: false })
expect(vm.props.className.includes('fa-shake')).toBeFalsy()
})
})

describe('using spin', () => {
test('setting spin prop to true adds fa-spin class', () => {
const vm = mount({ icon: faCoffee, spin: true })
Expand Down
36 changes: 32 additions & 4 deletions src/utils/__tests__/get-class-list-from-props.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,30 +2,42 @@ import getClassList from '../get-class-list-from-props'

describe('get class list', () => {
test('test the booleans', () => {
// the six we're testing plus the three defaults
const NUM_CLASSES = 6
// the eight we're testing plus the three defaults
const NUM_CLASSES = 8

const props = {
spin: true,
pulse: true,
fixedWidth: true,
inverse: true,
border: true,
listItem: true
listItem: true,
shake: true,
bounce: true
}

const classList = getClassList(props)
expect(classList.length).toBe(NUM_CLASSES)
expect(classList).toStrictEqual([
'fa-bounce',
'fa-spin',
'fa-pulse',
'fa-fw',
'fa-inverse',
'fa-border',
'fa-li'
'fa-li',
'fa-shake'
])
})

test('size', () => {
function testSize(size) {
expect(getClassList({ size })).toStrictEqual([`fa-${size}`])
}

testSize('xs')
})

test('flip', () => {
const HORIZONTAL = 'fa-flip-horizontal'
const VERTICAL = 'fa-flip-vertical'
Expand Down Expand Up @@ -118,3 +130,19 @@ describe('get class list', () => {
})
})
})

test('bounce', () => {
function testBounce(bounce) {
expect(getClassList({ bounce })).toStrictEqual([`fa-${bounce}`])
}

testBounce('bounce')
})

test('shake', () => {
function testShake(shake) {
expect(getClassList({ shake })).toStrictEqual([`fa-${shake}`])
}

testShake('shake')
})
6 changes: 5 additions & 1 deletion src/utils/get-class-list-from-props.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
export default function classList(props) {
const {
beat,
bounce,
fade,
flash,
spin,
Expand All @@ -15,12 +16,14 @@ export default function classList(props) {
flip,
size,
rotation,
pull
pull,
shake
} = props

// map of CSS class names to properties
const classes = {
'fa-beat': beat,
'fa-bounce': bounce,
'fa-fade': fade,
'fa-flash': flash,
'fa-spin': spin,
Expand All @@ -37,6 +40,7 @@ export default function classList(props) {
[`fa-rotate-${rotation}`]:
typeof rotation !== 'undefined' && rotation !== null && rotation !== 0,
[`fa-pull-${pull}`]: typeof pull !== 'undefined' && pull !== null,
'fa-shake': shake,
'fa-swap-opacity': props.swapOpacity
}

Expand Down

0 comments on commit 6b6af65

Please sign in to comment.