Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add bounce and shake along with tests #469

Merged
merged 2 commits into from
Feb 24, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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