From e87646eeb6b4caaf5dc8cd0bc1404622ef8f723d Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Thu, 27 Jun 2024 16:43:43 +0100 Subject: [PATCH] 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? :thinking: * run storybook e2e test after rgm-package so the backround process is running for less time * split into separate step * format --- .drone.yml | 123 +++++++++++++++++- e2e/storybook/verify.spec.ts | 14 ++ package.json | 1 + scripts/drone/events/main.star | 5 + scripts/drone/events/pr.star | 10 ++ scripts/drone/pipelines/verify_storybook.star | 41 ++++++ scripts/drone/steps/lib.star | 30 +++++ 7 files changed, 223 insertions(+), 1 deletion(-) create mode 100644 e2e/storybook/verify.spec.ts create mode 100644 scripts/drone/pipelines/verify_storybook.star diff --git a/.drone.yml b/.drone.yml index d60fecea08a..215a0170f95 100644 --- a/.drone.yml +++ b/.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 ... diff --git a/e2e/storybook/verify.spec.ts b/e2e/storybook/verify.spec.ts new file mode 100644 index 00000000000..2610b1d5bf6 --- /dev/null +++ b/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); +} diff --git a/package.json b/package.json index a1c1c238a8b..095cb2274da 100644 --- a/package.json +++ b/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", diff --git a/scripts/drone/events/main.star b/scripts/drone/events/main.star index ee47392ee5c..6c04ab2345c 100644 --- a/scripts/drone/events/main.star +++ b/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), diff --git a/scripts/drone/events/pr.star b/scripts/drone/events/pr.star index d5a81aa78c8..a67b0956edc 100644 --- a/scripts/drone/events/pr.star +++ b/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"], diff --git a/scripts/drone/pipelines/verify_storybook.star b/scripts/drone/pipelines/verify_storybook.star new file mode 100644 index 00000000000..e95ca2ba4b6 --- /dev/null +++ b/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, + ) diff --git a/scripts/drone/steps/lib.star b/scripts/drone/steps/lib.star index e7694243679..734bb553e20 100644 --- a/scripts/drone/steps/lib.star +++ b/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.