Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make theme objects identifieable #69

Open
Photonios opened this issue May 4, 2020 · 1 comment
Open

Make theme objects identifieable #69

Photonios opened this issue May 4, 2020 · 1 comment

Comments

@Photonios
Copy link

Photonios commented May 4, 2020

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

@artyorsh
Copy link
Member

artyorsh commented May 4, 2020

@Photonios thanks for a proposal 👍 It also potentially helps to solve akveo/react-native-ui-kitten#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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants