Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Run storybook tests with playwright #249

Merged
merged 39 commits into from
Jul 12, 2024
Merged

Conversation

ethangardner
Copy link
Contributor

@ethangardner ethangardner commented Jul 5, 2024

Add new workflow for testing in a browser environment.

  • Installs a package that will use Playwright to run against the built Storybook files to verify JSDOM output
  • Provides a docker container for running tests in CI and locally
  • Documentation in the /e2e/README.md file and ADR of test strategy.
  • Restores end-to-end tests of the drag-and-drop that runs against the built "spotlight" project.
  • Updates test runner actions so the vite tests and playwright tests can run concurrently in the pipeline.
  • Removes dependency on testing live URLs

Copy link

github-actions bot commented Jul 5, 2024

Terraform plan for tts-10x-atj-staging

Plan: 2 to add, 2 to change, 4 to destroy.
Terraform used the selected providers to generate the following execution
plan. Resource actions are indicated with the following symbols:
+   create
!~  update in-place
-   destroy

Terraform will perform the following actions:

  # cloudfoundry_app.tts-10x-atj-staging-server-doj_tts-10x-atj-staging-server-doj-app_E0D2137F will be updated in-place
!~  resource "cloudfoundry_app" "tts-10x-atj-staging-server-doj_tts-10x-atj-staging-server-doj-app_E0D2137F" {
        id                              = "7b7d0fa8-f5b1-48ba-a320-1dfbcffbd7b5"
!~      id_bg                           = "************************************" -> (known after apply)
        name                            = "tts-10x-atj-staging-server-doj-app"
#        (17 unchanged attributes hidden)

-       routes {
-           port  = 0 -> null
-           route = "5f2eddbb-1011-4cd8-89bf-a01048830b8b" -> null
        }
+       routes {
+           port  = (known after apply)
+           route = (known after apply)
        }

-       service_binding {
-           params           = (sensitive value) -> null
-           service_instance = "f4d7b511-20cf-47d4-bf25-3bc2a848e8f4" -> null
#            (1 unchanged attribute hidden)
        }
    }

  # cloudfoundry_app.tts-10x-atj-staging-server-kansas_tts-10x-atj-staging-server-kansas-app_0CAEC23C will be updated in-place
!~  resource "cloudfoundry_app" "tts-10x-atj-staging-server-kansas_tts-10x-atj-staging-server-kansas-app_0CAEC23C" {
        id                              = "62d635fa-8ea0-47ab-8584-2fa78cfb03d4"
!~      id_bg                           = "************************************" -> (known after apply)
        name                            = "tts-10x-atj-staging-server-kansas-app"
#        (17 unchanged attributes hidden)

-       routes {
-           port  = 0 -> null
-           route = "d99c99cf-ecb3-4885-a5b2-8b95fc3bd1bd" -> null
        }
+       routes {
+           port  = (known after apply)
+           route = (known after apply)
        }

-       service_binding {
-           params           = (sensitive value) -> null
-           service_instance = "097d925c-7aa5-489b-82df-d50abe38e284" -> null
#            (1 unchanged attribute hidden)
        }
    }

  # cloudfoundry_route.tts-10x-atj-staging-server-doj-route will be created
+   resource "cloudfoundry_route" "tts-10x-atj-staging-server-doj-route" {
+       domain   = "50ba3f69-cd54-4963-9172-14f3334b479e"
+       endpoint = (known after apply)
+       hostname = "tts-10x-atj-staging-server-doj"
+       id       = (known after apply)
+       port     = (known after apply)
+       space    = "132fc49b-e29e-40b3-8914-4233e4d4caf4"
    }

  # cloudfoundry_route.tts-10x-atj-staging-server-doj_tts-10x-atj-staging-server-doj-route_2BD625AA will be destroyed
  # (because cloudfoundry_route.tts-10x-atj-staging-server-doj_tts-10x-atj-staging-server-doj-route_2BD625AA is not in configuration)
