brut 0.8.0 → 0.9.1
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/.gitignore +9 -0
- data/CHANGELOG.md +13 -0
- data/Dockerfile.dx +8 -1
- data/Gemfile.lock +101 -63
- data/bin/ci +9 -5
- data/bin/docs +1 -1
- data/bin/generate-and-run-rubocop +52 -0
- data/bin/rubocop +27 -0
- data/bin/setup +46 -0
- data/bin/test +18 -0
- data/brut-css/bin/publish +1 -1
- data/brut-css/package-lock.json +2 -2
- data/brut-css/package.json +1 -1
- data/brut-js/bin/publish +1 -1
- data/brut-js/package-lock.json +2 -2
- data/brut-js/package.json +1 -1
- data/brut-js/specs/ConfirmSubmit.spec.js +32 -1
- data/brut-js/src/ConfirmSubmit.js +28 -7
- data/brut.gemspec +32 -26
- data/brutrb.com/.vitepress/config.mjs +3 -0
- data/brutrb.com/database-schema.md +1 -1
- data/brutrb.com/images/tutorial/basic-form-with-violations.png +0 -0
- data/brutrb.com/images/tutorial/basic-form.png +0 -0
- data/brutrb.com/images/tutorial/initial-home-page.png +0 -0
- data/brutrb.com/images/tutorial/new-post-editor.png +0 -0
- data/brutrb.com/images/tutorial/new-post-home-page.png +0 -0
- data/brutrb.com/images/tutorial/styled-form-with-server-side-violations.png +0 -0
- data/brutrb.com/images/tutorial/styled-form-with-violations.png +0 -0
- data/brutrb.com/images/tutorial/styled-home-page-with-posts.png +0 -0
- data/brutrb.com/images/tutorial/styled-home-page.png +0 -0
- data/brutrb.com/images/tutorial/welcome-to-brut.png +0 -0
- data/brutrb.com/recipes/migrations.md +1 -1
- data/brutrb.com/tutorial.md +1728 -3
- data/docker-compose.dx.yml +3 -0
- data/docs/404.html +2 -2
- data/docs/adrs.html +3 -3
- data/docs/ai.html +3 -3
- data/docs/api/Brut/BackEnd/SeedData.html +2 -2
- data/docs/api/Brut/BackEnd/Sidekiq/Middlewares/Server/FlushSpans.html +2 -2
- data/docs/api/Brut/BackEnd/Sidekiq/Middlewares/Server.html +2 -2
- data/docs/api/Brut/BackEnd/Sidekiq/Middlewares.html +2 -2
- data/docs/api/Brut/BackEnd/Sidekiq.html +2 -2
- data/docs/api/Brut/BackEnd/Validators/FormValidator.html +2 -2
- data/docs/api/Brut/BackEnd/Validators.html +2 -2
- data/docs/api/Brut/BackEnd.html +2 -2
- data/docs/api/Brut/CLI/App.html +2 -2
- data/docs/api/Brut/CLI/AppRunner.html +2 -2
- data/docs/api/Brut/CLI/Apps/BuildAssets/All.html +2 -2
- data/docs/api/Brut/CLI/Apps/BuildAssets/CSS.html +2 -2
- data/docs/api/Brut/CLI/Apps/BuildAssets/Images.html +2 -2
- data/docs/api/Brut/CLI/Apps/BuildAssets/JS.html +2 -2
- data/docs/api/Brut/CLI/Apps/BuildAssets.html +2 -2
- data/docs/api/Brut/CLI/Apps/DB/Create.html +2 -2
- data/docs/api/Brut/CLI/Apps/DB/Drop.html +2 -2
- data/docs/api/Brut/CLI/Apps/DB/Migrate.html +2 -2
- data/docs/api/Brut/CLI/Apps/DB/NewMigration.html +2 -2
- data/docs/api/Brut/CLI/Apps/DB/Rebuild.html +2 -2
- data/docs/api/Brut/CLI/Apps/DB/Seed.html +2 -2
- data/docs/api/Brut/CLI/Apps/DB/Status.html +2 -2
- data/docs/api/Brut/CLI/Apps/DB.html +2 -2
- data/docs/api/Brut/CLI/Apps/DeployBase/GitChecks.html +2 -2
- data/docs/api/Brut/CLI/Apps/DeployBase.html +2 -2
- data/docs/api/Brut/CLI/Apps/HerokuContainerBasedDeploy/Deploy.html +3 -3
- data/docs/api/Brut/CLI/Apps/HerokuContainerBasedDeploy.html +2 -2
- data/docs/api/Brut/CLI/Apps/Scaffold/Action/Route.html +2 -2
- data/docs/api/Brut/CLI/Apps/Scaffold/Action.html +2 -2
- data/docs/api/Brut/CLI/Apps/Scaffold/Component.html +2 -2
- data/docs/api/Brut/CLI/Apps/Scaffold/CustomElementTest.html +2 -2
- data/docs/api/Brut/CLI/Apps/Scaffold/DbModel.html +2 -2
- data/docs/api/Brut/CLI/Apps/Scaffold/E2ETest.html +2 -2
- data/docs/api/Brut/CLI/Apps/Scaffold/Form.html +2 -2
- data/docs/api/Brut/CLI/Apps/Scaffold/Page/Route.html +2 -2
- data/docs/api/Brut/CLI/Apps/Scaffold/Page.html +2 -2
- data/docs/api/Brut/CLI/Apps/Scaffold/RoutesEditor.html +2 -2
- data/docs/api/Brut/CLI/Apps/Scaffold/Test.html +3 -3
- data/docs/api/Brut/CLI/Apps/Scaffold.html +2 -2
- data/docs/api/Brut/CLI/Apps/Test/Audit.html +2 -2
- data/docs/api/Brut/CLI/Apps/Test/E2e.html +2 -2
- data/docs/api/Brut/CLI/Apps/Test/JS.html +2 -2
- data/docs/api/Brut/CLI/Apps/Test/Run.html +2 -2
- data/docs/api/Brut/CLI/Apps/Test.html +2 -2
- data/docs/api/Brut/CLI/Apps.html +2 -2
- data/docs/api/Brut/CLI/Command.html +2 -2
- data/docs/api/Brut/CLI/Error.html +2 -2
- data/docs/api/Brut/CLI/ExecutionResults/Result.html +2 -2
- data/docs/api/Brut/CLI/ExecutionResults.html +2 -2
- data/docs/api/Brut/CLI/Executor.html +2 -2
- data/docs/api/Brut/CLI/InvalidOption.html +2 -2
- data/docs/api/Brut/CLI/Options.html +80 -2
- data/docs/api/Brut/CLI/Output.html +2 -2
- data/docs/api/Brut/CLI/SystemExecError.html +2 -2
- data/docs/api/Brut/CLI.html +2 -2
- data/docs/api/Brut/FactoryBot.html +3 -3
- data/docs/api/Brut/Framework/App.html +3 -3
- data/docs/api/Brut/Framework/Config.html +27 -15
- data/docs/api/Brut/Framework/Container.html +2 -2
- data/docs/api/Brut/Framework/Error.html +2 -2
- data/docs/api/Brut/Framework/Errors/AbstractMethod.html +2 -2
- data/docs/api/Brut/Framework/Errors/Bug.html +2 -2
- data/docs/api/Brut/Framework/Errors/MissingConfiguration.html +2 -2
- data/docs/api/Brut/Framework/Errors/MissingParameter.html +2 -2
- data/docs/api/Brut/Framework/Errors/NoClassForPath.html +2 -2
- data/docs/api/Brut/Framework/Errors/NotFound.html +2 -2
- data/docs/api/Brut/Framework/Errors/NotImplemented.html +2 -2
- data/docs/api/Brut/Framework/Errors.html +2 -2
- data/docs/api/Brut/Framework/FussyTypeEnforcement.html +2 -2
- data/docs/api/Brut/Framework/MCP.html +21 -11
- data/docs/api/Brut/Framework/ProjectEnvironment.html +2 -2
- data/docs/api/Brut/Framework.html +2 -2
- data/docs/api/Brut/FrontEnd/AssetPathResolver.html +2 -2
- data/docs/api/Brut/FrontEnd/Component/Helpers.html +2 -2
- data/docs/api/Brut/FrontEnd/Component.html +2 -2
- data/docs/api/Brut/FrontEnd/Components/ConstraintViolations.html +2 -2
- data/docs/api/Brut/FrontEnd/Components/FormTag.html +4 -4
- data/docs/api/Brut/FrontEnd/Components/I18nTranslations.html +2 -2
- data/docs/api/Brut/FrontEnd/Components/Input.html +2 -2
- data/docs/api/Brut/FrontEnd/Components/Inputs/CsrfToken.html +2 -2
- data/docs/api/Brut/FrontEnd/Components/Inputs/InputTag.html +2 -2
- data/docs/api/Brut/FrontEnd/Components/Inputs/RadioButton.html +2 -2
- data/docs/api/Brut/FrontEnd/Components/Inputs/SelectTagWithOptions.html +2 -2
- data/docs/api/Brut/FrontEnd/Components/Inputs/TextareaTag.html +2 -2
- data/docs/api/Brut/FrontEnd/Components/Inputs.html +2 -2
- data/docs/api/Brut/FrontEnd/Components/LocaleDetection.html +2 -2
- data/docs/api/Brut/FrontEnd/Components/PageIdentifier.html +2 -2
- data/docs/api/Brut/FrontEnd/Components/TimeTag.html +2 -2
- data/docs/api/Brut/FrontEnd/Components/Traceparent.html +2 -2
- data/docs/api/Brut/FrontEnd/Components.html +2 -2
- data/docs/api/Brut/FrontEnd/CsrfProtector.html +250 -0
- data/docs/api/Brut/FrontEnd/Download.html +2 -2
- data/docs/api/Brut/FrontEnd/Flash.html +2 -2
- data/docs/api/Brut/FrontEnd/Form.html +6 -6
- data/docs/api/Brut/FrontEnd/Forms/ConstraintViolation.html +2 -2
- data/docs/api/Brut/FrontEnd/Forms/Input/Color.html +2 -2
- data/docs/api/Brut/FrontEnd/Forms/Input/TimeOfDay.html +2 -2
- data/docs/api/Brut/FrontEnd/Forms/Input.html +2 -2
- data/docs/api/Brut/FrontEnd/Forms/InputDeclarations.html +2 -2
- data/docs/api/Brut/FrontEnd/Forms/InputDefinition.html +2 -2
- data/docs/api/Brut/FrontEnd/Forms/RadioButtonGroupInput.html +2 -2
- data/docs/api/Brut/FrontEnd/Forms/RadioButtonGroupInputDefinition.html +2 -2
- data/docs/api/Brut/FrontEnd/Forms/SelectInput.html +2 -2
- data/docs/api/Brut/FrontEnd/Forms/SelectInputDefinition.html +2 -2
- data/docs/api/Brut/FrontEnd/Forms/ValidityState.html +2 -2
- data/docs/api/Brut/FrontEnd/Forms.html +2 -2
- data/docs/api/Brut/FrontEnd/GenericResponse.html +2 -2
- data/docs/api/Brut/FrontEnd/Handler.html +2 -2
- data/docs/api/Brut/FrontEnd/Handlers/CspReportingHandler.html +2 -2
- data/docs/api/Brut/FrontEnd/Handlers/InstrumentationHandler/TraceParent.html +2 -2
- data/docs/api/Brut/FrontEnd/Handlers/InstrumentationHandler.html +2 -2
- data/docs/api/Brut/FrontEnd/Handlers/LocaleDetectionHandler.html +2 -2
- data/docs/api/Brut/FrontEnd/Handlers/MissingHandler/Form.html +2 -2
- data/docs/api/Brut/FrontEnd/Handlers/MissingHandler.html +2 -2
- data/docs/api/Brut/FrontEnd/Handlers.html +2 -2
- data/docs/api/Brut/FrontEnd/HandlingResults.html +2 -2
- data/docs/api/Brut/FrontEnd/HttpMethod.html +2 -2
- data/docs/api/Brut/FrontEnd/HttpStatus.html +2 -2
- data/docs/api/Brut/FrontEnd/InlineSvgLocator.html +2 -2
- data/docs/api/Brut/FrontEnd/Layout.html +2 -2
- data/docs/api/Brut/FrontEnd/Middleware.html +2 -2
- data/docs/api/Brut/FrontEnd/Middlewares/AnnotateBrutOwnedPaths.html +2 -2
- data/docs/api/Brut/FrontEnd/Middlewares/Favicon.html +2 -2
- data/docs/api/Brut/FrontEnd/Middlewares/OpenTelemetrySpan.html +2 -2
- data/docs/api/Brut/FrontEnd/Middlewares/ReloadApp.html +2 -2
- data/docs/api/Brut/FrontEnd/Middlewares.html +2 -2
- data/docs/api/Brut/FrontEnd/Page.html +2 -2
- data/docs/api/Brut/FrontEnd/Pages/MissingPage.html +2 -2
- data/docs/api/Brut/FrontEnd/Pages.html +2 -2
- data/docs/api/Brut/FrontEnd/RequestContext.html +2 -2
- data/docs/api/Brut/FrontEnd/RouteHook.html +2 -2
- data/docs/api/Brut/FrontEnd/RouteHooks/AgeFlash.html +2 -2
- data/docs/api/Brut/FrontEnd/RouteHooks/CSPNoInlineScripts.html +2 -2
- data/docs/api/Brut/FrontEnd/RouteHooks/CSPNoInlineStylesOrScripts/ReportOnly.html +2 -2
- data/docs/api/Brut/FrontEnd/RouteHooks/CSPNoInlineStylesOrScripts.html +2 -2
- data/docs/api/Brut/FrontEnd/RouteHooks/LocaleDetection.html +2 -2
- data/docs/api/Brut/FrontEnd/RouteHooks/SetupRequestContext.html +2 -2
- data/docs/api/Brut/FrontEnd/RouteHooks.html +2 -2
- data/docs/api/Brut/FrontEnd/Routing/FormHandlerRoute.html +2 -2
- data/docs/api/Brut/FrontEnd/Routing/FormRoute.html +2 -2
- data/docs/api/Brut/FrontEnd/Routing/MissingForm.html +2 -2
- data/docs/api/Brut/FrontEnd/Routing/MissingHandler.html +2 -2
- data/docs/api/Brut/FrontEnd/Routing/MissingPage.html +2 -2
- data/docs/api/Brut/FrontEnd/Routing/MissingPath.html +2 -2
- data/docs/api/Brut/FrontEnd/Routing/PageRoute.html +2 -2
- data/docs/api/Brut/FrontEnd/Routing/Route.html +2 -2
- data/docs/api/Brut/FrontEnd/Routing.html +2 -2
- data/docs/api/Brut/FrontEnd/Session.html +2 -2
- data/docs/api/Brut/FrontEnd.html +3 -3
- data/docs/api/Brut/I18n/BaseMethods.html +3 -3
- data/docs/api/Brut/I18n/ForBackEnd.html +2 -2
- data/docs/api/Brut/I18n/ForCLI.html +2 -2
- data/docs/api/Brut/I18n/ForHTML.html +2 -2
- data/docs/api/Brut/I18n/HTTPAcceptLanguage/AlwaysEnglish.html +2 -2
- data/docs/api/Brut/I18n/HTTPAcceptLanguage.html +2 -2
- data/docs/api/Brut/I18n.html +2 -2
- data/docs/api/Brut/Instrumentation/LoggerSpanExporter.html +2 -2
- data/docs/api/Brut/Instrumentation/OpenTelemetry/NormalizedAttributes.html +2 -2
- data/docs/api/Brut/Instrumentation/OpenTelemetry/Span.html +2 -2
- data/docs/api/Brut/Instrumentation/OpenTelemetry.html +2 -2
- data/docs/api/Brut/Instrumentation.html +2 -2
- data/docs/api/Brut/RubocopConfig.html +237 -0
- data/docs/api/Brut/SinatraHelpers/ClassMethods.html +2 -2
- data/docs/api/Brut/SinatraHelpers.html +2 -2
- data/docs/api/Brut/SpecSupport/ClockSupport.html +2 -2
- data/docs/api/Brut/SpecSupport/ComponentSupport.html +7 -13
- data/docs/api/Brut/SpecSupport/E2ETestServer.html +2 -2
- data/docs/api/Brut/SpecSupport/E2eSupport.html +2 -2
- data/docs/api/Brut/SpecSupport/EnhancedNode.html +2 -2
- data/docs/api/Brut/SpecSupport/FlashSupport.html +2 -2
- data/docs/api/Brut/SpecSupport/GeneralSupport/ClassMethods.html +2 -2
- data/docs/api/Brut/SpecSupport/GeneralSupport.html +2 -2
- data/docs/api/Brut/SpecSupport/HandlerSupport.html +2 -2
- data/docs/api/Brut/SpecSupport/Matchers/BeABug.html +2 -2
- data/docs/api/Brut/SpecSupport/Matchers/BePageFor.html +2 -2
- data/docs/api/Brut/SpecSupport/Matchers/BeRoutingFor.html +2 -2
- data/docs/api/Brut/SpecSupport/Matchers/HaveConstraintViolation.html +2 -2
- data/docs/api/Brut/SpecSupport/Matchers/HaveGenerated.html +2 -2
- data/docs/api/Brut/SpecSupport/Matchers/HaveHTMLAttribute.html +2 -2
- data/docs/api/Brut/SpecSupport/Matchers/HaveI18nString.html +2 -2
- data/docs/api/Brut/SpecSupport/Matchers/HaveLinkTo.html +2 -2
- data/docs/api/Brut/SpecSupport/Matchers/HaveRedirectedTo.html +2 -2
- data/docs/api/Brut/SpecSupport/Matchers/HaveReturnedHttpStatus.html +2 -2
- data/docs/api/Brut/SpecSupport/Matchers/HaveReturnedRackResponse.html +2 -2
- data/docs/api/Brut/SpecSupport/Matchers.html +2 -2
- data/docs/api/Brut/SpecSupport/RSpecSetup/OptionalSidekiqSupport.html +2 -2
- data/docs/api/Brut/SpecSupport/RSpecSetup.html +4 -4
- data/docs/api/Brut/SpecSupport/SessionSupport.html +2 -2
- data/docs/api/Brut/SpecSupport.html +2 -2
- data/docs/api/Brut.html +128 -12
- data/docs/api/Clock.html +2 -2
- data/docs/api/ModuleName.html +28 -28
- data/docs/api/RichString.html +22 -22
- data/docs/api/SemanticLogger/Appender/Async.html +2 -2
- data/docs/api/Sequel/Extensions/BrutInstrumentation.html +2 -2
- data/docs/api/Sequel/Extensions/BrutMigrations.html +2 -2
- data/docs/api/Sequel/Extensions.html +2 -2
- data/docs/api/Sequel/Plugins/CreatedAt/InstanceMethods.html +2 -2
- data/docs/api/Sequel/Plugins/CreatedAt.html +2 -2
- data/docs/api/Sequel/Plugins/ExternalId/ClassMethods.html +2 -2
- data/docs/api/Sequel/Plugins/ExternalId/InstanceMethods.html +2 -2
- data/docs/api/Sequel/Plugins/ExternalId.html +2 -2
- data/docs/api/Sequel/Plugins/FindBang/ClassMethods.html +2 -2
- data/docs/api/Sequel/Plugins/FindBang.html +2 -2
- data/docs/api/Sequel/Plugins.html +2 -2
- data/docs/api/Sequel.html +2 -2
- data/docs/api/_index.html +16 -2
- data/docs/api/class_list.html +1 -1
- data/docs/api/file.README.html +28 -2
- data/docs/api/index.html +28 -2
- data/docs/api/method_list.html +192 -168
- data/docs/api/top-level-namespace.html +2 -2
- data/docs/assets/{app.DyQLb4Ot.js → app.BuBdZoUg.js} +1 -1
- data/docs/assets/basic-form-with-violations.Cv6Y9-Q_.png +0 -0
- data/docs/assets/basic-form.DbHnu0oW.png +0 -0
- data/docs/assets/chunks/@localSearchIndexroot.BZ_a3X0T.js +1 -0
- data/docs/assets/chunks/{VPLocalSearchBox.T1iA-eJx.js → VPLocalSearchBox.UtnyvkX-.js} +1 -1
- data/docs/assets/chunks/{theme.ChwsbWjK.js → theme.DqwvuBEK.js} +2 -2
- data/docs/assets/{components.md.DHh-NwKs.js → components.md.Bu80E2Nr.js} +3 -3
- data/docs/assets/{configuration.md.D8Wz3oJU.js → configuration.md.CuIxVsSf.js} +1 -1
- data/docs/assets/{database-schema.md.C5gXexJi.js → database-schema.md.LpmBPVEU.js} +1 -1
- data/docs/assets/{forms.md.BRE85eju.js → forms.md.DnLbzVDa.js} +1 -1
- data/docs/assets/{getting-started.md.2ioiTe-B.js → getting-started.md.DdQLmU3C.js} +2 -2
- data/docs/assets/initial-home-page.DNIaYmgP.png +0 -0
- data/docs/assets/new-post-editor.DrHr-5oh.png +0 -0
- data/docs/assets/new-post-home-page.Bm34lyMg.png +0 -0
- data/docs/assets/{recipes_migrations.md.DPN3gQE3.js → recipes_migrations.md.CTcnWDJF.js} +1 -1
- data/docs/assets/styled-form-with-server-side-violations.Bjxd8Dpv.png +0 -0
- data/docs/assets/styled-form-with-violations.Bv_sa9tg.png +0 -0
- data/docs/assets/styled-home-page-with-posts.Dd4kG89D.png +0 -0
- data/docs/assets/styled-home-page.BzdI7dWz.png +0 -0
- data/docs/assets/tutorial.md.C4zR5XPG.js +728 -0
- data/docs/assets/tutorial.md.C4zR5XPG.lean.js +1 -0
- data/docs/assets/welcome-to-brut.VSWzl17-.png +0 -0
- data/docs/assets.html +3 -3
- 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 +18 -10
- data/docs/brut-js/api/ConfirmSubmit.js.html +29 -8
- 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 +1 -1
- data/docs/brut-js/api/ConstraintViolationMessage.js.html +1 -1
- 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 +1 -1
- data/docs/brut-js/api/Form.js.html +1 -1
- 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 +3 -3
- data/docs/business-logic.html +3 -3
- data/docs/cli.html +3 -3
- data/docs/components.html +7 -7
- data/docs/configuration.html +5 -5
- data/docs/css.html +3 -3
- data/docs/custom-element-tests.html +3 -3
- data/docs/database-access.html +3 -3
- data/docs/database-schema.html +5 -5
- data/docs/deployment.html +3 -3
- data/docs/dev-environment.html +3 -3
- data/docs/dir-structure.html +3 -3
- data/docs/doc-conventions.html +3 -3
- data/docs/end-to-end-tests.html +3 -3
- data/docs/features.html +3 -3
- data/docs/flash-and-session.html +3 -3
- data/docs/form-constraints.html +3 -3
- data/docs/forms.html +5 -5
- data/docs/getting-started.html +6 -6
- data/docs/handlers.html +3 -3
- data/docs/hashmap.json +1 -1
- data/docs/hooks.html +3 -3
- data/docs/i18n.html +3 -3
- data/docs/index.html +3 -3
- data/docs/instrumentation.html +3 -3
- data/docs/javascript.html +3 -3
- data/docs/jobs.html +3 -3
- data/docs/keyword-injection.html +3 -3
- data/docs/layouts.html +3 -3
- data/docs/lsp.html +3 -3
- data/docs/markdown-examples.html +3 -3
- data/docs/middleware.html +3 -3
- data/docs/overview.html +3 -3
- data/docs/pages.html +3 -3
- data/docs/recipes/alternate-layouts.html +3 -3
- data/docs/recipes/authentication.html +3 -3
- data/docs/recipes/blank-layouts.html +3 -3
- data/docs/recipes/custom-flash.html +3 -3
- data/docs/recipes/indexed-forms.html +3 -3
- data/docs/recipes/migrations.html +5 -5
- data/docs/recipes/text-field-component.html +3 -3
- data/docs/roadmap.html +3 -3
- data/docs/routes.html +3 -3
- data/docs/security.html +3 -3
- data/docs/seed-data.html +3 -3
- data/docs/space-time-continuum.html +3 -3
- data/docs/tutorial.html +732 -5
- data/docs/unit-tests.html +3 -3
- data/docs/why.html +3 -3
- data/dx/build +45 -9
- data/lib/brut/cli/app.rb +1 -1
- data/lib/brut/cli/apps/heroku_container_based_deploy.rb +1 -1
- data/lib/brut/cli/apps/scaffold.rb +1 -1
- data/lib/brut/cli/options.rb +4 -0
- data/lib/brut/factory_bot.rb +1 -1
- data/lib/brut/framework/app.rb +1 -1
- data/lib/brut/framework/config.rb +18 -12
- data/lib/brut/framework/mcp.rb +12 -7
- data/lib/brut/front_end/csrf_protector.rb +30 -0
- data/lib/brut/front_end/form.rb +4 -4
- data/lib/brut/front_end/page.rb +1 -1
- data/lib/brut/front_end/routing.rb +1 -1
- data/lib/brut/front_end.rb +1 -0
- data/lib/brut/i18n/base_methods.rb +1 -1
- data/lib/brut/instrumentation/logger_span_exporter.rb +1 -1
- data/lib/brut/junk_drawer.rb +3 -1
- data/lib/brut/rubocop_config.rb +123 -0
- data/lib/brut/spec_support/component_support.rb +0 -3
- data/lib/brut/spec_support/rspec_setup.rb +2 -2
- data/lib/brut/version.rb +1 -1
- data/mkbrut/Gemfile.lock +1 -1
- data/mkbrut/dx +1 -0
- data/mkbrut/lib/mkbrut/app.rb +1 -1
- data/mkbrut/lib/mkbrut/cli.rb +1 -1
- data/mkbrut/lib/mkbrut/segments/heroku.rb +1 -1
- data/mkbrut/lib/mkbrut/version.rb +1 -1
- data/mkbrut/mkbrut.gemspec +3 -1
- data/mkbrut/templates/Base/app/config/i18n/en/1_defaults.rb +2 -2
- data/mkbrut/templates/Base/app/config/i18n/en/2_app.rb +1 -1
- data/mkbrut/templates/Base/bin/setup +1 -1
- data/mkbrut/templates/segments/Demo/app/src/front_end/components/flash_component.rb +1 -1
- data/specs/brut/junk_drawer.spec.rb +4 -0
- metadata +92 -35
- data/.rspec +0 -3
- data/docs/assets/chunks/@localSearchIndexroot.CmtZyrFA.js +0 -1
- data/docs/assets/tutorial.md.BIb7XT6j.js +0 -1
- data/docs/assets/tutorial.md.BIb7XT6j.lean.js +0 -1
- /data/docs/assets/{components.md.DHh-NwKs.lean.js → components.md.Bu80E2Nr.lean.js} +0 -0
- /data/docs/assets/{configuration.md.D8Wz3oJU.lean.js → configuration.md.CuIxVsSf.lean.js} +0 -0
- /data/docs/assets/{database-schema.md.C5gXexJi.lean.js → database-schema.md.LpmBPVEU.lean.js} +0 -0
- /data/docs/assets/{forms.md.BRE85eju.lean.js → forms.md.DnLbzVDa.lean.js} +0 -0
- /data/docs/assets/{getting-started.md.2ioiTe-B.lean.js → getting-started.md.DdQLmU3C.lean.js} +0 -0
- /data/docs/assets/{recipes_migrations.md.DPN3gQE3.lean.js → recipes_migrations.md.CTcnWDJF.lean.js} +0 -0
|
@@ -0,0 +1,728 @@
|
|
|
1
|
+
import{_ as a,c as i,o as n,ag as e}from"./chunks/framework.1L-BeKqY.js";const t="/assets/welcome-to-brut.VSWzl17-.png",l="/assets/initial-home-page.DNIaYmgP.png",p="/assets/styled-home-page.BzdI7dWz.png",h="/assets/basic-form.DbHnu0oW.png",o="/assets/basic-form-with-violations.Cv6Y9-Q_.png",k="/assets/styled-form-with-violations.Bv_sa9tg.png",d="/assets/styled-form-with-server-side-violations.Bjxd8Dpv.png",r="/assets/styled-home-page-with-posts.Dd4kG89D.png",c="/assets/new-post-editor.DrHr-5oh.png",g="/assets/new-post-home-page.Bm34lyMg.png",B=JSON.parse('{"title":"Tutorial","description":"","frontmatter":{},"headers":[],"relativePath":"tutorial.md","filePath":"tutorial.md"}'),E={name:"tutorial.md"};function u(y,s,F,b,m,C){return n(),i("div",null,s[0]||(s[0]=[e(`<h1 id="tutorial" tabindex="-1">Tutorial <a class="header-anchor" href="#tutorial" aria-label="Permalink to "Tutorial""></a></h1><p>Below, you'll build a blog that has a few pages, a form, a database table, and tests. It's the same steps I took in the <a href="https://video.hardlimit.com/w/ae7EMhwjDq9kSH5dqQ9swV" target="_blank" rel="noreferrer">15-minute blog video</a>.</p><p>If you'd just like to read source code, there are two apps you can check out:</p><ul><li><a href="https://github.com/thirdtank/blog-demo" target="_blank" rel="noreferrer">The blog we'll build here</a></li><li><a href="https://github.com/thirdtank/adrs.cloud" target="_blank" rel="noreferrer">ADRs.cloud</a>, which is a more realistic app that has mulitple database tables, progressively-enhanced UI, and background jobs.</li></ul><p>You can be running either of these locally in minutes as long as you have Docker installed.</p><h2 id="understanding-this-tutorial" tabindex="-1">Understanding This Tutorial <a class="header-anchor" href="#understanding-this-tutorial" aria-label="Permalink to "Understanding This Tutorial""></a></h2><p>This tutorial will show you command line invocations and code. You should be able to follow along and just type what we say and it should work.</p><p>That said, it's not always clera what we are talking about.</p><h3 id="understanding-command-line-invocations" tabindex="-1">Understanding Command Line Invocations <a class="header-anchor" href="#understanding-command-line-invocations" aria-label="Permalink to "Understanding Command Line Invocations""></a></h3><p>If you aren't comfortable on the command line, it can be hard to understand what parts of this tutorial represent stuff you should type/paste and what is output from those commands. Here is how that works.</p><p>When we want you to run a command, the preceding text will tell you something like "run this command", and then you'll see a codeblock that has the label "bash" in the upper right corner, like so:</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;">ls</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -l</span></span></code></pre></div><p>If you hover over it, an icon with the tooltip "Copy Code" will appear on the right, and you can click that to copy the command-line invocation. Or, you can select it and copy it, or you can type it in manually.</p><p>In any case, you are expected to type/paste/execute the entire thing. Other parts of this documentation site may precede command lines with <code>></code> to indicate it's a shell command. For this tutorial, we aren't doing that.</p><p>Sometimes, commands are long. They can be split up by entering a backslash (<code>\\</code>) as the last character of a line, hitting return, and continuing the command. For example this command:</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;"> push</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> origin</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> main</span></span></code></pre></div><p>Could be executed like so:</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;"> push</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> \\</span></span>
|
|
2
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> origin</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> \\</span></span>
|
|
3
|
+
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> main</span></span></code></pre></div><p>In both cases, you can copy/type these as written and they will work.</p><p>To show output of a command, a separate code block will be used, and the first line of the output will be the string <code># OUTPUT:</code>, and there should <strong>not</strong> be a "bash" label in the upper right corner:</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span># OUTPUT</span></span>
|
|
4
|
+
<span class="line"><span>app dx puma.config.rb</span></span>
|
|
5
|
+
<span class="line"><span>bin Gemfile README.md</span></span>
|
|
6
|
+
<span class="line"><span>config.ru package.json specs</span></span>
|
|
7
|
+
<span class="line"><span>docker-compose.dx.yml Procfile.development</span></span>
|
|
8
|
+
<span class="line"><span>Dockerfile.dx Procfile.test</span></span></code></pre></div><p>Sometimes, output is very long and very irrelevant. In that case, the string <code>«LOTS OF OUTPUT»</code> will be used as a placeholder:</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span># OUTPUT</span></span>
|
|
9
|
+
<span class="line"><span>app</span></span>
|
|
10
|
+
<span class="line"><span>dx</span></span>
|
|
11
|
+
<span class="line"><span>puma.config.rb</span></span>
|
|
12
|
+
<span class="line"><span>«LOTS OF OUTPUTS»</span></span></code></pre></div><h3 id="understanding-code-changes" tabindex="-1">Understanding Code Changes <a class="header-anchor" href="#understanding-code-changes" aria-label="Permalink to "Understanding Code Changes""></a></h3><p>In most cases, we'll show you the entire code for a file/class, and you should make your copy look like it. Suppose you have this:</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:#D73A49;--shiki-dark:#F97583;">class</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> SomeComponent</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> AppComponent</span></span>
|
|
13
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span></code></pre></div><p>We might say "add the <code>view_template</code> to your component so it looks like this:"</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:#D73A49;--shiki-dark:#F97583;">class</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> SomeComponent</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> AppComponent</span></span>
|
|
14
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> def</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> view_template</span></span>
|
|
15
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> h3 { </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"My component"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
16
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">href:HelpPage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">routing</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) { </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Would You Like to Know More?"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
17
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
|
|
18
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span></code></pre></div><p>That means you can replace the file with this code. Other times, we may only focus on one method. We might write "Change <code>view_template</code> in <code>SomeComponent</code> so it looks like so:"</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:#D73A49;--shiki-dark:#F97583;">def</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> view_template</span></span>
|
|
19
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> h3 { </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"My component"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
20
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">href:HelpPage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">routing</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) { </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Would You Like to Know More?"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
21
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span></code></pre></div><p>In this case, you'd replace the method, but the leave the rest of the class as-is.</p><p>On occasion we'll want to only change a few lines and, in that case, we'll use a diff format like so:</p><div class="language-diff vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">diff</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#B31D28;--shiki-dark:#FDAEB7;">- a(href: "") { "Write New Blog Post" }</span></span>
|
|
22
|
+
<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">+ a(href: BlogPostEditorPage.routing) { "Write New Blog Post" }</span></span></code></pre></div><p>This says to find the line that looks like the first one (preceded with a <code>-</code> and shown in red) and replace it with the second one (preceded with a <code>+</code> and shown in green). <strong>Do not use the <code>+</code> or <code>-</code> in your code</strong>, that is just to indicate which line is which.</p><p>Lastly, we'll try to mention the path to the file either in the preceding text or as a comment in the code.</p><p>OK, back to your regularly-scheduled tutorial</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>The only two pieces of software you need are Docker and a code editor:</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>If you are new to programming or new to Ruby and don't know what editor to get, use VSCode. If you are a vim or emacs person, those will be far better, but if you are used to an IDE, VSCode will be the easiest to get set up and learn to use.</p></li></ol><p>To check that docker is installed, open up a terminal and run:</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;">docker</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> info</span></span></code></pre></div><p>This should produce a ton of output:</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span># OUTPUT</span></span>
|
|
23
|
+
<span class="line"><span>Client:</span></span>
|
|
24
|
+
<span class="line"><span> Version: 28.2.2</span></span>
|
|
25
|
+
<span class="line"><span>«LOTS OF OUTPUT»</span></span></code></pre></div><p>To be extra sure, <strong>right after you ran <code>docker info</code></strong>, check <code>$?</code>, the exit code, to make sure it's a 0, which means the command ran successfully:</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;">echo</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> $?</span></span></code></pre></div><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span># OUTPUT</span></span>
|
|
26
|
+
<span class="line"><span>0</span></span></code></pre></div><p>Now, let's create the app by first initializing it.</p><h2 id="initialize-your-app" tabindex="-1">Initialize Your App <a class="header-anchor" href="#initialize-your-app" aria-label="Permalink to "Initialize Your App""></a></h2><p><code>mkbrut</code> is a command line app that will initialize your new app. It's available as a RubyGem or a Docker image. We'll use the Docker image since that doesn't require installing anything.</p><p>We'll call the blog simply "blog". <code>mkbrut</code> will insert some demo features in new apps to show you have to use Brut. Since you're following this tutorial, you don't need that, so we'll use the <code>--no-demo</code> flag.</p><p><code>cd</code> to a folder where you'd like to work. <code>mkbrut</code> will create a folder called <code>blog</code> in there and in <em>that</em> folder, your app will be initialized.</p><p>The command to do this is pretty long, because it downloads <code>mkbrut</code> and then runs it inside a Docker container, meaning you don't have to install anything new. Here it is:</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>docker run \\</span></span>
|
|
27
|
+
<span class="line"><span> -v "$PWD":"$PWD" \\</span></span>
|
|
28
|
+
<span class="line"><span> -w "$PWD" \\</span></span>
|
|
29
|
+
<span class="line"><span> -u $(id -u):$(id -g) \\</span></span>
|
|
30
|
+
<span class="line"><span> -it \\</span></span>
|
|
31
|
+
<span class="line"><span> thirdtank/mkbrut \\</span></span>
|
|
32
|
+
<span class="line"><span> mkbrut --no-demo blog</span></span></code></pre></div><p>You should see this output:</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span># OUTPUT</span></span>
|
|
33
|
+
<span class="line"><span>[ mkbrut ] Creating app with these options:</span></span>
|
|
34
|
+
<span class="line"><span>[ mkbrut ] App name: blog</span></span>
|
|
35
|
+
<span class="line"><span>[ mkbrut ] App ID: blog</span></span>
|
|
36
|
+
<span class="line"><span>[ mkbrut ] Prefix: bl</span></span>
|
|
37
|
+
<span class="line"><span>[ mkbrut ] Organization: blog</span></span>
|
|
38
|
+
<span class="line"><span>[ mkbrut ] Include demo? false</span></span>
|
|
39
|
+
<span class="line"><span>[ mkbrut ] Creating Base app</span></span>
|
|
40
|
+
<span class="line"><span>[ mkbrut ] Creating segment: Bare bones framing</span></span>
|
|
41
|
+
<span class="line"><span>[ mkbrut ] blog was created</span></span>
|
|
42
|
+
<span class="line"><span></span></span>
|
|
43
|
+
<span class="line"><span>[ mkbrut ] Time to get building:</span></span>
|
|
44
|
+
<span class="line"><span>[ mkbrut ] 1. cd blog</span></span>
|
|
45
|
+
<span class="line"><span>[ mkbrut ] 2. dx/build</span></span>
|
|
46
|
+
<span class="line"><span>[ mkbrut ] 3. dx/start</span></span>
|
|
47
|
+
<span class="line"><span>[ mkbrut ] 4. [ in another terminal ] dx/exec bash</span></span>
|
|
48
|
+
<span class="line"><span>[ mkbrut ] 5. [ inside the Docker container ] bin/setup</span></span>
|
|
49
|
+
<span class="line"><span>[ mkbrut ] 6. [ inside the Docker container ] bin/dev</span></span>
|
|
50
|
+
<span class="line"><span>[ mkbrut ] 7. Visit http://localhost:6502 in your browser</span></span>
|
|
51
|
+
<span class="line"><span>[ mkbrut ] 8. [ inside the Docker container ] bin/setup help # to see more commands</span></span></code></pre></div><p>Before we follow the instructions in the output, <code>cd</code> to <code>blog</code> and check it out.</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</span></span>
|
|
52
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">ls</span></span></code></pre></div><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>#OUTPUT</span></span>
|
|
53
|
+
<span class="line"><span>app Dockerfile.dx Procfile.development specs</span></span>
|
|
54
|
+
<span class="line"><span>bin dx Procfile.test </span></span>
|
|
55
|
+
<span class="line"><span>config.ru Gemfile puma.config.rb </span></span>
|
|
56
|
+
<span class="line"><span>docker-compose.dx.yml package.json README.md</span></span></code></pre></div><ul><li><code>app</code> is where all the code your app will be</li><li><code>bin</code> has command line tools to manage your app</li><li><code>dx</code> has command line tools to manage your development environment</li><li><code>specs</code> is where your tests will go</li></ul><p>OK, let's start up the dev environment:</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><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span># OUTPUT</span></span>
|
|
57
|
+
<span class="line"><span>[ dx/build ] Could not find Gemfile.lock, which is needed to determine the playwright-ruby-client version</span></span>
|
|
58
|
+
<span class="line"><span>[ dx/build ] Assuming your app is brand-new, this should be OK</span></span>
|
|
59
|
+
<span class="line"><span>[+] Building 0.2s</span></span>
|
|
60
|
+
<span class="line"><span>«LOTS OF OUTPUT»</span></span></code></pre></div><p>This may take a while, but it's building a Docker image where all your work will happen, although you'll be able to edit your code on your computer with the editor of your choice.</p><p>When this is done, you should see a message like so:</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span># OUTPUT</span></span>
|
|
61
|
+
<span class="line"><span>[ dx/build ] 🌈 Your Docker image has been built tagged 'blog/blog:ruby-3.4'</span></span>
|
|
62
|
+
<span class="line"><span>[ dx/build ] 🔄 You can now run dx/start to start it up, though you may need to stop it first with Ctrl-C</span></span></code></pre></div><p>Now, start up the environment:</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><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>#OUTPUT</span></span>
|
|
63
|
+
<span class="line"><span>[ dx/start ] 🚀 Starting docker-compose.dx.yml</span></span>
|
|
64
|
+
<span class="line"><span>[+] Running 1/5</span></span>
|
|
65
|
+
<span class="line"><span> ⠙ Container blog-postgres-1</span></span>
|
|
66
|
+
<span class="line"><span> ⠙ Container blog-app-1</span></span>
|
|
67
|
+
<span class="line"><span> ⠙ Container blog-otel-desktop-viewer-1</span></span>
|
|
68
|
+
<span class="line"><span>«LOTS OF OUTPUT»</span></span>
|
|
69
|
+
<span class="line"><span>app-1 | 2025-08-11T16:39:11.568390000-04:00</span></span>
|
|
70
|
+
<span class="line"><span>app-1 | 2025-08-11T16:39:11.568978000-04:00</span></span>
|
|
71
|
+
<span class="line"><span>app-1 | 2025-08-11T16:39:11.569430000-04:00</span></span>
|
|
72
|
+
<span class="line"><span>app-1 | 2025-08-11T16:39:11.569825000-04:00 🎉 Dev Environment Initialized! 🎉</span></span>
|
|
73
|
+
<span class="line"><span>app-1 | 2025-08-11T16:39:11.570214000-04:00</span></span>
|
|
74
|
+
<span class="line"><span>app-1 | 2025-08-11T16:39:11.570599000-04:00 ℹ️ To use this environment, open a new terminal and run</span></span>
|
|
75
|
+
<span class="line"><span>app-1 | 2025-08-11T16:39:11.570980000-04:00</span></span>
|
|
76
|
+
<span class="line"><span>app-1 | 2025-08-11T16:39:11.571250000-04:00 dx/exec bash</span></span>
|
|
77
|
+
<span class="line"><span>app-1 | 2025-08-11T16:39:11.571521000-04:00</span></span>
|
|
78
|
+
<span class="line"><span>app-1 | 2025-08-11T16:39:11.571795000-04:00 🕹 Use \`ctrl-c\` to exit.</span></span>
|
|
79
|
+
<span class="line"><span>app-1 | 2025-08-11T16:39:11.572064000-04:00</span></span>
|
|
80
|
+
<span class="line"><span>app-1 | 2025-08-11T16:39:11.572327000-04:00</span></span>
|
|
81
|
+
<span class="line"><span>app-1 | 2025-08-11T16:39:11.572596000-04:00</span></span></code></pre></div><p><code>dx/start</code> will keep running. If you stop it, your dev environment will stop. It's running three containers:</p><ul><li><code>app</code>, which is where the app and its test will run</li><li><code>postgres</code>, which is running PostgreSQL, a SQL database you'll use</li><li><code>otel-desktop-viewer</code> which can view telemetry of your app. We'll see that later.</li></ul><p>Now, let's access the container we started.</p><p>Open a new terminal window, <code>cd</code> to where <code>blog</code> is, and use <code>dx/exec</code> to run <code>bash</code>, effectively "logging in" to the container:</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><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span># OUTPUT</span></span>
|
|
82
|
+
<span class="line"><span>[ dx/exec ] 🚂 Running 'ssh-agent bash' inside container with service name 'app'</span></span>
|
|
83
|
+
<span class="line"><span>Now using node v22.18.0 (npm v10.9.3)</span></span>
|
|
84
|
+
<span class="line"><span>docker-container - Projects/blog</span></span>
|
|
85
|
+
<span class="line"><span>></span></span></code></pre></div><p>At that prompt, you can now type commands. If you type <code>ls</code>, you'll see the same files you saw when we ran it above:</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;">ls</span></span></code></pre></div><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>#OUTPUT</span></span>
|
|
86
|
+
<span class="line"><span>app Dockerfile.dx Procfile.development specs</span></span>
|
|
87
|
+
<span class="line"><span>bin dx Procfile.test </span></span>
|
|
88
|
+
<span class="line"><span>config.ru Gemfile puma.config.rb </span></span>
|
|
89
|
+
<span class="line"><span>docker-compose.dx.yml package.json README.md</span></span></code></pre></div><p>This is because the folder on your computer is synced to the one inside the container. Changes in one are immediately reflected in the other.</p><p><strong>From here on out, all command line invocations are run inside this container</strong>, unless stated otherwise.</p><h2 id="set-up-the-app-itself" tabindex="-1">Set Up the App Itself <a class="header-anchor" href="#set-up-the-app-itself" aria-label="Permalink to "Set Up the App Itself""></a></h2><p><code>mkbrut</code> created a lot of files for you, as well as command line apps to manage your app. We're going to perform app setup via <code>bin/setup</code>. This completely automates the following tasks:</p><ul><li>Installing RubyGems</li><li>Installing Node Modules</li><li>Installing Shopfiy's Ruby LSP, and Microsoft's JS and CSS LSPs</li><li>Creating your dev and test databases</li><li>Setting up Chromium, which we'll use to run end-to-end tests</li></ul><p>Run it now (remember, this is inside the container, so you should've run <code>dx/exec bash</code> on your computer first)</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></code></pre></div><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></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/setup ] Installing gems</span></span>
|
|
91
|
+
<span class="line"><span>[ bin/setup ] Executing ["bundle check --no-color || bundle install --no-color --quiet"]</span></span>
|
|
92
|
+
<span class="line"><span>«LOTS OF OUTPUT»</span></span>
|
|
93
|
+
<span class="line"><span>[ bin/setup ] All set up.</span></span>
|
|
94
|
+
<span class="line"><span></span></span>
|
|
95
|
+
<span class="line"><span>USEFUL COMMANDS</span></span>
|
|
96
|
+
<span class="line"><span></span></span>
|
|
97
|
+
<span class="line"><span> bin/dev</span></span>
|
|
98
|
+
<span class="line"><span> # run app locally, rebuilding and reloading as needed</span></span>
|
|
99
|
+
<span class="line"><span></span></span>
|
|
100
|
+
<span class="line"><span> bin/ci</span></span>
|
|
101
|
+
<span class="line"><span> # runs all tests and checks as CI would</span></span>
|
|
102
|
+
<span class="line"><span></span></span>
|
|
103
|
+
<span class="line"><span> bin/console</span></span>
|
|
104
|
+
<span class="line"><span> # get an IRB console with the app loaded</span></span>
|
|
105
|
+
<span class="line"><span></span></span>
|
|
106
|
+
<span class="line"><span> bin/db</span></span>
|
|
107
|
+
<span class="line"><span> # interact with the DB for migrations, information, etc</span></span>
|
|
108
|
+
<span class="line"><span></span></span>
|
|
109
|
+
<span class="line"><span> bin/dbconsole</span></span>
|
|
110
|
+
<span class="line"><span> # get a PSQL session to the database</span></span>
|
|
111
|
+
<span class="line"><span></span></span>
|
|
112
|
+
<span class="line"><span> bin/scaffold</span></span>
|
|
113
|
+
<span class="line"><span> # Create various structures in your app, like pages or forms</span></span>
|
|
114
|
+
<span class="line"><span></span></span>
|
|
115
|
+
<span class="line"><span> bin/setup help</span></span>
|
|
116
|
+
<span class="line"><span> # show this help</span></span></code></pre></div><p>When this is done, we can check that everything's working by running <code>bin/ci</code>. <code>bin/ci</code> runs all tests and quality checks. Even though you haven't written any code, there's just a bit included to ensure that what little is there is working properly. It's a good check before you start to make sure install and setup worked.</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/ci</span></span></code></pre></div><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span># OUTPUT</span></span>
|
|
117
|
+
<span class="line"><span>[ bin/ci ] Building Assets</span></span>
|
|
118
|
+
<span class="line"><span>«LOTS OF OUTPUT»</span></span>
|
|
119
|
+
<span class="line"><span>[ bin/ci ] Running non E2E tests</span></span>
|
|
120
|
+
<span class="line"><span>«LOTS OF OUTPUT»</span></span>
|
|
121
|
+
<span class="line"><span>[ bin/ci ] Running JS tests</span></span>
|
|
122
|
+
<span class="line"><span>«LOTS OF OUTPUT»</span></span>
|
|
123
|
+
<span class="line"><span>[ bin/ci ] Running E2E tests</span></span>
|
|
124
|
+
<span class="line"><span>«LOTS OF OUTPUT»</span></span>
|
|
125
|
+
<span class="line"><span>[ bin/ci ] Analyzing Ruby gems for</span></span>
|
|
126
|
+
<span class="line"><span>«LOTS OF OUTPUT»</span></span>
|
|
127
|
+
<span class="line"><span>[ bin/ci ] security vulnerabilities</span></span>
|
|
128
|
+
<span class="line"><span>«LOTS OF OUTPUT»</span></span>
|
|
129
|
+
<span class="line"><span>[ bin/ci ] Checking to see that all classes have tests</span></span>
|
|
130
|
+
<span class="line"><span>«LOTS OF OUTPUT»</span></span>
|
|
131
|
+
<span class="line"><span>[ bin/ci ] Done</span></span></code></pre></div><p>Finally, we'll run the app itself via <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><p><code>bin/dev</code> won't exit, it'll sit there running your app until you hit <code>Ctrl-C</code>. Amongst the output you should see a message like:</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span># OUTPUT</span></span>
|
|
132
|
+
<span class="line"><span>« LOTS OF OUTPUT »</span></span>
|
|
133
|
+
<span class="line"><span>20:43:41 startup_message.1 | Your app is now running at</span></span>
|
|
134
|
+
<span class="line"><span>20:43:41 startup_message.1 | </span></span>
|
|
135
|
+
<span class="line"><span>20:43:41 startup_message.1 | http://localhost:6502</span></span>
|
|
136
|
+
<span class="line"><span>20:43:41 startup_message.1 |</span></span></code></pre></div><p>Go to <a href="http://localhost:6502" target="_blank" rel="noreferrer">http://localhost:6502</a> in your web browser. You should see a welcome screen like so:</p><p><img src="`+t+`" alt="Screenshot of the Brut welcome screen"></p><h2 id="the-blog-we-ll-build" tabindex="-1">The Blog We'll Build <a class="header-anchor" href="#the-blog-we-ll-build" aria-label="Permalink to "The Blog We'll Build""></a></h2><p>We're ready to write some code! Here's how the blog is going to work:</p><ul><li>A blog post has a title and content, with each paragraph of the content separated with <code>\\n\\r</code>, which is what the browser inserts when you hit return.</li><li>The home page will show all the blog posts in reverse chronological order.</li><li>The home page will link to the edit blog post page where a blog post can be created.</li><li>Blog posts will be submitted to the backend to be saved, with the following constraints: <ul><li>title and content are required</li><li>title must be at least three characters</li><li>content must be at least 5 words (i.e. space-separated tokens)</li></ul></li></ul><p>We'll discuss tests later. To make it easier to follow Brut, we'll get things working first and then test them. You can absolutely do TDD with Brut, but we find it's hard to learn new things this way.</p><p>Let's start not from the database, but from the user experience.</p><h2 id="building-and-styling-pages" tabindex="-1">Building and Styling Pages <a class="header-anchor" href="#building-and-styling-pages" aria-label="Permalink to "Building and Styling Pages""></a></h2><p>The home page of a Brut app is served, naturally, on <code>/</code> and is implemented by the class <code>HomePage</code>, located in <code>app/src/front_end/pages/home_page.rb</code>.</p><p>A <em>page</em> in Brut is a Phlex component that is rendered inside a layout. A layout is common markup that all pages should have, such as the <code><head></code> section and perhaps a <code><body></code> or other tags. <code>mkbrut</code> provided a default layout that's good for now, so we just have to worry about the HTML that is specific to a page.</p><p>Open up <code>app/src/front_end/pages/home_page.rb</code> in your editor. You should see something like this:</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:#D73A49;--shiki-dark:#F97583;">class</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> HomePage</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> AppPage</span></span>
|
|
137
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> def</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> page_template</span></span>
|
|
138
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> # The duplication and excessive class sizes here are to</span></span>
|
|
139
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> # make it easier for you to remove this when you start working</span></span>
|
|
140
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> # on your app. There are pros and cons to how this code</span></span>
|
|
141
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> # is written, so don't take this is as a directive on how to</span></span>
|
|
142
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> # build your app. You do you!</span></span>
|
|
143
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> img</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">src:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "/static/images/LogoPylon.png"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
144
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> class:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "dn db-ns pos-fixed top-0 left-0 h-100vh w-auto z-2"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
145
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
|
|
146
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> header</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">class:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "flex flex-column items-center justify-center h-100vh"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">do</span></span>
|
|
147
|
+
<span class="line"></span>
|
|
148
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> # A lot more code</span></span>
|
|
149
|
+
<span class="line"></span>
|
|
150
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
|
|
151
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
|
|
152
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span></code></pre></div><p><code>page_template</code> is where you can call Phlex to generate HTML.</p><div class="note custom-block github-alert"><p class="custom-block-title">NOTE</p><p>Phlex components use <code>view_template</code>, and that's what components in Brut use, too. Pages, however, use <code>page_template</code> so that the HTML can be placed inside a layout. <code>page_template</code> is a Brut concept, not a Phlex one.</p></div><h3 id="creating-the-homepage" tabindex="-1">Creating the HomePage <a class="header-anchor" href="#creating-the-homepage" aria-label="Permalink to "Creating the HomePage""></a></h3><p>Delete all the code in <code>page_template</code> and replace it with this:</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:#D73A49;--shiki-dark:#F97583;">def</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> page_template</span></span>
|
|
153
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> header </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">do</span></span>
|
|
154
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> h1 { </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"My Amazing Blog"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
155
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">href:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> ""</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) { </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Write New Blog Post"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
156
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
|
|
157
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> main </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">do</span></span>
|
|
158
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Posts go here"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
159
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
|
|
160
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span></code></pre></div><p>If you've never used Phlex before, it's a Ruby API that defines one method for each HTML element (along with any custom elements you tell it about). You then call these methods to build up markup. As you can see, it's structurally identical to HTML, but it's Ruby.</p><p>If your server is still running, refresh the page and you'll see this wonderful UI (otherwise, start your server with <code>bin/dev</code>):</p><p><img src="`+l+`" alt="Screenshot of the page we built"></p><p>Let's make it a bit nicer.</p><h3 id="using-css" tabindex="-1">Using CSS <a class="header-anchor" href="#using-css" aria-label="Permalink to "Using CSS""></a></h3><p>Open up <code>app/src/front_end/css/index.css</code> in your editor. You should see this:</p><div class="language-css vp-adaptive-theme"><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:#D73A49;--shiki-dark:#F97583;">@import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "brut-css/dist/brut.css"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
161
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "svgs.css"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><p>Brut uses esbuild to bundle CSS. esbuild makes use of the standard <code>@import</code> directive. All <code>@imports</code> are relative to the current file or to <code>node_modules</code>. <code>brut-css/dist/brut.css</code> is the BrutCSS library that comes with Brut. We aren't going to use it, just to keep things focused. <code>svgs.css</code> is located in <code>app/src/front_end/css/svgs.css</code> and sets up a few classes for inline SVGs.</p><p>We'll add some CSS for the home page right here. We'll use vanilla CSS to avoid going on a deep dive on CSS frameworks.</p><p>Add this below <code>@import "svgs.css";</code></p><div class="language-css vp-adaptive-theme"><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;">body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
162
|
+
<span class="line"><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;">50</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
163
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> margin-left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">auto</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
164
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> margin-right</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">auto</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
165
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
|
166
|
+
<span class="line"></span>
|
|
167
|
+
<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">header</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
168
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> border-bottom</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;"> gray</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
169
|
+
<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;">flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
170
|
+
<span class="line"><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;">baseline</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
171
|
+
<span class="line"><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>
|
|
172
|
+
<span class="line"><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>
|
|
173
|
+
<span class="line"><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.5</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
174
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>If you reload the home page in your browser, it now looks at least a little bit respectible:</p><p><img src="`+p+`" alt="Screenshot of the styled home page"></p><p>Now, let's build the blog post editor.</p><h2 id="creating-forms" tabindex="-1">Creating Forms <a class="header-anchor" href="#creating-forms" aria-label="Permalink to "Creating Forms""></a></h2><p>To create blog posts, we need three things:</p><ul><li>A page where the creation happens, which will host an HTML <code><form></code></li><li>A URL where that <code><form></code> will be submitted</li><li>Some code to handle the submissions</li></ul><h3 id="creating-a-new-page" tabindex="-1">Creating a New Page <a class="header-anchor" href="#creating-a-new-page" aria-label="Permalink to "Creating a New Page""></a></h3><p>To make a new page in Brut, we'll need to declare a route, and Brut will choose the class name. We'll use <code>/blog_post_editor</code>, meaning Brut will expect <code>BlogPostEditorPage</code> to exist. We can do all this at once with <code>bin/scaffold page</code>. <code>bin/scaffold page</code> accepts the URL of the page we want to build. Brut will use that URL to figure out the page class' name and generate it, along with a failing test. It will also insert the route into <code>app.rb</code>. Run it now, like so:</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/scaffold</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> page</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> /blog_post_editor</span></span></code></pre></div><p>Your output should look like so:</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span># OUTPUT</span></span>
|
|
175
|
+
<span class="line"><span>[ bin/scaffold ] Inserted route into app/src/app.rb</span></span>
|
|
176
|
+
<span class="line"><span>[ bin/scaffold ] Page source is in app/src/front_end/pages/blog_post_editor_page.rb</span></span>
|
|
177
|
+
<span class="line"><span>[ bin/scaffold ] Page test is in specs/front_end/pages/blog_post_editor_page.spec.rb</span></span>
|
|
178
|
+
<span class="line"><span>[ bin/scaffold ] Added title to app/config/i18n/en/2_app.rb</span></span>
|
|
179
|
+
<span class="line"><span>[ bin/scaffold ] Added route to app/src/app.rb</span></span></code></pre></div><p>Restart your server (Brut currently cannot auto-reload new routes).</p><p>If you manually navigate to <code>http://localhost:6502/blog_post_editor</code>, you can see a very basic page has been created. Before we build the actual page, let's change the home page so it links here.</p><p>If you'll recall, we had a <code>a(href:"") { ... }</code> in our template. We now know the URL for that <code>href</code>. We <em>could</em> use the actual url, <code>/blog_post_editor</code>, but it's going to be easier to manage our app over time if we don't hard-code paths and instead use our new page class to generate the URL.</p><p>Open up <code>app/src/front_end/pages/home_page.rb</code> and make this change:</p><div class="language-diff vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">diff</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#B31D28;--shiki-dark:#FDAEB7;">- a(href: "") { "Write New Blog Post" }</span></span>
|
|
180
|
+
<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">+ a(href: BlogPostEditorPage.routing) { "Write New Blog Post" }</span></span></code></pre></div><p>All page classes have a <code>.routing</code> method. By using this instead of building a URL ourselves, we get some advantages:</p><ul><li>If we rename or remove <code>BlogPostEditorPage</code>, any page referencing it will generate a nice, easy-to-understand error.</li><li><code>routing</code> can manage query strings and anchors in a safe way, plus it can check that if a page has required routing parameters (e.g. the <code>123</code> in <code>/posts/123</code>), that they are provided.</li></ul><p>With this change, you can now click the link and see the <code>BlogPostEditorPage</code>'s template we saw earlier.</p><p>Most of the <code>BlogPostEditorPage</code>'s HTML will be a form to submit a new blog post. While we could write that using HTML, Brut makes life easier by allowing the use of a <em>form class</em> to do it, which also will describe the data to be submitted to the server. This data is handled by a <em>handler</em>.</p><h3 id="create-a-form-and-handler" tabindex="-1">Create a Form and Handler <a class="header-anchor" href="#create-a-form-and-handler" aria-label="Permalink to "Create a Form and Handler""></a></h3><p>A form gets submitted to a URL, and Brut routes that submission to a handler. To create both a form class and a handler, we'll use <code>bin/scaffold form</code>, giving it the URL to respond on.</p><p>In this case, we'll use the URL <code>/new_blog_post</code>. Stop your server and run this command:</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/scaffold</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> form</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> /new_blog_post</span></span></code></pre></div><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span># OUTPUT</span></span>
|
|
181
|
+
<span class="line"><span>[ bin/scaffold ] NewBlogPostForm in app/src/front_end/forms/new_blog_post_form.rb</span></span>
|
|
182
|
+
<span class="line"><span>[ bin/scaffold ] NewBlogPostHandler in app/src/front_end/handlers/new_blog_post_handler.rb</span></span>
|
|
183
|
+
<span class="line"><span>[ bin/scaffold ] Spec in specs/front_end/handlers/new_blog_post_handler.spec.rb</span></span>
|
|
184
|
+
<span class="line"><span>[ bin/scaffold ] Inserted route into app/src/app.rb</span></span></code></pre></div><p>When creating a new form, the first thing we have to do is edit the form class (in this case, <code>NewBlogPostForm</code>, located in <code>app/src/front_end/forms/new_blog_post_form.rb</code>) to describe the values being accepted by the server.</p><p>This can be done by calling static/class methods provided by <a href="/api/Brut/FrontEnd/Form.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::Form</code></a>, the superclass of <code>AppForm</code>, which is the superclass of our app's forms.</p><p>Open up <code>app/src/front_end/forms/new_blog_post_form.rb</code>. We'll call <code>input</code> twice, once for the title and once for the content. <code>input</code> takes keyword arguments that mirror those of the web platform's constraint validation system. Since our title must be at least 3 characters, that means we'll use <code>minlength</code> to specify this.</p><p>Here's the 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:#D73A49;--shiki-dark:#F97583;">class</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> NewBlogPostForm</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> AppForm</span></span>
|
|
185
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> input </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">:title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">minlength:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 3</span></span>
|
|
186
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> input </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">:content</span></span>
|
|
187
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span></code></pre></div><p>Each field is required by default (you can set <code>required: false</code> on fields that aren't required).</p><p>With these declarations, we can use an instance of this class to generate HTML.</p><h3 id="generating-an-html-form" tabindex="-1">Generating an HTML Form <a class="header-anchor" href="#generating-an-html-form" aria-label="Permalink to "Generating an HTML Form""></a></h3><p>The <code>BlogPostEditorPage</code> will contain the form used to write a blog post. This page must make sure two things happen:</p><ul><li>When someone navigates to it, it should show the form with nothing in the fields.</li><li>When there is an error in what the blog post author has provided, it should show those errors, but also maintain the inputs the author provided.</li></ul><p>To do this, the <code>BlogPostEditorPage</code> will need an instance of <code>NewBlogPostForm</code>. We can create this in its constructor. Open up <code>app/src/front_end/pages/blog_post_editor_page.rb</code> and start it off like so:</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:#D73A49;--shiki-dark:#F97583;">class</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> BlogPostEditorPage</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> AppPage</span></span>
|
|
188
|
+
<span class="line"></span>
|
|
189
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> def</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> initialize</span></span>
|
|
190
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @form </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> NewBlogPostForm</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">new</span></span>
|
|
191
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
|
|
192
|
+
<span class="line"></span>
|
|
193
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> # ...</span></span>
|
|
194
|
+
<span class="line"></span>
|
|
195
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span></code></pre></div><p>Next, we'll implement <code>page_template</code> and we'll use <code>@form</code> to create HTML for the form's inputs, including client-side constraints and, as we'll see later, pre-existing values from a previous submission.</p><p>This will require four parts of Brut's API and use one optional one:</p><ul><li><code>brut_form</code>, a custom element (<a href="/brut-js/api/Form.html" target="_self" rel="noopener" data-no-router><code style="white-space:nowrap;"><brut-form></code></a>) that will progressively enhance the form to provide constraint violation visitor experience if JavaScript is enabled.</li><li><code>FormTag</code>, a Phlex component provided by Brut that generates the correct <code><form></code> element, as well as CSRF protection.</li><li><code>Inputs::</code> components, namely <a href="/api/Brut/FrontEnd/Components/Inputs/InputTag.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::Components::Inputs::InputTag</code></a> and <a href="/api/Brut/FrontEnd/Components/Inputs/TextareaTag.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::Components::Inputs::TextareaTag</code></a>, which generate <code><input></code> and <code><textarea></code>, respectively. These Phlex components (provided by Brut) will add the correct attributes for validation, and set the values if the form they are given has values set.</li><li><a href="/api/Brut/FrontEnd/Components/ConstraintViolations.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::Components::ConstraintViolations</code></a>, a Phlex component provided by Brut that generates custom elements that, when JavaScript is enabled, allow for control over the visitor experience when there are constraint violations.</li><li><em>(optional)</em> <code>t</code> provides access to localized strings, instead of hard-coding English.</li></ul><p>Create <code>page_template</code> to look like so:</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:#D73A49;--shiki-dark:#F97583;">def</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> page_template</span></span>
|
|
196
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> h1 { </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;">:write_new_post</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) }</span></span>
|
|
197
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> brut_form </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">do</span></span>
|
|
198
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> FormTag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">for:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @form) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">do</span></span>
|
|
199
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> label </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">do</span></span>
|
|
200
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> Inputs</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">::</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">InputTag</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;"> @form,</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">input_name:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> :title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">autofocus:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
201
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> div { </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;">:title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]) }</span></span>
|
|
202
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> ConstraintViolations</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;"> @form, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">input_name:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> :title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
203
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
|
|
204
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> label </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">do</span></span>
|
|
205
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> Inputs</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">::</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">TextareaTag</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;"> @form,</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">input_name:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> :content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">rows:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
206
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> div { </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;">:content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] ) }</span></span>
|
|
207
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> ConstraintViolations</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;"> @form, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">input_name:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> :content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
208
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
|
|
209
|
+
<span class="line"></span>
|
|
210
|
+
<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>
|
|
211
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
|
|
212
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
|
|
213
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span></code></pre></div><div class="tip custom-block github-alert"><p class="custom-block-title">TIP</p><p>You'll notice that we mentioned classes like <a href="/api/Brut/FrontEnd/Components/Inputs/InputTag.html" target="_self" rel="noopener" data-no-router><code>Brut::FrontEnd::Components::Inputs::InputTag</code></a>, but the code above is only using <code>Input::InputTag</code>. This is due to <a href="https://www.phlex.fun/components/kits.html" target="_blank" rel="noreferrer"><em>Phlex Kits</em></a>, which allow you to use relative class names in certain circumstances.</p><p>Brut makes use of this so there is a clear and organized name for a component, but you almost never have to type or read the entire thing.</p></div><p>Make sure your server is running, then reload the blog post editor page. You should see an error like so:</p><blockquote><p><code>Translation missing. Options considered were: - en.pages.BlogPostEditorPage.write_new_post - en.write_new_post</code></p></blockquote><p>Let's add those keys.</p><h3 id="adding-translation-keys" tabindex="-1">Adding Translation Keys <a class="header-anchor" href="#adding-translation-keys" aria-label="Permalink to "Adding Translation Keys""></a></h3><p>In Brut, translations aren't stored in YAML 🥳🎉, but in a Ruby hash. Brut provides standard translations in <code>app/config/i18n/en/1_defaults.rb</code>, but your app will set its own in <code>app/config/i18n/en/2_app.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:#6A737D;--shiki-dark:#6A737D;"># All app-specific translations, or overrides of Brut's defaults, go here.</span></span>
|
|
214
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
|
215
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> # en: must be the first entry, thus indicating this is the EN translations</span></span>
|
|
216
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> en:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
217
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> cv:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
218
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> cs:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
219
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
220
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> ss:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
221
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> email_taken:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "This email has been taken"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
222
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
223
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
224
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> pages:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># Page-specific messages - this key is relied-upon by Brut to exist</span></span>
|
|
225
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> HomePage:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
226
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> title:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "Welcome!"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
227
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
228
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> BlogPostEditorPage:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
229
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> title:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "BlogPostEditorPage"</span></span>
|
|
230
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
231
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
232
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> # ... more code</span></span></code></pre></div><p>When you use <code>t</code> on a page in Brut, it looks for <code>pages.«page name».«key»</code>, so Brut needs from our form:</p><ul><li><code>pages.BlogPostEditorPage.write_new_post</code></li><li><code>pages.BlogPostEditorPage.form.title</code></li><li><code>pages.BlogPostEditorPage.form.content</code></li><li><code>pages.BlogPostEditorPage.form.post</code></li></ul><p>Give them values like so:</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:#6A737D;--shiki-dark:#6A737D;"># All app-specific translations, or overrides of Brut's defaults, go here.</span></span>
|
|
233
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
|
234
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> # en: must be the first entry, thus indicating this is the EN translations</span></span>
|
|
235
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> en:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
236
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> cv:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
237
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> cs:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
238
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
239
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> ss:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
240
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> email_taken:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "This email has been taken"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
241
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
242
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
243
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> pages:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># Page-specific messages - this key is relied-upon by Brut to exist</span></span>
|
|
244
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> HomePage:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
245
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> title:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "Welcome!"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
246
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
247
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> BlogPostEditorPage:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
248
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> title:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "BlogPostEditorPage"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
249
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> write_new_post:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "Write a new post!"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
250
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> form:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
251
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> title:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "Title"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
252
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> content:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "Post Content"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
253
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> post:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "Post It!"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
254
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
255
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
256
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
257
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> # ... more code</span></span></code></pre></div><p>Now, when you reload the page, it should work:</p><p><img src="`+h+'" alt="screenshot of the form working, but unstyled"></p><p>Without filling anything in, click the submit button. The form should show you some error messages that are unstyled:</p><p><img src="'+o+`" alt="screenshot of the form working, but unstyled"></p><p>Let's style them and learn about how the <a href="/brut-js/api/ConstraintViolationMessage.html" target="_self" rel="noopener" data-no-router><code style="white-space:nowrap;"><brut-cv></code></a> tags created by <code>ConstraintViolations</code> work.</p><h3 id="styling-constraint-violations" tabindex="-1">Styling Constraint Violations <a class="header-anchor" href="#styling-constraint-violations" aria-label="Permalink to "Styling Constraint Violations""></a></h3><p>If you view source, you should see HTML like so:</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;">brut-cv-messages</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> input-name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'title'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
258
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">brut-cv-messages</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><p>If you click submit and view source, you'll see something like this:</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;">brut-cv-messages</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> input-name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'title'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
259
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">brut-cv</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>This field is required</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">brut-cv</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
260
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">brut-cv-messages</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><p>This was inserted by <a href="/brut-js/api/Form.html" target="_self" rel="noopener" data-no-router><code style="white-space:nowrap;"><brut-form></code></a> whenever an element of the form is invalid. This could happen before the visitor clicks "submit", however. To allow you to style these elements only when a submit has been attempted, <a href="/brut-js/api/Form.html" target="_self" rel="noopener" data-no-router><code style="white-space:nowrap;"><brut-form></code></a> will set the attribute <code>submitted-invalid</code> on itself when this happens.</p><p>Open <code>app/src/front_end/css/index.css</code> in your editor. We want <a href="/brut-js/api/ConstraintViolationMessage.html" target="_self" rel="noopener" data-no-router><code style="white-space:nowrap;"><brut-cv></code></a> messages to be red, bold, and in the body font size. We also want them hidden by default.</p><div class="language-css vp-adaptive-theme"><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;">brut-cv</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
261
|
+
<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>
|
|
262
|
+
<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>
|
|
263
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> font-weight</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">bold</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
264
|
+
<span class="line"><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;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
265
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>When <code>submitted-invalid</code> is set on <code>brut-form</code>, <em>then</em> we show them. We <em>also</em> want to show them if they were generated from the server, which <code>ConstraintViolations</code> will do:</p><div class="language-css vp-adaptive-theme"><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;">brut-form</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">submitted-invalid</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] </span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">brut-cv</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
266
|
+
<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;"> brut-cv</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">server-side</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] {</span></span>
|
|
267
|
+
<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;">block</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
268
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>Let's also do some styling for the form and its elements. Add this below the CSS you just wrote:</p><div class="language-css vp-adaptive-theme"><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:#6F42C1;--shiki-dark:#B392F0;">.BlogPostEditorPage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
269
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> brut-form</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
270
|
+
<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;">block</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
271
|
+
<span class="line"><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>
|
|
272
|
+
<span class="line"><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;"> gray</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
273
|
+
<span class="line"><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;">0.25</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
274
|
+
<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;">#eeeeee</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
275
|
+
<span class="line"></span>
|
|
276
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> form</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
277
|
+
<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;">flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
278
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> flex-direction</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">column</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
279
|
+
<span class="line"><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;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
280
|
+
<span class="line"><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;">start</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
281
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
282
|
+
<span class="line"></span>
|
|
283
|
+
<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;"> input</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">textarea</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
284
|
+
<span class="line"><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>
|
|
285
|
+
<span class="line"><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;">0.5</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">rem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
286
|
+
<span class="line"><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;">130</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
287
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
288
|
+
<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
289
|
+
<span class="line"><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>
|
|
290
|
+
<span class="line"><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;">120</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
291
|
+
<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;">block</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
292
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
293
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> font-weight</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">bold</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
294
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> font-style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">italic</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
295
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
296
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
297
|
+
<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;"> button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
298
|
+
<span class="line"><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>
|
|
299
|
+
<span class="line"><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>
|
|
300
|
+
<span class="line"><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>
|
|
301
|
+
<span class="line"><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>
|
|
302
|
+
<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;">#E5FFE5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
303
|
+
<span class="line"><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>
|
|
304
|
+
<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;">#006300</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
305
|
+
<span class="line"><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>
|
|
306
|
+
<span class="line"><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>
|
|
307
|
+
<span class="line"><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>
|
|
308
|
+
<span class="line"><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>
|
|
309
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &:hover {</span></span>
|
|
310
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> background-color: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#ACFFAC</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
311
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
312
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
313
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
314
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>Two notes about this CSS:</p><ul><li><p>It's using nesting, which is part of <a href="https://developer.mozilla.org/en-US/docs/Glossary/Baseline/Compatibility" target="_blank" rel="noreferrer">Baseline</a></p></li><li><p>We've nested all the CSS inside the <code>.BlogPostEditorPage</code> class. The default layout Brut provides includes this:</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;">body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">class:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @page_name) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">do</span></span>
|
|
315
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> yield</span></span>
|
|
316
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span></code></pre></div><p>This means all pages have their page name set on the <code><body></code> tag, allowing nested CSS, if you like.</p></li></ul><p><em>Now</em>, if you submit the form without providing any values, you'll see a decent-looking experience:</p><p><img src="`+k+`" alt="screenshot of the styled form with constraint violations"></p><p>If you fill out the fields correctly, you should see an error that you need to implement your handler. Let's do that next.</p><h2 id="handling-form-submissions" tabindex="-1">Handling Form Submissions <a class="header-anchor" href="#handling-form-submissions" aria-label="Permalink to "Handling Form Submissions""></a></h2><p>When you ran <code>bin/scaffold form</code> earlier, it created <code>NewBlogPostHandler</code>. It's located in <code>app/src/front_end/handlers/new_blog_post_handler.rb</code>, which should look like so:</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:#D73A49;--shiki-dark:#F97583;">class</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> NewBlogPostHandler</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> AppHandler</span></span>
|
|
317
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> def</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> initialize</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>
|
|
318
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @form </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> form</span></span>
|
|
319
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
|
|
320
|
+
<span class="line"></span>
|
|
321
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> def</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> handle</span></span>
|
|
322
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> raise</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "You need to implement your handler"</span></span>
|
|
323
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
|
|
324
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span></code></pre></div><p>The <code>handle</code> method is expected to return a value that tells Brut how to respond to a form submission. In our case, we'll either want it to re-generate <code>BlogPostEditorPage</code>'s HTML with error messages and the visitor-supplied form fields pre-filled in, or save the blog post and redirect back to <code>HomePage</code>.</p><p>To do that, we'll either return an instance of <code>BlogPostEditorPage</code>, or return a <code>URI</code> to <code>HomePage</code> (which we can do with the helper method <code>redirect_to</code>).</p><p>Before <code>handle</code> is called, <code>NewBlogPostHandler</code> will be initialized and give an instance of <code>NewBlogPostForm</code> containing whatever data was submitted by the browser. <code>handle</code> can then use <code>@form</code> to determine what to do.</p><p>First, we'll re-check client-side validations by calling <code>.valid?</code>. If that's true, we can perform server-side validations, calling <code>server_side_constraint_violation</code> for any violations we find. Then, we'll check <code>.valid?</code> again and return a <code>BlogPostEditorPage</code> or redirect.</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:#D73A49;--shiki-dark:#F97583;">class</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> NewBlogPostHandler</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> AppHandler</span></span>
|
|
325
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> def</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> initialize</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>
|
|
326
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @form </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> form</span></span>
|
|
327
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
|
|
328
|
+
<span class="line"></span>
|
|
329
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> def</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> handle</span></span>
|
|
330
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @form.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">valid?</span></span>
|
|
331
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @form.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">split</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#DBEDFF;">/</span><span style="--shiki-light:#22863A;--shiki-light-font-weight:bold;--shiki-dark:#85E89D;--shiki-dark-font-weight:bold;">\\s</span><span style="--shiki-light:#032F62;--shiki-dark:#DBEDFF;">/</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">length</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 5</span></span>
|
|
332
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @form.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">server_side_constraint_violation</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
|
|
333
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> input_name:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> :content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
334
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> key:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> :not_enough_words</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
335
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> context:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">num_words:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
336
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> )</span></span>
|
|
337
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
|
|
338
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
|
|
339
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @form.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">valid?</span></span>
|
|
340
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> # TODO: Actually save the post</span></span>
|
|
341
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> redirect_to</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>
|
|
342
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> else</span></span>
|
|
343
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> BlogPostEditorPage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">new</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;"> @form)</span></span>
|
|
344
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
|
|
345
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
|
|
346
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span></code></pre></div><p>Of course, <code>BlogPostEditorPage</code> does not accept the form as a parameter. We'll need to change that. Since we are using the <code>@form</code> instance to help generate HTML, if we pass the instance from our handler to the <code>BlogPostEditorPage</code>, when <em>that</em> instance generates HTML, it will have errors indicated and show the visitor's provided values instead of defaults.</p><p>Of course, we still need to create a blank form when the page is accessed for the first time, so we'll make <code>form:</code> default to <code>nil</code> and create it if we aren't given a value:</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:#D73A49;--shiki-dark:#F97583;">class</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> BlogPostEditorPage</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> AppPage</span></span>
|
|
347
|
+
<span class="line highlighted"><wbr></span>
|
|
348
|
+
<span class="line highlighted"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> def</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> initialize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">form:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> nil</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
349
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @form </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> form </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">||</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> NewBlogPostForm</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">new</span></span>
|
|
350
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span></code></pre></div><p>With this in place, create a new blog post but with only four words in the content. This will pass client-side checks, but fail server-side checks. When you submit, you'll see an error related to <code>cv.ss.not_enough_words</code>, which is the key Brut is trying to use to find the actual error message.</p><blockquote><p><code>Translation missing. Options considered were: - en.components.Brut::FrontEnd::Components::ConstraintViolations.cv.ss.not_enough_words - en.cv.ss.not_enough_words</code></p></blockquote><p>Add it to <code>app/config/i18n/en/2_app.rb</code>, under <code>en</code>, <code>cv</code> (for constraint violations), <code>ss</code> (for server-side):</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:#6A737D;--shiki-dark:#6A737D;"># All app-specific translations, or overrides of Brut's defaults, go here.</span></span>
|
|
351
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
|
352
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> # en: must be the first entry, thus indicating this is the EN translations</span></span>
|
|
353
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> en:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
354
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> cv:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
355
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> cs:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
356
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
357
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> ss:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
358
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> email_taken:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "This email has been taken"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
359
|
+
<span class="line highlighted"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> not_enough_words:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "%{field} does not have enough words. Must have %{num_words}"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
360
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
|
361
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span></code></pre></div><p><em>Now</em>, try again, and you'll see this message, rendered exactly like client-side errors:</p><p><img src="`+d+`" alt="screenshot of the styled form with server-generated constraint violations"></p><p>Now that we have the user experience in place, let's actually store the blog post in the database.</p><h2 id="using-a-database" tabindex="-1">Using a Database <a class="header-anchor" href="#using-a-database" aria-label="Permalink to "Using a Database""></a></h2><p>Brut uses Postgres, and includes and configures the <a href="https://sequel.jeremyevans.net/" target="_blank" rel="noreferrer">Sequel</a> library to access your data. Sequel has some similarity to Rails' Active Record, but it's not quite the same.</p><p>The main way to access data is to create a <em>database model</em> class (which is similar to an Active Record). Sequel also provides a way to manage your database schema via <em>migrations</em>.</p><p>The steps to take when creating a new table you want to access are:</p><ol><li>Create a migration that creates the schema for the new table.</li><li>Create the database model class itself.</li><li>Create a FactoryBot factory that can create sample instances of rows in the table, useful for testing and development</li><li>Modify seed data to create sample data for development.</li></ol><p>Most of this can be done via <code>bin/scaffold db_model</code>.</p><h3 id="creating-a-new-database-table" tabindex="-1">Creating a New Database Table <a class="header-anchor" href="#creating-a-new-database-table" aria-label="Permalink to "Creating a New Database Table""></a></h3><p>Stop your server and run <code>bin/scaffold</code> like so:</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/scaffold</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> db_model</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> blog_post</span></span></code></pre></div><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span># OUTPUT</span></span>
|
|
362
|
+
<span class="line"><span>[ bin/scaffold ] Executing ["bin/db new_migration create_blog_post"]</span></span>
|
|
363
|
+
<span class="line"><span>[ bin/db ] Migration created:</span></span>
|
|
364
|
+
<span class="line"><span> app/src/back_end/data_models/migrations/20250811213758_create_blog_post.rb</span></span>
|
|
365
|
+
<span class="line"><span>[ bin/scaffold ] ["bin/db new_migration create_blog_post"] succeeded</span></span>
|
|
366
|
+
<span class="line"><span>[ bin/scaffold ] Creating DB::BlogPost in app/src/back_end/data_models/db/blog_post.rb</span></span>
|
|
367
|
+
<span class="line"><span>[ bin/scaffold ] Creating spec for DB::BlogPost in specs/back_end/data_models/db/blog_post.spec.rb</span></span>
|
|
368
|
+
<span class="line"><span>[ bin/scaffold ] Creating factory for DB::BlogPost in specs/factories/db/blog_post.factory.rb</span></span></code></pre></div><p>Your migration file name will be different than ours, since it has a timestamp embedded into it.</p><p>Open that file in your editor and use <code>create_table</code>, as provided by Sequel, to describe the table.</p><p>Brut enhances Sequel's <code>create_table</code> in the following ways:</p><ul><li>A numeric primary key called <code>id</code> is created.</li><li><code>comment:</code> is required.</li><li><code>external_id</code> can be given, and will create a managed unique key called <code>external_id</code> that is safe to externalize and is not used in foreign key or referential integrity.</li><li>A timestamped field, <code>created_at</code> is created and will be set when new rows are created from your app.</li></ul><p>Inside <code>create_table</code>, we'll call <code>column</code> to define columns. Brut defaults all columns to <code>NOT NULL</code>, so you don't need to specify <code>null: false</code>.</p><p>All of this goes inside a block given to the method <code>up</code>, like so:</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:#005CC5;--shiki-dark:#79B8FF;">Sequel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">migration</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> do</span></span>
|
|
369
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> up </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">do</span></span>
|
|
370
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> create_table </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">:blog_posts</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
371
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> comment:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "All the posts fit to post"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
372
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> external_id:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> true</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> do</span></span>
|
|
373
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> column </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">:title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">:text</span></span>
|
|
374
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> column </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">:content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">:text</span></span>
|
|
375
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
|
|
376
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
|
|
377
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span></code></pre></div><p>If you've used migrations before, you may know that <code>down</code> can be used to specify a way to undo the migration, or that a method like <code>change</code> can be used to automatically do both. Brut recommends only using forward migrations inside <code>up</code>. If you need to undo and redo your changes, you can use <code>bin/db rebuild</code> to rebuild your database from scratch.</p><p>Save this file, then apply this migration to your development database:</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/db</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> migrate</span></span></code></pre></div><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span># OUTPUT</span></span>
|
|
378
|
+
<span class="line"><span>[ bin/db ] Migrations applied</span></span></code></pre></div><p>Now, apply it to your test database:</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/db</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> migrate</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -e</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> test</span></span></code></pre></div><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span># OUTPUT</span></span>
|
|
379
|
+
<span class="line"><span>[ bin/db ] Migrations applied</span></span></code></pre></div><p>You can examine the table that was created by running <code>bin/dbconsole</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/dbconsole</span></span></code></pre></div><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span># OUTPUT</span></span>
|
|
380
|
+
<span class="line"><span>psql (16.9 (Debian 16.9-1.pgdg120+1), server 16.4 (Debian 16.4-1.pgdg120+2))</span></span>
|
|
381
|
+
<span class="line"><span>Type "help" for help.</span></span>
|
|
382
|
+
<span class="line"><span></span></span>
|
|
383
|
+
<span class="line"><span>blog_development=#</span></span></code></pre></div><p>This will give you a new prompt where you can type commands to <code>psql</code>, the Postgres command-line client. Try describing the table:</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;">\\d</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> blog_posts</span></span></code></pre></div><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span> Table "public.blog_posts"</span></span>
|
|
384
|
+
<span class="line"><span> Column | Type | Collation | Nullable | Default </span></span>
|
|
385
|
+
<span class="line"><span>-------------+--------------------------+-----------+----------+----------------------------------</span></span>
|
|
386
|
+
<span class="line"><span> id | integer | | not null | generated by default as identity</span></span>
|
|
387
|
+
<span class="line"><span> title | text | | not null | </span></span>
|
|
388
|
+
<span class="line"><span> content | text | | not null | </span></span>
|
|
389
|
+
<span class="line"><span> created_at | timestamp with time zone | | not null | </span></span>
|
|
390
|
+
<span class="line"><span> external_id | citext | | not null | </span></span>
|
|
391
|
+
<span class="line"><span>Indexes:</span></span>
|
|
392
|
+
<span class="line"><span> "blog_posts_pkey" PRIMARY KEY, btree (id)</span></span>
|
|
393
|
+
<span class="line"><span> "blog_posts_external_id_key" UNIQUE CONSTRAINT, btree (external_id)</span></span></code></pre></div><p><code>bin/scaffold</code> created the database model for you in <code>app/src/back_end/data_models/db/blog_post.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:#D73A49;--shiki-dark:#F97583;">class</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:#D73A49;--shiki-dark:#F97583;"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> AppDataModel</span></span>
|
|
394
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> has_external_id </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">:bl</span></span>
|
|
395
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span></code></pre></div><p>In Brut, database models are in the <code>DB::</code> namespace, so you do not conflate them with a <em>domain</em> model.</p><div class="tip custom-block github-alert"><p class="custom-block-title">TIP</p><p>Note <code>has_external_id</code>. This tells Brut and Sequel that the underlying table is expected to have the field <code>external_id</code> and that it is expected to be unique. You can see this in the output of <code>\\d blog_posts</code>, where it says <code>UNIQUE CONSTRAINT, btree (external_id)</code>.</p><p><code>has_external_id</code> configures the database model to provide a value for this key when saving or creating a row. To aid in understanding the values out of context, external ids are prefixed with two values: one is an app-wide value, in our case <code>bl</code>. The other is a model-specific value, also <code>bl</code>. Thus, external ids might look like <code>blbl_9783245789345789345789345</code>.</p></div><p>Before we use this database model, we want to be able to create instances in tests, as well as for local development. The way to do that in Brut is to create a factory.</p><h3 id="creating-test-and-development-data" tabindex="-1">Creating Test and Development Data <a class="header-anchor" href="#creating-test-and-development-data" aria-label="Permalink to "Creating Test and Development Data""></a></h3><p>Brut uses <a href="https://github.com/thoughtbot/factory_bot" target="_blank" rel="noreferrer">FactoryBot</a> to create sample instance of your data. Open up <code>specs/factories/db/blog_post.factory.rb</code> in your editor.</p><p>If you are new to FactoryBot, it is a lightweight (ish) DSL that allows creating test data. You'll call methods based on the column names in order to specify values. Brut also includes <a href="https://github.com/faker-ruby/faker" target="_blank" rel="noreferrer">Faker</a>, which creates randomized but realistic test data.</p><p>For the title, we'll use Faker's "hipster ipsum". For the content, we want several paragraphs delineated by <code>\\n\\r</code>, so we'll create between 2 and 6 paragraphs and join them.</p><p>Make <code>specs/factories/db/blog_post.factory.rb</code> look like so:</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:#005CC5;--shiki-dark:#79B8FF;">FactoryBot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">define</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> do</span></span>
|
|
396
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> factory </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">:blog_post</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">class:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "DB::BlogPost"</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> do</span></span>
|
|
397
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> title { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">Faker</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">::</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">Hipster</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">sentence</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
398
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> content {</span></span>
|
|
399
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">rand</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">times</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">map</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
400
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> Faker</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">::</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">Hipster</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">paragraph_by_chars</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">characters:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 200</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
401
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">join</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\\n\\r</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
402
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
403
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
|
|
404
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span></code></pre></div><p>Brut includes a test to make sure your factories are valid and will work. It's in <code>specs/lint_factories.spec.rb</code>. Run it now to make sure this factory works:</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;"> run</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> specs/lint_factories.spec.rb</span></span></code></pre></div><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span># OUTPUT</span></span>
|
|
405
|
+
<span class="line"><span>[ bin/test ] Executing ["bin/rspec -I /Users/davec/Projects/ThirdTank/brutcasts/01-make-a-blog/blog/specs -I /Users/davec/Projects/ThirdTank/brutcasts/01-make-a-blog/blog/app/src -I lib/ --tag ~e2e -P \\"**/*.spec.rb\\" \\"specs/lint_factories.spec.rb\\""]</span></span>
|
|
406
|
+
<span class="line"><span>Run options: exclude {e2e: true}</span></span>
|
|
407
|
+
<span class="line"><span></span></span>
|
|
408
|
+
<span class="line"><span>Randomized with seed 29315</span></span>
|
|
409
|
+
<span class="line"><span></span></span>
|
|
410
|
+
<span class="line"><span>factories</span></span>
|
|
411
|
+
<span class="line"><span> should be possible to create them all</span></span>
|
|
412
|
+
<span class="line"><span></span></span>
|
|
413
|
+
<span class="line"><span>Finished in 0.59465 seconds (files took 0.7718 seconds to load)</span></span>
|
|
414
|
+
<span class="line"><span>1 example, 0 failures</span></span>
|
|
415
|
+
<span class="line"><span></span></span>
|
|
416
|
+
<span class="line"><span>Randomized with seed 29315</span></span>
|
|
417
|
+
<span class="line"><span></span></span>
|
|
418
|
+
<span class="line"><span>[ bin/test ] ["bin/rspec -I /Users/davec/Projects/ThirdTank/brutcasts/01-make-a-blog/blog/specs -I /Users/davec/Projects/ThirdTank/brutcasts/01-make-a-blog/blog/app/src -I lib/ --tag ~e2e -P \\"**/*.spec.rb\\" \\"specs/lint_factories.spec.rb\\""] succeeded</span></span></code></pre></div><p>We can use this factory for seed data to provide realistic data for development. Edit <code>app/src/back_end/data_models/seed/seed_data.rb</code>, and make it look like so, which will create 10 blog posts:</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:#D73A49;--shiki-dark:#F97583;">require</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "brut/back_end/seed_data"</span></span>
|
|
419
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">class</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> SeedData</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> Brut</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">::</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">BackEnd</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">::</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">SeedData</span></span>
|
|
420
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> include</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> FactoryBot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">::</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">Syntax</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">::</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">Methods</span></span>
|
|
421
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> def</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> seed!</span></span>
|
|
422
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">times</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> do</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> |i|</span></span>
|
|
423
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> create</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">:blog_post</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:#005CC5;--shiki-dark:#79B8FF;"> Date</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">today</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> -</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> i)</span></span>
|
|
424
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
|
|
425
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
|
|
426
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span></code></pre></div><p><code>create</code> is a method provided by Factory Bot that is brought in via <code>FactoryBot::Syntax::Methods</code>.</p><p>Now, load the seed data into the development database with <code>bin/db seed</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/db</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> seed</span></span></code></pre></div><p>We can now show this data on the home page.</p><h2 id="accessing-the-database" tabindex="-1">Accessing the Database <a class="header-anchor" href="#accessing-the-database" aria-label="Permalink to "Accessing the Database""></a></h2><p>On <code>HomePage</code>, we put in a <code><p></code> as a placeholder for blog posts. Let's replace that with code to fetch and display the blog posts.</p><p>In Brut, since HTML is generated by Phlex and thus by Ruby code, we can structure our HTML generation however we like, including by accessing the database directly. This may not scale as our app gets large, but for now, it's the simplest thing to do.</p><p>Sequel's database models are similar to Rails' Active Record's in that we can call class methods to access data. In this case, <code>DB::BlogPost</code> has a method <code>order</code> that will fetch all records sorted by the field we give it in the order we decide. The sort field and order is specified via <code>Sequel.desc</code> for descending or <code>Sequel.asc</code> for ascending. We want posts in reverse-chronological order, so <code>Sequel.desc(:created_at)</code> will achieve this.</p><p>We can call <code>.each</code> on the result and iterate over each blog post. For the content, we'll split by <code>\\n\\r</code> to create paragraphs.</p><p>Here's what <code>HomePage</code>'s <code>page_template</code> should look like now:</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:#D73A49;--shiki-dark:#F97583;">def</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> page_template</span></span>
|
|
427
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> header </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">do</span></span>
|
|
428
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> h1 { </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"My Amazing Blog"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
429
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">href:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> ""</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) { </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Write New Blog Post"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
430
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
|
|
431
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> main </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">do</span></span>
|
|
432
|
+
<span class="line"><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;">each</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> do</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> |blog_post|</span></span>
|
|
433
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> article </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">do</span></span>
|
|
434
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> h2 { blog_post.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
435
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> blog_post.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">split</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#DBEDFF;">/</span><span style="--shiki-light:#22863A;--shiki-light-font-weight:bold;--shiki-dark:#85E89D;--shiki-dark-font-weight:bold;">\\n\\r</span><span style="--shiki-light:#032F62;--shiki-dark:#DBEDFF;">/</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">each</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> do</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> |paragraph|</span></span>
|
|
436
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { paragraph }</span></span>
|
|
437
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
|
|
438
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
|
|
439
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> hr</span></span>
|
|
440
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
|
|
441
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
|
|
442
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span></code></pre></div><p>Start your server if you stopped it before. Go to the home page, and you should see our fake blog posts:</p><p><img src="`+r+`" alt="Home page showing two posts from the seed data, formatted properly"></p><p>If we modify our handler to save new posts to the database, they'll show up here.</p><h2 id="saving-to-the-database" tabindex="-1">Saving to the Database <a class="header-anchor" href="#saving-to-the-database" aria-label="Permalink to "Saving to the Database""></a></h2><p>To create rows in the database, the class method <code>create</code> can be called on <code>DB::BlogPost</code>. Let's change the handler to use that. Open up <code>app/src/front_end/handlers/new_blog_post_handler.rb</code> and make <code>handle</code> look like so (the changed lines are highlighted):</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:#D73A49;--shiki-dark:#F97583;">def</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> handle</span></span>
|
|
443
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> if</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> !</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">@form.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">constraint_violations?</span></span>
|
|
444
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @form.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">split</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#DBEDFF;">/</span><span style="--shiki-light:#22863A;--shiki-light-font-weight:bold;--shiki-dark:#85E89D;--shiki-dark-font-weight:bold;">\\s</span><span style="--shiki-light:#032F62;--shiki-dark:#DBEDFF;">/</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">length</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> <</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 5</span></span>
|
|
445
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @form.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">server_side_constraint_violation</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
|
|
446
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> input_name:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> :content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
447
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> key:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> :not_enough_words</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
448
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> context:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">num_words:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
449
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> )</span></span>
|
|
450
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
|
|
451
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
|
|
452
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @form.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">valid?</span></span>
|
|
453
|
+
<span class="line highlighted"><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;">create</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
|
|
454
|
+
<span class="line highlighted"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> title:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @form.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
455
|
+
<span class="line highlighted"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> content:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @form.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">content</span></span>
|
|
456
|
+
<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> )</span></span>
|
|
457
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> redirect_to</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>
|
|
458
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> else</span></span>
|
|
459
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> NewBlogPostPage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">new</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;"> @form)</span></span>
|
|
460
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
|
|
461
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span></code></pre></div><p>The form object provides access to the values of any field we've declared via a method call.</p><p>Now, create a new blog post, provide valid data, and submit it.</p><p><img src="`+c+'" alt="Screenshot of the blog post editor, with a new post filled in"></p><p>Once you submit it, you should see the homage page with your new post at the top:</p><p><img src="'+g+`" alt="Screenshot of the home page, showing the new blog post"></p><p>Our work isn't quite done. We need tests.</p><h2 id="testing-brut-apps" tabindex="-1">Testing Brut Apps <a class="header-anchor" href="#testing-brut-apps" aria-label="Permalink to "Testing Brut Apps""></a></h2><p>We'll create the following tests:</p><ul><li>Check that the logic in the handler is sound</li><li>Check that blog posts show up on the home page</li><li>Check that the entire workflow of create a blog post and seeing it show up on the home page works in a real web browser</li></ul><p>Let's test our handler first, as that is where the main logic is.</p><h3 id="testing-handlers" tabindex="-1">Testing Handlers <a class="header-anchor" href="#testing-handlers" aria-label="Permalink to "Testing Handlers""></a></h3><p>Our handler will need three tests:</p><ul><li>If the form was submitted without client-side validations happening, we should not create a new blog post and re-generate the blog post editor page, showing the errors.</li><li>If client-side validations pass, but the blog post isn't five words or more, we should not create a new blog post and re-generate the blog post editor page, showing the errors.</li><li>If everything looks good, we save the new blog post and redirect to the home page.</li></ul><p>Brut apps are tested with RSpec, and Brut provides several convenience methods and matchers to make testing as painless as possible.</p><p>When testing a handler, the public method is <code>handle!</code>, not <code>handle</code>, so we want to call that (Brut implements <code>handle!</code> to call <code>handle</code>).</p><p>First, we'll test client-side validations. Open up <code>specs/front_end/handlers/new_blog_post_handler.spec.rb</code> and replace the code there with this:</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:#D73A49;--shiki-dark:#F97583;">require</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "spec_helper"</span></span>
|
|
462
|
+
<span class="line"></span>
|
|
463
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">RSpec</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">describe</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> NewBlogPostHandler</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> do</span></span>
|
|
464
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> describe </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"#handle!"</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> do</span></span>
|
|
465
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> context </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"client-side violations got to the server"</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> do</span></span>
|
|
466
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> it </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"re-generates the HTML for the BlogPostEditorPage"</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> do</span></span>
|
|
467
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> form</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> = </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">NewBlogPostForm</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">new</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">params:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {})</span></span>
|
|
468
|
+
<span class="line"></span>
|
|
469
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> result</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> = described_class.</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">new</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:#6F42C1;--shiki-dark:#B392F0;">handle!</span></span>
|
|
470
|
+
<span class="line"></span>
|
|
471
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> expect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(result).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">to</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> have_generated</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>
|
|
472
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> expect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(form).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">to</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> have_constraint_violation</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">:title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">key:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> :valueMissing</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
473
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> expect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(form).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">to</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> have_constraint_violation</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">:content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">key:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> :valueMissing</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
474
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
|
|
475
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
|
|
476
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
|
|
477
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span></code></pre></div><p><code>have_generated</code> asserts that the value returned from <code>handle!</code> is an instance of the page given, <code>BlogPostEditorPage</code> in this case. You could just as easily write <code>expect(result.kind_of?(BlogPostEditorPage)).to eq(true)</code>, but <code>have_generated</code> expressed the intent of what's happening.</p><p><code>have_constraint_violation</code> checks that the form's <code>constraint_violations</code> contains one for the given field and the given key. In this case, we check both <code>:title</code> and <code>:content</code> for <code>:valueMissing</code>.</p><div class="tip custom-block github-alert"><p class="custom-block-title">TIP</p><p>Client-side constraint violations use the same keys on the server as they do in the browser. In the case of a required field, the browser's <a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState" target="_blank" rel="noreferrer"><code>ValidityState</code></a> would set <code>valueMissing</code> to true. So, that's what Brut would do on the server-side, when reflecting client-side constraints.</p></div><p>Next, we'll check that the server-side constraint violations are being checked. Add this just below the <code>context</code> you just added:</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:#24292E;--shiki-dark:#E1E4E8;">context </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"post is not enough words"</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> do</span></span>
|
|
478
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> it </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"re-generates the HTML for the BlogPostEditorPage, with server-side errors indicated"</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> do</span></span>
|
|
479
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> form</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> = </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">NewBlogPostForm</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">new</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">params:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
480
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> title:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "What a great post"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
481
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> content:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "Not enough words"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
482
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> })</span></span>
|
|
483
|
+
<span class="line"></span>
|
|
484
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> confidence_check { </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">expect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(form.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">constraint_violations?</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">to</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> eq</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>
|
|
485
|
+
<span class="line"></span>
|
|
486
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> result</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> = described_class.</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">new</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:#6F42C1;--shiki-dark:#B392F0;">handle!</span></span>
|
|
487
|
+
<span class="line"></span>
|
|
488
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> expect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(result).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">to</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> have_generated</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>
|
|
489
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> expect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(form).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">to</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> have_constraint_violation</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">:content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">key:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> :not_enough_words</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
490
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
|
|
491
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span></code></pre></div><p>This test introduces two new concepts:</p><ul><li>To initialize a form with data, you must pass a <code>Hash</code> to the keyword argument <code>params:</code>. If the <code>Hash</code> contains parameters that the form doesn't recognize, they are ignored and discarded.</li><li>Although we aren't expecting the form to have client-side constraint violations, if there are any, the test would fail in a confusing way. To manage this, Brut includes the <a href="https://github.com/sustainable-rails/confidence-check" target="_blank" rel="noreferrer">confidence-check</a> gem that allows you to make assertions that are not part of the test. If the confidence check fails, the test output will be obvious that the test could not run due to an assumption being violated.</li></ul><p>Lastly, we'll check that everything worked when there aren't any constraint violations. Add this below the <code>context</code> you just added:</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:#24292E;--shiki-dark:#E1E4E8;">context </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"post is good!"</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> do</span></span>
|
|
492
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> it </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"saves the post and redirects to the HomePage"</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> do</span></span>
|
|
493
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> form</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> = </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">NewBlogPostForm</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">new</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">params:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
494
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> title:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "What a great post"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
495
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> content:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "This post is the best post that has been written in the history of posts"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
496
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> })</span></span>
|
|
497
|
+
<span class="line"></span>
|
|
498
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> confidence_check { </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">expect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(form.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">constraint_violations?</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">to</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> eq</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>
|
|
499
|
+
<span class="line"></span>
|
|
500
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> result</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> = </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">nil</span></span>
|
|
501
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> expect {</span></span>
|
|
502
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> result</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> = described_class.</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">new</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:#6F42C1;--shiki-dark:#B392F0;">handle!</span></span>
|
|
503
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">to</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> change { </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;">count</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">by</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
504
|
+
<span class="line"></span>
|
|
505
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> expect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(result).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">to</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> have_redirected_to</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>
|
|
506
|
+
<span class="line"></span>
|
|
507
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> blog_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;">last</span></span>
|
|
508
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> expect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(blog_post.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">to</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> eq</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"What a great post"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
509
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> expect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(blog_post.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">to</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> eq</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"This post is the best post that has been written in the history of posts"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
510
|
+
<span class="line"></span>
|
|
511
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
|
|
512
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span></code></pre></div><p>This is using RSpec's <code>expect { ... }.to change { ... }.by(N)</code> to make sure that our handler created a row in the database. We then use the matcher <code>have_redirected_to</code> to assert that <code>result</code> is a URI to <code>HomePage</code>. We also check that the blog post we created in the database is correct.</p><p>Let's run the test with <code>bin/test run</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/test</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> run</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> specs/front_end/handlers/new_blog_post_handler.spec.rb</span></span></code></pre></div><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span># OUTPUT</span></span>
|
|
513
|
+
<span class="line"><span>[ bin/test ] Executing ["bin/rspec -I /Users/davec/Projects/ThirdTank/brutcasts/01-make-a-blog/blog/specs -I /Users/davec/Projects/ThirdTank/brutcasts/01-make-a-blog/blog/app/src -I lib/ --tag ~e2e -P \\"**/*.spec.rb\\" \\"specs/front_end/handlers/new_blog_post_handler.spec.rb\\""]</span></span>
|
|
514
|
+
<span class="line"><span>Run options: exclude {e2e: true}</span></span>
|
|
515
|
+
<span class="line"><span></span></span>
|
|
516
|
+
<span class="line"><span>Randomized with seed 61034</span></span>
|
|
517
|
+
<span class="line"><span></span></span>
|
|
518
|
+
<span class="line"><span>NewBlogPostHandler</span></span>
|
|
519
|
+
<span class="line"><span> post is not enough words</span></span>
|
|
520
|
+
<span class="line"><span> re-generates the HTML for the BlogPostEditorPage, with server-side errors indicated</span></span>
|
|
521
|
+
<span class="line"><span> post is good!</span></span>
|
|
522
|
+
<span class="line"><span> saves the post and redirects to the HomePage</span></span>
|
|
523
|
+
<span class="line"><span> #handle!</span></span>
|
|
524
|
+
<span class="line"><span> client-side violations got to the server</span></span>
|
|
525
|
+
<span class="line"><span> re-generates the HTML for the BlogPostEditorPage</span></span>
|
|
526
|
+
<span class="line"><span></span></span>
|
|
527
|
+
<span class="line"><span>Finished in 0.0138 seconds (files took 0.73976 seconds to load)</span></span>
|
|
528
|
+
<span class="line"><span>3 examples, 0 failures</span></span>
|
|
529
|
+
<span class="line"><span></span></span>
|
|
530
|
+
<span class="line"><span>Randomized with seed 61034</span></span>
|
|
531
|
+
<span class="line"><span></span></span>
|
|
532
|
+
<span class="line"><span>[ bin/test ] ["bin/rspec -I /Users/davec/Projects/ThirdTank/brutcasts/01-make-a-blog/blog/specs -I /Users/davec/Projects/ThirdTank/brutcasts/01-make-a-blog/blog/app/src -I lib/ --tag ~e2e -P \\"**/*.spec.rb\\" \\"specs/front_end/handlers/new_blog_post_handler.spec.rb\\""] succeeded</span></span></code></pre></div><p>It passes!</p><p>Next, let's test <code>HomePage</code>.</p><h3 id="testing-pages" tabindex="-1">Testing Pages <a class="header-anchor" href="#testing-pages" aria-label="Permalink to "Testing Pages""></a></h3><p>Unlike our handler, which accepts arguments and returns a result, pages generate HTML. We are better off testing pages by asking them to generate HTML and then examining the HTML directly.</p><p>Brut provides the method <code>generate_and_parse</code> to generate a page's HTML, then use <a href="https://nokogiri.org/" target="_blank" rel="noreferrer">Nokogiri</a> to parse it. We can use CSS selectors on the result to assert things about the HTML.</p><p><code>mkbrut</code> created <code>specs/front_end/pages/home_page.spec.rb</code>, so let's open that up on your editor.</p><p>The way we'll write this test is to generate four random blog posts using our factory, request the page, then assert that each blog post is on the page.</p><p>Rather than assert that each blog post's text is just somewhere on the page, we'll make use of the <code>external_id</code> concept. We'll use it as the <code>id</code> attribute of the <code><article></code>.</p><p>Brut intends for you to use Nokogiri's API to access information about the parsed document, however it provides a few convenience methods. In the test below, you'll see <code>e!</code>, which is added to Nokogiri nodes.</p><p><code>e!</code> asserts that exactly one node matches the given CSS selector and returns that node. This makes it more expedient to access something that should be there, but fail with a useful error message when it's not.</p><p>Here's the test:</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:#D73A49;--shiki-dark:#F97583;">require</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "spec_helper"</span></span>
|
|
533
|
+
<span class="line"></span>
|
|
534
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">RSpec</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">describe</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> HomePage</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> do</span></span>
|
|
535
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> it </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"should show the blog posts"</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> do</span></span>
|
|
536
|
+
<span class="line"></span>
|
|
537
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> blog_posts</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> = </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">times</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">map</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">create</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">:blog_post</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) }</span></span>
|
|
538
|
+
<span class="line"></span>
|
|
539
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> result</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> = </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">generate_and_parse</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(described_class.</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">new</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
540
|
+
<span class="line"></span>
|
|
541
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> expect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(result.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">e!</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"h1"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">text</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">to</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> eq</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"My Amazing Blog"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
542
|
+
<span class="line"></span>
|
|
543
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> blog_posts.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">each</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> do</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> |blog_post|</span></span>
|
|
544
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> post_article</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> = result.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">e!</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"article#</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">#{blog_post.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">external_id</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
545
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> expect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(post_article.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">e!</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"h2"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">text</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">to</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> eq</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(blog_post.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
546
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> blog_post.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">split</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#DBEDFF;">/</span><span style="--shiki-light:#22863A;--shiki-light-font-weight:bold;--shiki-dark:#85E89D;--shiki-dark-font-weight:bold;">\\n\\r</span><span style="--shiki-light:#032F62;--shiki-dark:#DBEDFF;">/</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">each</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> do</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> |paragraph|</span></span>
|
|
547
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> expect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(post_article.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">text</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">to</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> include</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(paragraph)</span></span>
|
|
548
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
|
|
549
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
|
|
550
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
|
|
551
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span></code></pre></div><p>Let's run the test, which should fail:</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;"> run</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> specs/front_end/pages/home_page.spec.rb</span></span></code></pre></div><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span># OUTPUT</span></span>
|
|
552
|
+
<span class="line"><span>[ bin/test ] Executing ["bin/rspec -I /Users/davec/Projects/ThirdTank/brutcasts/01-make-a-blog/blog/specs -I /Users/davec/Projects/ThirdTank/brutcasts/01-make-a-blog/blog/app/src -I lib/ --tag ~e2e -P \\"**/*.spec.rb\\" \\"specs/front_end/pages/home_page.spec.rb\\""]</span></span>
|
|
553
|
+
<span class="line"><span>Run options: exclude {e2e: true}</span></span>
|
|
554
|
+
<span class="line"><span></span></span>
|
|
555
|
+
<span class="line"><span>Randomized with seed 44491</span></span>
|
|
556
|
+
<span class="line"><span></span></span>
|
|
557
|
+
<span class="line"><span>HomePage</span></span>
|
|
558
|
+
<span class="line"><span> should show the blog posts (FAILED - 1)</span></span>
|
|
559
|
+
<span class="line"><span></span></span>
|
|
560
|
+
<span class="line"><span>Failures:</span></span>
|
|
561
|
+
<span class="line"><span></span></span>
|
|
562
|
+
<span class="line"><span> 1) HomePage should show the blog posts</span></span>
|
|
563
|
+
<span class="line"><span> Failure/Error: post_article = result.e!("article##{blog_post.external_id}")</span></span>
|
|
564
|
+
<span class="line"><span></span></span>
|
|
565
|
+
<span class="line"><span> article#blbl_6f04feaefb9520d86b19c3ac4ad22c4f matched 0 elements, not exactly 1:</span></span>
|
|
566
|
+
<span class="line"><span></span></span>
|
|
567
|
+
<span class="line"><span>«HUGE HTML DOCUMENT»</span></span>
|
|
568
|
+
<span class="line"><span></span></span>
|
|
569
|
+
<span class="line"><span> # ./local-gems/gem-home/gems/brut-0.5.0/lib/brut/spec_support/enhanced_node.rb:32:in 'Brut::SpecSupport::EnhancedNode#e!'</span></span>
|
|
570
|
+
<span class="line"><span> # ./specs/front_end/pages/home_page.spec.rb:13:in 'block (3 levels) in <top (required)>'</span></span>
|
|
571
|
+
<span class="line"><span> # ./specs/front_end/pages/home_page.spec.rb:12:in 'Array#each'</span></span>
|
|
572
|
+
<span class="line"><span> # ./specs/front_end/pages/home_page.spec.rb:12:in 'block (2 levels) in <top (required)>'</span></span>
|
|
573
|
+
<span class="line"><span> # ./local-gems/gem-home/gems/brut-0.5.0/lib/brut/spec_support/rspec_setup.rb:158:in 'block (2 levels) in Brut::SpecSupport::RSpecSetup#setup!'</span></span>
|
|
574
|
+
<span class="line"><span> # ./local-gems/gem-home/gems/sequel-5.95.1/lib/sequel/database/transactions.rb:264:in 'Sequel::Database#_transaction'</span></span>
|
|
575
|
+
<span class="line"><span> # ./local-gems/gem-home/gems/sequel-5.95.1/lib/sequel/database/transactions.rb:239:in 'block in Sequel::Database#transaction'</span></span>
|
|
576
|
+
<span class="line"><span> # ./local-gems/gem-home/gems/sequel-5.95.1/lib/sequel/connection_pool/timed_queue.rb:90:in 'Sequel::TimedQueueConnectionPool#hold'</span></span>
|
|
577
|
+
<span class="line"><span> # ./local-gems/gem-home/gems/sequel-5.95.1/lib/sequel/database/connecting.rb:283:in 'Sequel::Database#synchronize'</span></span>
|
|
578
|
+
<span class="line"><span> # ./local-gems/gem-home/gems/sequel-5.95.1/lib/sequel/database/transactions.rb:197:in 'Sequel::Database#transaction'</span></span>
|
|
579
|
+
<span class="line"><span> # ./local-gems/gem-home/gems/brut-0.5.0/lib/brut/spec_support/rspec_setup.rb:156:in 'block in Brut::SpecSupport::RSpecSetup#setup!'</span></span>
|
|
580
|
+
<span class="line"><span></span></span>
|
|
581
|
+
<span class="line"><span>Finished in 0.54876 seconds (files took 0.73025 seconds to load)</span></span>
|
|
582
|
+
<span class="line"><span>1 example, 1 failure</span></span>
|
|
583
|
+
<span class="line"><span></span></span>
|
|
584
|
+
<span class="line"><span>Failed examples:</span></span>
|
|
585
|
+
<span class="line"><span></span></span>
|
|
586
|
+
<span class="line"><span>bin/test run ./specs/front_end/pages/home_page.spec.rb:4 # HomePage should show the blog posts</span></span>
|
|
587
|
+
<span class="line"><span></span></span>
|
|
588
|
+
<span class="line"><span>Randomized with seed 44491</span></span>
|
|
589
|
+
<span class="line"><span></span></span>
|
|
590
|
+
<span class="line"><span>[ bin/test ] error: ["bin/rspec -I /Users/davec/Projects/ThirdTank/brutcasts/01-make-a-blog/blog/specs -I /Users/davec/Projects/ThirdTank/brutcasts/01-make-a-blog/blog/app/src -I lib/ --tag ~e2e -P \\"**/*.spec.rb\\" \\"specs/front_end/pages/home_page.spec.rb\\""] failed - exited 1</span></span></code></pre></div><p>Brut obviously errs on the side of being verbose. But, you can see that the problem is that it cannot find an <code><article></code> with the <code>id=</code> of <code>blbl_6f04feaefb9520d86b19c3ac4ad22c4f</code>, the <code>external_id</code> of the first blog post.</p><p>To make it pass, we'll need to add <code>id:</code> to each <code><article></code>. Make this one-line change in <code>HomePage</code>:</p><div class="language-diff vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">diff</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#B31D28;--shiki-dark:#FDAEB7;">- article do</span></span>
|
|
591
|
+
<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">+ article(id: blog_post.external_id) do</span></span></code></pre></div><div class="tip custom-block github-alert"><p class="custom-block-title">TIP</p><p>This shows a useful feature of the <code>external_id</code>: Because it's not only unique to the database table, but also across <em>all</em> database tables, it makes a pretty good <code>ID</code> inside an HTML page, since it's highly unlikely any other part of the page would use that value for the <code>id=</code> of an element.</p></div><p>Now, the test 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;"> run</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> specs/front_end/pages/home_page.spec.rb</span></span></code></pre></div><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span># OUTPUT</span></span>
|
|
592
|
+
<span class="line"><span>[ bin/test ] Executing ["bin/rspec -I /Users/davec/Projects/ThirdTank/brutcasts/01-make-a-blog/blog/specs -I /Users/davec/Projects/ThirdTank/brutcasts/01-make-a-blog/blog/app/src -I lib/ --tag ~e2e -P \\"**/*.spec.rb\\" \\"specs/front_end/pages/home_page.spec.rb\\""]</span></span>
|
|
593
|
+
<span class="line"><span>Run options: exclude {e2e: true}</span></span>
|
|
594
|
+
<span class="line"><span></span></span>
|
|
595
|
+
<span class="line"><span>Randomized with seed 56951</span></span>
|
|
596
|
+
<span class="line"><span></span></span>
|
|
597
|
+
<span class="line"><span>HomePage</span></span>
|
|
598
|
+
<span class="line"><span> should show the blog posts</span></span>
|
|
599
|
+
<span class="line"><span></span></span>
|
|
600
|
+
<span class="line"><span>Finished in 0.53858 seconds (files took 0.69257 seconds to load)</span></span>
|
|
601
|
+
<span class="line"><span>1 example, 0 failures</span></span>
|
|
602
|
+
<span class="line"><span></span></span>
|
|
603
|
+
<span class="line"><span>Randomized with seed 56951</span></span>
|
|
604
|
+
<span class="line"><span></span></span>
|
|
605
|
+
<span class="line"><span>[ bin/test ] ["bin/rspec -I /Users/davec/Projects/ThirdTank/brutcasts/01-make-a-blog/blog/specs -I /Users/davec/Projects/ThirdTank/brutcasts/01-make-a-blog/blog/app/src -I lib/ --tag ~e2e -P \\"**/*.spec.rb\\" \\"specs/front_end/pages/home_page.spec.rb\\""] succeeded</span></span></code></pre></div><p>For <code>BlogPostEditorPage</code>, there really isn't anything to test - it's static HTML at this point. Even still, it's good to record a decision about testing code or not, so it's clear we didn't just forget. Brut provides the method <code>implementation_is_covered_by_other_tests</code> to do just that. It accepts a string where we can describe where the coverage for this class is.</p><p>In our case, it's going to be covered by an end-to-end test we'll write next.</p><p>Open up <code>specs/front_end/pages/blog_post_editor_page.spec.rb</code> and make it look like so:</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:#D73A49;--shiki-dark:#F97583;">require</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "spec_helper"</span></span>
|
|
606
|
+
<span class="line"></span>
|
|
607
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">RSpec</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">describe</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> BlogPostEditorPage</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> do</span></span>
|
|
608
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> implementation_is_covered_by_other_tests </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"end-to-end test"</span></span>
|
|
609
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span></code></pre></div><p>Now, all unit tests should pass, which we can check via <code>bin/test run</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/test</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> run</span></span></code></pre></div><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span># OUTPUT</span></span>
|
|
610
|
+
<span class="line"><span>[ bin/test ] Running all tests</span></span>
|
|
611
|
+
<span class="line"><span>[ bin/test ] Executing ["bin/rspec -I /Users/davec/Projects/ThirdTank/brutcasts/01-make-a-blog/blog/specs -I /Users/davec/Projects/ThirdTank/brutcasts/01-make-a-blog/blog/app/src -I lib/ --tag ~e2e -P \\"**/*.spec.rb\\" /Users/davec/Projects/ThirdTank/brutcasts/01-make-a-blog/blog/specs/"]</span></span>
|
|
612
|
+
<span class="line"><span>Run options: exclude {e2e: true}</span></span>
|
|
613
|
+
<span class="line"><span></span></span>
|
|
614
|
+
<span class="line"><span>Randomized with seed 63173</span></span>
|
|
615
|
+
<span class="line"><span>...........</span></span>
|
|
616
|
+
<span class="line"><span></span></span>
|
|
617
|
+
<span class="line"><span>Finished in 0.53248 seconds (files took 0.7012 seconds to load)</span></span>
|
|
618
|
+
<span class="line"><span>11 examples, 0 failures</span></span>
|
|
619
|
+
<span class="line"><span></span></span>
|
|
620
|
+
<span class="line"><span>Randomized with seed 63173</span></span>
|
|
621
|
+
<span class="line"><span></span></span>
|
|
622
|
+
<span class="line"><span>[ bin/test ] ["bin/rspec -I /Users/davec/Projects/ThirdTank/brutcasts/01-make-a-blog/blog/specs -I /Users/davec/Projects/ThirdTank/brutcasts/01-make-a-blog/blog/app/src -I lib/ --tag ~e2e -P \\"**/*.spec.rb\\" /Users/davec/Projects/ThirdTank/brutcasts/01-make-a-blog/blog/specs/"] succeeded</span></span></code></pre></div><p>As our last test, we'll write an end-to-end that uses a browser.</p><h3 id="writing-browser-end-to-end-tests" tabindex="-1">Writing Browser End-to-End Tests <a class="header-anchor" href="#writing-browser-end-to-end-tests" aria-label="Permalink to "Writing Browser End-to-End Tests""></a></h3><p>Browser tests are expensive and slow, but it's good to test entire workflows that catch issues that a unit test might not. In this case, we want to go through the steps of writing a blog post:</p><ol><li>Go to the post editor page and make sure client-side validations show us errors.</li><li>Submit a post that's too short and make sure server-side errors show up.</li><li>Submit a valid post and check that it makes it back to the home page.</li></ol><p>Brut uses <a href="https://playwright.dev/" target="_blank" rel="noreferrer">Playwright</a> to author end to end tests. Playwright is written in JavaScript, but there is a <a href="https://playwright-ruby-client.vercel.app/" target="_blank" rel="noreferrer">Ruby wrapper library</a> that alleviates us from having to worry about async/await style coding.</p><p>Ideally, we'd use the same API here as we do in our page tests. Or, equally ideally, we'd be able to use the API of the web platform. Playwright went a third way. Such is life.</p><p>The way this test will work is:</p><ol><li>Use <code>HomePage.routing</code> to kick everything off</li><li>Find a link to <code>BlogPostEditorPage.routing</code> on the page</li><li>Use Playwright's <code>page.locator</code> to find elements on the page to interact with (which will naturally wait for the page to load before doing so).</li><li>We'll use <code>fill</code> to fill in data for the form fields and <code>click</code> to submit the form by clicking the submit button.</li><li>The matcher <code>have_text</code> will be used assert that text appears inside an element.</li></ol><p>Brut provides the matcher <code>be_page_for</code> to assert that we are viewing the page we think we are. Nothing is more frustrating than watching assertions fail because your test ended up on the wrong page.</p><p>Open up <code>specs/e2e/home_page.spec.rb</code> and replace it with this:</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:#D73A49;--shiki-dark:#F97583;">require</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "spec_helper"</span></span>
|
|
623
|
+
<span class="line"></span>
|
|
624
|
+
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">RSpec</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">describe</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "Posting blog posts"</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> do</span></span>
|
|
625
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> it </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"allows posting a post"</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> do</span></span>
|
|
626
|
+
<span class="line"></span>
|
|
627
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> # 1. Go to the blog post editor page from the home page</span></span>
|
|
628
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> page.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">goto</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 style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">routing</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
629
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> new_post_link</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;">"a[href='</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">#{</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">BlogPostEditorPage</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">routing</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">']"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
630
|
+
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> new_post_link.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">click</span></span>
|
|
631
|
+
<span class="line"></span>
|
|
632
|
+
<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>
|
|
633
|
+
<span class="line"></span>
|
|
634
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> # 2. Provide data that violates client-side constraints and check for error messages</span></span>
|
|
635
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> title_field</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-form input[name='title']"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
636
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> content_field</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-form textarea[name='content']"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
637
|
+
<span class="line"></span>
|
|
638
|
+
<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;">"XX"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
639
|
+
<span class="line"></span>
|
|
640
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> submit_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-form button"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
641
|
+
<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>
|
|
642
|
+
<span class="line"></span>
|
|
643
|
+
<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>
|
|
644
|
+
<span class="line"></span>
|
|
645
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> title_error_message</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-cv-messages[input-name='title'] brut-cv"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
646
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> content_error_message</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-cv-messages[input-name='content'] brut-cv"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
647
|
+
<span class="line"></span>
|
|
648
|
+
<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>
|
|
649
|
+
<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>
|
|
650
|
+
<span class="line"></span>
|
|
651
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> # 3. Provide data that passes client-side constraints but violates server-side ones</span></span>
|
|
652
|
+
<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>
|
|
653
|
+
<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>
|
|
654
|
+
<span class="line"></span>
|
|
655
|
+
<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>
|
|
656
|
+
<span class="line"></span>
|
|
657
|
+
<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>
|
|
658
|
+
<span class="line"></span>
|
|
659
|
+
<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>
|
|
660
|
+
<span class="line"></span>
|
|
661
|
+
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> # 4. Provide a valid blog post</span></span>
|
|
662
|
+
<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>
|
|
663
|
+
<span class="line"></span>
|
|
664
|
+
<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>
|
|
665
|
+
<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>
|
|
666
|
+
<span class="line"></span>
|
|
667
|
+
<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>
|
|
668
|
+
<span class="line"></span>
|
|
669
|
+
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> article</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;">"article#</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">#{new_post.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">external_id</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
670
|
+
<span class="line"></span>
|
|
671
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> expect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(article).</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;">"New blog post"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
672
|
+
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> expect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(article).</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 is a longer post, so we should be OK"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
673
|
+
<span class="line"></span>
|
|
674
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> end</span></span>
|
|
675
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span></span></code></pre></div><p>Run it now with <code>bin/test e2e</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/test</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> e2e</span></span></code></pre></div><p>It should pass:</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span># OUTPUT</span></span>
|
|
676
|
+
<span class="line"><span>[ bin/test ] Rebuilding test database schema</span></span>
|
|
677
|
+
<span class="line"><span>[ bin/test ] Executing ["bin/db rebuild --env=test"]</span></span>
|
|
678
|
+
<span class="line"><span>[ bin/db ] Database exists. Dropping...</span></span>
|
|
679
|
+
<span class="line"><span>[ bin/db ] blog_test does not exit. Creating...</span></span>
|
|
680
|
+
<span class="line"><span>[ bin/db ] Migrations applied</span></span>
|
|
681
|
+
<span class="line"><span>[ bin/test ] ["bin/db rebuild --env=test"] succeeded</span></span>
|
|
682
|
+
<span class="line"><span>[ bin/test ] Running all tests</span></span>
|
|
683
|
+
<span class="line"><span>[ bin/test ] Executing ["bin/rspec -I /Users/davec/Projects/ThirdTank/brutcasts/01-make-a-blog/blog/specs -I /Users/davec/Projects/ThirdTank/brutcasts/01-make-a-blog/blog/app/src -I lib/ --tag e2e -P \\"**/*.spec.rb\\" /Users/davec/Projects/ThirdTank/brutcasts/01-make-a-blog/blog/specs/"]</span></span>
|
|
684
|
+
<span class="line"><span>Run options: include {e2e: true}</span></span>
|
|
685
|
+
<span class="line"><span></span></span>
|
|
686
|
+
<span class="line"><span>Randomized with seed 27681</span></span>
|
|
687
|
+
<span class="line"><span>[ bin/test-server ] Building assets</span></span>
|
|
688
|
+
<span class="line"><span>«TONS OF OUTPUT»</span></span>
|
|
689
|
+
<span class="line"><span>[ bin/test-server ] Starting server</span></span>
|
|
690
|
+
<span class="line"><span>[ bin/run ] No pidfile-Starting up</span></span>
|
|
691
|
+
<span class="line"><span>[3352] Configuration:</span></span>
|
|
692
|
+
<span class="line"><span>«TONS OF OUTPUT»</span></span>
|
|
693
|
+
<span class="line"><span>[3352] Use Ctrl-C to stop</span></span>
|
|
694
|
+
<span class="line"><span>[3352] - Worker 0 (PID: 3361) booted in 0.0s, phase: 0</span></span>
|
|
695
|
+
<span class="line"><span>[3352] - Worker 1 (PID: 3364) booted in 0.0s, phase: 0</span></span>
|
|
696
|
+
<span class="line"><span>.[3352] === puma shutdown: 2025-08-11 22:18:16 +0000 ===</span></span>
|
|
697
|
+
<span class="line"><span>[3352] - Goodbye!</span></span>
|
|
698
|
+
<span class="line"><span>[3352] - Gracefully shutting down workers...</span></span>
|
|
699
|
+
<span class="line"><span></span></span>
|
|
700
|
+
<span class="line"><span></span></span>
|
|
701
|
+
<span class="line"><span>Finished in 3.45 seconds (files took 0.69401 seconds to load)</span></span>
|
|
702
|
+
<span class="line"><span>1 example, 0 failures</span></span>
|
|
703
|
+
<span class="line"><span></span></span>
|
|
704
|
+
<span class="line"><span>Randomized with seed 27681</span></span>
|
|
705
|
+
<span class="line"><span></span></span>
|
|
706
|
+
<span class="line"><span>[ bin/test ] ["bin/rspec -I /Users/davec/Projects/ThirdTank/brutcasts/01-make-a-blog/blog/specs -I /Users/davec/Projects/ThirdTank/brutcasts/01-make-a-blog/blog/app/src -I lib/ --tag e2e -P \\"**/*.spec.rb\\" /Users/davec/Projects/ThirdTank/brutcasts/01-make-a-blog/blog/specs/"] succeeded</span></span>
|
|
707
|
+
<span class="line"><span>[ bin/test ] Re-Rebuilding test database schema</span></span>
|
|
708
|
+
<span class="line"><span>[ bin/test ] Executing ["bin/db rebuild --env=test"]</span></span>
|
|
709
|
+
<span class="line"><span>[ bin/db ] Database exists. Dropping...</span></span>
|
|
710
|
+
<span class="line"><span>[ bin/db ] blog_test does not exit. Creating...</span></span>
|
|
711
|
+
<span class="line"><span>[ bin/db ] Migrations applied</span></span>
|
|
712
|
+
<span class="line"><span>[ bin/test ] ["bin/db rebuild --env=test"] succeeded</span></span></code></pre></div><p>With that test done, <code>bin/ci</code>, which we ran at the start, should run all tests, plus check for CVEs in our installed gems.</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/ci</span></span></code></pre></div><p>It should also pass:</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span># OUTPUT</span></span>
|
|
713
|
+
<span class="line"><span>«TONS OF OUTPUT»</span></span>
|
|
714
|
+
<span class="line"><span>[ bin/ci ] Analyzing Ruby gems for</span></span>
|
|
715
|
+
<span class="line"><span>[ bin/ci ] security vulnerabilities</span></span>
|
|
716
|
+
<span class="line"><span>Updating ruby-advisory-db ...</span></span>
|
|
717
|
+
<span class="line"><span>From https://github.com/rubysec/ruby-advisory-db</span></span>
|
|
718
|
+
<span class="line"><span> * branch master -> FETCH_HEAD</span></span>
|
|
719
|
+
<span class="line"><span>Already up to date.</span></span>
|
|
720
|
+
<span class="line"><span>Updated ruby-advisory-db</span></span>
|
|
721
|
+
<span class="line"><span>ruby-advisory-db:</span></span>
|
|
722
|
+
<span class="line"><span> advisories: 998 advisories</span></span>
|
|
723
|
+
<span class="line"><span> last updated: 2025-08-08 10:26:18 -0700</span></span>
|
|
724
|
+
<span class="line"><span> commit: 43149b540b701c9683e402fcd7fa4e5b6e5b60e9</span></span>
|
|
725
|
+
<span class="line"><span>No vulnerabilities found</span></span>
|
|
726
|
+
<span class="line"><span>[ bin/ci ] Checking to see that all classes have tests</span></span>
|
|
727
|
+
<span class="line"><span>[ bin/test ] All tests exists!</span></span>
|
|
728
|
+
<span class="line"><span>[ bin/ci ] Done</span></span></code></pre></div><p>That's it!</p><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><p>Here are a few enhancement you can try to make:</p><ul><li>Create a client-side constraint requiring the title to match a certain regexp.</li><li>Add a server-side constraint requiring at least two paragraphs.</li><li>Allow editing the blog post creation date</li><li>Add an author field to allow entering the author's name</li><li>Add pagination to the home page</li></ul>`,358)]))}const f=a(E,[["render",u]]);export{B as __pageData,f as default};
|