@fluentui-react-native/use-tokens 0.7.0 → 0.7.1

package/lib/patchTokens.test.js

@@ -1,38 +1,38 @@
 import { getMemoCache } from '@fluentui-react-native/framework-base';
 import { patchTokens } from './patchTokens';
 const themeTokens = {
-  uno: 'uno',
-  dos: 'dos',
-  tres: 3,
-  quatro: 4,
-  cinco: true,
+    uno: 'uno',
+    dos: 'dos',
+    tres: 3,
+    quatro: 4,
+    cinco: true,
 };
 describe('patchTokens tests', () => {
-  test('props get copied', () => {
-    const cache = getMemoCache();
-    const patchValues = { uno: 'one', quatro: 'quatro' };
-    const [tokens] = patchTokens(themeTokens, cache, patchValues);
-    expect(tokens).not.toBe(themeTokens);
-    for (const key in patchValues) {
-      expect(tokens[key]).toEqual(patchValues[key]);
-    }
-  });
-  test('no copied props does not change tokens', () => {
-    const cache = getMemoCache();
-    const patchValues1 = {};
-    const [tokens] = patchTokens(themeTokens, cache, patchValues1);
-    expect(tokens).toBe(themeTokens);
-    const patchValues2 = { tres: undefined };
-    const [tokens2] = patchTokens(themeTokens, cache, patchValues2);
-    expect(tokens2).toBe(themeTokens);
-  });
-  test('patching tokens cache independent of order', () => {
-    const cache = getMemoCache();
-    const patch1 = { uno: 'one', cinco: false };
-    const patch2 = { cinco: false, uno: 'one' };
-    const [tokens1] = patchTokens(themeTokens, cache, patch1);
-    const [tokens2] = patchTokens(themeTokens, cache, patch2);
-    expect(tokens1).toBe(tokens2);
-  });
+    test('props get copied', () => {
+        const cache = getMemoCache();
+        const patchValues = { uno: 'one', quatro: 'quatro' };
+        const [tokens] = patchTokens(themeTokens, cache, patchValues);
+        expect(tokens).not.toBe(themeTokens);
+        for (const key in patchValues) {
+            expect(tokens[key]).toEqual(patchValues[key]);
+        }
+    });
+    test('no copied props does not change tokens', () => {
+        const cache = getMemoCache();
+        const patchValues1 = {};
+        const [tokens] = patchTokens(themeTokens, cache, patchValues1);
+        expect(tokens).toBe(themeTokens);
+        const patchValues2 = { tres: undefined };
+        const [tokens2] = patchTokens(themeTokens, cache, patchValues2);
+        expect(tokens2).toBe(themeTokens);
+    });
+    test('patching tokens cache independent of order', () => {
+        const cache = getMemoCache();
+        const patch1 = { uno: 'one', cinco: false };
+        const patch2 = { cinco: false, uno: 'one' };
+        const [tokens1] = patchTokens(themeTokens, cache, patch1);
+        const [tokens2] = patchTokens(themeTokens, cache, patch2);
+        expect(tokens1).toBe(tokens2);
+    });
 });
-//# sourceMappingURL=patchTokens.test.js.map
+//# sourceMappingURL=patchTokens.test.js.map

package/lib/useTokens.samples.test.d.ts

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=useTokens.samples.test.d.ts.map
+//# sourceMappingURL=useTokens.samples.test.d.ts.map

package/lib/useTokens.samples.test.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { act } from 'react';
 import { Text, View } from 'react-native';
 import { immutableMerge } from '@fluentui-react-native/framework-base';
