Automatic test on voorbeeld theme

[bddjong]

Description

Context

The voorbeeld theme contains a lot of utrecht- and some denhaag- tokens. In the future it might contain tokens from other organisations as well.

Problem

It turns out that some of the utrecht- tokens in the theme, don't actually exist in the code of the relevant Utrecht component. For example, the voorbeeld theme has utrecht-alert-informative-... whereas the actual Utrecht Alert has utrecht-alert-info-....

Why is this a problem?

UX designers might copy the voorbeeld figma library, and use it to design their components and define their organisations theme. When a developer actually tries applying that theme to an application using the components, the tokens won't do anything, because the code doesn't actually use them.

Solutions

Since the voorbeeld theme is manually updated in Figma, we can't change too much there. However, when the voorbeeld theme is pushed to a github branch to be updated, we could use the CI to verify that the tokens that are exported actually exist.

How?

• voorbeeld.tokens.json is read in a test
• Go through all non todo- tokens -> verify that the token exists in the organisations tokens
• example: utrecht-alert-informative-color -> does it exist in the utrecht tokens?
• Fail a test and output a list of non-existing tokens to make it easy to correct in Figma

Not certain:

• Which files can we base the check on? Some organisations might not have ever token in their own theme, even though the code does support it. Is there an all-inclusive "tokens.json" for every organisation?

Acceptance criteria

• voorbeeld.tokens.json is automatically checked to make sure it does not contain non-existing organisation tokens.
• Failed test if non-existing tokens are present
• List of non-existing tokens is visible