Skip to content

Commit

Permalink
fixup commit deleted from 3.x
Browse files Browse the repository at this point in the history
  • Loading branch information
@jasonlundien
jasonlundien committed Jul 10, 2023
1 parent e047815 commit 43bd86e
Show file tree
Hide file tree
Showing 3 changed files with 92 additions and 49 deletions.
9 changes: 5 additions & 4 deletions src/components/__fixtures__/helpers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,21 @@ import { mount } from '@vue/test-utils'
import FontAwesomeIcon from '../FontAwesomeIcon'
import { parse } from '@fortawesome/fontawesome-svg-core'

export function compileAndMount (definition, props = {}) {
export function compileAndMount(definition, props = {}) {
return mount(definition, { props })
}

export function mountFromProps (props = {}) {
export function mountFromProps(props = {}) {
return mount(FontAwesomeIcon, { props })
}

export function coreHasFeature (feature) {
if (feature === REFERENCE_ICON_BY_STYLE || feature === ICON_ALIASES || feature === REFERENCE_ICON_USING_STRING) {
export function coreHasFeature(feature) {
if (feature === REFERENCE_ICON_BY_STYLE || feature === ICON_ALIASES || feature === REFERENCE_ICON_USING_STRING || feature === REFERENCE_ICON_USING_FAMILY) {
return parse.icon
}
}

export const REFERENCE_ICON_BY_STYLE = 0x00
export const ICON_ALIASES = 0x01
export const REFERENCE_ICON_USING_STRING = 0x02
export const REFERENCE_ICON_USING_FAMILY = 0x03
30 changes: 9 additions & 21 deletions src/components/__fixtures__/icons.js
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,23 @@
export const faCoffee = {
prefix: 'fas',
iconName: 'coffee',
icon: [
640,
512,
[],
"f001",
"..."
]
icon: [640, 512, [], 'f001', '...']
}

export const faCircle = {
prefix: 'fas',
iconName: 'circle',
icon: [
640,
512,
[],
"f002",
"..."
]
icon: [640, 512, [], 'f002', '...']
}

export const faAlien = {
prefix: 'fad',
iconName: 'alien',
icon: [
640,
512,
[],
"f003",
"..."
]
icon: [640, 512, [], 'f003', '...']
}

export const faDog = {
prefix: 'fass',
iconName: 'dog',
icon: [640, 512, [], 'f200', '...']
}
102 changes: 78 additions & 24 deletions src/components/__tests__/FontAwesomeIcon.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,20 @@

import { library } from '@fortawesome/fontawesome-svg-core'
import { faClose, faUser } from '@fortawesome/free-solid-svg-icons'
import { faCoffee, faCircle, faAlien } from '../__fixtures__/icons'
import { compileAndMount, mountFromProps, coreHasFeature, REFERENCE_ICON_USING_STRING, REFERENCE_ICON_BY_STYLE, ICON_ALIASES } from '../__fixtures__/helpers'
import { faCoffee, faCircle, faAlien, faDog } from '../__fixtures__/icons'
import {
compileAndMount,
mountFromProps,
coreHasFeature,
REFERENCE_ICON_USING_STRING,
REFERENCE_ICON_BY_STYLE,
REFERENCE_ICON_USING_FAMILY,
ICON_ALIASES
} from '../__fixtures__/helpers'
import FontAwesomeIcon from '../FontAwesomeIcon'

beforeEach(() => {
library.add(faCoffee, faCircle, faAlien)
library.add(faCoffee, faCircle, faAlien, faDog)
})

afterEach(() => {
Expand Down Expand Up @@ -88,7 +96,7 @@ describe('unrelated Vue data options', () => {
test('with extra static class', () => {
const wrapper = compileAndMount({
template: '<font-awesome-icon class="extra" :icon="icon" />',
data () {
data() {
return { icon: faCoffee }
},
components: {
Expand Down Expand Up @@ -117,7 +125,7 @@ describe('unrelated Vue data options', () => {
test('with extra style', () => {
const wrapper = compileAndMount({
template: `<font-awesome-icon :style="{'font-size': '42px'}" :icon="icon" />`,
data () {
data() {
return { icon: faCoffee }
},
components: {
Expand All @@ -131,7 +139,7 @@ describe('unrelated Vue data options', () => {
test('with extra DOM property', () => {
const wrapper = compileAndMount({
template: `<font-awesome-icon rel="local" :icon="icon" />`,
data () {
data() {
return { icon: faCoffee }
},
components: {
Expand All @@ -147,11 +155,11 @@ describe('unrelated Vue data options', () => {

const wrapper = compileAndMount({
template: '<font-awesome-icon @click="clicked" :icon="icon" />',
data () {
data() {
return { icon: faCoffee }
},
methods: {
clicked () {
clicked() {
hasBeenClicked = true
}
},
Expand Down Expand Up @@ -189,7 +197,7 @@ describe('using flip', () => {
})

test('horizontal', () => {
const wrapper = mountFromProps({ icon: faCoffee, flip: "horizontal" })
const wrapper = mountFromProps({ icon: faCoffee, flip: 'horizontal' })

expect(wrapper.element.classList.contains('fa-flip-horizontal')).toBeTruthy()
expect(wrapper.element.classList.contains('fa-flip-vertical')).toBeFalsy()
Expand All @@ -198,7 +206,7 @@ describe('using flip', () => {
})

test('vertical', () => {
const wrapper = mountFromProps({ icon: faCoffee, flip: "vertical" })
const wrapper = mountFromProps({ icon: faCoffee, flip: 'vertical' })

expect(wrapper.element.classList.contains('fa-flip-vertical')).toBeTruthy()
expect(wrapper.element.classList.contains('fa-flip-horizontal')).toBeFalsy()
Expand All @@ -207,7 +215,7 @@ describe('using flip', () => {
})

test('both', () => {
const wrapper = mountFromProps({ icon: faCoffee, flip: "both" })
const wrapper = mountFromProps({ icon: faCoffee, flip: 'both' })

expect(wrapper.element.classList.contains('fa-flip-horizontal')).toBeTruthy()
expect(wrapper.element.classList.contains('fa-flip-vertical')).toBeTruthy()
Expand All @@ -223,13 +231,13 @@ test('using listItem', () => {

describe('using pull', () => {
test('right', () => {
const wrapper = mountFromProps({ icon: faCoffee, pull: "right" })
const wrapper = mountFromProps({ icon: faCoffee, pull: 'right' })

expect(wrapper.element.classList.contains('fa-pull-right')).toBeTruthy()
})

test('left', () => {
const wrapper = mountFromProps({ icon: faCoffee, pull: "left" })
const wrapper = mountFromProps({ icon: faCoffee, pull: 'left' })

expect(wrapper.element.classList.contains('fa-pull-left')).toBeTruthy()
})
Expand Down Expand Up @@ -274,7 +282,7 @@ test('swap opacity', () => {
})

test('using size', () => {
['2xs', 'xs', 'sm', 'lg', 'xl', '2xl', '1x', '2x', '3x', '4x', '5x', '6x', '7x', '8x', '9x', '10x'].forEach(size => {
;['2xs', 'xs', 'sm', 'lg', 'xl', '2xl', '1x', '2x', '3x', '4x', '5x', '6x', '7x', '8x', '9x', '10x'].forEach((size) => {
const wrapper = mountFromProps({ icon: faCoffee, size: size })

expect(wrapper.element.classList.contains(`fa-${size}`)).toBeTruthy()
Expand All @@ -295,13 +303,26 @@ test('using inverse', () => {

describe('using transform', () => {
test('string', () => {
const wrapper = mountFromProps({ icon: faCoffee, transform: 'grow-40 left-4 rotate-15' })
const wrapper = mountFromProps({
icon: faCoffee,
transform: 'grow-40 left-4 rotate-15'
})

expect(wrapper.element).toBeTruthy()
})

test('object', () => {
const wrapper = mountFromProps({ icon: faCoffee, transform: { flipX: false, flipY: false, rotate: 15, size: 56, x: -4, y: 0 } })
const wrapper = mountFromProps({
icon: faCoffee,
transform: {
flipX: false,
flipY: false,
rotate: 15,
size: 56,
x: -4,
y: 0
}
})

expect(wrapper.element).toBeTruthy()
})
Expand All @@ -313,22 +334,16 @@ describe('mask', () => {

expect(wrapper.element.innerHTML).toMatch(/clipPath/)
})

test('will add icon referencing library', () => {
const wrapper = mountFromProps({ icon: ['fas', 'coffee'], mask: ['fas', 'circle'] })

// missing assertion here
})
})

describe('symbol', () => {
test("will not create a symbol", () => {
test('will not create a symbol', () => {
const wrapper = mountFromProps({ icon: faCoffee })

expect(wrapper.element.style.getPropertyValue('display')).toBe('')
})

test("will create a symbol", () => {
test('will create a symbol', () => {
const wrapper = mountFromProps({ icon: faCoffee, symbol: 'coffee-icon' })

expect(wrapper.element.style.getPropertyValue('display')).toBe('none')
Expand Down Expand Up @@ -453,3 +468,42 @@ if (coreHasFeature(ICON_ALIASES)) {
expect(wrapper.element.classList.contains('fa-xmark')).toBeTruthy()
})
}

describe('using a family', () => {
if (coreHasFeature(REFERENCE_ICON_USING_FAMILY)) {
test('will find a sharp solid icon using array format, short prefix, and short icon name', () => {
const wrapper = mountFromProps({ icon: ['fass', 'dog'] })

expect(wrapper.element.tagName).toBe('svg')
expect(wrapper.element.classList.contains('fa-dog')).toBeTruthy()
})

test('will find a sharp solid icon using array format, short prefix, and long fa-icon name', () => {
const wrapper = mountFromProps({ icon: ['fass', 'fa-dog'] })

expect(wrapper.element.tagName).toBe('svg')
expect(wrapper.element.classList.contains('fa-dog')).toBeTruthy()
})

test('will find a sharp solid icon using string format, short prefix, and long fa-icon name', () => {
const wrapper = mountFromProps({ icon: 'fass fa-dog' })

expect(wrapper.element.tagName).toBe('svg')
expect(wrapper.element.classList.contains('fa-dog')).toBeTruthy()
})

test('will default to a sharp solid icon using string format, long prefix, and long fa-icon name', () => {
const wrapper = mountFromProps({ icon: 'fa-sharp fa-dog' })

expect(wrapper.element.tagName).toBe('svg')
expect(wrapper.element.classList.contains('fa-dog')).toBeTruthy()
})

test('will find a sharp solid icon using string format, long prefix, long style, and long fa-icon name', () => {
const wrapper = mountFromProps({ icon: 'fa-sharp fa-solid fa-dog' })

expect(wrapper.element.tagName).toBe('svg')
expect(wrapper.element.classList.contains('fa-dog')).toBeTruthy()
})
}
})

0 comments on commit 43bd86e

Please sign in to comment.