eva icon indicating copy to clipboard operation
eva copied to clipboard

Make theme objects identifieable

Open Photonios opened this issue 4 years ago • 1 comments

It would be nice to add a symbol to the theme objects so they can easily be identified.

A good reason for this is to be able to easily write a custom Jest snapshot serializer and avoids the entire theme from being serialized into the snapshot.

We have a custom Jest snapshot serializer that does this, but it has to rely on checking for the existence of several theme properties to identify the theme object. This is inefficient and a little bit fragile.

class EVADesignThemeSerializer {
    test(value) {
        if (!value || typeof value !== 'object' || util.types.isProxy(value)) {
            return false;
        }

        return (
            value.hasOwnProperty('color-primary-100') &&
            value.hasOwnProperty('color-primary-transparent-100') &&
            value.hasOwnProperty('color-success-100') &&
            value.hasOwnProperty('color-success-transparent-100') &&
            value.hasOwnProperty('color-info-100') &&
            value.hasOwnProperty('color-warning-100') &&
            value.hasOwnProperty('color-warning-transparent-100') &&
            value.hasOwnProperty('color-danger-100') &&
            value.hasOwnProperty('outline-color')
        );
    }

    print() {
        return '[EVADesignTheme]';
    }
}

see: https://jestjs.io/docs/en/configuration#snapshotserializers-arraystring

Here is how this works for identifying React test elements:

https://github.com/facebook/jest/blob/968a301902796a5082b0119b82a6a996a20e1448/packages/pretty-format/src/plugins/ReactTestComponent.ts#L80

Photonios avatar May 04 '20 07:05 Photonios

@Photonios thanks for a proposal 👍 It also potentially helps to solve https://github.com/akveo/react-native-ui-kitten/issues/1038, so that we can compare identifiers instead of whole theme objects in shouldComponentUpdate, for example. I started thinking about this, but that's a good point to discuss, because now theme is a plain object, meaning we need to think where exactly identifier property should be placed.

artyorsh avatar May 04 '20 08:05 artyorsh