fluentui-react-native/packages/deprecated/foundation-tokens/src/Token.test.ts at bb54e313579f9484a57efbed144181c0f4271fb4 · microsoft/fluentui-react-native · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
import { getMemoCache } from '@fluentui-react-native/framework-base';

import type { IButtonSettings } from './MockButton';
import { MockButton } from './MockButton';
import { theme } from './MockTheme';

const b1: IButtonSettings = {
  tokens: {
    fontSize: 'large',
    fontWeight: 900,
    color: 'buttonText',
    backgroundColor: 'buttonBackground',
    borderWidth: 1,
    borderRadius: 2,
    borderColor: '#c1c1c1',
    captionColor: 'blue',
  },
};

const b1resolved: IButtonSettings = {
  root: {
    style: {
      borderColor: '#c1c1c1',
      borderWidth: 1,
      borderRadius: 2,
      backgroundColor: 'blue',
    },
  },
  content: {
    fontSize: 'large',
    fontWeight: 900,
    color: 'buttonText',
  },
  subContent: {
    style: {
      fontSize: 14,
      fontWeight: 900,
      color: 'blue',
    },
  },
  icon: {
    style: {
      color: 'yellow',
    },
  },
};

const b1resolvedRecurse: IButtonSettings = {
  root: {
    style: {
      borderColor: '#c1c1c1',
      borderWidth: 1,
      borderRadius: 2,
      backgroundColor: 'blue',
    },
  },
  content: {
    // note that these three values will get cleared by the content element, but remerged by the base class, this
    // is an issue with the test component implementation, not of the framework
    fontSize: 'large',
    fontWeight: 900,
    color: 'buttonText',
    style: {
      fontSize: 14,
      fontWeight: 900,
      color: 'yellow',
    },
  },
  subContent: {
    style: {
      fontSize: 14,
      fontWeight: 900,
      color: 'blue',
    },
  },
  icon: {
    style: {
      color: 'yellow',
    },
  },
};

describe('Token settings unit tests', () => {
  test('resolve base settings', () => {
    const cache = getMemoCache();
    const resolved = MockButton({}, b1, theme, cache, false);
    expect(resolved).toEqual(b1resolved);
  });

  test('resolve base with recursion', () => {
    const cache = getMemoCache();
    const resolved = MockButton({}, b1, theme, cache, true);
    expect(resolved).toEqual(b1resolvedRecurse);
  });

  test('two default buttons return same object', () => {
    const cache = getMemoCache();
    const resolved1 = MockButton({ content: 'button1' }, b1, theme, cache, false);
    const resolved2 = MockButton({ content: 'button2' }, b1, theme, cache, false);
    expect(resolved1).toEqual(resolved2);
    Object.getOwnPropertyNames(resolved1).forEach((key) => {
      expect(resolved1[key]).toBe(resolved2[key]);
    });
  });

  test('setting props that match defaults keep same object', () => {
    const cache = getMemoCache();
    const resolved1 = MockButton({ content: 'button1' }, b1, theme, cache, false);
    const resolved2 = MockButton({ content: 'button2', color: 'buttonText' }, b1, theme, cache, false);
    expect(resolved1).toEqual(resolved2);
    Object.getOwnPropertyNames(resolved1).forEach((key) => {
      expect(resolved1[key]).toBe(resolved2[key]);
    });
  });

  test('prop token overrides produce partial new object', () => {
    const cache = getMemoCache();
    const resolved1 = MockButton({ content: 'button1' }, b1, theme, cache, false);
    const resolved2 = MockButton({ content: 'button2', color: 'purple' }, b1, theme, cache, false);
    expect(resolved1).not.toBe(resolved2);
    expect(resolved1['root']).toBe(resolved2['root']);
    expect(resolved1.content).not.toBe(resolved2.content);
  });

  test('prop token overrides, multiple values are memoized', () => {
    const cache = getMemoCache();
    const resolved1 = MockButton({ content: 'button1', borderRadius: 3, color: 'purple' }, b1, theme, cache, false);
    const resolved2 = MockButton({ content: 'button2', color: 'purple', borderRadius: 3 }, b1, theme, cache, false);
    expect(resolved1).toEqual(resolved2);
    Object.getOwnPropertyNames(resolved1).forEach((key) => {
      expect(resolved1[key]).toBe(resolved2[key]);
    });
  });

  test('prop token overrides, different keys same value produce different objects', () => {
    const cache = getMemoCache();
    const resolved1 = MockButton({ content: 'button1', backgroundColor: 'purple' }, b1, theme, cache, false);
    const resolved2 = MockButton({ content: 'button2', color: 'purple' }, b1, theme, cache, false);
    expect(resolved1).not.toBe(resolved2);
    expect(resolved1['root']).not.toBe(resolved2['root']);
    expect(resolved1.content).not.toBe(resolved2.content);
  });
});