kylefang/nativewind
1
0
Fork 0
mirror of https://github.com/zhigang1992/nativewind.git synced 2026-06-16 02:34:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

ci: refactor more tests

Browse Source
This commit is contained in:
Mark Lawlor
2022-10-18 13:13:14 +10:00
parent 1fcbf122b0
commit d6d2232d32
9 changed files with 49 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
packages/nativewind/__tests__/archive/tailwindcss/box-shadow-color.tsx
View File

@@ -1,51 +0,0 @@
import { render } from "@testing-library/react-native";
import { Text, View } from "react-native";
import { StyledComponent } from "../../src";
import { createTests, tailwindRunner, TestProvider } from "./runner";
const scenarios: Record<string, string> = {
transparent: "transparent",
black: "#000",
white: "#fff",
"slate-50": "#f8fafc",
"gray-50": "#f9fafb",
"zinc-50": "#fafafa",
"neutral-50": "#fafafa",
"stone-50": "#fafaf9",
"red-50": "#fef2f2",
"orange-50": "#fff7ed",
"amber-50": "#fffbeb",
"yellow-50": "#fefce8",
"lime-50": "#f7fee7",
"green-50": "#f0fdf4",
"emerald-50": "#ecfdf5",
"teal-50": "#f0fdfa",
"cyan-50": "#ecfeff",
"sky-50": "#f0f9ff",
"blue-50": "#eff6ff",
"indigo-50": "#eef2ff",
"violet-50": "#f5f3ff",
"purple-50": "#faf5ff",
"fuchsia-50": "#fdf4ff",
"pink-50": "#fdf2f8",
"rose-50": "#fff1f2",
};
tailwindRunner(
"Effects - Box shadow Color",
createTests("shadow", scenarios, (n) => ({ shadowColor: n }))
);
describe("Effects - Box shadow Color", () => {
test("works with shadow", () => {
const tree = render(
<TestProvider>
<StyledComponent component={View} className="shadow-lg shadow-blue-500">
<Text>A</Text>
</StyledComponent>
</TestProvider>
).toJSON();
expect(tree).toMatchSnapshot();
});
});

12
packages/nativewind/__tests__/archive/tailwindcss/font-family.ts
View File

@@ -1,7 +1,7 @@
import { tailwindRunner } from "./runner";
// import { tailwindRunner } from "./runner";
tailwindRunner("Typography - Font Family", [
["font-sans", { styles: { "font-sans": { fontFamily: "ui-sans-serif" } } }],
["font-serif", { styles: { "font-serif": { fontFamily: "ui-serif" } } }],
["font-mono", { styles: { "font-mono": { fontFamily: "ui-monospace" } } }],
]);
// tailwindRunner("Typography - Font Family", [
// ["font-sans", { styles: { "font-sans": { fontFamily: "ui-sans-serif" } } }],
// ["font-serif", { styles: { "font-serif": { fontFamily: "ui-serif" } } }],
// ["font-mono", { styles: { "font-mono": { fontFamily: "ui-monospace" } } }],
// ]);

81
packages/nativewind/__tests__/archive/tailwindcss/runner/index.tsx
View File

@@ -1,81 +0,0 @@
import { ThemeConfig } from "tailwindcss/types/config";
import { extractStyles } from "../../../src/postcss/extract-styles";
import {
AtRuleTuple,
Style,
StyleError,
StyleRecord,
} from "../../../src/types/common";
import cssPlugin from "../../../src/tailwind/css";
import { nativePlugin } from "../../../src/tailwind/native";
import { NativeWindStyleSheet } from "../../../src";
export type Test = [string, TestValues] | [string, StyleRecord, true];
export { spacing, spacingCases } from "./spacing";
export { createTests, expectError } from "./tests";
export function tailwindRunner(name: string, ...testCases: Array<Test[]>) {
describe(name, () => {
test.each(testCases.flat())("%s", assertStyles);
});
}
export interface TestValues {
styles?: Record<string, Style>;
topics?: Record<string, Array<string>>;
masks?: Record<string, number>;
units?: Record<string, Record<string, string>>;
atRules?: Record<string, Array<AtRuleTuple[]>>;
transforms?: Record<string, boolean>;
childClasses?: Record<string, string[]>;
}
export function assertStyles(
css: string,
expectedValues: TestValues,
shouldError = false
) {
const errors: StyleError[] = [];
const { errors: outputErrors, raw: actualValues } = extractStyles({
theme: {},
plugins: [
cssPlugin,
nativePlugin({
onError(error: StyleError) {
errors.push(error);
},
}),
],
content: [{ raw: "", extension: "html" }],
safelist: [css],
});
if (shouldError) {
expect([...errors, ...outputErrors].length).toBeGreaterThan(0);
expect(actualValues.styles).toEqual({});
} else {
if (outputErrors.length > 0) {
for (const error of outputErrors) console.error(error);
}
expect(outputErrors.length).toBe(0);
expect(actualValues).toEqual(expectedValues);
}
}
export function resetStyleSheet(theme?: Partial<ThemeConfig>) {
NativeWindStyleSheet.reset();
NativeWindStyleSheet.setDangerouslyCompileStyles((css, store) => {
const { raw } = extractStyles({
theme,
plugins: [cssPlugin, nativePlugin({})],
content: [{ raw: "", extension: "html" }],
safelist: [css],
});
store.create(raw);
});
}

