Chromatic Glossary Flashcards
(15 cards)
What is a snapshot? (Where is it stored? What is it used for?)
Snapshots: A snapshot is an image of a story plus some metadata captured by a browser within Chromatic’s cloud infrastructure. For every story in your Storybook: Chromatic will load the story, wait for it to render, take a screenshot and crop it to the correct bounding region. Snapshots are stored in the cloud and used to determine UI changes between builds or branches. Typically one story equals one snapshot (and that gets multiplied by viewports and browsers).
One story = how many snapshots?
Typically one story equals one snapshot (and that gets multiplied by viewports and browsers).
What is a build? (When is it created?)
Builds: When a user runs Chromatic it creates a build. A build contains a set of historic snapshots (the baseline) and a set of new snapshots. It then compares the new snapshots to the old snapshots to identify any changes (called diffs). A user can then click into an individual build and review the snapshots to confirm that the changes are as intended.
What is UI Review? How does our team use UI Review, for example?
UI Review: This is our collaboration tool. UI Review essentially will aggregate all changes over the life time of a pull request and put it into one interface (the changeset). This then allows a reviewer to go through and leave feedback directly on the changed components. Internally, our team often uses this for design review, but I essentially see UI review as an extension of a pull request where a team can give visual feedback and ensure that all stakeholders (designer, developer, product, QA) are all on the same page.
What are UI tests? What’s another name for UI tests? What do UI tests require?
UI Tests: UI Tests are the same as snapshot tests. Essentially, it is the comparison of the old snapshot and the new snapshot to identify changes that have occurred to allow someone to go in and quickly ensure that all changes are as intended. UI Tests require snapshots, which are the key usage metric of Chromatic.
What is Storybook publish? Why is it so useful?
Storybook Publish: This is our hosting infrastructure, which allows teams to automatically upload a version of their Storybook to the cloud for anyone to see. This helps address a major issue of Storybook, which is that it is a local framework, meaning that it is all housed on one’s computer, and to view a Storybook someone needs to pull it down from a repository and then spin it up on their local server. With “Storybook Publish” Chromatic makes the Storybook accessible on the web, so anyone on the team (even those with no technical abilities) can view it.
What is the baseline?
Baseline: This is the starting set of components of a storybook that Chromatic will run tests against. For example, if you have a main branch, and start a feature branch, the “baseline” for the feature branch will be the components from the main branch when you start the feature branch. Then, as you make changes to the components, Chromatic will diff against the baseline. When you accept changes to components, the baseline will be updated, so Chromatic keeps diffing against the most updated version of the Storybook.
What is a “project” in Chromatic? (Does a single Chromatic account have one project or multiple projects?)
Projects: Maps to git repositories. When you start a project in Chromatic, you link it to a git repository. A single Chromatic account can have multiple projects with different user permissions. These all map to a git repository.
Can you change the user permissions for each project in Chromatic, or do all projects have the same permissions?
Yes: A single Chromatic account can have multiple projects with different user permissions. These all map to a git repository.
What is an account in Chromatic?
Accounts: These are typically at the corporate level (ex. BBC). This is the level we handle our billing at. Personal accounts are those linked to an individual while corporate accounts like to a corporate git organization. Note, when a user signs up as part of a corporate account they actually get two accounts, one personal account and one corporate account.
What does the DX team do?
DX: This stands for Developer Experience. The DX team is a mix of people with various design and development backgrounds. They help facilitate growth in the Storybook community via documentation and content (like blog posts). In many ways I see them as our marketing arm as well, focused on growing top of the funnel metrics like Storybook active users.
What is a collaborator in Chromatic?
Collaborator: This refers to users on a particular project. For example, if 7 people join a particular Chromatic project there will be 7 collaborators on the project. We have different roles that can be assigned to collaborators, which allow for specific functionalities within the tool (ex. Owner, Reviewer, Developer).
Enterprise customer vs. self-service customer
Enterprise Customer: Enterprise customers are those on annual plans paying via invoice). Typically, they are larger companies on more high-value plans, but the defining characteristic is having an annual plan (which requires a contract and often more legwork).
Self Service Customer: Self service customers are those paying via credit card on monthly plans. While we have a few customers that have asked for custom monthly credit card plans, the bulk of self service users are subscribed to one of our three plans (Starter, Standard, Pro). We also have a few customers on our startup plan, which offers a discounted rate on our usual plans to self service teams.
What is TurboSnap?
TurboSnap: TurboSnap is a form of dependency tracing that allows teams to set up Chromatic so that it only tests some stories versus all of them. Without TurboSnap, Chromatic works by running snapshot tests on all components and stories. This means that teams with very large Storybooks (many stories) run up their snapshot count very fast. What TurboSnap does, is it analyzes which components could have changed based on coding changes, and only snapshots that subset of components. For example, if you have 100 components, each with 5 stories, you have 500 stories. Typically that would be 500 snapshots on every build. However, with TurboSnap, let’s say you change 1 button component, and that component is used in 7 other components. That means 8 components are impacted. Let’s assume that all 5 stories for those 8 components are also impacted. That means 40 stories are potentially impacted. With TurboSnap, that means Chromatic will only take 40 snapshots, versus the 500 it would take without TurboSnap. This allows Chromatic to be cheaper for teams and also run faster.
What is changeset?
Changeset: The changeset is a feature within UI Review. It’s essentially an aggregation of all changes over the life time of a pull request. For example, if you run Chromatic 12 times on a particular PR, it will run 12 builds. However, the changeset will aggregate all of those changes comparing the components from the final build with the original baseline, and spotlight to the reviewer what has changed, so that reviewer can easily go through and make sure that all of the changes are as intended in a quick, efficient way.