@@ -9,19 +9,19 @@ import { buildUseTokens } from './buildUseTokens';
  * The default/base theme just contains base values
  */
 const baseTheme = {
-  globals: {
-    backgroundColor: 'white',
-    color: 'black',
-    borderColor: 'blue',
-    fontFamily: 'Arial',
-    fontSize: 12,
-  },
-  components: {},
+    globals: {
+        backgroundColor: 'white',
+        color: 'black',
+        borderColor: 'blue',
+        fontFamily: 'Arial',
+        fontSize: 12,
+    },
+    components: {},
 };
 const current = { theme: baseTheme };
 const useTheme = () => current.theme;
 const setActiveTheme = (theme) => {
-  current.theme = (theme && immutableMerge(baseTheme, theme)) || baseTheme;
+    current.theme = (theme && immutableMerge(baseTheme, theme)) || baseTheme;
 };
 /**
  * Helper function used to look up a component in the theme. Having this injected allows this module to not be dependent on the shape of
@@ -29,135 +29,121 @@ const setActiveTheme = (theme) => {
  */
 const getComponentInfo = (theme, name) => theme.components[name];
 describe('useTokens samples', () => {
-  /**
-   * Sample #1 - Themeable text element
-   *
-   * This adds some default opinions for how a text element should be styled but only allows for customization
-   * via theming
-   */
-  const useTokensSample1 = buildUseTokens(
-    getComponentInfo,
+    /**
+     * Sample #1 - Themeable text element
+     *
+     * This adds some default opinions for how a text element should be styled but only allows for customization
+     * via theming
+     */
+    const useTokensSample1 = buildUseTokens(getComponentInfo, 
     /** first the default values should come from the global theme section */
     (t) => ({
-      color: t.globals.color,
-      fontFamily: t.globals.fontFamily,
-      fontSize: t.globals.fontSize,
-    }),
+        color: t.globals.color,
+        fontFamily: t.globals.fontFamily,
+        fontSize: t.globals.fontSize,
+    }), 
     /** next we should look for a component reference to overlay */
-    'SampleText',
-  );
-  const SampleText1 = (props) => {
-    // standard props splitting
-    const { style, children, ...rest } = props;
-    // typically this would start with a call to retrieve the theme from the context via whatever method is appropriate
-    const theme = useTheme();
-    // next the tokens are resolved from the theme, a cache specific to this theme is returned as well to allow for
-    // style objects to not be rebuilt unnecessarily
-    const [tokens, cache] = useTokensSample1(theme);
-    // build up the text style, or the full props as appropriate
-    const [styleFromTokens] = cache(
-      /**
-       * first build the style object
-       * - this executes once for every unique set of keys.
-       * - The cache is already unique for this theme
-       */
-      () => ({ ...tokens }),
-      /**
-       * now specify the keys
-       * - because the only changing variable is the theme
-       * - ...and all the style properties are either constant or come from the tokens
-       * - ...no keys need to be specified
-       * - this means that only one style object will be created per component + theme pair
-       */
-      [],
-    );
-    // merge the props from the tokens with anything passed in via style. This is internally cached via object identity
-    // so the merged style object won't change identity unless one of the two inputs changes identity.
-    const mergedStyle = mergeStyles(styleFromTokens, style);
-    // now just render the element, forwarding the props, setting the merged style, then passing the children as appropriate
-    return _jsx(Text, { ...rest, style: mergedStyle, children: children });
-  };
-  beforeEach(() => {
-    setActiveTheme();
-  });
-  /** first render the component with no updates */
-  it('Sample1Text rendering with no overrides', () => {
-    let component;
-    act(() => {
-      component = renderer.create(_jsx(SampleText1, { children: 'Sample1a' }));
+    'SampleText');
+    const SampleText1 = (props) => {
+        // standard props splitting
+        const { style, children, ...rest } = props;
+        // typically this would start with a call to retrieve the theme from the context via whatever method is appropriate
+        const theme = useTheme();
+        // next the tokens are resolved from the theme, a cache specific to this theme is returned as well to allow for
+        // style objects to not be rebuilt unnecessarily
+        const [tokens, cache] = useTokensSample1(theme);
+        // build up the text style, or the full props as appropriate
+        const [styleFromTokens] = cache(
+        /**
+         * first build the style object
+         * - this executes once for every unique set of keys.
+         * - The cache is already unique for this theme
+         */
+        () => ({ ...tokens }), 
+        /**
+         * now specify the keys
+         * - because the only changing variable is the theme
+         * - ...and all the style properties are either constant or come from the tokens
+         * - ...no keys need to be specified
+         * - this means that only one style object will be created per component + theme pair
+         */
+        []);
+        // merge the props from the tokens with anything passed in via style. This is internally cached via object identity
+        // so the merged style object won't change identity unless one of the two inputs changes identity.
+        const mergedStyle = mergeStyles(styleFromTokens, style);
+        // now just render the element, forwarding the props, setting the merged style, then passing the children as appropriate
+        return (_jsx(Text, { ...rest, style: mergedStyle, children: children }));
+    };
+    beforeEach(() => {
+        setActiveTheme();
     });
-    expect(component.toJSON()).toMatchSnapshot();
-  });
-  /** now re-theme the component via the components in the theme */
-  it('Sample1Text rendering with some custom settings in the theme', () => {
-    setActiveTheme({
-      components: {
-        SampleText: {
-          color: 'pink',
-          fontSize: 24,
-        },
-      },
+    /** first render the component with no updates */
+    it('Sample1Text rendering with no overrides', () => {
+        let component;
+        act(() => {
+            component = renderer.create(_jsx(SampleText1, { children: "Sample1a" }));
+        });
+        expect(component.toJSON()).toMatchSnapshot();
     });
-    let component;
-    act(() => {
-      component = renderer.create(_jsx(SampleText1, { children: 'Sample1b' }));
+    /** now re-theme the component via the components in the theme */
+    it('Sample1Text rendering with some custom settings in the theme', () => {
+        setActiveTheme({
+            components: {
+                SampleText: {
+                    color: 'pink',
+                    fontSize: 24,
+                },
+            },
+        });
+        let component;
+        act(() => {
+            component = renderer.create(_jsx(SampleText1, { children: "Sample1b" }));
+        });
+        expect(component.toJSON()).toMatchSnapshot();
     });
-    expect(component.toJSON()).toMatchSnapshot();
-  });
-  // the Sample2Text component is built the same way as sample1, just using the new hook that has been created
-  const SampleText2 = (props) => {
-    const { color, style, children, ...rest } = props;
-    const theme = useTheme();
-    // this starts the same as sample1, extract tokens from the theme and get a theme specific cache object
-    const [tokens, cache] = useTokensSample1(theme);
-    // now when building up the style this time, the resulting style object is based upon both the theme and the passed
-    // in value of colors. Because the theme is already part of the cache definition, only color needs to be a key
-    const styleFromTokens = cache(
-      /** build the style, only patch the color if it has a value, otherwise the theme value would get stomped if color was undefined */
-      () => ({ ...tokens, ...(color && { color }) }),
-      /** use color as an additional key for the style */
-      [color],
-    );
-    // now just render, this time merging styles inline to make it a bit shorter
-    return _jsx(Text, { ...rest, style: mergeStyles(styleFromTokens, style), children: children });
-  };
-  /** rendering the Sample2 component with the base theme */
-  it('Sample2Text rendering with defaults and a color override', () => {
-    let component;
-    act(() => {
-      component = renderer.create(
-        _jsxs(View, {
-          children: [
-            _jsx(SampleText2, { children: 'Sample2 with defaults' }),
-            _jsx(SampleText2, { color: 'green', children: 'Sample2 with color override via prop' }),
-          ],
-        }),
-      );
+    // the Sample2Text component is built the same way as sample1, just using the new hook that has been created
+    const SampleText2 = (props) => {
+        const { color, style, children, ...rest } = props;
+        const theme = useTheme();
+        // this starts the same as sample1, extract tokens from the theme and get a theme specific cache object
+        const [tokens, cache] = useTokensSample1(theme);
+        // now when building up the style this time, the resulting style object is based upon both the theme and the passed
+        // in value of colors. Because the theme is already part of the cache definition, only color needs to be a key
+        const styleFromTokens = cache(
+        /** build the style, only patch the color if it has a value, otherwise the theme value would get stomped if color was undefined */
+        () => ({ ...tokens, ...(color && { color }) }), 
+        /** use color as an additional key for the style */
+        [color]);
+        // now just render, this time merging styles inline to make it a bit shorter
+        return (_jsx(Text, { ...rest, style: mergeStyles(styleFromTokens, style), children: children }));
+    };
+    /** rendering the Sample2 component with the base theme */
+    it('Sample2Text rendering with defaults and a color override', () => {
+        let component;
+        act(() => {
+            component = renderer.create(_jsxs(View, { children: [
+                    _jsx(SampleText2, { children: "Sample2 with defaults" }), _jsx(SampleText2, { color: "green", children: "Sample2 with color override via prop" })
+                ] }));
+        });
+        expect(component.toJSON()).toMatchSnapshot();
     });
-    expect(component.toJSON()).toMatchSnapshot();
-  });
-  /** now re-theme the component via the components in the theme */
-  it('Sample2Text rendering with some custom settings in the theme', () => {
-    setActiveTheme({
-      components: {
-        SampleText: {
-          fontSize: 18,
-          fontFamily: 'Helvetica',
-        },
-      },
+    /** now re-theme the component via the components in the theme */
+    it('Sample2Text rendering with some custom settings in the theme', () => {
+        setActiveTheme({
+            components: {
+                SampleText: {
+                    fontSize: 18,
+                    fontFamily: 'Helvetica',
+                },
+            },
+        });
+        let component;
+        act(() => {
+            component = renderer.create(_jsxs(View, { children: [
+                    _jsx(SampleText2, { children: "Sample2 with theme overrides set" }), _jsx(SampleText2, { color: "purple", children: "Sample2 with theme and color prop override" })
+                ] }));
+        });
+        expect(component.toJSON()).toMatchSnapshot();
     });
-    let component;
-    act(() => {
-      component = renderer.create(
-        _jsxs(View, {
-          children: [
-            _jsx(SampleText2, { children: 'Sample2 with theme overrides set' }),
-            _jsx(SampleText2, { color: 'purple', children: 'Sample2 with theme and color prop override' }),
-          ],
-        }),
-      );
-    });
-    expect(component.toJSON()).toMatchSnapshot();
-  });
 });
-//# sourceMappingURL=useTokens.samples.test.js.map
+//# sourceMappingURL=useTokens.samples.test.js.map

package/lib-commonjs/applyPropsToTokens.d.ts

@@ -1,8 +1,3 @@
 import type { GetTypedMemoValue } from '@fluentui-react-native/framework-base';
-export declare function applyPropsToTokens<TProps, TTokens>(
-  props: TProps,
-  tokens: TTokens,
-  cache: GetTypedMemoValue<TTokens>,
-  keys: (keyof TTokens)[],
-): [TTokens, GetTypedMemoValue<TTokens>];
-//# sourceMappingURL=applyPropsToTokens.d.ts.map
+export declare function applyPropsToTokens<TProps, TTokens>(props: TProps, tokens: TTokens, cache: GetTypedMemoValue<TTokens>, keys: (keyof TTokens)[]): [TTokens, GetTypedMemoValue<TTokens>];
+//# sourceMappingURL=applyPropsToTokens.d.ts.map

package/lib-commonjs/applyPropsToTokens.js

@@ -1,12 +1,12 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.applyPropsToTokens = applyPropsToTokens;
 function applyPropsToTokens(props, tokens, cache, keys) {
-  for (const key of keys) {
-    const sourceValue = props[key];
-    const setValue = sourceValue === tokens[key] ? undefined : sourceValue;
-    [tokens, cache] = cache(() => (setValue === undefined ? tokens : { ...tokens, [key]: setValue }), [setValue]);
-  }
-  return [tokens, cache];
+    for (const key of keys) {
+        const sourceValue = props[key];
+        const setValue = sourceValue === tokens[key] ? undefined : sourceValue;
+        [tokens, cache] = cache(() => (setValue === undefined ? tokens : { ...tokens, [key]: setValue }), [setValue]);
+    }
+    return [tokens, cache];
 }
-//# sourceMappingURL=applyPropsToTokens.js.map
+//# sourceMappingURL=applyPropsToTokens.js.map

package/lib-commonjs/applyPropsToTokens.test.d.ts

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=applyPropsToTokens.test.d.ts.map
+//# sourceMappingURL=applyPropsToTokens.test.d.ts.map

package/lib-commonjs/applyPropsToTokens.test.js

@@ -1,31 +1,31 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-const framework_base_1 = require('@fluentui-react-native/framework-base');
-const applyPropsToTokens_1 = require('./applyPropsToTokens');
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const framework_base_1 = require("@fluentui-react-native/framework-base");
+const applyPropsToTokens_1 = require("./applyPropsToTokens");
 const tokenProps = ['dos', 'quatro', 'cinco'];
 const themeTokens = {
-  uno: 'uno',
-  dos: 'dos',
-  tres: 3,
-  quatro: 4,
-  cinco: true,
+    uno: 'uno',
+    dos: 'dos',
+    tres: 3,
+    quatro: 4,
+    cinco: true,
 };
 const props1 = { dos: 'two', quatro: 'four', cinco: false, foo: 'foo', bar: 'bar' };
 // const props2: Props = { dos: 'two' };
 // const props3: Props = { foo: 'foo', bar: 'bar' };
 describe('applyPropsToTokens tests', () => {
-  test('props get copied', () => {
-    const cache = (0, framework_base_1.getTypedMemoCache)();
-    const [tokens] = (0, applyPropsToTokens_1.applyPropsToTokens)(props1, themeTokens, cache, tokenProps);
-    expect(tokens).not.toBe(themeTokens);
-    for (const key of tokenProps) {
-      expect(tokens[key]).toEqual(props1[key]);
-    }
-  });
-  test('no copied props does not change tokens', () => {
-    const cache = (0, framework_base_1.getTypedMemoCache)();
-    const [tokens] = (0, applyPropsToTokens_1.applyPropsToTokens)({}, themeTokens, cache, tokenProps);
-    expect(tokens).toBe(themeTokens);
-  });
+    test('props get copied', () => {
+        const cache = (0, framework_base_1.getTypedMemoCache)();
+        const [tokens] = (0, applyPropsToTokens_1.applyPropsToTokens)(props1, themeTokens, cache, tokenProps);
+        expect(tokens).not.toBe(themeTokens);
+        for (const key of tokenProps) {
+            expect(tokens[key]).toEqual(props1[key]);
+        }
+    });
+    test('no copied props does not change tokens', () => {
+        const cache = (0, framework_base_1.getTypedMemoCache)();
+        const [tokens] = (0, applyPropsToTokens_1.applyPropsToTokens)({}, themeTokens, cache, tokenProps);
+        expect(tokens).toBe(themeTokens);
+    });
 });
-//# sourceMappingURL=applyPropsToTokens.test.js.map
+//# sourceMappingURL=applyPropsToTokens.test.js.map

package/lib-commonjs/applyTokenLayers.d.ts

@@ -12,10 +12,5 @@ export type HasLayer = (name: string) => boolean;
  * @param subCache - cache scoped to the root object with no layers applied
  * @param hasLayer - a function which returns whether a given layer should be applied
  */
-export declare function applyTokenLayers<TTokens>(
-  tokens: TTokens,
-  states: string[],
-  subCache: GetTypedMemoValue<TTokens>,
-  hasLayer: HasLayer,
-): [TTokens, GetTypedMemoValue<TTokens>];
-//# sourceMappingURL=applyTokenLayers.d.ts.map
+export declare function applyTokenLayers<TTokens>(tokens: TTokens, states: string[], subCache: GetTypedMemoValue<TTokens>, hasLayer: HasLayer): [TTokens, GetTypedMemoValue<TTokens>];
+//# sourceMappingURL=applyTokenLayers.d.ts.map

package/lib-commonjs/applyTokenLayers.js

@@ -1,7 +1,7 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.applyTokenLayers = applyTokenLayers;
-const framework_base_1 = require('@fluentui-react-native/framework-base');
+const framework_base_1 = require("@fluentui-react-native/framework-base");
 /**
  * Apply token layers, building them up applied layer by applied layer, using the cache to store intermediate
  * values
@@ -12,20 +12,17 @@ const framework_base_1 = require('@fluentui-react-native/framework-base');
  * @param hasLayer - a function which returns whether a given layer should be applied
  */
 function applyTokenLayers(tokens, states, subCache, hasLayer) {
-  let final = { tokens, subCache };
-  if (states && states.length > 0) {
-    // now walk the overrides that are set, merging in props, caching results, and getting a new sub cache
-    final = states
-      .filter((val) => hasLayer(val))
-      .reduce((previous, layerName) => {
-        const layer = previous.tokens[layerName];
-        const [tokens, subCache] = previous.subCache(
-          () => (layer && typeof layer === 'object' ? (0, framework_base_1.immutableMerge)(previous.tokens, layer) : previous.tokens),
-          [layer],
-        );
-        return { tokens, subCache };
-      }, final);
-  }
-  return [final.tokens, final.subCache];
+    let final = { tokens, subCache };
+    if (states && states.length > 0) {
+        // now walk the overrides that are set, merging in props, caching results, and getting a new sub cache
+        final = states
+            .filter((val) => hasLayer(val))
+            .reduce((previous, layerName) => {
+            const layer = previous.tokens[layerName];
+            const [tokens, subCache] = previous.subCache(() => (layer && typeof layer === 'object' ? (0, framework_base_1.immutableMerge)(previous.tokens, layer) : previous.tokens), [layer]);
+            return { tokens, subCache };
+        }, final);
+    }
+    return [final.tokens, final.subCache];
 }
-//# sourceMappingURL=applyTokenLayers.js.map
+//# sourceMappingURL=applyTokenLayers.js.map

package/lib-commonjs/applyTokenLayers.test.d.ts

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=applyTokenLayers.test.d.ts.map
+//# sourceMappingURL=applyTokenLayers.test.d.ts.map

package/lib-commonjs/applyTokenLayers.test.js

@@ -1,55 +1,55 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-const framework_base_1 = require('@fluentui-react-native/framework-base');
-const applyTokenLayers_1 = require('./applyTokenLayers');
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const framework_base_1 = require("@fluentui-react-native/framework-base");
+const applyTokenLayers_1 = require("./applyTokenLayers");
 const stateOrder = ['hover', 'press', 'disabled'];
 const tokens1 = {
-  a: 'a',
-  b: 'b',
-  c: 'c',
-  hover: {
-    a: 'a-hover',
-    b: 'b-hover',
+    a: 'a',
+    b: 'b',
+    c: 'c',
+    hover: {
+        a: 'a-hover',
+        b: 'b-hover',
+        press: {
+            a: 'a-hover-press',
+        },
+    },
     press: {
-      a: 'a-hover-press',
+        a: 'a-press',
+        b: 'b-press',
+    },
+    disabled: {
+        a: 'disabled',
+        b: 'disabled',
+        c: 'disabled',
     },
-  },
-  press: {
-    a: 'a-press',
-    b: 'b-press',
-  },
-  disabled: {
-    a: 'disabled',
-    b: 'disabled',
-    c: 'disabled',
-  },
 };
 function stripLayers(tokens) {
-  const t = { ...tokens };
-  delete t.hover;
-  delete t.press;
-  delete t.disabled;
-  return t;
+    const t = { ...tokens };
+    delete t.hover;
+    delete t.press;
+    delete t.disabled;
+    return t;
 }
 describe('applyLayers tests', () => {
-  test('no layers returns tokens', () => {
-    const cache = (0, framework_base_1.getMemoCache)();
-    const tokens = (0, applyTokenLayers_1.applyTokenLayers)(tokens1, stateOrder, cache, () => false)[0];
-    expect(tokens).toBe(tokens1);
-  });
-  test('apply hover works', () => {
-    const cache = (0, framework_base_1.getMemoCache)();
-    const lookup = (layer) => layer === 'hover';
-    const result1 = (0, applyTokenLayers_1.applyTokenLayers)(tokens1, stateOrder, cache, lookup)[0];
-    expect((0, applyTokenLayers_1.applyTokenLayers)(tokens1, stateOrder, cache, lookup)[0]).toBe(result1);
-    expect(stripLayers(result1)).toEqual({ a: 'a-hover', b: 'b-hover', c: 'c' });
-  });
-  test('apply hover and press layer correctly', () => {
-    const cache = (0, framework_base_1.getMemoCache)();
-    const lookup = (layer) => layer === 'hover' || layer === 'press';
-    const result1 = (0, applyTokenLayers_1.applyTokenLayers)(tokens1, stateOrder, cache, lookup)[0];
-    expect((0, applyTokenLayers_1.applyTokenLayers)(tokens1, stateOrder, cache, lookup)[0]).toBe(result1);
-    expect(stripLayers(result1)).toEqual({ a: 'a-hover-press', b: 'b-press', c: 'c' });
-  });
+    test('no layers returns tokens', () => {
+        const cache = (0, framework_base_1.getMemoCache)();
+        const tokens = (0, applyTokenLayers_1.applyTokenLayers)(tokens1, stateOrder, cache, () => false)[0];
+        expect(tokens).toBe(tokens1);
+    });
+    test('apply hover works', () => {
+        const cache = (0, framework_base_1.getMemoCache)();
+        const lookup = (layer) => layer === 'hover';
+        const result1 = (0, applyTokenLayers_1.applyTokenLayers)(tokens1, stateOrder, cache, lookup)[0];
+        expect((0, applyTokenLayers_1.applyTokenLayers)(tokens1, stateOrder, cache, lookup)[0]).toBe(result1);
+        expect(stripLayers(result1)).toEqual({ a: 'a-hover', b: 'b-hover', c: 'c' });
+    });
+    test('apply hover and press layer correctly', () => {
+        const cache = (0, framework_base_1.getMemoCache)();
+        const lookup = (layer) => layer === 'hover' || layer === 'press';
+        const result1 = (0, applyTokenLayers_1.applyTokenLayers)(tokens1, stateOrder, cache, lookup)[0];
+        expect((0, applyTokenLayers_1.applyTokenLayers)(tokens1, stateOrder, cache, lookup)[0]).toBe(result1);
+        expect(stripLayers(result1)).toEqual({ a: 'a-hover-press', b: 'b-press', c: 'c' });
+    });
 });
-//# sourceMappingURL=applyTokenLayers.test.js.map
+//# sourceMappingURL=applyTokenLayers.test.js.map