10
packages/nativewind/__tests__/archive/tailwindcss/runner/spacing.ts
View File

@@ -1,10 +0,0 @@
export const spacing: Record<string, number> = {
px: 1,
0: 0,
0.5: 2,
1: 4,
1.5: 6,
96: 384,
};
export const spacingCases = [["px"], ["0"], ["0.5"], ["1"], ["1.5"], ["96"]];

43
packages/nativewind/__tests__/archive/tailwindcss/runner/tests.ts
View File

@@ -1,43 +0,0 @@
import { ColorValue } from "react-native";
import { Test } from ".";
import { Style, StyleRecord } from "../../../src/types/common";
import { normalizeCssSelector } from "../../../src/utils/selector";
export function expectError(names: string[]): Test[] {
return names.map((name) => [name, {}, true]);
}
export function createTests<T extends string | number | ColorValue | undefined>(
prefix: string,
suffixes: Record<string, T>,
valueFunction: (n: T, suffix: string) => Style
): Test[] {
return Object.entries(suffixes).map(([suffix, value]) => {
const styles: StyleRecord = {};
// If the suffix is a decimal 0.5, the tailwind compiler will generate styles for
// both 0.5 and 0
//
// This is true for all decimal numbers
const scaleParsed = Number(suffix.toString());
const flooredNumber = Math.floor(scaleParsed);
if (Number.isFinite(flooredNumber) && flooredNumber !== scaleParsed) {
const key = `${prefix}-${flooredNumber}`;
const result = valueFunction(
suffixes[flooredNumber],
flooredNumber.toString()
);
styles[normalizeCssSelector(key)] = result;
}
const key = suffix ? `${prefix}-${suffix}` : prefix;
const result = valueFunction(value, suffix);
styles[normalizeCssSelector(key)] = result;
return [key, { styles }];
});
}

20
packages/nativewind/__tests__/archive/tailwindcss/text-decoration.ts
View File

@@ -1,20 +0,0 @@
import { expectError, tailwindRunner } from "./runner";
tailwindRunner(
"Typography - Text Decoration",
[
[
"underline",
{ styles: { underline: { textDecorationLine: "underline" } } },
],
[
"line-through",
{ styles: { "line-through": { textDecorationLine: "line-through" } } },
],
[
"no-underline",
{ styles: { "no-underline": { textDecorationLine: "none" } } },
],
],
expectError(["overline"])
);

18
packages/nativewind/__tests__/tailwind-serialization/kitchen-sink.ts
View File

@@ -274,6 +274,8 @@ testCompile(
text-center
// Typography - Text Color
text-black
// Typography - Text Decoration
underline
// Typography - Text Decoration Color
decoration-black
// Typography - Text Decoration Style
@@ -870,6 +872,22 @@ testCompile(
},
],
},
"shadow-red-500": {
styles: [
{
shadowColor: "#ef4444",
},
],
},
underline: {
styles: [
{
textDecorationLine: "underline",
},
],
},
"z-10": {
styles: [
{

22
packages/nativewind/src/tailwind/plugins/box-shadow.ts
View File

@@ -1,8 +1,14 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import flattenColorPalette from "tailwindcss/lib/util/flattenColorPalette";
import toColorValue from "tailwindcss/lib/util/toColorValue";
import plugin from "tailwindcss/plugin";
import { CSSRuleObject } from "tailwindcss/types/config";
export const boxShadow = plugin(function ({ addComponents, theme }) {
export const boxShadow = plugin(function ({
addComponents,
theme,
matchUtilities,
}) {
const themeValues = Object.entries(
theme("boxShadow") as Record<string, string>
);
@@ -28,6 +34,20 @@ export const boxShadow = plugin(function ({ addComponents, theme }) {
}
addComponents(components);
matchUtilities(
{
shadow: (value) => {
return {
shadowColor: toColorValue(value),
};
},
},
{
values: flattenColorPalette(theme("boxShadowColor")),
type: ["color", "any"],
}
);
});
function key(size: string) {

4
packages/nativewind/src/transform-css/transforms/text-decoration-line.ts
View File

@@ -11,6 +11,8 @@ export function textDecorationLine(node: Declaration, meta: SelectorMeta) {
const children = node.value.children.toArray();
console.log(children);
let textDecorationLine: string | undefined;
for (let i = 0; i < children.length; i++) {
@@ -35,6 +37,7 @@ export function textDecorationLine(node: Declaration, meta: SelectorMeta) {
case "line-through": {
textDecorationLine = child.name;
if (
nextChild &&
nextChild.type === "Identifier" &&
nextChild.name === "underline"
) {
@@ -46,6 +49,7 @@ export function textDecorationLine(node: Declaration, meta: SelectorMeta) {
case "underline": {
textDecorationLine = child.name;
if (
nextChild &&
nextChild.type === "Identifier" &&
nextChild.name === "line-through"
) {