Skip to content

Set up MirajeJS in Storybook

Enrique Alcántara requested to merge setup-mirajejs-storybook into master

What does this MR do and why?

It sets up MirajeJS in Storybook. MirajeJS is a library for mocking backend APIs. The purpose of using MirajeJS in Storybook is allowing to write Stories for components that rely on Backend APIs. Mocking Backend APIs will also allow us to write stories for full page bundles, for example, mounting an entire Vue application as a story.

We already use MirajeJS for frontend integration tests. This Merge Request configures Storybook’s Webpack to enable importing MirajeJS along with all the fixtures it references.

Backend-generated fixtures

MirajeJS uses frontend fixtures to deliver HTTP responses. This MR introduces a new rake task that executes the RSpec files that generate the fixtures used by MirajeJS. We need to list of RSpec files used by the mock server in spec/frontend_integration/fixture_generators.yml

How to test?

Execute the command yarn storybook:start command in your local environment.

Screenshots or screen recordings

Before After
before after

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

MR acceptance checklist

These checklists encourage us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Quality

  • Quality checklist confirmed
  1. I have self-reviewed this MR per code review guidelines.
  2. For the code that that this change impacts, I believe that the automated tests (Testing Guide) validate functionality that is highly important to users (including consideration of all test levels). If the existing automated tests do not cover this functionality, I have added the necessary additional tests or I have added an issue to describe the automation testing gap and linked it to this MR.
  3. I have considered the technical aspects of the impact of this change on both gitlab.com hosted customers and self-hosted customers.
  4. I have considered the impact of this change on the front-end, back-end, and database portions of the system where appropriate and applied frontend, backend and database labels accordingly.
  5. I have tested this MR in all supported browsers, or determiend that this testing is not needed.
  6. I have confirmed that this change is backwards compatible across updates, or I have decided that this does not apply.
  7. I have properly separated EE content from FOSS, or this MR is FOSS only. (Where should EE code go?)
  8. If I am introducing a new expectation for existing data, I have confirmed that existing data meets this expectation or I have made this expectation optional rather than required.

Performance, reliability, and availability

  • Performance, reliability, and availability checklist confirmed
  1. I am confident that this MR does not harm performance, or I have asked a reviewer to help assess the performance impact. (Merge request performance guidelines)
  2. I have added information for database reviewers in the MR description, or I have decided that it is unnecessary. (Does this MR have database-related changes?)
  3. I have considered the availability and reliability risks of this change. I have also considered the scalability risk based on future predicted growth
  4. I have considered the performance, reliability and availability impacts of this change on large customers who may have significantly more data than the average customer.

Documentation

  • Documentation checklist confirmed
  1. I have included changelog trailers, or I have decided that they are not needed. (Does this MR need a changelog?)
  2. I have added/updated documentation, or I have decided that documentation changes are not needed for this MR. (Is documentation required?)

Security

  • Security checklist confirmed
  1. I have confirmed that if this MR contains changes to processing or storing of credentials or tokens, authorization, and authentication methods, or other items described in the security review guidelines, I have added the label security and I have @-mentioned @gitlab-com/gl-security/appsec.

Deployment

  • Deployment checklist confirmed
  1. I have considered using a feature flag for this change because the change may be high risk. If I decided to use a feature flag, I plan to test the change in staging before I test it in production, and I have considered rolling it out to a subset of production customers before doing rolling it out to all customers. When to use a feature flag
  2. I have informed the Infrastructure department of a default setting or new setting change per definition of done, or decided that this is not needed.
Edited by Enrique Alcántara

Merge request reports