-   resource "cloudfoundry_route" "tts-10x-atj-staging-server-doj_tts-10x-atj-staging-server-doj-route_2BD625AA" {
-       domain   = "50ba3f69-cd54-4963-9172-14f3334b479e" -> null
-       endpoint = "tts-10x-atj-staging-server-doj.app.cloud.gov" -> null
-       hostname = "tts-10x-atj-staging-server-doj" -> null
-       id       = "5f2eddbb-1011-4cd8-89bf-a01048830b8b" -> null
-       space    = "132fc49b-e29e-40b3-8914-4233e4d4caf4" -> null
#        (1 unchanged attribute hidden)
    }

  # cloudfoundry_route.tts-10x-atj-staging-server-kansas-route will be created
+   resource "cloudfoundry_route" "tts-10x-atj-staging-server-kansas-route" {
+       domain   = "50ba3f69-cd54-4963-9172-14f3334b479e"
+       endpoint = (known after apply)
+       hostname = "tts-10x-atj-staging-server-kansas"
+       id       = (known after apply)
+       port     = (known after apply)
+       space    = "132fc49b-e29e-40b3-8914-4233e4d4caf4"
    }

  # cloudfoundry_route.tts-10x-atj-staging-server-kansas_tts-10x-atj-staging-server-kansas-route_B2AB6A20 will be destroyed
  # (because cloudfoundry_route.tts-10x-atj-staging-server-kansas_tts-10x-atj-staging-server-kansas-route_B2AB6A20 is not in configuration)
-   resource "cloudfoundry_route" "tts-10x-atj-staging-server-kansas_tts-10x-atj-staging-server-kansas-route_B2AB6A20" {
-       domain   = "50ba3f69-cd54-4963-9172-14f3334b479e" -> null
-       endpoint = "tts-10x-atj-staging-server-kansas.app.cloud.gov" -> null
-       hostname = "tts-10x-atj-staging-server-kansas" -> null
-       id       = "d99c99cf-ecb3-4885-a5b2-8b95fc3bd1bd" -> null
-       space    = "132fc49b-e29e-40b3-8914-4233e4d4caf4" -> null
#        (1 unchanged attribute hidden)
    }

  # cloudfoundry_user_provided_service.tts-10x-atj-staging-server-doj_tts-10x-atj-staging-server-doj-login-gov-service_65BE8DCD will be destroyed
  # (because cloudfoundry_user_provided_service.tts-10x-atj-staging-server-doj_tts-10x-atj-staging-server-doj-login-gov-service_65BE8DCD is not in configuration)
-   resource "cloudfoundry_user_provided_service" "tts-10x-atj-staging-server-doj_tts-10x-atj-staging-server-doj-login-gov-service_65BE8DCD" {
-       credentials = (sensitive value) -> null
-       id          = "f4d7b511-20cf-47d4-bf25-3bc2a848e8f4" -> null
-       name        = "tts-10x-atj-staging-server-doj-login-gov-service" -> null
-       space       = "132fc49b-e29e-40b3-8914-4233e4d4caf4" -> null
-       tags        = [] -> null
    }

  # cloudfoundry_user_provided_service.tts-10x-atj-staging-server-kansas_tts-10x-atj-staging-server-kansas-login-gov-service_8ED0FBC7 will be destroyed
  # (because cloudfoundry_user_provided_service.tts-10x-atj-staging-server-kansas_tts-10x-atj-staging-server-kansas-login-gov-service_8ED0FBC7 is not in configuration)
-   resource "cloudfoundry_user_provided_service" "tts-10x-atj-staging-server-kansas_tts-10x-atj-staging-server-kansas-login-gov-service_8ED0FBC7" {
-       credentials = (sensitive value) -> null
-       id          = "097d925c-7aa5-489b-82df-d50abe38e284" -> null
-       name        = "tts-10x-atj-staging-server-kansas-login-gov-service" -> null
-       space       = "132fc49b-e29e-40b3-8914-4233e4d4caf4" -> null
-       tags        = [] -> null
    }

Plan: 2 to add, 2 to change, 4 to destroy.

