Skip to content

Commit 896f14b

Browse files
MetRonnieMetRonnie
committed
Vue 3: fix font-size setting not applying to some elements
1 parent 151b756 commit 896f14b

File tree

3 files changed

+43
-51
lines changed

3 files changed

+43
-51
lines changed

‎src/utils/font-size.js‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,19 +17,18 @@
1717

1818
// Module for font size functions and constants.
1919

20-
/** Default <html> font size in px */
21-
const DEFAULT_FONT_SIZE = window.getComputedStyle(document.documentElement).fontSize
22-
export const INCREMENT = 2 // px
20+
/** Font size increment in px */
21+
export const INCREMENT = 2
2322

2423
/**
25-
* Sets the font-size to a value. The default value is the <html> element's
26-
* computed font size.
24+
* Sets the font-size to a value.
2725
*
28-
* @param {string} size in px
26+
* @param {?string} size - Value with units given (doesn't matter which unit).
27+
* If null then reset to default.
2928
*/
30-
export function resetFontSize (size = DEFAULT_FONT_SIZE) {
29+
export function resetFontSize (size = null) {
3130
localStorage.fontSize = size
32-
document.body.style.fontSize = size
31+
document.documentElement.style.fontSize = size
3332
}
3433

3534
export function decreaseFontSize () {
@@ -43,9 +42,9 @@ export function increaseFontSize () {
4342
/**
4443
* Get HTML element (computed) font size.
4544
*
46-
* @returns {number} current font size
45+
* @returns {number} current font size in px
4746
*/
4847
export function getCurrentFontSize () {
49-
const fontSize = localStorage.fontSize ?? window.getComputedStyle(document.body).fontSize
48+
const fontSize = window.getComputedStyle(document.documentElement).fontSize // px
5049
return parseFloat(fontSize)
5150
}

‎tests/e2e/specs/userprofile.cy.js‎

Lines changed: 31 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,18 @@
1515
* along with this program. If not, see <http://www.gnu.org/licenses/>.
1616
*/
1717

18-
import {
19-
getCurrentFontSize,
20-
resetFontSize,
21-
INCREMENT
22-
} from '@/utils/font-size'
18+
import { INCREMENT } from '@/utils/font-size'
19+
20+
/** @param {number} expected font size in px */
21+
function expectFontSize (expected) {
22+
cy.get('html')
23+
.should('have.css', 'font-size', `${expected}px`)
24+
}
2325

2426
describe('User Profile', () => {
2527
const defaultFontSize = 16 // px
2628
beforeEach(() => {
27-
resetFontSize()
29+
// resetFontSize()
2830
cy.visit('/#/user-profile')
2931
})
3032

@@ -35,43 +37,38 @@ describe('User Profile', () => {
3537
})
3638

3739
it('Increases the font size', () => {
38-
expect(getCurrentFontSize()).to.equal(defaultFontSize)
40+
expectFontSize(defaultFontSize)
3941
const clicks = 3
40-
cy.get('button#font-size-increase-button').then(($button) => {
41-
for (let i = 0; i < clicks; i++) {
42-
$button.trigger('click')
43-
}
44-
const expectedFontSize = defaultFontSize + INCREMENT * clicks
45-
expect(getCurrentFontSize()).to.equal(expectedFontSize)
46-
})
42+
let expectedFontSize = defaultFontSize
43+
for (let i = 0; i < clicks; i++) {
44+
expectedFontSize += INCREMENT
45+
cy.get('button#font-size-increase-button')
46+
.click()
47+
expectFontSize(expectedFontSize)
48+
}
4749
})
4850

4951
it('Decreases the font size', () => {
50-
expect(getCurrentFontSize()).to.equal(defaultFontSize)
52+
expectFontSize(defaultFontSize)
5153
const clicks = 3
52-
cy.get('button#font-size-decrease-button').then(($button) => {
53-
for (let i = 0; i < clicks; i++) {
54-
$button.trigger('click')
55-
}
56-
const expectedFontSize = defaultFontSize - INCREMENT * clicks
57-
expect(getCurrentFontSize()).to.equal(expectedFontSize)
58-
})
54+
let expectedFontSize = defaultFontSize
55+
for (let i = 0; i < clicks; i++) {
56+
expectedFontSize -= INCREMENT
57+
cy.get('button#font-size-decrease-button')
58+
.click()
59+
expectFontSize(expectedFontSize)
60+
}
5961
})
6062

6163
it('Resets the font size', () => {
62-
expect(getCurrentFontSize()).to.equal(defaultFontSize)
63-
const clicks = 3
64-
cy.get('button#font-size-decrease-button').then(($button) => {
65-
for (let i = 0; i < clicks; i++) {
66-
$button.trigger('click')
67-
}
68-
expect(getCurrentFontSize()).not.to.equal(defaultFontSize)
69-
cy.get('button#font-size-reset-button')
64+
expectFontSize(defaultFontSize)
65+
for (let i = 0; i < 3; i++) {
66+
cy.get('button#font-size-decrease-button')
7067
.click()
71-
.then(() => {
72-
expect(getCurrentFontSize()).to.equal(defaultFontSize)
73-
})
74-
})
68+
}
69+
cy.get('button#font-size-reset-button')
70+
.click()
71+
expectFontSize(defaultFontSize)
7572
})
7673

7774
it('Sets the job theme', () => {

‎tests/unit/utils/font-size.spec.js‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,26 +25,22 @@ describe('Font Size', () => {
2525

2626
beforeEach(() => {
2727
delete localStorage.fontSize
28-
document.body.style.fontSize = `${initialFontSize}px`
28+
document.documentElement.style.fontSize = `${initialFontSize}px`
2929
})
3030

3131
it('gets the current font size', () => {
3232
expect(getCurrentFontSize()).to.equal(initialFontSize)
33-
const newVal = 27
34-
// localStorage value should take precedence
35-
localStorage.fontSize = `${newVal}px`
36-
expect(getCurrentFontSize()).to.equal(newVal)
3733
})
3834

3935
it('sets and gets a new font size', () => {
4036
const newVal = 31
4137
const newValPx = `${newVal}px`
4238
expect(localStorage.fontSize).to.not.equal(newValPx)
43-
expect(document.body.style.fontSize).to.not.equal(newValPx)
39+
expect(document.documentElement.style.fontSize).to.not.equal(newValPx)
4440
expect(getCurrentFontSize()).to.not.equal(newVal)
4541
resetFontSize(newValPx)
4642
expect(localStorage.fontSize).to.equal(newValPx)
47-
expect(document.body.style.fontSize).to.equal(newValPx)
43+
expect(document.documentElement.style.fontSize).to.equal(newValPx)
4844
expect(getCurrentFontSize()).to.equal(newVal)
4945
})
5046

0 commit comments

Comments
 (0)