Storybook: Add basic e2e verification test (#89779)

* add very basic tests to verify storybook builds correctly

* add storybook step to drone

* reorder steps

* drone tweaks

* don't need host since it's set in env

* don't need to wait

* format build.star and readd wait

* install netcat in CI

* do a yarn install here to get correct bindings

* refactoring to hopefully work better in CI

* add wait-on

* add verbose logging

* localhost?

* more logging

* specify storybook host

* ...

* back to grafana-server

* does this work? 🤔

* run storybook e2e test after rgm-package so the backround process is running for less time

* split into separate step

* format

.drone.yml

@@ -110,6 +110,67 @@ image_pull_secrets:
 - gcr
 - gar
 kind: pipeline
+name: pr-verify-storybook
+node:
+  type: no-parallel
+platform:
+  arch: amd64
+  os: linux
+services: []
+steps:
+- commands:
+  - echo $DRONE_RUNNER_NAME
+  image: alpine:3.19.1
+  name: identify-runner
+- commands:
+  - yarn install --immutable || yarn install --immutable
+  depends_on: []
+  image: node:20.9.0-alpine
+  name: yarn-install
+- commands:
+  - yarn storybook --quiet
+  depends_on:
+  - yarn-install
+  detach: true
+  image: node:20.9.0-alpine
+  name: start-storybook
+- commands:
+  - npx wait-on@7.0.1 http://$HOST:$PORT
+  - yarn e2e:storybook
+  depends_on:
+  - start-storybook
+  environment:
+    HOST: start-storybook
+    PORT: "9001"
+  image: cypress/included:13.10.0
+  name: end-to-end-tests-storybook-suite
+trigger:
+  event:
+  - pull_request
+  paths:
+    exclude:
+    - docs/**
+    - '*.md'
+    - pkg/**
+    - packaging/**
+    - go.sum
+    - go.mod
+    include: []
+type: docker
+volumes:
+- host:
+    path: /var/run/docker.sock
+  name: docker
+---
+clone:
+  retries: 3
+depends_on: []
+environment:
+  EDITION: oss
+image_pull_secrets:
+- gcr
+- gar
+kind: pipeline
 name: pr-test-frontend
 node:
   type: no-parallel
@@ -1824,6 +1885,66 @@ image_pull_secrets:
 - gcr
 - gar
 kind: pipeline
+name: main-verify-storybook
+node:
+  type: no-parallel
+platform:
+  arch: amd64
+  os: linux
+services: []
+steps:
+- commands:
+  - echo $DRONE_RUNNER_NAME
+  image: alpine:3.19.1
+  name: identify-runner
+- commands:
+  - yarn install --immutable || yarn install --immutable
+  depends_on: []
+  image: node:20.9.0-alpine
+  name: yarn-install
+- commands:
+  - yarn storybook --quiet
+  depends_on:
+  - yarn-install
+  detach: true
+  image: node:20.9.0-alpine
+  name: start-storybook
+- commands:
+  - npx wait-on@7.0.1 http://$HOST:$PORT
+  - yarn e2e:storybook
+  depends_on:
+  - start-storybook
+  environment:
+    HOST: start-storybook
+    PORT: "9001"
+  image: cypress/included:13.10.0
+  name: end-to-end-tests-storybook-suite
+trigger:
+  branch: main
+  event:
+  - push
+  paths:
+    exclude:
+    - '*.md'
+    - docs/**
+    - latest.json
+  repo:
+  - grafana/grafana
+type: docker
+volumes:
+- host:
+    path: /var/run/docker.sock
+  name: docker
+---
+clone:
+  retries: 3
+depends_on: []
+environment:
+  EDITION: oss
+image_pull_secrets:
+- gcr
+- gar
+kind: pipeline
 name: main-build-e2e-publish
 node:
   type: no-parallel
@@ -5060,6 +5181,6 @@ kind: secret
 name: gcr_credentials
 ---
 kind: signature
-hmac: a916fba452c568a0e1d392702db3423fa52652d8d60f65f7b7aa43a7c1e952f4
+hmac: 6c273dec437d3ae5ae9a42450c57956259a691ff0df7c161a57eaa683c867acd
 
 ...

e2e/storybook/verify.spec.ts

@@ -0,0 +1,14 @@
+// very basic test to verify that the button story loads correctly
+// this is only intended to catch some basic build errors with storybook
+// NOTE: storybook must already be running (`yarn storybook`) for this test to work
+describe('Verify storybook', () => {
+  it('Loads the button story correctly', () => {
+    cy.visit('?path=/story/buttons-button--basic');
+    getIframeBody().find('button:contains("Example button")').should('be.visible');
+  });
+});
+
+// see https://www.cypress.io/blog/2020/02/12/working-with-iframes-in-cypress
+function getIframeBody() {
+  return cy.get('#storybook-preview-iframe').its('0.contentDocument.body').should('not.be.empty').then(cy.wrap);
+}

package.json

@@ -19,6 +19,7 @@
     "e2e:enterprise:debug": "./e2e/start-and-run-suite enterprise debug",
     "e2e:playwright": "yarn playwright test",
     "e2e:playwright:server": "./e2e/plugin-e2e/start-and-run-suite",
+    "e2e:storybook": "PORT=9001 ./e2e/run-suite storybook true",
     "test": "jest --notify --watch",
     "test:coverage": "jest --coverage",
     "test:coverage:changes": "jest --coverage --changedSince=origin/main",

scripts/drone/events/main.star

@@ -35,6 +35,10 @@ load(
     "scripts/drone/pipelines/trigger_downstream.star",
     "enterprise_downstream_pipeline",
 )
+load(
+    "scripts/drone/pipelines/verify_storybook.star",
+    "verify_storybook",
+)
 load(
     "scripts/drone/pipelines/windows.star",
     "windows",
@@ -70,6 +74,7 @@ def main_pipelines():
         lint_frontend_pipeline(trigger, ver_mode),
         test_backend(trigger, ver_mode),
         lint_backend_pipeline(trigger, ver_mode),
+        verify_storybook(trigger, ver_mode),
         build_e2e(trigger, ver_mode),
         integration_tests(trigger, prefix = ver_mode, ver_mode = ver_mode),
         windows(trigger, ver_mode = ver_mode),

scripts/drone/events/pr.star

@@ -52,6 +52,10 @@ load(
     "scripts/drone/pipelines/verify_starlark.star",
     "verify_starlark",
 )
+load(
+    "scripts/drone/pipelines/verify_storybook.star",
+    "verify_storybook",
+)
 
 ver_mode = "pr"
 trigger = {
@@ -81,6 +85,12 @@ def pr_pipelines():
             ),
             ver_mode,
         ),
+        verify_storybook(
+            get_pr_trigger(
+                exclude_paths = ["pkg/**", "packaging/**", "go.sum", "go.mod"],
+            ),
+            ver_mode,
+        ),
         test_frontend(
             get_pr_trigger(
                 exclude_paths = ["pkg/**", "packaging/**", "go.sum", "go.mod"],

scripts/drone/pipelines/verify_storybook.star

@@ -0,0 +1,41 @@
+"""
+This module returns the pipeline used for verifying the storybook build.
+"""
+
+load(
+    "scripts/drone/steps/lib.star",
+    "e2e_storybook_step",
+    "identify_runner_step",
+    "start_storybook_step",
+    "yarn_install_step",
+)
+load(
+    "scripts/drone/utils/utils.star",
+    "pipeline",
+)
+
+def verify_storybook(trigger, ver_mode):
+    """Generates the pipeline used for verifying the storybook build.
+
+    Args:
+      trigger: a Drone trigger for the pipeline
+      ver_mode: indirectly controls which revision of enterprise code to use.
+
+    Returns:
+      Drone pipeline.
+    """
+    environment = {"EDITION": "oss"}
+
+    steps = [
+        identify_runner_step(),
+        yarn_install_step(),
+        start_storybook_step(),
+        e2e_storybook_step(),
+    ]
+
+    return pipeline(
+        name = "{}-verify-storybook".format(ver_mode),
+        trigger = trigger,
+        steps = steps,
+        environment = environment,
+    )

scripts/drone/steps/lib.star

@@ -774,6 +774,36 @@ def e2e_tests_step(suite, port = 3001, tries = None):
         ],
     }
 
+def start_storybook_step():
+    return {
+        "name": "start-storybook",
+        "image": images["node"],
+        "depends_on": [
+            "yarn-install",
+        ],
+        "commands": [
+            "yarn storybook --quiet",
+        ],
+        "detach": True,
+    }
+
+def e2e_storybook_step():
+    return {
+        "name": "end-to-end-tests-storybook-suite",
+        "image": images["cypress"],
+        "depends_on": [
+            "start-storybook",
+        ],
+        "environment": {
+            "HOST": "start-storybook",
+            "PORT": "9001",
+        },
+        "commands": [
+            "npx wait-on@7.0.1 http://$HOST:$PORT",
+            "yarn e2e:storybook",
+        ],
+    }
+
 def cloud_plugins_e2e_tests_step(suite, cloud, trigger = None):
     """Run cloud plugins end-to-end tests.