📝 Plan generated in Post Terraform plan to PR comment #148

@ethangardner ethangardner marked this pull request as ready for review July 9, 2024 18:33
Copy link
Contributor

@danielnaab danielnaab left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great. Would it be possible to move the test step out of the Dockerfile, so we can invoke through docker run?

e2e/Dockerfile Outdated
WORKDIR ./e2e
RUN serve ../apps/spotlight/dist -p 9090 & sleep 5; pnpm playwright test;
RUN serve ../apps/spotlight/dist -p 9090 -L & sleep 5; pnpm playwright test;
RUN serve ../packages/design/storybook-static -p 9191 -L & sleep 5; pnpm --filter=end-to-end-tests test:storybook --url http://localhost:9191 --config-dir ../packages/design/.storybook/ --browsers firefox chromium
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There could be some downsides of running the tests inside the Docker image build process vs at container runtime. It seems safer to run via the CMD (or ENTRYPOINT)... then, if we're using this image locally, we don't need to rebuild it when we rerun the tests.

Could these be defined in the package.json instead, so we can also run them on our local dev machine?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@danielnaab - changes made. It's ready for you to take a look again. I created a bash script to help run the docker commands during local development that mounts a volume from the host machine so you can run it locally. I opted to keep this out of package.json because it's outside of the node ecosystem due to its dependency on Docker.

documents/adr/0010-end-to-end-testing.md Outdated Show resolved Hide resolved
.husky/pre-commit Outdated Show resolved Hide resolved
@ethangardner ethangardner requested a review from danielnaab July 12, 2024 16:57
Copy link
Contributor

@danielnaab danielnaab left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

WORKDIR ./e2e
RUN serve ../apps/spotlight/dist -p 9090 & sleep 5; pnpm playwright test;
RUN serve ../apps/spotlight/dist -p 9090 -L & while ! nc -z localhost 9090; do sleep 1; done; pnpm playwright test;
RUN serve ../packages/design/storybook-static -p 9191 -L & while ! nc -z localhost 9191; do sleep 1; done; pnpm --filter=end-to-end-tests test:storybook --url http://localhost:9191 --config-dir ../packages/design/.storybook/ --browsers firefox chromium
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm good to give this a try... It solves the complaint about not being able to run locally, and gets the job done pretty concisely.

After using awhile, I might prefer to (for local development) pnpm install playwright and run tests natively on my Mac. With the container, running the tests in the multi-stage build portion is interesting and a nice way to keep it repeatable... but running the server during the build means we'd lose the ability to mount a volume on the container at runtime, and do dev server hot-reloading kinds of behavior.

