brut 0.10.0 → 0.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/CHANGELOG.md +14 -0
- data/Gemfile.lock +15 -15
- data/assets/YouTubeThumb.pxd +0 -0
- data/bin/new-version +3 -3
- data/brut-css/package-lock.json +2 -2
- data/brut-css/package.json +1 -1
- data/brut-js/package-lock.json +2 -2
- data/brut-js/package.json +1 -1
- data/brutrb.com/getting-started.md +3 -0
- data/brutrb.com/images/tutorial/02-confirmation-dialog-browser-element-styled.png +0 -0
- data/brutrb.com/images/tutorial/02-confirmation-dialog-browser-element.png +0 -0
- data/brutrb.com/images/tutorial/02-confirmation-dialog-browser.png +0 -0
- data/brutrb.com/images/tutorial/02-confirmation-flow.graffle +0 -0
- data/brutrb.com/images/tutorial/02-confirmation-flow.png +0 -0
- data/brutrb.com/instrumentation.md +142 -3
- data/brutrb.com/tutorial.md +29 -1627
- data/brutrb.com/tutorials/01-intro.md +1630 -0
- data/brutrb.com/tutorials/02-dialog.md +569 -0
- data/docs/404.html +2 -2
- data/docs/adrs.html +4 -4
- data/docs/ai.html +4 -4
- data/docs/api/Brut/BackEnd/SeedData.html +1 -1
- data/docs/api/Brut/BackEnd/Sidekiq/Middlewares/Server/FlushSpans.html +1 -1
- data/docs/api/Brut/BackEnd/Sidekiq/Middlewares/Server.html +1 -1
- data/docs/api/Brut/BackEnd/Sidekiq/Middlewares.html +1 -1
- data/docs/api/Brut/BackEnd/Sidekiq.html +1 -1
- data/docs/api/Brut/BackEnd/Validators/FormValidator.html +1 -1
- data/docs/api/Brut/BackEnd/Validators.html +1 -1
- data/docs/api/Brut/BackEnd.html +1 -1
- data/docs/api/Brut/CLI/App.html +1 -1
- data/docs/api/Brut/CLI/AppRunner.html +1 -1
- data/docs/api/Brut/CLI/Apps/BuildAssets/All.html +1 -1
- data/docs/api/Brut/CLI/Apps/BuildAssets/CSS.html +1 -1
- data/docs/api/Brut/CLI/Apps/BuildAssets/Images.html +1 -1
- data/docs/api/Brut/CLI/Apps/BuildAssets/JS.html +1 -1
- data/docs/api/Brut/CLI/Apps/BuildAssets.html +1 -1
- data/docs/api/Brut/CLI/Apps/DB/Create.html +1 -1
- data/docs/api/Brut/CLI/Apps/DB/Drop.html +1 -1
- data/docs/api/Brut/CLI/Apps/DB/Migrate.html +1 -1
- data/docs/api/Brut/CLI/Apps/DB/NewMigration.html +1 -1
- data/docs/api/Brut/CLI/Apps/DB/Rebuild.html +1 -1
- data/docs/api/Brut/CLI/Apps/DB/Seed.html +1 -1
- data/docs/api/Brut/CLI/Apps/DB/Status.html +1 -1
- data/docs/api/Brut/CLI/Apps/DB.html +1 -1
- data/docs/api/Brut/CLI/Apps/DeployBase/GitChecks.html +1 -1
- data/docs/api/Brut/CLI/Apps/DeployBase.html +1 -1
- data/docs/api/Brut/CLI/Apps/HerokuContainerBasedDeploy/Deploy.html +1 -1
- data/docs/api/Brut/CLI/Apps/HerokuContainerBasedDeploy.html +1 -1
- data/docs/api/Brut/CLI/Apps/Scaffold/Action/Route.html +1 -1
- data/docs/api/Brut/CLI/Apps/Scaffold/Action.html +1 -1
- data/docs/api/Brut/CLI/Apps/Scaffold/Component.html +1 -1
- data/docs/api/Brut/CLI/Apps/Scaffold/CustomElementTest.html +1 -1
- data/docs/api/Brut/CLI/Apps/Scaffold/DbModel.html +1 -1
- data/docs/api/Brut/CLI/Apps/Scaffold/E2ETest.html +1 -1
- data/docs/api/Brut/CLI/Apps/Scaffold/Form.html +1 -1
- data/docs/api/Brut/CLI/Apps/Scaffold/Page/Route.html +1 -1
- data/docs/api/Brut/CLI/Apps/Scaffold/Page.html +1 -1
- data/docs/api/Brut/CLI/Apps/Scaffold/RoutesEditor.html +1 -1
- data/docs/api/Brut/CLI/Apps/Scaffold/Test.html +1 -1
- data/docs/api/Brut/CLI/Apps/Scaffold.html +1 -1
- data/docs/api/Brut/CLI/Apps/Test/Audit.html +1 -1
- data/docs/api/Brut/CLI/Apps/Test/E2e.html +1 -1
- data/docs/api/Brut/CLI/Apps/Test/JS.html +1 -1
- data/docs/api/Brut/CLI/Apps/Test/Run.html +1 -1
- data/docs/api/Brut/CLI/Apps/Test.html +1 -1
- data/docs/api/Brut/CLI/Apps.html +1 -1
- data/docs/api/Brut/CLI/Command.html +1 -1
- data/docs/api/Brut/CLI/Error.html +1 -1
- data/docs/api/Brut/CLI/ExecutionResults/Result.html +1 -1
- data/docs/api/Brut/CLI/ExecutionResults.html +1 -1
- data/docs/api/Brut/CLI/Executor.html +1 -1
- data/docs/api/Brut/CLI/InvalidOption.html +1 -1
- data/docs/api/Brut/CLI/Options.html +1 -1
- data/docs/api/Brut/CLI/Output.html +1 -1
- data/docs/api/Brut/CLI/SystemExecError.html +1 -1
- data/docs/api/Brut/CLI.html +1 -1
- data/docs/api/Brut/FactoryBot.html +1 -1
- data/docs/api/Brut/Framework/App.html +1 -1
- data/docs/api/Brut/Framework/Config.html +1 -1
- data/docs/api/Brut/Framework/Container.html +1 -1
- data/docs/api/Brut/Framework/Error.html +1 -1
- data/docs/api/Brut/Framework/Errors/AbstractMethod.html +1 -1
- data/docs/api/Brut/Framework/Errors/Bug.html +1 -1
- data/docs/api/Brut/Framework/Errors/MissingConfiguration.html +1 -1
- data/docs/api/Brut/Framework/Errors/MissingParameter.html +1 -1
- data/docs/api/Brut/Framework/Errors/NoClassForPath.html +1 -1
- data/docs/api/Brut/Framework/Errors/NotFound.html +1 -1
- data/docs/api/Brut/Framework/Errors/NotImplemented.html +1 -1
- data/docs/api/Brut/Framework/Errors.html +1 -1
- data/docs/api/Brut/Framework/FussyTypeEnforcement.html +1 -1
- data/docs/api/Brut/Framework/MCP.html +1 -1
- data/docs/api/Brut/Framework/ProjectEnvironment.html +1 -1
- data/docs/api/Brut/Framework.html +1 -1
- data/docs/api/Brut/FrontEnd/AssetPathResolver.html +1 -1
- data/docs/api/Brut/FrontEnd/Component/Helpers.html +1 -1
- data/docs/api/Brut/FrontEnd/Component.html +1 -1
- data/docs/api/Brut/FrontEnd/Components/ConstraintViolations.html +48 -27
- data/docs/api/Brut/FrontEnd/Components/FormTag.html +1 -1
- data/docs/api/Brut/FrontEnd/Components/I18nTranslations.html +1 -1
- data/docs/api/Brut/FrontEnd/Components/Input.html +1 -1
- data/docs/api/Brut/FrontEnd/Components/Inputs/CsrfToken.html +1 -1
- data/docs/api/Brut/FrontEnd/Components/Inputs/InputTag.html +1 -1
- data/docs/api/Brut/FrontEnd/Components/Inputs/RadioButton.html +1 -1
- data/docs/api/Brut/FrontEnd/Components/Inputs/SelectTagWithOptions.html +1 -1
- data/docs/api/Brut/FrontEnd/Components/Inputs/TextareaTag.html +1 -1
- data/docs/api/Brut/FrontEnd/Components/Inputs.html +1 -1
- data/docs/api/Brut/FrontEnd/Components/LocaleDetection.html +1 -1
- data/docs/api/Brut/FrontEnd/Components/PageIdentifier.html +1 -1
- data/docs/api/Brut/FrontEnd/Components/TimeTag.html +1 -1
- data/docs/api/Brut/FrontEnd/Components/Traceparent.html +1 -1
- data/docs/api/Brut/FrontEnd/Components.html +1 -1
- data/docs/api/Brut/FrontEnd/CsrfProtector.html +1 -1
- data/docs/api/Brut/FrontEnd/Download.html +1 -1
- data/docs/api/Brut/FrontEnd/Flash.html +1 -1
- data/docs/api/Brut/FrontEnd/Form.html +1 -1
- data/docs/api/Brut/FrontEnd/Forms/ConstraintViolation.html +1 -1
- data/docs/api/Brut/FrontEnd/Forms/Input/Color.html +1 -1
- data/docs/api/Brut/FrontEnd/Forms/Input/TimeOfDay.html +1 -1
- data/docs/api/Brut/FrontEnd/Forms/Input.html +1 -1
- data/docs/api/Brut/FrontEnd/Forms/InputDeclarations.html +1 -1
- data/docs/api/Brut/FrontEnd/Forms/InputDefinition.html +1 -1
- data/docs/api/Brut/FrontEnd/Forms/RadioButtonGroupInput.html +1 -1
- data/docs/api/Brut/FrontEnd/Forms/RadioButtonGroupInputDefinition.html +1 -1
- data/docs/api/Brut/FrontEnd/Forms/SelectInput.html +1 -1
- data/docs/api/Brut/FrontEnd/Forms/SelectInputDefinition.html +1 -1
- data/docs/api/Brut/FrontEnd/Forms/ValidityState.html +1 -1
- data/docs/api/Brut/FrontEnd/Forms.html +1 -1
- data/docs/api/Brut/FrontEnd/GenericResponse.html +1 -1
- data/docs/api/Brut/FrontEnd/Handler.html +1 -1
- data/docs/api/Brut/FrontEnd/Handlers/CspReportingHandler.html +1 -1
- data/docs/api/Brut/FrontEnd/Handlers/InstrumentationHandler/TraceParent.html +1 -1
- data/docs/api/Brut/FrontEnd/Handlers/InstrumentationHandler.html +1 -1
- data/docs/api/Brut/FrontEnd/Handlers/LocaleDetectionHandler.html +1 -1
- data/docs/api/Brut/FrontEnd/Handlers/MissingHandler/Form.html +1 -1
- data/docs/api/Brut/FrontEnd/Handlers/MissingHandler.html +1 -1
- data/docs/api/Brut/FrontEnd/Handlers.html +1 -1
- data/docs/api/Brut/FrontEnd/HandlingResults.html +1 -1
- data/docs/api/Brut/FrontEnd/HttpMethod.html +1 -1
- data/docs/api/Brut/FrontEnd/HttpStatus.html +1 -1
- data/docs/api/Brut/FrontEnd/InlineSvgLocator.html +1 -1
- data/docs/api/Brut/FrontEnd/Layout.html +1 -1
- data/docs/api/Brut/FrontEnd/Middleware.html +1 -1
- data/docs/api/Brut/FrontEnd/Middlewares/AnnotateBrutOwnedPaths.html +1 -1
- data/docs/api/Brut/FrontEnd/Middlewares/Favicon.html +1 -1
- data/docs/api/Brut/FrontEnd/Middlewares/OpenTelemetrySpan.html +1 -1
- data/docs/api/Brut/FrontEnd/Middlewares/ReloadApp.html +1 -1
- data/docs/api/Brut/FrontEnd/Middlewares.html +1 -1
- data/docs/api/Brut/FrontEnd/Page.html +1 -1
- data/docs/api/Brut/FrontEnd/Pages/MissingPage.html +1 -1
- data/docs/api/Brut/FrontEnd/Pages.html +1 -1
- data/docs/api/Brut/FrontEnd/RequestContext.html +1 -1
- data/docs/api/Brut/FrontEnd/RouteHook.html +1 -1
- data/docs/api/Brut/FrontEnd/RouteHooks/AgeFlash.html +1 -1
- data/docs/api/Brut/FrontEnd/RouteHooks/CSPNoInlineScripts.html +1 -1
- data/docs/api/Brut/FrontEnd/RouteHooks/CSPNoInlineStylesOrScripts/ReportOnly.html +1 -1
- data/docs/api/Brut/FrontEnd/RouteHooks/CSPNoInlineStylesOrScripts.html +1 -1
- data/docs/api/Brut/FrontEnd/RouteHooks/LocaleDetection.html +1 -1
- data/docs/api/Brut/FrontEnd/RouteHooks/SetupRequestContext.html +1 -1
- data/docs/api/Brut/FrontEnd/RouteHooks.html +1 -1
- data/docs/api/Brut/FrontEnd/Routing/FormHandlerRoute.html +1 -1
- data/docs/api/Brut/FrontEnd/Routing/FormRoute.html +1 -1
- data/docs/api/Brut/FrontEnd/Routing/MissingForm.html +1 -1
- data/docs/api/Brut/FrontEnd/Routing/MissingHandler.html +1 -1
- data/docs/api/Brut/FrontEnd/Routing/MissingPage.html +1 -1
- data/docs/api/Brut/FrontEnd/Routing/MissingPath.html +1 -1
- data/docs/api/Brut/FrontEnd/Routing/PageRoute.html +1 -1
- data/docs/api/Brut/FrontEnd/Routing/Route.html +1 -1
- data/docs/api/Brut/FrontEnd/Routing.html +1 -1
- data/docs/api/Brut/FrontEnd/Session.html +1 -1
- data/docs/api/Brut/FrontEnd.html +1 -1
- data/docs/api/Brut/I18n/BaseMethods.html +1 -1
- data/docs/api/Brut/I18n/ForBackEnd.html +1 -1
- data/docs/api/Brut/I18n/ForCLI.html +1 -1
- data/docs/api/Brut/I18n/ForHTML.html +1 -1
- data/docs/api/Brut/I18n/HTTPAcceptLanguage/AlwaysEnglish.html +1 -1
- data/docs/api/Brut/I18n/HTTPAcceptLanguage.html +1 -1
- data/docs/api/Brut/I18n.html +1 -1
- data/docs/api/Brut/Instrumentation/LoggerSpanExporter.html +1 -1
- data/docs/api/Brut/Instrumentation/OpenTelemetry/NormalizedAttributes.html +1 -1
- data/docs/api/Brut/Instrumentation/OpenTelemetry/Span.html +1 -1
- data/docs/api/Brut/Instrumentation/OpenTelemetry.html +1 -1
- data/docs/api/Brut/Instrumentation.html +1 -1
- data/docs/api/Brut/RubocopConfig.html +1 -1
- data/docs/api/Brut/SinatraHelpers/ClassMethods.html +1 -1
- data/docs/api/Brut/SinatraHelpers.html +1 -1
- data/docs/api/Brut/SpecSupport/ClockSupport.html +1 -1
- data/docs/api/Brut/SpecSupport/ComponentSupport.html +1 -1
- data/docs/api/Brut/SpecSupport/E2ETestServer.html +1 -1
- data/docs/api/Brut/SpecSupport/E2eSupport.html +1 -1
- data/docs/api/Brut/SpecSupport/EnhancedNode.html +1 -1
- data/docs/api/Brut/SpecSupport/FlashSupport.html +1 -1
- data/docs/api/Brut/SpecSupport/GeneralSupport/ClassMethods.html +1 -1
- data/docs/api/Brut/SpecSupport/GeneralSupport.html +1 -1
- data/docs/api/Brut/SpecSupport/HandlerSupport.html +1 -1
- data/docs/api/Brut/SpecSupport/Matchers/BeABug.html +1 -1
- data/docs/api/Brut/SpecSupport/Matchers/BePageFor.html +1 -1
- data/docs/api/Brut/SpecSupport/Matchers/BeRoutingFor.html +1 -1
- data/docs/api/Brut/SpecSupport/Matchers/HaveConstraintViolation.html +1 -1
- data/docs/api/Brut/SpecSupport/Matchers/HaveGenerated.html +1 -1
- data/docs/api/Brut/SpecSupport/Matchers/HaveHTMLAttribute.html +1 -1
- data/docs/api/Brut/SpecSupport/Matchers/HaveI18nString.html +1 -1
- data/docs/api/Brut/SpecSupport/Matchers/HaveLinkTo.html +1 -1
- data/docs/api/Brut/SpecSupport/Matchers/HaveRedirectedTo.html +1 -1
- data/docs/api/Brut/SpecSupport/Matchers/HaveReturnedHttpStatus.html +1 -1
- data/docs/api/Brut/SpecSupport/Matchers/HaveReturnedRackResponse.html +1 -1
- data/docs/api/Brut/SpecSupport/Matchers.html +1 -1
- data/docs/api/Brut/SpecSupport/RSpecSetup/OptionalSidekiqSupport.html +1 -1
- data/docs/api/Brut/SpecSupport/RSpecSetup.html +1 -1
- data/docs/api/Brut/SpecSupport/SessionSupport.html +1 -1
- data/docs/api/Brut/SpecSupport.html +1 -1
- data/docs/api/Brut.html +1 -1
- data/docs/api/Clock.html +1 -1
- data/docs/api/ModuleName.html +1 -1
- data/docs/api/RichString.html +1 -1
- data/docs/api/SemanticLogger/Appender/Async.html +1 -1
- data/docs/api/Sequel/Extensions/BrutInstrumentation.html +1 -1
- data/docs/api/Sequel/Extensions/BrutMigrations.html +1 -1
- data/docs/api/Sequel/Extensions.html +1 -1
- data/docs/api/Sequel/Plugins/CreatedAt/InstanceMethods.html +1 -1
- data/docs/api/Sequel/Plugins/CreatedAt.html +1 -1
- data/docs/api/Sequel/Plugins/ExternalId/ClassMethods.html +1 -1
- data/docs/api/Sequel/Plugins/ExternalId/InstanceMethods.html +1 -1
- data/docs/api/Sequel/Plugins/ExternalId.html +1 -1
- data/docs/api/Sequel/Plugins/FindBang/ClassMethods.html +1 -1
- data/docs/api/Sequel/Plugins/FindBang.html +1 -1
- data/docs/api/Sequel/Plugins.html +1 -1
- data/docs/api/Sequel.html +1 -1
- data/docs/api/_index.html +1 -1
- data/docs/api/file.README.html +1 -1
- data/docs/api/index.html +1 -1
- data/docs/api/top-level-namespace.html +1 -1
- data/docs/assets/02-confirmation-dialog-browser-element-styled.3NEGM20-.png +0 -0
- data/docs/assets/02-confirmation-dialog-browser-element.DPsf0xUW.png +0 -0
- data/docs/assets/02-confirmation-dialog-browser.DH8ALFO4.png +0 -0
- data/docs/assets/02-confirmation-flow.D9gZ0S5U.png +0 -0
- data/docs/assets/{app.vjGWMSnJ.js → app.0-aKXKdt.js} +1 -1
- data/docs/assets/chunks/@localSearchIndexroot.DPhqaz1b.js +1 -0
- data/docs/assets/chunks/{VPLocalSearchBox.C-ymMW2k.js → VPLocalSearchBox.CW-UBkNA.js} +1 -1
- data/docs/assets/chunks/{theme.pJUosGlI.js → theme.a6feKWJO.js} +2 -2
- data/docs/assets/{components.md.B543a3Lm.js → components.md.BzVRwegp.js} +3 -3
- data/docs/assets/{configuration.md.-foE_iVv.js → configuration.md.eM5wFVi5.js} +1 -1
- data/docs/assets/{form-constraints.md.DK5adCgM.js → form-constraints.md.KTv5cdR4.js} +6 -6
- data/docs/assets/{forms.md.D5-2rgHh.js → forms.md.B3BHvCV3.js} +1 -1
- data/docs/assets/{getting-started.md.Cd4XSZb_.js → getting-started.md.BgR0ZHsl.js} +6 -3
- data/docs/assets/{getting-started.md.Cd4XSZb_.lean.js → getting-started.md.BgR0ZHsl.lean.js} +1 -1
- data/docs/assets/recipes_form-errors.md.Bv5RCKqH.js +66 -0
- data/docs/assets/recipes_form-errors.md.Bv5RCKqH.lean.js +1 -0
- data/docs/assets/tutorial.md.BM40jnoq.js +27 -0
- data/docs/assets/tutorial.md.BM40jnoq.lean.js +1 -0
- data/docs/assets/{tutorial.md.C4zR5XPG.js → tutorials_01-intro.md.BXvYWcO9.js} +5 -25
- data/docs/assets/tutorials_01-intro.md.BXvYWcO9.lean.js +1 -0
- data/docs/assets/tutorials_02-dialog.md.CIeg8R--.js +274 -0
- data/docs/assets/tutorials_02-dialog.md.CIeg8R--.lean.js +1 -0
- data/docs/assets.html +4 -4
- data/docs/brut-js/api/AjaxSubmit.html +1 -1
- data/docs/brut-js/api/AjaxSubmit.js.html +1 -1
- data/docs/brut-js/api/Autosubmit.html +1 -1
- data/docs/brut-js/api/Autosubmit.js.html +1 -1
- data/docs/brut-js/api/BaseCustomElement.html +1 -1
- data/docs/brut-js/api/BaseCustomElement.js.html +1 -1
- data/docs/brut-js/api/BrutCustomElements.html +1 -1
- data/docs/brut-js/api/BufferedLogger.html +1 -1
- data/docs/brut-js/api/ConfirmSubmit.html +1 -1
- data/docs/brut-js/api/ConfirmSubmit.js.html +1 -1
- data/docs/brut-js/api/ConfirmationDialog.html +1 -1
- data/docs/brut-js/api/ConfirmationDialog.js.html +1 -1
- data/docs/brut-js/api/ConstraintViolationMessage.html +55 -5
- data/docs/brut-js/api/ConstraintViolationMessage.js.html +18 -3
- data/docs/brut-js/api/ConstraintViolationMessages.html +1 -1
- data/docs/brut-js/api/ConstraintViolationMessages.js.html +1 -1
- data/docs/brut-js/api/CopyToClipboard.html +1 -1
- data/docs/brut-js/api/CopyToClipboard.js.html +1 -1
- data/docs/brut-js/api/Form.html +7 -10
- data/docs/brut-js/api/Form.js.html +20 -24
- data/docs/brut-js/api/I18nTranslation.html +1 -1
- data/docs/brut-js/api/I18nTranslation.js.html +1 -1
- data/docs/brut-js/api/LocaleDetection.html +1 -1
- data/docs/brut-js/api/LocaleDetection.js.html +1 -1
- data/docs/brut-js/api/Logger.html +1 -1
- data/docs/brut-js/api/Logger.js.html +1 -1
- data/docs/brut-js/api/Message.html +1 -1
- data/docs/brut-js/api/Message.js.html +1 -1
- data/docs/brut-js/api/PrefixedLogger.html +1 -1
- data/docs/brut-js/api/RichString.html +1 -1
- data/docs/brut-js/api/RichString.js.html +1 -1
- data/docs/brut-js/api/Tabs.html +1 -1
- data/docs/brut-js/api/Tabs.js.html +1 -1
- data/docs/brut-js/api/Tracing.html +1 -1
- data/docs/brut-js/api/Tracing.js.html +1 -1
- data/docs/brut-js/api/external-CustomElementRegistry.html +1 -1
- data/docs/brut-js/api/external-Performance.html +1 -1
- data/docs/brut-js/api/external-Promise.html +1 -1
- data/docs/brut-js/api/external-ValidityState.html +1 -1
- data/docs/brut-js/api/external-Window.html +1 -1
- data/docs/brut-js/api/external-fetch.html +1 -1
- data/docs/brut-js/api/global.html +1 -1
- data/docs/brut-js/api/index.html +1 -1
- data/docs/brut-js/api/index.js.html +1 -1
- data/docs/brut-js/api/module-testing.html +1 -1
- data/docs/brut-js/api/testing.AssetMetadata.html +1 -1
- data/docs/brut-js/api/testing.AssetMetadataLoader.html +1 -1
- data/docs/brut-js/api/testing.CustomElementTest.html +1 -1
- data/docs/brut-js/api/testing.DOMCreator.html +1 -1
- data/docs/brut-js/api/testing_AssetMetadata.js.html +1 -1
- data/docs/brut-js/api/testing_AssetMetadataLoader.js.html +1 -1
- data/docs/brut-js/api/testing_CustomElementTest.js.html +1 -1
- data/docs/brut-js/api/testing_DOMCreator.js.html +1 -1
- data/docs/brut-js/api/testing_index.js.html +1 -1
- data/docs/brut-js.html +4 -4
- data/docs/business-logic.html +4 -4
- data/docs/cli.html +4 -4
- data/docs/components.html +8 -8
- data/docs/configuration.html +5 -5
- data/docs/css.html +4 -4
- data/docs/custom-element-tests.html +4 -4
- data/docs/database-access.html +4 -4
- data/docs/database-schema.html +4 -4
- data/docs/deployment.html +4 -4
- data/docs/dev-environment.html +4 -4
- data/docs/dir-structure.html +4 -4
- data/docs/doc-conventions.html +4 -4
- data/docs/end-to-end-tests.html +4 -4
- data/docs/features.html +4 -4
- data/docs/flash-and-session.html +4 -4
- data/docs/form-constraints.html +11 -11
- data/docs/forms.html +6 -6
- data/docs/getting-started.html +10 -7
- data/docs/handlers.html +4 -4
- data/docs/hashmap.json +1 -1
- data/docs/hooks.html +4 -4
- data/docs/i18n.html +4 -4
- data/docs/index.html +3 -3
- data/docs/instrumentation.html +4 -4
- data/docs/javascript.html +4 -4
- data/docs/jobs.html +4 -4
- data/docs/keyword-injection.html +4 -4
- data/docs/layouts.html +4 -4
- data/docs/lsp.html +4 -4
- data/docs/markdown-examples.html +4 -4
- data/docs/middleware.html +4 -4
- data/docs/overview.html +4 -4
- data/docs/pages.html +4 -4
- data/docs/recipes/alternate-layouts.html +4 -4
- data/docs/recipes/authentication.html +5 -5
- data/docs/recipes/blank-layouts.html +4 -4
- data/docs/recipes/custom-flash.html +4 -4
- data/docs/recipes/form-errors.html +94 -0
- data/docs/recipes/indexed-forms.html +4 -4
- data/docs/recipes/migrations.html +5 -5
- data/docs/recipes/text-field-component.html +4 -4
- data/docs/roadmap.html +4 -4
- data/docs/routes.html +4 -4
- data/docs/security.html +4 -4
- data/docs/seed-data.html +4 -4
- data/docs/space-time-continuum.html +4 -4
- data/docs/tutorial.html +12 -713
- data/docs/tutorials/01-intro.html +736 -0
- data/docs/tutorials/02-dialog.html +302 -0
- data/docs/unit-tests.html +4 -4
- data/docs/why.html +4 -4
- data/lib/brut/instrumentation/methods.rb +153 -0
- data/lib/brut/instrumentation/open_telemetry.rb +1 -0
- data/lib/brut/instrumentation.rb +1 -0
- data/lib/brut/version.rb +1 -1
- data/mkbrut/Gemfile.lock +1 -1
- data/mkbrut/bin/publish +1 -1
- data/mkbrut/lib/mkbrut/version.rb +1 -1
- data/specs/brut/instrumentation/methods.spec.rb +399 -0
- metadata +39 -17
- data/docs/assets/chunks/@localSearchIndexroot.Dn1xGMv_.js +0 -1
- data/docs/assets/tutorial.md.C4zR5XPG.lean.js +0 -1
- /data/docs/assets/{components.md.B543a3Lm.lean.js → components.md.BzVRwegp.lean.js} +0 -0
- /data/docs/assets/{configuration.md.-foE_iVv.lean.js → configuration.md.eM5wFVi5.lean.js} +0 -0
- /data/docs/assets/{form-constraints.md.DK5adCgM.lean.js → form-constraints.md.KTv5cdR4.lean.js} +0 -0
- /data/docs/assets/{forms.md.D5-2rgHh.lean.js → forms.md.B3BHvCV3.lean.js} +0 -0
|
@@ -0,0 +1,274 @@
|
|
|
1
|
+
import{_ as i,c as a,o as n,ag as e}from"./chunks/framework.1L-BeKqY.js";const t="/assets/02-confirmation-flow.D9gZ0S5U.png",l="/assets/02-confirmation-dialog-browser.DH8ALFO4.png",p="/assets/02-confirmation-dialog-browser-element.DPsf0xUW.png",h="/assets/02-confirmation-dialog-browser-element-styled.3NEGM20-.png",u=JSON.parse('{"title":"Tutorial: Styled Confirmation Dialog","description":"","frontmatter":{},"headers":[],"relativePath":"tutorials/02-dialog.md","filePath":"tutorials/02-dialog.md"}'),r={name:"tutorials/02-dialog.md"};function o(k,s,d,c,g,E){return n(),a("div",null,s[0]||(s[0]=[e(`<h1 id="tutorial-styled-confirmation-dialog" tabindex="-1">Tutorial: Styled Confirmation Dialog <a class="header-anchor" href="#tutorial-styled-confirmation-dialog" aria-label="Permalink to "Tutorial: Styled Confirmation Dialog""></a></h1><p>For actions that can't be undone, it's customary to confirm with the visitor that they are sure they want to take that action. Brut provides support for this. You can use <code>window.confirm</code> or create your own styled <code><dialog></code> that Brut will use. Both approaches don't require writing any JavaScript yourself.</p><p><a href="https://video.hardlimit.com/w/4y8Pjd8VVPDK372mozCUdj" target="_blank" rel="noreferrer">You can watching this as a screencast instead</a>.</p><h2 id="set-up" tabindex="-1">Set Up <a class="header-anchor" href="#set-up" aria-label="Permalink to "Set Up""></a></h2><p>If you haven't followed the <a href="/tutorials/01-intro.html">initial tutorial</a>, you'll need to pull down the blog app so you have a place to work.</p><ol><li><p><a href="https://docker.com" target="_blank" rel="noreferrer">Install Docker</a></p><div class="tip custom-block github-alert"><p class="custom-block-title">TIP</p><p>If you are on Windows, we <em>highly</em> recommend you use the Windows Subystem for Linux (WSL2), as this makes Brut, web developement, and, honestly, your entire life as you know it, far easier than trying to get things working natively in Windows.</p></div></li><li><p>Clone the <code>blog-demo</code> repo (<strong>don't use Codespaces as it is not supported</strong>):</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-sAqA3" id="tab-3IT36g5" checked><label data-title="Terminal" for="tab-3IT36g5">Terminal</label><input type="radio" name="group-sAqA3" id="tab-ae4ZUeD"><label data-title="GitHub CLI" for="tab-ae4ZUeD">GitHub CLI</label></div><div class="blocks"><div class="language-bash vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">git</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> clone</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> git@github.com:thirdtank/blog-demo.git</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">gh</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> repo</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> clone</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> thirdtank/blog-demo</span></span></code></pre></div></div></div></li><li><p><code>cd</code> to what you just cloned.</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">cd</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> blog-demo</span></span></code></pre></div></li><li><p>Create a branch named <code>confirmation-dialog</code> off of the <code>02-confirmation-dialog/start</code> branch:</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">git</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> checkout</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -b</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> confirmation-dialog</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 02-confirmation-dialog/start</span></span></code></pre></div></li><li><p>Build your development image.</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">dx/build</span></span></code></pre></div></li><li><p>Start the environment, which will pull down Postgres and otel-desktop-viewer</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">dx/start</span></span></code></pre></div></li><li><p>In another terminal window, "log in" to your dev environment (note that you can use your editor on your computer to edit code)</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">dx/exec</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> bash</span></span></code></pre></div></li><li><p>Set up and run tests to make sure things are working before you start making changes. Note, this is <strong>inside the container</strong>, not directly on your computer.</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">bin/setup</span></span>
|
|
2
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">bin/ci</span></span></code></pre></div></li></ol><h2 id="what-we-re-doing" tabindex="-1">What We're Doing <a class="header-anchor" href="#what-we-re-doing" aria-label="Permalink to "What We're Doing""></a></h2><p>When writing a blog post, if the title and content satisfy all constraints, the post is saved and shown on the home page. Because this can't currently be undone, we want the user to confirm the posting, just to avoid any accidents.</p><p>Initially, we will use <code>window.confirm</code> to do this. After that, we'll create a nicely styled dialog to do the confirmation. While this will require that the browser execute JavaScript, we won't be writing any. We'll use Brut-provided Web Components to do this.</p><p><img src="`+t+`" alt="Diagram showing the flow, with a screenshot of the blog post editor on the left, and a pink arrow from
|
|
3
|
+
the 'Post it' button going to the text 'Are You Sure?'. From there, a pink line labeled 'No' goes back
|
|
4
|
+
to the editor, while a pink line labeled 'Yes' goes to a screenshot of the home page showing the blog
|
|
5
|
+
post."></p><h2 id="initial-version-using-window-confirm" tabindex="-1">Initial Version Using <code>window.confirm</code> <a class="header-anchor" href="#initial-version-using-window-confirm" aria-label="Permalink to "Initial Version Using \`window.confirm\`""></a></h2><p>Brut includes an <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements" target="_blank" rel="noreferrer">autonomous custom element</a> named <a href="/brut-js/api/ConfirmSubmit.html" target="_self" rel="noopener" data-no-router><code style="white-space:nowrap;"><brut-confirm-submit></code></a>. This element wraps an existing submit button and intercepts its form submission to ask for confirmation. If confirmation is granted, the form is submitted. If not, it's not.</p><p>It is used on a per-button basis, which gives you flexibility in handling what buttons do what within the form. It <em>only</em> works on <code><button></code> and <code><input type="submit"></code> elements.</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">form</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
6
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
7
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">brut-confirm-submit</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> message</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"You sure?"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
8
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Submit</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">> </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"><!-- if clicked, confirmation is requested --></span></span>
|
|
9
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">brut-confirm-submit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
10
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>Also Submit</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">> </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"><!-- if clicked, form is submitted --></span></span>
|
|
11
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">form</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h3 id="adding-confirmation-to-blog-posting" tabindex="-1">Adding Confirmation to Blog Posting <a class="header-anchor" href="#adding-confirmation-to-blog-posting" aria-label="Permalink to "Adding Confirmation to Blog Posting""></a></h3><p>We can use it on <code>BlogPostEditorPage</code>. Open up <code>app/src/front_end/pages/blog_post_editor_page.rb</code> and make this change toward the end of <code>page_template</code></p><div class="language-ruby vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ruby</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">brut_confirm_submit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
|
|
12
|
+
<span class="line highlighted"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> message:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "This will post immediately to the home page"</span></span>
|
|
13
|
+
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">do</span></span>
|
|
14
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> button { </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">t</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">:form</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">:post</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]) }</span></span>
|
|
15
|
+
<span class="line highlighted"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><p>The method <code>brut_confirm_submit</code> is provided by Phlex due to a call to <a href="https://www.phlex.fun/sgml/html-elements.html#custom-elements" target="_blank" rel="noreferrer"><code>register_element</code></a> in <a href="/api/Brut/FrontEnd/Component.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::Component</code></a>.</p><p>Now, start up your server using <code>bin/dev</code>:</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">bin/dev</span></span></code></pre></div><div class="language-txt vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">txt</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span># OUTPUT</span></span>
|
|
16
|
+
<span class="line"><span>« LOTS OF OUTPUT »</span></span>
|
|
17
|
+
<span class="line"><span>15:50:10 startup_message.1 | Your app is now running at</span></span>
|
|
18
|
+
<span class="line"><span>15:50:10 startup_message.1 | </span></span>
|
|
19
|
+
<span class="line"><span>15:50:10 startup_message.1 | http://localhost:6502</span></span>
|
|
20
|
+
<span class="line"><span>15:50:10 startup_message.1 |</span></span></code></pre></div><p>Open <code>http://localhost:6502</code> in your browser, then click "Write New Blog Post", write a valid post and click "Post It". You should see the browser's <code>window.confirm</code> show up with the value for <code>message:</code> as the message.</p><p><img src="`+l+`" alt="Screenshot showing the browser's builtin confirmation dialog"></p><p>Click "Cancel" and the dialog goes away and nothing is posted. Click "Post It" again, then click "OK", and the post goes through as normal.</p><p>Even though we are going to build our own dialog, let's keep our end-to-end test working.</p><h3 id="interacting-with-window-confirm-in-end-to-end-tests" tabindex="-1">Interacting with <code>window.confirm</code> in End-to-End Tests <a class="header-anchor" href="#interacting-with-window-confirm-in-end-to-end-tests" aria-label="Permalink to "Interacting with \`window.confirm\` in End-to-End Tests""></a></h3><p>Let's start by seeing how the test fails:</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">bin/test</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> e2e</span></span></code></pre></div><div class="language-txt vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">txt</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span># OUTPUT</span></span>
|
|
21
|
+
<span class="line"><span>> bin/test e2e</span></span>
|
|
22
|
+
<span class="line"><span>[ bin/test ] Rebuilding test database schema</span></span>
|
|
23
|
+
<span class="line"><span>[ bin/test ] Executing ["bin/db rebuild --env=test"]</span></span>
|
|
24
|
+
<span class="line"><span>[ bin/db ] Database exists. Dropping...</span></span>
|
|
25
|
+
<span class="line"><span>[ bin/db ] blog_test does not exit. Creating...</span></span>
|
|
26
|
+
<span class="line"><span>[ bin/db ] Migrations applied</span></span>
|
|
27
|
+
<span class="line"><span>[ bin/test ] ["bin/db rebuild --env=test"] succeeded</span></span>
|
|
28
|
+
<span class="line"><span>[ bin/test ] Running all tests</span></span>
|
|
29
|
+
<span class="line"><span>[ bin/test ] Executing ["bin/rspec -I /Users/davec/Projects/ThirdTank/blog-demo/specs -I /Users/davec/Projects/ThirdTank/blog-demo/app/src -I lib/ --tag e2e -P \\"**/*.spec.rb\\" /Users/davec/Projects/ThirdTank/blog-demo/specs/"]</span></span>
|
|
30
|
+
<span class="line"><span></span></span>
|
|
31
|
+
<span class="line"><span>«TONS OF OUTPUT»</span></span>
|
|
32
|
+
<span class="line"><span></span></span>
|
|
33
|
+
<span class="line"><span>Failures:</span></span>
|
|
34
|
+
<span class="line"><span></span></span>
|
|
35
|
+
<span class="line"><span> 1) We can post a new blog post allows posting a post</span></span>
|
|
36
|
+
<span class="line"><span> Failure/Error: expect(content_error_message).to have_text("This field does not have enough words")</span></span>
|
|
37
|
+
<span class="line"><span></span></span>
|
|
38
|
+
<span class="line"><span> /Users/davec/Projects/ThirdTank/blog-demo/local-gems/gem-home/gems/playwright-ruby-client-1.52.0/lib/playwright/locator_assertions_impl.rb:53:in 'Playwright::LocatorAssertionsImpl#expect_impl': (Playwright::AssertionError)</span></span>
|
|
39
|
+
<span class="line highlighted"><span> Locator expected to have text 'This field does not have enough words'</span></span>
|
|
40
|
+
<span class="line highlighted"><span> Actual value <element(s) not found> </span></span>
|
|
41
|
+
<span class="line"><span> Call log:</span></span>
|
|
42
|
+
<span class="line"><span> - locator#Playwright::Locator#expect with timeout 5000ms</span></span>
|
|
43
|
+
<span class="line"><span> - waiting for locator("brut-cv-messages[input-name='content'] brut-cv")</span></span>
|
|
44
|
+
<span class="line"><span> from /Users/davec/Projects/ThirdTank/blog-demo/local-gems/gem-home/gems/playwright-ruby-client-1.52.0/lib/playwright/locator_assertions_impl.rb:397:in 'Playwright::LocatorAssertionsImpl#to_have_text'</span></span>
|
|
45
|
+
<span class="line"><span></span></span>
|
|
46
|
+
<span class="line"><span>«MASSIVE STACK TRACE»</span></span>
|
|
47
|
+
<span class="line"><span></span></span>
|
|
48
|
+
<span class="line"><span> from /Users/davec/Projects/ThirdTank/blog-demo/local-gems/gem-home/gems/rspec-core-3.13.5/lib/rspec/core/runner.rb:45:in 'RSpec::Core::Runner.invoke'</span></span>
|
|
49
|
+
<span class="line"><span> from /Users/davec/Projects/ThirdTank/blog-demo/local-gems/gem-home/gems/rspec-core-3.13.5/exe/rspec:4:in '<top (required)>'</span></span>
|
|
50
|
+
<span class="line"><span> from bin/rspec:16:in 'Kernel#load'</span></span>
|
|
51
|
+
<span class="line"><span> from bin/rspec:16:in '<main>'</span></span>
|
|
52
|
+
<span class="line highlighted"><span> # ./specs/e2e/home_page.spec.rb:34:in 'block (2 levels) in <top (required)>'</span></span>
|
|
53
|
+
<span class="line"><span></span></span>
|
|
54
|
+
<span class="line"><span>«MASSIVE STACK TRACE»</span></span>
|
|
55
|
+
<span class="line"><span></span></span>
|
|
56
|
+
<span class="line"><span> # ./local-gems/gem-home/gems/brut-0.5.0/lib/brut/spec_support/rspec_setup.rb:129:in 'block in Brut::SpecSupport::RSpecSetup#setup!'</span></span>
|
|
57
|
+
<span class="line"><span></span></span>
|
|
58
|
+
<span class="line"><span>Finished in 7.6 seconds (files took 0.7169 seconds to load)</span></span>
|
|
59
|
+
<span class="line"><span>1 example, 1 failure</span></span>
|
|
60
|
+
<span class="line"><span></span></span>
|
|
61
|
+
<span class="line"><span>Failed examples:</span></span>
|
|
62
|
+
<span class="line"><span></span></span>
|
|
63
|
+
<span class="line"><span>bin/test run ./specs/e2e/home_page.spec.rb:4 # We can post a new blog post allows posting a post</span></span>
|
|
64
|
+
<span class="line"><span></span></span>
|
|
65
|
+
<span class="line"><span>Randomized with seed 25427</span></span>
|
|
66
|
+
<span class="line"><span></span></span>
|
|
67
|
+
<span class="line"><span>[ bin/test ] error: ["bin/rspec -I /Users/davec/Projects/ThirdTank/blog-demo/specs -I /Users/davec/Projects/ThirdTank/blog-demo/app/src -I lib/ --tag e2e -P \\"**/*.spec.rb\\" /Users/davec/Projects/ThirdTank/blog-demo/specs/"] failed - exited 1</span></span></code></pre></div><p>I've highlighted the relevant parts. Playwright loves stack traces and obtuse errors.</p><p>Let's look at line 34 of <code>specs/e2e/home_page.spec.rb</code>:</p><div class="language-ruby vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ruby</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">expect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(title_error_message).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">to</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> have_text</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"This field is too short"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
68
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">expect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(content_error_message).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">to</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> have_text</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"This field is required"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
69
|
+
<span class="line"></span>
|
|
70
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">title_field.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">fill</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"New blog post"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
71
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">content_field.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">fill</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Too short"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
72
|
+
<span class="line"></span>
|
|
73
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">submit_button.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">click</span></span>
|
|
74
|
+
<span class="line"></span>
|
|
75
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">expect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(page).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">to</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> be_page_for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">BlogPostEditorPage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
76
|
+
<span class="line"></span>
|
|
77
|
+
<span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">expect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(content_error_message).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">to</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> have_text</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"This field does not have enough words"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
78
|
+
<span class="line"></span>
|
|
79
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">content_field.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">fill</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"This is a longer post, so we should be OK"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
80
|
+
<span class="line"></span>
|
|
81
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">submit_button.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">click</span></span>
|
|
82
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">expect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(page).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">to</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> be_page_for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">HomePage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><p>The test was expecting to hit the server and re-generate the page with a server-side error message. Although <a href="/brut-js/api/ConfirmSubmit.html" target="_self" rel="noopener" data-no-router><code style="white-space:nowrap;"><brut-confirm-submit></code></a> did not pop up when there were client-side constraint violations, it doesn't know there are server-side ones, so it is waiting for us to confirm the submission.</p><p>Playwright will <a href="https://playwright.dev/docs/dialogs" target="_blank" rel="noreferrer">automatically dismiss any browser-based dialogs</a>. To handle them, our test will need to register a handler. To do this with Ruby, we'll call <code>page.on</code> and given it an event name and a block to handle the event.</p><p>The event name is "dialog" and a Playwright <code>Dialog</code> will be passed. We can call <code>accept</code> on that.</p><p>Here's the change. Note the line numbers for reference in the file. You want to set this up before <code>submit_button.click</code> is called.</p><div class="language-ruby vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ruby</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> content_field.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">fill</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Too short"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
83
|
+
<span class="line"></span>
|
|
84
|
+
<span class="line highlighted"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> accept_dialog</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> = </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">-></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(dialog) {</span></span>
|
|
85
|
+
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> dialog.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">accept</span></span>
|
|
86
|
+
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
87
|
+
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> page.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">on</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"dialog"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,accept_dialog)</span></span>
|
|
88
|
+
<span class="line"></span>
|
|
89
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> submit_button.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">click</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br></div></div><p>Note that this configuration will stay in effect for the rest of the test. That means when we later save the blog post, it will accept the dialog.</p><p>Now, <code>bin/test e2e</code> should pass:</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">bin/test</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> e2e</span></span></code></pre></div><div class="language-txt vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">txt</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>#OUTPUT</span></span>
|
|
90
|
+
<span class="line"><span>[ bin/test ] Rebuilding test database schema</span></span>
|
|
91
|
+
<span class="line"><span>[ bin/test ] Executing ["bin/db rebuild --env=test"]</span></span>
|
|
92
|
+
<span class="line"><span>[ bin/db ] Database exists. Dropping...</span></span>
|
|
93
|
+
<span class="line"><span>[ bin/db ] blog_test does not exit. Creating...</span></span>
|
|
94
|
+
<span class="line"><span>[ bin/db ] Migrations applied</span></span>
|
|
95
|
+
<span class="line"><span>[ bin/test ] ["bin/db rebuild --env=test"] succeeded</span></span>
|
|
96
|
+
<span class="line"><span>[ bin/test ] Running all tests</span></span>
|
|
97
|
+
<span class="line"><span>[ bin/test ] Executing ["bin/rspec -I /Users/davec/Projects/ThirdTank/blog-demo/specs -I /Users/davec/Projects/ThirdTank/blog-demo/app/src -I lib/ --tag e2e -P \\"**/*.spec.rb\\" /Users/davec/Projects/ThirdTank/blog-demo/specs/"]</span></span>
|
|
98
|
+
<span class="line"><span></span></span>
|
|
99
|
+
<span class="line"><span>«TONS OF OUTPUT»</span></span>
|
|
100
|
+
<span class="line"><span></span></span>
|
|
101
|
+
<span class="line"><span>Finished in 3.57 seconds (files took 0.7341 seconds to load)</span></span>
|
|
102
|
+
<span class="line highlighted"><span>1 example, 0 failures</span></span>
|
|
103
|
+
<span class="line"><span></span></span>
|
|
104
|
+
<span class="line"><span>Randomized with seed 1445</span></span>
|
|
105
|
+
<span class="line"><span></span></span>
|
|
106
|
+
<span class="line"><span>[ bin/test ] ["bin/rspec -I /Users/davec/Projects/ThirdTank/blog-demo/specs -I /Users/davec/Projects/ThirdTank/blog-demo/app/src -I lib/ --tag e2e -P \\"**/*.spec.rb\\" /Users/davec/Projects/ThirdTank/blog-demo/specs/"] succeeded</span></span>
|
|
107
|
+
<span class="line"><span>[ bin/test ] Re-Rebuilding test database schema</span></span>
|
|
108
|
+
<span class="line"><span>[ bin/test ] Executing ["bin/db rebuild --env=test"]</span></span>
|
|
109
|
+
<span class="line"><span>[ bin/db ] Database exists. Dropping...</span></span>
|
|
110
|
+
<span class="line"><span>[ bin/db ] blog_test does not exit. Creating...</span></span>
|
|
111
|
+
<span class="line"><span>[ bin/db ] Migrations applied</span></span>
|
|
112
|
+
<span class="line"><span>[ bin/test ] ["bin/db rebuild --env=test"] succeeded</span></span></code></pre></div><p><code>window.confirm</code> is great in a pinch, but we'd like to use our own styled dialog if possible.</p><h2 id="using-a-styled-dialog" tabindex="-1">Using a Styled Dialog <a class="header-anchor" href="#using-a-styled-dialog" aria-label="Permalink to "Using a Styled Dialog""></a></h2><p>The <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog" target="_blank" rel="noreferrer"><code><dialog></code></a> element has been available since 2022 and provides some of what we'll need to confirm a blog post. Brut can enhance a <code><dialog></code> to act as a confirmation dialog by using the <a href="/brut-js/api/ConfirmationDialog.html" target="_self" rel="noopener" data-no-router><code style="white-space:nowrap;"><brut-confirmation-dialog></code></a> custom element.</p><p>Like <a href="/brut-js/api/ConfirmSubmit.html" target="_self" rel="noopener" data-no-router><code style="white-space:nowrap;"><brut-confirm-submit></code></a>, it wraps an element and enhances it. To work, the <code><dialog></code> must include certain elements to represent the message, a button for consent, and a button for denial.</p><p>Let's see it in action.</p><h3 id="creating-a-styled-dialog" tabindex="-1">Creating a Styled Dialog <a class="header-anchor" href="#creating-a-styled-dialog" aria-label="Permalink to "Creating a Styled Dialog""></a></h3><p>Edit <code>app/src/front_end/pages/blog_post_editor_page.rb</code> and add the dialog at the end of <code>page_template</code>:</p><div class="language-ruby vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ruby</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> brut_confirm_submit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
|
|
113
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> message:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "This will post immediately to the home page"</span></span>
|
|
114
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">do</span></span>
|
|
115
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> button { </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">t</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">:form</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">:post</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]) }</span></span>
|
|
116
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
|
|
117
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
|
|
118
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span>
|
|
119
|
+
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">brut_confirmation_dialog </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">do</span></span>
|
|
120
|
+
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> dialog </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">do</span></span>
|
|
121
|
+
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> h1</span></span>
|
|
122
|
+
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> div </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">do</span></span>
|
|
123
|
+
<span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">value:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"ok"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
124
|
+
<span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">value:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"cancel"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) { </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Don't Publish"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
125
|
+
<span class="line highlighted"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
|
|
126
|
+
<span class="line highlighted"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
|
|
127
|
+
<span class="line highlighted"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br></div></div><p>Your browser should provide a default visual style for the dialog (that is terrible), but you can see that <a href="/brut-js/api/ConfirmSubmit.html" target="_self" rel="noopener" data-no-router><code style="white-space:nowrap;"><brut-confirm-submit></code></a> will now use it when you click "Post It":</p><p><img src="`+p+`" alt="Screenshot showing the browser's styling of a dialog element"></p><p><a href="/brut-js/api/ConfirmSubmit.html" target="_self" rel="noopener" data-no-router><code style="white-space:nowrap;"><brut-confirm-submit></code></a> and <a href="/brut-js/api/ConfirmationDialog.html" target="_self" rel="noopener" data-no-router><code style="white-space:nowrap;"><brut-confirmation-dialog></code></a> work together to allow you to style these dialog how you'd like. It expects an <code>h1</code> element inside where the message will go. It expects a <code><button value="ok"></code> that, when clicked, indicates the visitor is accepting the dialog. A <code><button value="cancel"></code> should also be present that, when clicked, indicates the visitor wants to abort and not submit the form.</p><p>If you've never worked with a <code><dialog></code> before, it can be handy to set <code>open</code> on the element so it shows up without having to click something to open it. It doesn't show exactly as it would when we use JavaScript to show it, but it's good enough to get your styling work done:</p><div class="language-ruby vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ruby</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">dialog</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">open:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">do</span></span>
|
|
128
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> # ...</span></span>
|
|
129
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span></code></pre></div><p>Here's the CSS I chose. Add this to <code>app/src/front_end/css/index.css</code>, inside the <code>.BlogPostEditorPage</code> block:</p><div class="language-css vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;"> cursor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: pointer;</span></span>
|
|
130
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">:hover</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
131
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> background-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#ACFFAC</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
132
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
133
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
134
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
135
|
+
<span class="line highlighted"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;"> brut-confirmation-dialog</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;"> dialog</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
136
|
+
<span class="line highlighted"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> border-radius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
137
|
+
<span class="line highlighted"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> border-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
138
|
+
<span class="line highlighted"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> box-shadow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">rgb</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">200</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">200</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">200</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 12.72</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 3.46892</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
139
|
+
<span class="line highlighted"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> background-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">white</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
140
|
+
<span class="line highlighted"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
141
|
+
<span class="line highlighted"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> h</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">1 {</span></span>
|
|
142
|
+
<span class="line highlighted"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">black</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
143
|
+
<span class="line highlighted"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> font-size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
144
|
+
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
145
|
+
<span class="line highlighted"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;"> div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
146
|
+
<span class="line highlighted"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
147
|
+
<span class="line highlighted"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
148
|
+
<span class="line highlighted"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> gap</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.25</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
149
|
+
<span class="line highlighted"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> align-items</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">center</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
150
|
+
<span class="line highlighted"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> justify-content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">space-between</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
151
|
+
<span class="line highlighted"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
152
|
+
<span class="line highlighted"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> padding-left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
153
|
+
<span class="line highlighted"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> padding-right</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
154
|
+
<span class="line highlighted"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> padding-top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
155
|
+
<span class="line highlighted"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> padding-bottom</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
156
|
+
<span class="line highlighted"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> border-radius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
157
|
+
<span class="line highlighted"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> font-size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">150</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
158
|
+
<span class="line highlighted"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> align-self</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">end</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
159
|
+
<span class="line highlighted"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> cursor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">pointer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
160
|
+
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">="</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">ok</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">"] {</span></span>
|
|
161
|
+
<span class="line highlighted"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> background-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#E5FFE5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
162
|
+
<span class="line highlighted"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> border</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">solid</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> thin</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> #006300</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
163
|
+
<span class="line highlighted"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#006300</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
164
|
+
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
165
|
+
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &[</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"cancel"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] {</span></span>
|
|
166
|
+
<span class="line highlighted"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> background-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#FFE5E5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
167
|
+
<span class="line highlighted"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> border</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">solid</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> thin</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> #630000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
168
|
+
<span class="line highlighted"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#630000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
169
|
+
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
170
|
+
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
171
|
+
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
172
|
+
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
173
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
|
174
|
+
<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">brut-cv</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
175
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">none</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
176
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#A60053</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br></div></div><p>Now, reload the page and click "Post It". You should see a somewhat nicer dialog:</p><p><img src="`+h+`" alt="Screenshot showing the our styling of a dialog element"></p><p>And, sure enough if you click "Don't Publish", the dialog clears and nothing happens. If you click "Post It!", it submits the form.</p><p>A few notes on how this works:</p><ul><li>The contents of the <code><h1></code> come from the <code>message</code> attribute of the <strong><a href="/brut-js/api/ConfirmSubmit.html" target="_self" rel="noopener" data-no-router><code style="white-space:nowrap;"><brut-confirm-submit></code></a></strong>. This allows you to re-use the confirmation dialog for other purposes.</li><li>The content of the <code><button value="ok" ...></code> is the same as the button wrapped by <a href="/brut-js/api/ConfirmSubmit.html" target="_self" rel="noopener" data-no-router><code style="white-space:nowrap;"><brut-confirm-submit></code></a>.</li></ul><p>Also note how the use of semantic and standard HTML allows us to style the elements without classes or <code>data-</code> tags.</p><p>Let's look back at our tests.</p><h3 id="interacting-with-our-dialog-in-tests" tabindex="-1">Interacting with Our Dialog in Tests <a class="header-anchor" href="#interacting-with-our-dialog-in-tests" aria-label="Permalink to "Interacting with Our Dialog in Tests""></a></h3><p>Run our end-to-end test:</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">bin/test</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> e2e</span></span></code></pre></div><p>It should fail:</p><div class="language-txt vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">txt</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>#OUTPUT</span></span>
|
|
177
|
+
<span class="line"><span>> bin/test e2e</span></span>
|
|
178
|
+
<span class="line"><span>[ bin/test ] Rebuilding test database schema</span></span>
|
|
179
|
+
<span class="line"><span>[ bin/test ] Executing ["bin/db rebuild --env=test"]</span></span>
|
|
180
|
+
<span class="line"><span>[ bin/db ] Database exists. Dropping...</span></span>
|
|
181
|
+
<span class="line"><span>[ bin/db ] blog_test does not exit. Creating...</span></span>
|
|
182
|
+
<span class="line"><span>[ bin/db ] Migrations applied</span></span>
|
|
183
|
+
<span class="line"><span>[ bin/test ] ["bin/db rebuild --env=test"] succeeded</span></span>
|
|
184
|
+
<span class="line"><span></span></span>
|
|
185
|
+
<span class="line"><span>«TONS OF OUTPUT»</span></span>
|
|
186
|
+
<span class="line"><span></span></span>
|
|
187
|
+
<span class="line"><span>Failures:</span></span>
|
|
188
|
+
<span class="line"><span></span></span>
|
|
189
|
+
<span class="line"><span> 1) We can post a new blog post allows posting a post</span></span>
|
|
190
|
+
<span class="line"><span> Failure/Error: expect(content_error_message).to have_text("This field does not have enough words")</span></span>
|
|
191
|
+
<span class="line"><span></span></span>
|
|
192
|
+
<span class="line"><span> /Users/davec/Projects/ThirdTank/blog-demo/local-gems/gem-home/gems/playwright-ruby-client-1.52.0/lib/playwright/locator_assertions_impl.rb:53:in 'Playwright::LocatorAssertionsImpl#expect_impl': (Playwright::AssertionError)</span></span>
|
|
193
|
+
<span class="line highlighted"><span> Locator expected to have text 'This field does not have enough words'</span></span>
|
|
194
|
+
<span class="line highlighted"><span> Actual value <element(s) not found> </span></span>
|
|
195
|
+
<span class="line"><span> Call log:</span></span>
|
|
196
|
+
<span class="line"><span> - locator#Playwright::Locator#expect with timeout 5000ms</span></span>
|
|
197
|
+
<span class="line"><span> - waiting for locator("brut-cv-messages[input-name='content'] brut-cv")</span></span>
|
|
198
|
+
<span class="line"><span> from /Users/davec/Projects/ThirdTank/blog-demo/local-gems/gem-home/gems/playwright-ruby-client-1.52.0/lib/playwright/locator_assertions_impl.rb:397:in 'Playwright::LocatorAssertionsImpl#to_have_text'</span></span>
|
|
199
|
+
<span class="line"><span> from /Users/davec/Projects/ThirdTank/blog-demo/local-gems/gem-home/gems/playwright-ruby-client-1.52.0/lib/playwright_api/locator_assertions.rb:642:in 'Playwright::LocatorAssertions#to_have_text'</span></span>
|
|
200
|
+
<span class="line"><span></span></span>
|
|
201
|
+
<span class="line"><span>«HUGE STACK TRACE»</span></span>
|
|
202
|
+
<span class="line"><span></span></span>
|
|
203
|
+
<span class="line"><span> from /Users/davec/Projects/ThirdTank/blog-demo/local-gems/gem-home/gems/rspec-core-3.13.5/lib/rspec/core/runner.rb:45:in 'RSpec::Core::Runner.invoke'</span></span>
|
|
204
|
+
<span class="line"><span> from /Users/davec/Projects/ThirdTank/blog-demo/local-gems/gem-home/gems/rspec-core-3.13.5/exe/rspec:4:in '<top (required)>'</span></span>
|
|
205
|
+
<span class="line"><span> from bin/rspec:16:in 'Kernel#load'</span></span>
|
|
206
|
+
<span class="line"><span> from bin/rspec:16:in '<main>'</span></span>
|
|
207
|
+
<span class="line"><span> # ./specs/e2e/home_page.spec.rb:39:in 'block (2 levels) in <top (required)>'</span></span>
|
|
208
|
+
<span class="line highlighted"><span></span></span>
|
|
209
|
+
<span class="line"><span>«HUGE STACK TRACE»</span></span>
|
|
210
|
+
<span class="line"><span></span></span>
|
|
211
|
+
<span class="line"><span> # ./local-gems/gem-home/gems/brut-0.5.0/lib/brut/spec_support/rspec_setup.rb:185:in 'Brut::SpecSupport::RSpecSetup::OptionalSidekiqSupport#disable_sidekiq_testing'</span></span>
|
|
212
|
+
<span class="line"><span> # ./local-gems/gem-home/gems/brut-0.5.0/lib/brut/spec_support/rspec_setup.rb:129:in 'block in Brut::SpecSupport::RSpecSetup#setup!'</span></span>
|
|
213
|
+
<span class="line"><span></span></span>
|
|
214
|
+
<span class="line"><span>Finished in 8.31 seconds (files took 0.66944 seconds to load)</span></span>
|
|
215
|
+
<span class="line"><span>1 example, 1 failure</span></span>
|
|
216
|
+
<span class="line"><span></span></span>
|
|
217
|
+
<span class="line"><span>Failed examples:</span></span>
|
|
218
|
+
<span class="line"><span></span></span>
|
|
219
|
+
<span class="line"><span>bin/test run ./specs/e2e/home_page.spec.rb:4 # We can post a new blog post allows posting a post</span></span>
|
|
220
|
+
<span class="line"><span></span></span>
|
|
221
|
+
<span class="line"><span>Randomized with seed 29349</span></span>
|
|
222
|
+
<span class="line"><span></span></span>
|
|
223
|
+
<span class="line"><span>[ bin/test ] error: ["bin/rspec -I /Users/davec/Projects/ThirdTank/blog-demo/specs -I /Users/davec/Projects/ThirdTank/blog-demo/app/src -I lib/ --tag e2e -P \\"**/*.spec.rb\\" /Users/davec/Projects/ThirdTank/blog-demo/specs/"] failed - exited 1</span></span></code></pre></div><p>Line 39 is the same line that failed when we first added the confirmation. Since Playwright interacts with browser dialogs via an event, the event listener we added is never fired, so our error is simply that the page didn't refresh.</p><p>Let's remove the listener and instead interact with the new dialog. We should click "cancel" to make sure it doens't do anything, then click "ok".</p><p>One problem with Playwright (well, with web pages in general) is that it's not easy to assert that something didn't happen or isn't there. We can't click the cancel button, then assert that there is no error message.</p><p>Instead, we'll assert that the dialog is not being shown.</p><p>To do that, we'll locate the dialog, the ok button, and the cancel button. The assertion that the dialog isn't shown requires accessing the JavaScript <code>open</code> property and checking that it's false. The rest of the test works as before, punctuated with calls to <code>dialog_ok_button.click</code> to accept the dialog.</p><div class="language-ruby vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ruby</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">expect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(content_error_message).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">to</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> have_text</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"This field is required"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
224
|
+
<span class="line"></span>
|
|
225
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">title_field.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">fill</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"New blog post"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
226
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">content_field.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">fill</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Too short"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
227
|
+
<span class="line"></span>
|
|
228
|
+
<span class="line highlighted"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">dialog</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> = page.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">locator</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"brut-confirmation-dialog dialog"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
229
|
+
<span class="line highlighted"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">dialog_ok_button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> = page.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">locator</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"brut-confirmation-dialog button[value='ok']"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
230
|
+
<span class="line highlighted"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">dialog_cancel_button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> = page.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">locator</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"brut-confirmation-dialog button[value='cancel']"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
231
|
+
<span class="line"></span>
|
|
232
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">submit_button.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">click</span></span>
|
|
233
|
+
<span class="line"></span>
|
|
234
|
+
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">dialog_cancel_button.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">click</span></span>
|
|
235
|
+
<span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">expect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(dialog).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">to</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> have_js_property</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">:open</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
236
|
+
<span class="line"></span>
|
|
237
|
+
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">submit_button.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">click</span></span>
|
|
238
|
+
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">dialog_ok_button.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">click</span></span>
|
|
239
|
+
<span class="line"></span>
|
|
240
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">expect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(page).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">to</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> be_page_for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">BlogPostEditorPage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
241
|
+
<span class="line"></span>
|
|
242
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">expect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(content_error_message).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">to</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> have_text</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"This field does not have enough words"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
243
|
+
<span class="line"></span>
|
|
244
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">content_field.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">fill</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"This is a longer post, so we should be OK"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
245
|
+
<span class="line"></span>
|
|
246
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">submit_button.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">click</span></span>
|
|
247
|
+
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">dialog_ok_button.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">click</span></span>
|
|
248
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">expect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(page).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">to</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> be_page_for</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">HomePage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
249
|
+
<span class="line"></span>
|
|
250
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">new_post</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> = </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">DB</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">::</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">BlogPost</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">order</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">Sequel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">desc</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">:created_at</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">first</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br></div></div><p>The test should now pass:</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">bin/test</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> e2e</span></span></code></pre></div><div class="language-txt vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">txt</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>#OUTPUT</span></span>
|
|
251
|
+
<span class="line"><span>[ bin/test ] Rebuilding test database schema</span></span>
|
|
252
|
+
<span class="line"><span>[ bin/test ] Executing ["bin/db rebuild --env=test"]</span></span>
|
|
253
|
+
<span class="line"><span>[ bin/db ] Database exists. Dropping...</span></span>
|
|
254
|
+
<span class="line"><span>[ bin/db ] blog_test does not exit. Creating...</span></span>
|
|
255
|
+
<span class="line"><span>[ bin/db ] Migrations applied</span></span>
|
|
256
|
+
<span class="line"><span>[ bin/test ] ["bin/db rebuild --env=test"] succeeded</span></span>
|
|
257
|
+
<span class="line"><span></span></span>
|
|
258
|
+
<span class="line"><span>«TONS OF OUTPUT»</span></span>
|
|
259
|
+
<span class="line"><span></span></span>
|
|
260
|
+
<span class="line"><span>[7215] - Goodbye!</span></span>
|
|
261
|
+
<span class="line"><span>[7215] - Gracefully shutting down workers...</span></span>
|
|
262
|
+
<span class="line"><span></span></span>
|
|
263
|
+
<span class="line"><span>Finished in 3.45 seconds (files took 0.71481 seconds to load)</span></span>
|
|
264
|
+
<span class="line highlighted"><span>1 example, 0 failures</span></span>
|
|
265
|
+
<span class="line"><span></span></span>
|
|
266
|
+
<span class="line"><span>Randomized with seed 30988</span></span>
|
|
267
|
+
<span class="line"><span></span></span>
|
|
268
|
+
<span class="line"><span>[ bin/test ] ["bin/rspec -I /Users/davec/Projects/ThirdTank/blog-demo/specs -I /Users/davec/Projects/ThirdTank/blog-demo/app/src -I lib/ --tag e2e -P \\"**/*.spec.rb\\" /Users/davec/Projects/ThirdTank/blog-demo/specs/"] succeeded</span></span>
|
|
269
|
+
<span class="line"><span>[ bin/test ] Re-Rebuilding test database schema</span></span>
|
|
270
|
+
<span class="line"><span>[ bin/test ] Executing ["bin/db rebuild --env=test"]</span></span>
|
|
271
|
+
<span class="line"><span>[ bin/db ] Database exists. Dropping...</span></span>
|
|
272
|
+
<span class="line"><span>[ bin/db ] blog_test does not exit. Creating...</span></span>
|
|
273
|
+
<span class="line"><span>[ bin/db ] Migrations applied</span></span>
|
|
274
|
+
<span class="line"><span>[ bin/test ] ["bin/db rebuild --env=test"] succeeded</span></span></code></pre></div><h2 id="areas-for-self-exploration" tabindex="-1">Areas for Self-Exploration <a class="header-anchor" href="#areas-for-self-exploration" aria-label="Permalink to "Areas for Self-Exploration""></a></h2><ul><li>Extract the dialog into its own component</li><li>Use Internationalization for all the dialog values</li></ul>`,79)]))}const y=i(r,[["render",o]]);export{u as __pageData,y as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{_ as i,c as a,o as n,ag as e}from"./chunks/framework.1L-BeKqY.js";const t="/assets/02-confirmation-flow.D9gZ0S5U.png",l="/assets/02-confirmation-dialog-browser.DH8ALFO4.png",p="/assets/02-confirmation-dialog-browser-element.DPsf0xUW.png",h="/assets/02-confirmation-dialog-browser-element-styled.3NEGM20-.png",u=JSON.parse('{"title":"Tutorial: Styled Confirmation Dialog","description":"","frontmatter":{},"headers":[],"relativePath":"tutorials/02-dialog.md","filePath":"tutorials/02-dialog.md"}'),r={name:"tutorials/02-dialog.md"};function o(k,s,d,c,g,E){return n(),a("div",null,s[0]||(s[0]=[e("",79)]))}const y=i(r,[["render",o]]);export{u as __pageData,y as default};
|