@fluentui-react-native/use-styling 0.13.1 → 0.13.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +15 -0
- package/CHANGELOG.md +9 -1
- package/lib/useStyling.samples.test.js +15 -18
- package/lib/useStyling.samples.test.js.map +1 -1
- package/lib-commonjs/useStyling.samples.test.js +15 -18
- package/lib-commonjs/useStyling.samples.test.js.map +1 -1
- package/package.json +2 -2
- package/src/__snapshots__/useStyling.samples.test.tsx.snap +55 -135
- package/src/useStyling.samples.test.tsx +23 -27
package/CHANGELOG.json
CHANGED
|
@@ -1,6 +1,21 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-react-native/use-styling",
|
|
3
3
|
"entries": [
|
|
4
|
+
{
|
|
5
|
+
"date": "Wed, 29 Jan 2025 23:39:17 GMT",
|
|
6
|
+
"version": "0.13.2",
|
|
7
|
+
"tag": "@fluentui-react-native/use-styling_v0.13.2",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "sanajmi@microsoft.com",
|
|
12
|
+
"package": "@fluentui-react-native/use-styling",
|
|
13
|
+
"commit": "5ca24ac45054439768404d117213a2ae4767235d",
|
|
14
|
+
"comment": "remove enzyme tests"
|
|
15
|
+
}
|
|
16
|
+
]
|
|
17
|
+
}
|
|
18
|
+
},
|
|
4
19
|
{
|
|
5
20
|
"date": "Thu, 11 Apr 2024 18:08:40 GMT",
|
|
6
21
|
"version": "0.13.0",
|
package/CHANGELOG.md
CHANGED
|
@@ -1,9 +1,17 @@
|
|
|
1
1
|
# Change Log - @fluentui-react-native/use-styling
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
<!-- This log was last generated on Wed, 29 Jan 2025 23:39:17 GMT and should not be manually modified. -->
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## 0.13.2
|
|
8
|
+
|
|
9
|
+
Wed, 29 Jan 2025 23:39:17 GMT
|
|
10
|
+
|
|
11
|
+
### Patches
|
|
12
|
+
|
|
13
|
+
- remove enzyme tests (sanajmi@microsoft.com)
|
|
14
|
+
|
|
7
15
|
## 0.13.0
|
|
8
16
|
|
|
9
17
|
Thu, 11 Apr 2024 18:08:40 GMT
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { __assign, __spreadArray } from "tslib";
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { Text, View } from 'react-native';
|
|
4
|
-
import
|
|
5
|
-
import toJson from 'enzyme-to-json';
|
|
4
|
+
import * as renderer from 'react-test-renderer';
|
|
6
5
|
import { buildProps } from './buildProps';
|
|
7
6
|
import { buildUseStyling } from './buildUseStyling';
|
|
8
7
|
/**
|
|
@@ -19,12 +18,6 @@ var baseTheme = {
|
|
|
19
18
|
components: {},
|
|
20
19
|
};
|
|
21
20
|
var current = { theme: baseTheme };
|
|
22
|
-
/**
|
|
23
|
-
* this wrapper solves the (so-far) inexplicable type errors from the matchers in typescript
|
|
24
|
-
*/
|
|
25
|
-
function snapshotTestTree(tree) {
|
|
26
|
-
expect(toJson(tree)).toMatchSnapshot();
|
|
27
|
-
}
|
|
28
21
|
/**
|
|
29
22
|
* Because the buildUseStyling utility is not opinionated about theming, the theming is injected via
|
|
30
23
|
* a theme helper implementation. This allows for a framework to build an opinionated version with
|
|
@@ -90,8 +83,8 @@ describe('useStyling samples', function () {
|
|
|
90
83
|
};
|
|
91
84
|
/** first render the component with no updates */
|
|
92
85
|
it('Sample1Text rendering with no overrides', function () {
|
|
93
|
-
var tree =
|
|
94
|
-
|
|
86
|
+
var tree = renderer.create(React.createElement(Sample1Text, null, "Sample1a")).toJSON();
|
|
87
|
+
expect(tree).toMatchSnapshot();
|
|
95
88
|
});
|
|
96
89
|
/** now re-theme the component via the components in the theme */
|
|
97
90
|
it('Sample1Text rendering with some custom settings in the theme', function () {
|
|
@@ -103,8 +96,8 @@ describe('useStyling samples', function () {
|
|
|
103
96
|
},
|
|
104
97
|
},
|
|
105
98
|
});
|
|
106
|
-
var tree =
|
|
107
|
-
|
|
99
|
+
var tree = renderer.create(React.createElement(Sample1Text, null, "Sample1b")).toJSON();
|
|
100
|
+
expect(tree).toMatchSnapshot();
|
|
108
101
|
});
|
|
109
102
|
/**
|
|
110
103
|
* Build the styling hook for sample2. Because this isn't being recombined this is being specified inline rather
|
|
@@ -144,10 +137,12 @@ describe('useStyling samples', function () {
|
|
|
144
137
|
/** rendering the Sample2 component with the base theme */
|
|
145
138
|
it('Sample2Text rendering with defaults and a color override', function () {
|
|
146
139
|
themeHelper.setActive();
|
|
147
|
-
var tree =
|
|
140
|
+
var tree = renderer
|
|
141
|
+
.create(React.createElement(View, null,
|
|
148
142
|
React.createElement(Sample2Text, null, "Sample2 with defaults"),
|
|
149
|
-
React.createElement(Sample2Text, { color: "green" }, "Sample2 with color override via prop")))
|
|
150
|
-
|
|
143
|
+
React.createElement(Sample2Text, { color: "green" }, "Sample2 with color override via prop")))
|
|
144
|
+
.toJSON();
|
|
145
|
+
expect(tree).toMatchSnapshot();
|
|
151
146
|
});
|
|
152
147
|
/** now re-theme the component via the components in the theme */
|
|
153
148
|
it('Sample2Text rendering with some custom settings in the theme', function () {
|
|
@@ -163,10 +158,12 @@ describe('useStyling samples', function () {
|
|
|
163
158
|
},
|
|
164
159
|
},
|
|
165
160
|
});
|
|
166
|
-
var tree =
|
|
161
|
+
var tree = renderer
|
|
162
|
+
.create(React.createElement(View, null,
|
|
167
163
|
React.createElement(Sample2Text, null, "Sample2 with theme overrides set"),
|
|
168
|
-
React.createElement(Sample2Text, { color: "purple" }, "Sample2 with theme and color prop override")))
|
|
169
|
-
|
|
164
|
+
React.createElement(Sample2Text, { color: "purple" }, "Sample2 with theme and color prop override")))
|
|
165
|
+
.toJSON();
|
|
166
|
+
expect(tree).toMatchSnapshot();
|
|
170
167
|
});
|
|
171
168
|
});
|
|
172
169
|
//# sourceMappingURL=useStyling.samples.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useStyling.samples.test.js","sourceRoot":"","sources":["../src/useStyling.samples.test.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,
|
|
1
|
+
{"version":3,"file":"useStyling.samples.test.js","sourceRoot":"","sources":["../src/useStyling.samples.test.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,8 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
var tslib_1 = require("tslib");
|
|
4
4
|
var React = tslib_1.__importStar(require("react"));
|
|
5
5
|
var react_native_1 = require("react-native");
|
|
6
|
-
var
|
|
7
|
-
var enzyme_to_json_1 = tslib_1.__importDefault(require("enzyme-to-json"));
|
|
6
|
+
var renderer = tslib_1.__importStar(require("react-test-renderer"));
|
|
8
7
|
var buildProps_1 = require("./buildProps");
|
|
9
8
|
var buildUseStyling_1 = require("./buildUseStyling");
|
|
10
9
|
/**
|
|
@@ -21,12 +20,6 @@ var baseTheme = {
|
|
|
21
20
|
components: {},
|
|
22
21
|
};
|
|
23
22
|
var current = { theme: baseTheme };
|
|
24
|
-
/**
|
|
25
|
-
* this wrapper solves the (so-far) inexplicable type errors from the matchers in typescript
|
|
26
|
-
*/
|
|
27
|
-
function snapshotTestTree(tree) {
|
|
28
|
-
expect((0, enzyme_to_json_1.default)(tree)).toMatchSnapshot();
|
|
29
|
-
}
|
|
30
23
|
/**
|
|
31
24
|
* Because the buildUseStyling utility is not opinionated about theming, the theming is injected via
|
|
32
25
|
* a theme helper implementation. This allows for a framework to build an opinionated version with
|
|
@@ -92,8 +85,8 @@ describe('useStyling samples', function () {
|
|
|
92
85
|
};
|
|
93
86
|
/** first render the component with no updates */
|
|
94
87
|
it('Sample1Text rendering with no overrides', function () {
|
|
95
|
-
var tree =
|
|
96
|
-
|
|
88
|
+
var tree = renderer.create(React.createElement(Sample1Text, null, "Sample1a")).toJSON();
|
|
89
|
+
expect(tree).toMatchSnapshot();
|
|
97
90
|
});
|
|
98
91
|
/** now re-theme the component via the components in the theme */
|
|
99
92
|
it('Sample1Text rendering with some custom settings in the theme', function () {
|
|
@@ -105,8 +98,8 @@ describe('useStyling samples', function () {
|
|
|
105
98
|
},
|
|
106
99
|
},
|
|
107
100
|
});
|
|
108
|
-
var tree =
|
|
109
|
-
|
|
101
|
+
var tree = renderer.create(React.createElement(Sample1Text, null, "Sample1b")).toJSON();
|
|
102
|
+
expect(tree).toMatchSnapshot();
|
|
110
103
|
});
|
|
111
104
|
/**
|
|
112
105
|
* Build the styling hook for sample2. Because this isn't being recombined this is being specified inline rather
|
|
@@ -146,10 +139,12 @@ describe('useStyling samples', function () {
|
|
|
146
139
|
/** rendering the Sample2 component with the base theme */
|
|
147
140
|
it('Sample2Text rendering with defaults and a color override', function () {
|
|
148
141
|
themeHelper.setActive();
|
|
149
|
-
var tree =
|
|
142
|
+
var tree = renderer
|
|
143
|
+
.create(React.createElement(react_native_1.View, null,
|
|
150
144
|
React.createElement(Sample2Text, null, "Sample2 with defaults"),
|
|
151
|
-
React.createElement(Sample2Text, { color: "green" }, "Sample2 with color override via prop")))
|
|
152
|
-
|
|
145
|
+
React.createElement(Sample2Text, { color: "green" }, "Sample2 with color override via prop")))
|
|
146
|
+
.toJSON();
|
|
147
|
+
expect(tree).toMatchSnapshot();
|
|
153
148
|
});
|
|
154
149
|
/** now re-theme the component via the components in the theme */
|
|
155
150
|
it('Sample2Text rendering with some custom settings in the theme', function () {
|
|
@@ -165,10 +160,12 @@ describe('useStyling samples', function () {
|
|
|
165
160
|
},
|
|
166
161
|
},
|
|
167
162
|
});
|
|
168
|
-
var tree =
|
|
163
|
+
var tree = renderer
|
|
164
|
+
.create(React.createElement(react_native_1.View, null,
|
|
169
165
|
React.createElement(Sample2Text, null, "Sample2 with theme overrides set"),
|
|
170
|
-
React.createElement(Sample2Text, { color: "purple" }, "Sample2 with theme and color prop override")))
|
|
171
|
-
|
|
166
|
+
React.createElement(Sample2Text, { color: "purple" }, "Sample2 with theme and color prop override")))
|
|
167
|
+
.toJSON();
|
|
168
|
+
expect(tree).toMatchSnapshot();
|
|
172
169
|
});
|
|
173
170
|
});
|
|
174
171
|
//# sourceMappingURL=useStyling.samples.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useStyling.samples.test.js","sourceRoot":"","sources":["../src/useStyling.samples.test.tsx"],"names":[],"mappings":";;;AAAA,mDAA+B;AAE/B,6CAA0C;AAE1C,
|
|
1
|
+
{"version":3,"file":"useStyling.samples.test.js","sourceRoot":"","sources":["../src/useStyling.samples.test.tsx"],"names":[],"mappings":";;;AAAA,mDAA+B;AAE/B,6CAA0C;AAE1C,oEAAgD;AAEhD,2CAA0C;AAE1C,qDAAoD;AAuBpD;;GAEG;AACH,IAAM,SAAS,GAAU;IACvB,OAAO,EAAE;QACP,eAAe,EAAE,OAAO;QACxB,KAAK,EAAE,OAAO;QACd,WAAW,EAAE,MAAM;QACnB,UAAU,EAAE,OAAO;QACnB,QAAQ,EAAE,EAAE;KACb;IACD,UAAU,EAAE,EAAE;CACf,CAAC;AAEF,IAAM,OAAO,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;AAErC;;;;GAIG;AACH,IAAM,WAAW,GAAyE;IACxF,QAAQ,EAAE,cAAM,OAAA,OAAO,CAAC,KAAK,EAAb,CAAa;IAC7B,gBAAgB,EAAE,UAAC,KAAY,EAAE,IAAY,IAAK,OAAA,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAAtB,CAAsB;IACxE,SAAS,EAAE,UAAC,KAAsB;QAChC,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,uCAAM,SAAS,GAAK,KAAK,EAAG,CAAC,CAAC,SAAS,CAAC;IACjE,CAAC;CACF,CAAC;AAEF,QAAQ,CAAC,oBAAoB,EAAE;IAC7B;;;;;OAKG;IAeH,6EAA6E;IAC7E,IAAM,qBAAqB,GAA4E;QACrG;;WAEG;QACH,MAAM,EAAE;YACN,yEAAyE;YACzE,UAAC,CAAQ,IAAK,OAAA,CAAC;gBACb,KAAK,EAAE,CAAC,CAAC,OAAO,CAAC,KAAK;gBACtB,UAAU,EAAE,CAAC,CAAC,OAAO,CAAC,UAAU;gBAChC,QAAQ,EAAE,CAAC,CAAC,OAAO,CAAC,QAAQ;aAC7B,CAAC,EAJY,CAIZ;YACF,+DAA+D;YAC/D,SAAS;SACV;QACD;;WAEG;QACH,SAAS,EAAE;YACT,0GAA0G;YAC1G,OAAO,EAAE,IAAA,uBAAU;YACjB;;eAEG;YACH,UAAC,MAAqB,CAAC,mBAAmB;gBACxC,OAAO;oBACL,KAAK,uBAAO,MAAM,CAAE;iBACrB,CAAC;YACJ,CAAC;YACD;;;eAGG;YACH,CAAC,OAAO,EAAE,YAAY,EAAE,UAAU,CAAC,CACpC;SACF;KACF,CAAC;IAEF,8DAA8D;IAC9D,IAAM,iBAAiB,GAAG,IAAA,iCAAe,EAAC,qBAAqB,EAAE,WAAW,CAAC,CAAC;IAE9E,uGAAuG;IACvG,IAAM,WAAW,GAA0C,UAAC,KAAK;QAC/D,IAAM,WAAW,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC;QACrD,IAAM,MAAM,yCAAQ,KAAK,GAAK,WAAW,CAAE,CAAC;QAC5C,OAAO,oBAAC,mBAAI,uBAAK,MAAM,GAAG,KAAK,CAAC,QAAQ,CAAQ,CAAC;IACnD,CAAC,CAAC;IAEF,iDAAiD;IACjD,EAAE,CAAC,yCAAyC,EAAE;QAC5C,IAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAC,oBAAC,WAAW,mBAAuB,CAAC,CAAC,MAAM,EAAE,CAAC;QAC3E,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,iEAAiE;IACjE,EAAE,CAAC,8DAA8D,EAAE;QACjE,WAAW,CAAC,SAAS,CAAC;YACpB,UAAU,EAAE;gBACV,OAAO,EAAE;oBACP,KAAK,EAAE,MAAM;oBACb,QAAQ,EAAE,EAAE;iBACb;aACF;SACF,CAAC,CAAC;QACH,IAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAC,oBAAC,WAAW,mBAAuB,CAAC,CAAC,MAAM,EAAE,CAAC;QAC3E,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;IAYH;;;OAGG;IACH,IAAM,iBAAiB,GAAG,IAAA,iCAAe,wCAUlC,qBAAqB;QACxB;;;;;;;;;;WAUG;QACH,MAAM,kDAAM,qBAAqB,CAAC,MAAM,UAAE,SAAS;QACnD;;;;;;;WAOG;QACH,sBAAsB,EAAE,CAAC,OAAO,CAAC,KAEnC,WAAW,CACZ,CAAC;IAEF,4GAA4G;IAC5G,IAAM,WAAW,GAA0C,UAAC,KAAK;QAC/D,IAAM,WAAW,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC;QACrD,IAAM,MAAM,yCAAQ,KAAK,GAAK,WAAW,CAAE,CAAC;QAC5C,mIAAmI;QACnI,OAAO,MAAM,CAAC,KAAK,CAAC;QACpB,kBAAkB;QAClB,OAAO,oBAAC,mBAAI,uBAAK,MAAM,GAAG,KAAK,CAAC,QAAQ,CAAQ,CAAC;IACnD,CAAC,CAAC;IAEF,0DAA0D;IAC1D,EAAE,CAAC,0DAA0D,EAAE;QAC7D,WAAW,CAAC,SAAS,EAAE,CAAC;QACxB,IAAM,IAAI,GAAG,QAAQ;aAClB,MAAM,CACL,oBAAC,mBAAI;YACH,oBAAC,WAAW,gCAAoC;YAChD,oBAAC,WAAW,IAAC,KAAK,EAAC,OAAO,2CAAmD,CACxE,CACR;aACA,MAAM,EAAE,CAAC;QACZ,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,iEAAiE;IACjE,EAAE,CAAC,8DAA8D,EAAE;QACjE,WAAW,CAAC,SAAS,CAAC;YACpB,UAAU,EAAE;gBACV,OAAO,EAAE;oBACP,KAAK,EAAE,MAAM;oBACb,QAAQ,EAAE,EAAE;iBACb;gBACD,OAAO,EAAE;oBACP,QAAQ,EAAE,EAAE;oBACZ,UAAU,EAAE,WAAW;iBACxB;aACF;SACF,CAAC,CAAC;QACH,IAAM,IAAI,GAAG,QAAQ;aAClB,MAAM,CACL,oBAAC,mBAAI;YACH,oBAAC,WAAW,2CAA+C;YAC3D,oBAAC,WAAW,IAAC,KAAK,EAAC,QAAQ,iDAAyD,CAC/E,CACR;aACA,MAAM,EAAE,CAAC;QACZ,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-react-native/use-styling",
|
|
3
|
-
"version": "0.13.
|
|
3
|
+
"version": "0.13.2",
|
|
4
4
|
"description": "Opinionated use styling hook implementation",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"license": "MIT",
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"@fluentui-react-native/memo-cache": "1.3.3",
|
|
31
|
-
"@fluentui-react-native/use-tokens": "0.6.
|
|
31
|
+
"@fluentui-react-native/use-tokens": "0.6.2",
|
|
32
32
|
"tslib": "^2.3.1"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
@@ -1,7 +1,35 @@
|
|
|
1
1
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
2
|
|
|
3
3
|
exports[`useStyling samples Sample1Text rendering with no overrides 1`] = `
|
|
4
|
-
<
|
|
4
|
+
<Text
|
|
5
|
+
style={
|
|
6
|
+
{
|
|
7
|
+
"color": "black",
|
|
8
|
+
"fontFamily": "Arial",
|
|
9
|
+
"fontSize": 12,
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
>
|
|
13
|
+
Sample1a
|
|
14
|
+
</Text>
|
|
15
|
+
`;
|
|
16
|
+
|
|
17
|
+
exports[`useStyling samples Sample1Text rendering with some custom settings in the theme 1`] = `
|
|
18
|
+
<Text
|
|
19
|
+
style={
|
|
20
|
+
{
|
|
21
|
+
"color": "pink",
|
|
22
|
+
"fontFamily": "Arial",
|
|
23
|
+
"fontSize": 24,
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
>
|
|
27
|
+
Sample1b
|
|
28
|
+
</Text>
|
|
29
|
+
`;
|
|
30
|
+
|
|
31
|
+
exports[`useStyling samples Sample2Text rendering with defaults and a color override 1`] = `
|
|
32
|
+
<View>
|
|
5
33
|
<Text
|
|
6
34
|
style={
|
|
7
35
|
{
|
|
@@ -11,153 +39,45 @@ exports[`useStyling samples Sample1Text rendering with no overrides 1`] = `
|
|
|
11
39
|
}
|
|
12
40
|
}
|
|
13
41
|
>
|
|
14
|
-
|
|
15
|
-
style={
|
|
16
|
-
{
|
|
17
|
-
"color": "black",
|
|
18
|
-
"fontFamily": "Arial",
|
|
19
|
-
"fontSize": 12,
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
>
|
|
23
|
-
Sample1a
|
|
24
|
-
</Text>
|
|
42
|
+
Sample2 with defaults
|
|
25
43
|
</Text>
|
|
26
|
-
</Sample1Text>
|
|
27
|
-
`;
|
|
28
|
-
|
|
29
|
-
exports[`useStyling samples Sample1Text rendering with some custom settings in the theme 1`] = `
|
|
30
|
-
<Sample1Text>
|
|
31
44
|
<Text
|
|
32
45
|
style={
|
|
33
46
|
{
|
|
34
|
-
"color": "
|
|
47
|
+
"color": "green",
|
|
35
48
|
"fontFamily": "Arial",
|
|
36
|
-
"fontSize":
|
|
49
|
+
"fontSize": 12,
|
|
37
50
|
}
|
|
38
51
|
}
|
|
39
52
|
>
|
|
40
|
-
|
|
41
|
-
style={
|
|
42
|
-
{
|
|
43
|
-
"color": "pink",
|
|
44
|
-
"fontFamily": "Arial",
|
|
45
|
-
"fontSize": 24,
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
>
|
|
49
|
-
Sample1b
|
|
50
|
-
</Text>
|
|
53
|
+
Sample2 with color override via prop
|
|
51
54
|
</Text>
|
|
52
|
-
</Sample1Text>
|
|
53
|
-
`;
|
|
54
|
-
|
|
55
|
-
exports[`useStyling samples Sample2Text rendering with defaults and a color override 1`] = `
|
|
56
|
-
<View>
|
|
57
|
-
<View>
|
|
58
|
-
<Sample2Text>
|
|
59
|
-
<Text
|
|
60
|
-
style={
|
|
61
|
-
{
|
|
62
|
-
"color": "black",
|
|
63
|
-
"fontFamily": "Arial",
|
|
64
|
-
"fontSize": 12,
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
>
|
|
68
|
-
<Text
|
|
69
|
-
style={
|
|
70
|
-
{
|
|
71
|
-
"color": "black",
|
|
72
|
-
"fontFamily": "Arial",
|
|
73
|
-
"fontSize": 12,
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
>
|
|
77
|
-
Sample2 with defaults
|
|
78
|
-
</Text>
|
|
79
|
-
</Text>
|
|
80
|
-
</Sample2Text>
|
|
81
|
-
<Sample2Text
|
|
82
|
-
color="green"
|
|
83
|
-
>
|
|
84
|
-
<Text
|
|
85
|
-
style={
|
|
86
|
-
{
|
|
87
|
-
"color": "green",
|
|
88
|
-
"fontFamily": "Arial",
|
|
89
|
-
"fontSize": 12,
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
>
|
|
93
|
-
<Text
|
|
94
|
-
style={
|
|
95
|
-
{
|
|
96
|
-
"color": "green",
|
|
97
|
-
"fontFamily": "Arial",
|
|
98
|
-
"fontSize": 12,
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
>
|
|
102
|
-
Sample2 with color override via prop
|
|
103
|
-
</Text>
|
|
104
|
-
</Text>
|
|
105
|
-
</Sample2Text>
|
|
106
|
-
</View>
|
|
107
55
|
</View>
|
|
108
56
|
`;
|
|
109
57
|
|
|
110
58
|
exports[`useStyling samples Sample2Text rendering with some custom settings in the theme 1`] = `
|
|
111
59
|
<View>
|
|
112
|
-
<
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
</Text>
|
|
135
|
-
</Sample2Text>
|
|
136
|
-
<Sample2Text
|
|
137
|
-
color="purple"
|
|
138
|
-
>
|
|
139
|
-
<Text
|
|
140
|
-
style={
|
|
141
|
-
{
|
|
142
|
-
"color": "purple",
|
|
143
|
-
"fontFamily": "Helvetica",
|
|
144
|
-
"fontSize": 18,
|
|
145
|
-
}
|
|
146
|
-
}
|
|
147
|
-
>
|
|
148
|
-
<Text
|
|
149
|
-
style={
|
|
150
|
-
{
|
|
151
|
-
"color": "purple",
|
|
152
|
-
"fontFamily": "Helvetica",
|
|
153
|
-
"fontSize": 18,
|
|
154
|
-
}
|
|
155
|
-
}
|
|
156
|
-
>
|
|
157
|
-
Sample2 with theme and color prop override
|
|
158
|
-
</Text>
|
|
159
|
-
</Text>
|
|
160
|
-
</Sample2Text>
|
|
161
|
-
</View>
|
|
60
|
+
<Text
|
|
61
|
+
style={
|
|
62
|
+
{
|
|
63
|
+
"color": "pink",
|
|
64
|
+
"fontFamily": "Helvetica",
|
|
65
|
+
"fontSize": 18,
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
>
|
|
69
|
+
Sample2 with theme overrides set
|
|
70
|
+
</Text>
|
|
71
|
+
<Text
|
|
72
|
+
style={
|
|
73
|
+
{
|
|
74
|
+
"color": "purple",
|
|
75
|
+
"fontFamily": "Helvetica",
|
|
76
|
+
"fontSize": 18,
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
>
|
|
80
|
+
Sample2 with theme and color prop override
|
|
81
|
+
</Text>
|
|
162
82
|
</View>
|
|
163
83
|
`;
|
|
@@ -2,8 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import type { TextProps, ColorValue } from 'react-native';
|
|
3
3
|
import { Text, View } from 'react-native';
|
|
4
4
|
|
|
5
|
-
import
|
|
6
|
-
import toJson from 'enzyme-to-json';
|
|
5
|
+
import * as renderer from 'react-test-renderer';
|
|
7
6
|
|
|
8
7
|
import { buildProps } from './buildProps';
|
|
9
8
|
import type { ThemeHelper, UseStylingOptions } from './buildUseStyling';
|
|
@@ -46,13 +45,6 @@ const baseTheme: Theme = {
|
|
|
46
45
|
|
|
47
46
|
const current = { theme: baseTheme };
|
|
48
47
|
|
|
49
|
-
/**
|
|
50
|
-
* this wrapper solves the (so-far) inexplicable type errors from the matchers in typescript
|
|
51
|
-
*/
|
|
52
|
-
function snapshotTestTree(tree: any) {
|
|
53
|
-
(expect(toJson(tree)) as any).toMatchSnapshot();
|
|
54
|
-
}
|
|
55
|
-
|
|
56
48
|
/**
|
|
57
49
|
* Because the buildUseStyling utility is not opinionated about theming, the theming is injected via
|
|
58
50
|
* a theme helper implementation. This allows for a framework to build an opinionated version with
|
|
@@ -137,8 +129,8 @@ describe('useStyling samples', () => {
|
|
|
137
129
|
|
|
138
130
|
/** first render the component with no updates */
|
|
139
131
|
it('Sample1Text rendering with no overrides', () => {
|
|
140
|
-
const tree =
|
|
141
|
-
|
|
132
|
+
const tree = renderer.create(<Sample1Text>Sample1a</Sample1Text>).toJSON();
|
|
133
|
+
expect(tree).toMatchSnapshot();
|
|
142
134
|
});
|
|
143
135
|
|
|
144
136
|
/** now re-theme the component via the components in the theme */
|
|
@@ -151,8 +143,8 @@ describe('useStyling samples', () => {
|
|
|
151
143
|
},
|
|
152
144
|
},
|
|
153
145
|
});
|
|
154
|
-
const tree =
|
|
155
|
-
|
|
146
|
+
const tree = renderer.create(<Sample1Text>Sample1b</Sample1Text>).toJSON();
|
|
147
|
+
expect(tree).toMatchSnapshot();
|
|
156
148
|
});
|
|
157
149
|
|
|
158
150
|
/**
|
|
@@ -218,13 +210,15 @@ describe('useStyling samples', () => {
|
|
|
218
210
|
/** rendering the Sample2 component with the base theme */
|
|
219
211
|
it('Sample2Text rendering with defaults and a color override', () => {
|
|
220
212
|
themeHelper.setActive();
|
|
221
|
-
const tree =
|
|
222
|
-
|
|
223
|
-
<
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
213
|
+
const tree = renderer
|
|
214
|
+
.create(
|
|
215
|
+
<View>
|
|
216
|
+
<Sample2Text>Sample2 with defaults</Sample2Text>
|
|
217
|
+
<Sample2Text color="green">Sample2 with color override via prop</Sample2Text>
|
|
218
|
+
</View>,
|
|
219
|
+
)
|
|
220
|
+
.toJSON();
|
|
221
|
+
expect(tree).toMatchSnapshot();
|
|
228
222
|
});
|
|
229
223
|
|
|
230
224
|
/** now re-theme the component via the components in the theme */
|
|
@@ -241,12 +235,14 @@ describe('useStyling samples', () => {
|
|
|
241
235
|
},
|
|
242
236
|
},
|
|
243
237
|
});
|
|
244
|
-
const tree =
|
|
245
|
-
|
|
246
|
-
<
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
238
|
+
const tree = renderer
|
|
239
|
+
.create(
|
|
240
|
+
<View>
|
|
241
|
+
<Sample2Text>Sample2 with theme overrides set</Sample2Text>
|
|
242
|
+
<Sample2Text color="purple">Sample2 with theme and color prop override</Sample2Text>
|
|
243
|
+
</View>,
|
|
244
|
+
)
|
|
245
|
+
.toJSON();
|
|
246
|
+
expect(tree).toMatchSnapshot();
|
|
251
247
|
});
|
|
252
248
|
});
|