@ethangardner ethangardner merged commit 5ab94b0 into main Jul 12, 2024
4 checks passed
@ethangardner ethangardner deleted the 106-playwright-storybook branch July 12, 2024 21:09
ethangardner added a commit that referenced this pull request Sep 5, 2024
* Run storybook tests with playwright (#249)

* resolve conflicts

* test cleanup

* add post deployment action for testing

* update lockfile to fix failing action

* update action name

* correct config dir path

* add workflow dispatch for testing

* add push action for wip branch

* fix failing test for radio group pattern edit

* update documentation and add script for storybook testing with playwright

* update lockfile

* update path in action

* set endpoint in action

* update workflow endpoint and run mode

* install playwright in gh action

* create a self-contained image that runs through the tests on docker build

* use docker in post-deploy action

* clean up logging for docker build

* simplify end to end tests

* debugging tests

* rename test

* install unfiltered deps in docker--no-verify

* change end-to-end back to imported convention

* test deliberate failure in pipeline

* remove deliberately failing test

* update adr for test strategy

* add drag and drop test

* dry up test code

* add mouse interaction test for drag-and-drop

* fix flaky test

* remove flaky test

* remove commented code

* ignore pnpm cache dir

* use netcat instead of sleep to start server. pare down the copied files in the base image.

* use netcat instead of sleep to start server. pare down the copied files in the base image.

* add script to provide config for docker functions

* update documentation and add provisions for running stories locally

* grammar correction

* Add "user story" issue template (#220)

* Add initial "user story" template

* Update .github/ISSUE_TEMPLATE/story.md

* 239 page drag and drop (#267)

* Add PageMenuEdit component to provide page reordering features.

* Add routing to component to prevent page switching on reorder.

The code now uses the 'useSearchParams' hook from 'react-router-dom' to allow PageMenuEdit component to know current page id. This change also introduces a method to update search parameters when the page order is updated, thereby accommodating page navigation within the user interface.

* formatting

* extract update order to its own function

* leave a todo to address before merge

* move pagemenuedit to formedit directory and do some cleanup

* provide pagemenuedit in design package root

* test page reorder with drag and drop

The tests include a setup step with localstorage.

* move test to a new file and clean up storage object

* add parameter check for nav reorder

* a11y fix for drag button

* convert to draggable list to ul > li markup

* Add presentation prop to DraggableList component

The DraggableList component has been updated to include an optional presentation prop. This allows users to specify if they want the 'compact' or 'default' view for the DraggableList. By default, the presentation prop is set to 'default'.

* Update styles and layout in form components

removed styles that were coming back as undefined. Clean up the mobile view. Some simplification of visual presentation.

* update test based on new list structre for draggable

* add stories for draggable list to showcase new presentation prop

* remove unused classes from markup

* move pagemenuedit component to the pagesetedit file to provide more context of usage

* refactor test with page object mode

* border styles for compact draggablelist

* Add PageMenuEdit component to provide page reordering features.

* Add routing to component to prevent page switching on reorder.

The code now uses the 'useSearchParams' hook from 'react-router-dom' to allow PageMenuEdit component to know current page id. This change also introduces a method to update search parameters when the page order is updated, thereby accommodating page navigation within the user interface.

* formatting

* extract update order to its own function

* leave a todo to address before merge

* move pagemenuedit to formedit directory and do some cleanup

* provide pagemenuedit in design package root

* test page reorder with drag and drop

The tests include a setup step with localstorage.

* move test to a new file and clean up storage object

* add parameter check for nav reorder

* a11y fix for drag button

* convert to draggable list to ul > li markup

* Add presentation prop to DraggableList component

The DraggableList component has been updated to include an optional presentation prop. This allows users to specify if they want the 'compact' or 'default' view for the DraggableList. By default, the presentation prop is set to 'default'.

* Update styles and layout in form components

removed styles that were coming back as undefined. Clean up the mobile view. Some simplification of visual presentation.

* update test based on new list structre for draggable

* add stories for draggable list to showcase new presentation prop

* remove unused classes from markup

* move pagemenuedit component to the pagesetedit file to provide more context of usage

* refactor test with page object mode

* border styles for compact draggablelist

* visual polish for demo

* Remove deprecated dependency and update action versions (#282)

* remove deprecated dependency

* remove coverage report for debugging

* turn off gh actions reporter in test command

* version bump pnpm in test

* update action versions to fix deprecation notice

* Login.gov authentication - new packages infra-core, database, auth (#254)

* login.gov sign-in working, roughly.

* Move login and logout to the header menu.

* For testing, trigger deploy on the login-gov branch

* Initial attempt at wiring login.gov credentials to deployed containers

* Add code to help manage secrets to the command-line interface.

* Create service-like command functions for secrets, and unit tests. Wire up in the command-line controller.

* Improve cli app organization

* Add set-login-gov-keys CLI command, use case, and tests.

* Add ADR for secrets management.

* Clarify README comment

* Fix bad comment

* Compare against correct value in test

* Add missing files

* Add key generation mocks in unit test.

* remove vitest reporter that hasn't been working for quite some time

* Set AUTH_SECRET for the auth library we're using

* Explicitly read the AUTH_SECRET in auto.config.ts, rather than rely on the framework to read.

* Move server secrets retrieval into secrets.ts

* experiment to revert - use hardcoded string for auth secret, in attempt to get tests passing in CI

* To improve readability, use literal strings in login.gov unit test

* Fix typing error in secrets package and organize its adapters into a separate subdirectory.

* Add "delete secret" command (so I can clean up mispelled keys)

* Test deployment to dev

* sanity check on reading an environment variable

* Used consistent AUTH_SECRET in CI tests; randomness is unnecessary

* Remove debug exception

* Refashion secrets packages as infra/core

* Remove unused docassemble cli commands

* Update infra references

* fix infra dir in validate workflow

* Fix infra-cdktf filtering in root package.json

* Log in flow wired up w/o sessions. Also, TODO: track the nonce.

* Add database package with an initial migration using Knex, with Kysely for query building.

* Add initial database package

* Organize database and auth code; trying to track down import problems when the Astro build is integrated at the app level. I'll factor out the auth code first.

* Create @atj/auth, and move logic in there.

* Initial auth flow working, but tests of auth services still TODO. Integration tests in the demo servers are still failing.

* Add tests for getProviderCallback and logOut.

* Add nonce

* Add createSession

* Test for processProviderCallback. Includes fix to reuse sqlite3 connection from knex.

* Add tests for process-session-cookie

* Manage database dependencies so the integrating form service apps may import and run the server's express handler. This includes:
- Create helper in @atj/common to create service objects from a collection of service functions
- Remove module-global imports of @atj/database from the @atj/server, replacing with async imports where appropriate
TODO: The app integration tests for Kansas and DOJ are now passing, but the build bundle fails.

* Instantiate SSMClient in the AWSParameterStoreSecretsVault constructor

* Update dependencies, fix issue with dev server mode not working, rename DatabaseService to DatabaseGateway

* Work to get the app integrations running again, which primarily involved using .js imports, so we are consistent with ESM loading rules.

* Trying to get the dependency graph command to work again. Will revisit later.

* Use git commit hash rather than deployment identifier as the deployment's docker tag

* Upgrade more dependencies (trying to get coverage working, and failing)

* Remove tsup usage from libraries

* Fix infra/cdktf filter in build script

* Use correct base tsconfig in the design package.

* Update design testing libraries

* Punt of getting code coverage working, for now.
Context: the design lib has an unhandled exception when coverage is enabled.

* Comment out davelosert/[email protected]

* In the Terraform PR plan comment, use the target branch of the PR rather than a hard-coded "staging" value

* Update e2e docker base image to newer playwright version

* Upgrade Storybook to 8.2. 8.0 caused some problems on one dev machine, so hoping the issues are resolved now.

* Fix missing .js extensions on db adapters

* Upgrade @storybook/test-runner to 0.19.1 (fixes build break)

* Wire client secret from app to login.gov provider in deployed apps.

* Remove passage of private key to auth - it shouldn't be necessary with PKCE. Revisit if we switch to the JWT method.

* Make clientSecret undefined rather than an empty string

* Remove clientSecret from auth test

* Remove clientSecret from LoginGovOptions

* Add extra debug logging for failed authorization code checks

* Remove deploy trigger from login-gov feature branch

* Remove unnecessary login.gov bash script (superceded by CLI commands)

* Remove old comment

* Add comment explaining `createService`

* Remove lucia from web server package, in lieu of the auth package.

* Added the ability to move question (#274)

* Part 1 of moving question to another page

* Part 2 of moving question to another page

* Added the ability to move question to another page

* Added the ability to move question to another page

* fixing get by role selector to remove ambiguity

* removed logging

* Removed some console logs

* Fixed some bugs and accessibility issues

This commit includes a fix for the bug when moving questions back and forth and also a bug with the list of page options. This update also addresses some accessibility issues.

* Fixed some bugs and accessibility issues part 2

* Addressed some bugs and feedback reviews

In this commit I fixed a couple of bugs and made updates per some reviews in the pull request.

* Addressed some bugs and feedback reviews Part 2

* Updated the builder test to account for source page

* Made updates per the reviews in my PR

* Made updates per the reviews in my PR Part 2

* Ensured that page types can't be moved

* A minor update to the store.ts

* A minor update to the store.ts Part 2

---------

Co-authored-by: ethangardner <[email protected]>

* Copy patterns and fieldsets (#295)

* Added the ability to copy patterns and fieldsets

* Updated the builder test

* Updated package.json

* Made updates per PR review request

* Fixes for the merge with main branch

---------

Co-authored-by: Daniel Naab <[email protected]>

* Add Postgres database support (#293)

* Rename database contexts to their method (in memory, filesystem) rather than dev vs test

* Add Postgres Testcontainer, implemented via a describeDatabase() test suite factory that will run tests via both Sqlite and Postgres

* Wire describeDatabase up to each db gateway test, and create db helper module for dealing with date differences between sqlite (INTEGER) and Postgres (TIMESTAMP).

* Add ability to share Postgres container across all the database package tests.

* Get Postgres and its testability wired up to the DOJ demo app. The entrypoint still needs cloud.gov environment settings.

* Add Postgres RDS to cloud.gov environment

* temp: run the deploy on this branch for testing

* Postgres Terraform config + app wiring

* Fix aws-rds VCAP_SERVICES lookup path

* on cloud, use ssl with postgres

* Ignore self-signed cert errors with rejectUnauthorized. Revisit by seeing if we can install the RDS certs on the container

* Hack in Postgres Lucia adapter

* To satisfy Lucia, use TEXT for session and user ID types. We will want to move these queries into the database package so we can get test coverage over them.

* Add allowlists for demo apps

* Remove deploy on feature branch

* Form service backend implemented (#297)

* Refactor form service to use createService utility

* Use injected db gateway in form service functions, without changes to the existing localStorage approach.

* Add form db gateway functions

* Wire form db gateways to application.

* Wire form service to frontend via a client-side proxy and API routes

* Fix a couple build issues

* Move db gateway functions into the service that consumes it.
There are failing tests, due to describe blocks defined in the shared `describeDatabase` helper not getting registered with Vitest. Pushing up to CI to run test there, and rule out a local config issue.

* Get describeDatabase working in the auth and forms packages; mark integration tests of demo apps as "expect failure" due to dependency issues that need to be worked out.

* Temp: deploy on this branch

* Update lockfile

* Always use ssl with demo apps

* Trying to isolate db dependencies; get CLI working with NodeNext modules

* Tweak imports for NodeNext

* Testing

* Builds working with refactored database structure and module settings.
Includes an upgrade of Turborepo and new clean tasks.

* Remove pnpm version in Github Actions script, in lieu of the packageManager key in package.json

* Switch design package to NodeNext module resolution

* Add tests for all the forms services (todo: submitForm).
This necessitated giving the forms library the Rollup treatment, and moving some dependencies around to avoid intermixing nodejs deps with the design lib.

* use createTestFormServiceContext in submitForm test

* Fix build break in spotlight app

* Use NodeNext in the base tsconfig.json

* docassemble updated for nodenext

* Wire existing data flow to submitForm. to be updated for server environment

* Do one more test deploy

* Remove test deploy

* Added homepage content to splash page (#298)

* Updated the splash page content

* Updated the hover color for the video button

* Added a specific class to splash page modal

* Made additional updates per review comments in PR

* Added defer to script and other spacing updates

* Added lazy loading to infographic

* Wrapped the script in an IIFE

* Update a few import statements to new style

* echo environment variables for cg pages debugging

* Add debug logging

* With the switch to nodenext modules, use import.meta.env instead of process.env in astro config file

* more debugging

* debugging

* debugging

* try turbo env

* debugging

* remove debugging

---------

Co-authored-by: Daniel Naab <[email protected]>

* Update DOJ allowlist (#303)

---------

Co-authored-by: Ethan Gardner <[email protected]>
Co-authored-by: Daniel Naab <[email protected]>
Co-authored-by: Natasha Pierre-Louis <[email protected]>
Co-authored-by: ethangardner <[email protected]>
Co-authored-by: Daniel Naab <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Enhance test strategy - use Playwright to run storybook tests and perform end-to-end tests in CI
2 participants