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

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.