xref: /expo/apps/test-suite/tests/Font.js (revision 22d1e005)
1import * as Font from 'expo-font';
2import { Platform } from 'react-native';
3
4export const name = 'Font';
5
6export async function test({ beforeEach, afterAll, describe, it, expect }) {
7  describe(name, () => {
8    async function unloadFontAsync() {
9      if (Platform.OS === 'web') {
10        await Font.unloadAsync('cool-font');
11      }
12    }
13    beforeEach(async () => {
14      await unloadFontAsync();
15    });
16
17    afterAll(async () => {
18      await unloadFontAsync();
19    });
20
21    it(`loads`, async () => {
22      let error = null;
23      expect(Font.isLoaded('cool-font')).toBe(false);
24      expect(Font.isLoading('cool-font')).toBe(false);
25
26      try {
27        await Font.loadAsync({
28          'cool-font': {
29            uri: require('../assets/comic.ttf'),
30            display: Font.FontDisplay.SWAP,
31          },
32        });
33      } catch (e) {
34        error = e;
35      }
36      expect(error).toBeNull();
37      expect(Font.isLoaded('cool-font')).toBe(true);
38
39      // Test that the font-display css is correctly made and located in a <style/> element with ID `expo-generated-fonts`
40      if (Platform.OS === 'web') {
41        const styleSheet = document.getElementById('expo-generated-fonts');
42        expect(!!styleSheet).toBe(true);
43        const [rule] = [...styleSheet.sheet.cssRules].filter((rule) => {
44          return (
45            rule instanceof CSSFontFaceRule &&
46            rule.style.fontFamily === 'cool-font' &&
47            rule.style.fontDisplay === 'swap'
48          );
49        });
50        expect(!!rule).toBe(true);
51      }
52    });
53  });
54}
55