diff --git a/docusaurus.config.js b/docusaurus.config.js index cec310774..ef00810f4 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -1,8 +1,8 @@ //@ts-check -import {themes as prismThemes} from "prism-react-renderer"; +import { themes as prismThemes } from "prism-react-renderer"; const path = require("path"); -import {visit} from "unist-util-visit"; +import { visit } from "unist-util-visit"; const FontPreloadPlugin = require("webpack-font-preload-plugin"); /** @type {import('@docusaurus/types').DocusaurusConfig} */ @@ -50,7 +50,7 @@ module.exports = { content: "API testing, Keploy docs, incident replay, network calls, code paths, test scenarios, code coverage, stubs, junit, go-test, live environment, production incidents, open source, regression tests, ai tests", }, - {name: "twitter:card", content: "summary_large_image"}, + { name: "twitter:card", content: "summary_large_image" }, ], headTags: [ // Preconnect tag @@ -343,11 +343,12 @@ module.exports = { theme: { customCss: require.resolve("./src/css/custom.css"), }, - gtag: { + // Only enable gtag in production to avoid window.gtag errors in local dev + gtag: !(process.env.NODE_ENV === 'development') ? { trackingID: "G-LLS95VWZPC", // Optional fields. anonymizeIP: true, // Should IPs be anonymized? - }, + } : undefined, // Will be passed to @docusaurus/plugin-content-sitemap sitemap: { // Per v2.0.0-alpha.72 cacheTime is now deprecated diff --git a/pr_description.md b/pr_description.md new file mode 100644 index 000000000..6977ae321 --- /dev/null +++ b/pr_description.md @@ -0,0 +1,22 @@ +## Description +This PR adds a new Quickstart guide for **Ruby (Sinatra + PostgreSQL)**. + +It includes: +- A new guide: `samples-sinatra-postgres.md` +- Updates to `QuickStartFilter.js` to include Ruby language support. +- Updates to `QuickStartList.js` to list the new quickstart. +- Sidebar updates in `version-4.0.0-sidebars.json`. +- Terminal screenshots for both Docker and local setups. + +## Related Issue +Fixes #3521 + +## Checklist +- [x] Documentation build passes (`npm run build`) +- [x] Added new language to `QuickStartFilter.js` +- [x] Added configuration for the new quickstart in `QuickStartList.js` +- [x] Added screenshots for commands (Record, Test, API calls) +- [x] Verified links and formatting + +## Sample Code +The sample application code is available at: [Atul-Chahar/samples-ruby](https://github.com/Atul-Chahar/samples-ruby/tree/master/sinatra-postgres) diff --git a/src/components/QuickStartFilter.js b/src/components/QuickStartFilter.js index 8e86dfe54..0633441c0 100644 --- a/src/components/QuickStartFilter.js +++ b/src/components/QuickStartFilter.js @@ -1,14 +1,15 @@ -import React, {useState} from "react"; +import React, { useState } from "react"; import quickstarts from "./QuickStartList"; import Link from "@docusaurus/Link"; -import {FaGolang} from "react-icons/fa6"; -import {FaJava, FaLaptopCode, FaDocker, FaPython, FaCheck, FaArrowRight, FaArrowLeft} from "react-icons/fa"; -import {TbBrandCSharp} from "react-icons/tb"; -import {IoLogoJavascript} from "react-icons/io5"; -import {useColorMode} from "@docusaurus/theme-common"; +import { FaGolang } from "react-icons/fa6"; +import { FaJava, FaLaptopCode, FaDocker, FaPython, FaCheck, FaArrowRight, FaArrowLeft } from "react-icons/fa"; +import { TbBrandCSharp } from "react-icons/tb"; +import { DiRuby } from "react-icons/di"; +import { IoLogoJavascript } from "react-icons/io5"; +import { useColorMode } from "@docusaurus/theme-common"; -export default function QuickstartFilter({defaultLanguage = null}) { - const {colorMode} = useColorMode(); +export default function QuickstartFilter({ defaultLanguage = null }) { + const { colorMode } = useColorMode(); const isDark = colorMode === "dark"; const [currentStep, setCurrentStep] = useState(defaultLanguage ? 2 : 1); @@ -23,22 +24,23 @@ export default function QuickstartFilter({defaultLanguage = null}) { }); const languages = [ - {name: "Go", icon: , color: "#00ADD8"}, - {name: "Python", icon: , color: "#3776AB"}, - {name: "Java", icon: , color: "#007396"}, - {name: "JS/TS", icon: , color: "#F7DF1E"}, - {name: "C#", icon: , color: "#512BD4"}, + { name: "Go", icon: , color: "#00ADD8" }, + { name: "Python", icon: , color: "#3776AB" }, + { name: "Java", icon: , color: "#007396" }, + { name: "JS/TS", icon: , color: "#F7DF1E" }, + { name: "C#", icon: , color: "#512BD4" }, + { name: "Ruby", icon: , color: "#CC342D" }, ]; const servers = [ - {name: "Local", icon: , description: "Run directly on your machine"}, - {name: "Docker", icon: , description: "Run in a Docker container"}, + { name: "Local", icon: , description: "Run directly on your machine" }, + { name: "Docker", icon: , description: "Run in a Docker container" }, ]; const steps = [ - {id: 1, label: "Language", icon: languages.find(l => l.name === language)?.icon || null}, - {id: 2, label: "Environment", icon: server === "Docker" ? : server === "Local" ? : null}, - {id: 3, label: "Quickstart", icon: null}, + { id: 1, label: "Language", icon: languages.find(l => l.name === language)?.icon || null }, + { id: 2, label: "Environment", icon: server === "Docker" ? : server === "Local" ? : null }, + { id: 3, label: "Quickstart", icon: null }, ]; const handleLanguageSelect = (lang) => { @@ -372,10 +374,10 @@ export default function QuickstartFilter({defaultLanguage = null}) { {step.label} {currentStep > step.id && step.id === 1 && language && ( - ({language}) + ({language}) )} {currentStep > step.id && step.id === 2 && server && ( - ({server}) + ({server}) )} {idx < steps.length - 1 && ( @@ -402,7 +404,7 @@ export default function QuickstartFilter({defaultLanguage = null}) {
{language === lang.name && }
-
+
{lang.icon}
{lang.name} @@ -417,15 +419,15 @@ export default function QuickstartFilter({defaultLanguage = null}) { <>

Select your environment

Choose where you want to run the application server

-
+
{servers.map((srv) => ( ))}
diff --git a/src/components/QuickStartList.js b/src/components/QuickStartList.js index 17f9e6e03..c9d8ca528 100644 --- a/src/components/QuickStartList.js +++ b/src/components/QuickStartList.js @@ -395,6 +395,26 @@ const quickstarts = [ "A sample app to demonstrate Keploy integration capabilities using TypeScript and Nhost.", link: "/docs/quickstart/samples-typescript/#running-the-app-using-docker", }, + + // Ruby list + + { + title: "Sinatra + Postgres", + language: "Ruby", + server: "Docker", + description: + "A sample User CRUD app to demonstrate how seamlessly Keploy integrates with Sinatra and PostgreSQL.", + link: "/docs/quickstart/samples-sinatra-postgres/#using-docker-compose-", + }, + { + title: "Sinatra + Postgres", + language: "Ruby", + server: "Local", + description: + "A sample User CRUD app to demonstrate how seamlessly Keploy integrates with Sinatra and PostgreSQL.", + link: "/docs/quickstart/samples-sinatra-postgres/#running-app-locally-on-linuxwsl-", + }, + ]; export default quickstarts; diff --git a/static/img/sinatra-postgres/bundle-install.png b/static/img/sinatra-postgres/bundle-install.png new file mode 100644 index 000000000..259467e13 Binary files /dev/null and b/static/img/sinatra-postgres/bundle-install.png differ diff --git a/static/img/sinatra-postgres/generate-testcases-local.png b/static/img/sinatra-postgres/generate-testcases-local.png new file mode 100644 index 000000000..ebf1f6288 Binary files /dev/null and b/static/img/sinatra-postgres/generate-testcases-local.png differ diff --git a/static/img/sinatra-postgres/generate-testcases-sinatra.png b/static/img/sinatra-postgres/generate-testcases-sinatra.png new file mode 100644 index 000000000..dda6e53fa Binary files /dev/null and b/static/img/sinatra-postgres/generate-testcases-sinatra.png differ diff --git a/static/img/sinatra-postgres/keploy-record-local.png b/static/img/sinatra-postgres/keploy-record-local.png new file mode 100644 index 000000000..2e3c7e8c6 Binary files /dev/null and b/static/img/sinatra-postgres/keploy-record-local.png differ diff --git a/static/img/sinatra-postgres/keploy-record-sinatra.png b/static/img/sinatra-postgres/keploy-record-sinatra.png new file mode 100644 index 000000000..fb367f3ed Binary files /dev/null and b/static/img/sinatra-postgres/keploy-record-sinatra.png differ diff --git a/static/img/sinatra-postgres/keploy-test-local.png b/static/img/sinatra-postgres/keploy-test-local.png new file mode 100644 index 000000000..ca559e0fe Binary files /dev/null and b/static/img/sinatra-postgres/keploy-test-local.png differ diff --git a/static/img/sinatra-postgres/keploy-test-sinatra.png b/static/img/sinatra-postgres/keploy-test-sinatra.png new file mode 100644 index 000000000..dd88dace9 Binary files /dev/null and b/static/img/sinatra-postgres/keploy-test-sinatra.png differ diff --git a/versioned_docs/version-4.0.0/quickstart/samples-sinatra-postgres.md b/versioned_docs/version-4.0.0/quickstart/samples-sinatra-postgres.md new file mode 100644 index 000000000..aaa361871 --- /dev/null +++ b/versioned_docs/version-4.0.0/quickstart/samples-sinatra-postgres.md @@ -0,0 +1,179 @@ +--- +id: samples-sinatra-postgres +title: Sample User CRUD App (Sinatra + Postgres) +sidebar_label: Sinatra + Postgres +description: A sample User CRUD application built with Ruby Sinatra and PostgreSQL to demonstrate how Keploy records API calls and database interactions automatically. +tags: + - sinatra + - ruby + - quickstart + - samples + - examples + - tutorial + - ruby-framework + - postgresql +keyword: + - Sinatra Framework + - Ruby + - PostgreSQL + - API Test generator + - Auto case generation +--- + +import ProductTier from '@site/src/components/ProductTier'; + + + +Get started with the User CRUD Application. + +import Link from '@docusaurus/Link' +import EnterpriseInstallReminder from '@site/src/components/EnterpriseInstallReminder'; + + + +### Get Started + +### Clone the application + +```bash +git clone https://github.com/keploy/samples-ruby.git && cd samples-ruby/sinatra-postgres +``` + +### Capture the test cases + +Capture the test cases: + +```shell +keploy record -c "docker compose up" --container-name "sinatra-app" --buildDelay 50 +``` + +![Keploy Record Sinatra](/img/sinatra-postgres/keploy-record-sinatra.png) + +### Generate testcases + +To generate testcases we need to make some API calls. Open a **new terminal window** and run the following commands: + +1. **Health check:** + +```bash +curl http://localhost:4567/ +``` + +2. **Create a user:** + +```bash +curl -X POST http://localhost:4567/users \ +-H "Content-Type: application/json" \ +-d '{"name": "John Doe", "email": "john@example.com"}' +``` + +3. **Create another user:** + +```bash +curl -X POST http://localhost:4567/users \ +-H "Content-Type: application/json" \ +-d '{"name": "Jane Smith", "email": "jane@example.com"}' +``` + +4. **Get all users:** + +```bash +curl http://localhost:4567/users +``` + +5. **Get a specific user:** + +```bash +curl http://localhost:4567/users/1 +``` + +6. **Delete a user:** + +```bash +curl -X DELETE http://localhost:4567/users/2 +``` + +![Generate Testcases Sinatra](/img/sinatra-postgres/generate-testcases-sinatra.png) + +Once you are done, you can stop the recording in the first terminal (Ctrl+C). Keploy will save the test cases in the `keploy` directory. + +### Run the testcases + +```bash +keploy test -c "docker compose up" --containerName "sinatra-app" --delay 10 +``` + +![Keploy Test Sinatra](/img/sinatra-postgres/keploy-test-sinatra.png) + +You can also check the test summary from your CLI. + +## Running App Locally on Linux/WSL + +### Prerequisites + +- Ruby 3.0+ installed +- PostgreSQL installed and running +- Keploy installed + +### Setup + +1. **Start PostgreSQL Container:** + +Since we are running the app locally, we need a database. We can spin up a PostgreSQL container easily: + +```bash +docker run -d \ + --name postgres-local \ + -p 5432:5432 \ + -e POSTGRES_PASSWORD=postgres \ + -e POSTGRES_DB=keploy_demo \ + postgres:15 +``` + +2. **Install dependencies:** + +```bash +bundle install +``` + +![Bundle Install Sinatra](/img/sinatra-postgres/bundle-install.png) + + +3. **Set up environment variables:** + +Note: We use `127.0.0.1` instead of `localhost` to ensure IPv4 connection. + +```bash +export DATABASE_HOST=127.0.0.1 +export DATABASE_PORT=5432 +export DATABASE_NAME=keploy_demo +export DATABASE_USER=postgres +export DATABASE_PASSWORD=postgres +``` + +### Record Test Cases + +```bash +keploy record -c "bundle exec ruby app.rb" +``` + +![Keploy Record Local](/img/sinatra-postgres/keploy-record-local.png) + +Then make API calls as shown above (in a separate terminal). + +![Generate Testcases Local](/img/sinatra-postgres/generate-testcases-local.png) + + + +### Run Tests + +```bash +keploy test -c "bundle exec ruby app.rb" --delay 5 +``` + +![Keploy Test Local](/img/sinatra-postgres/keploy-test-local.png) + + +### Conclusion + +You have successfully recorded and replayed API tests for a Ruby Sinatra application using Keploy. diff --git a/versioned_sidebars/version-4.0.0-sidebars.json b/versioned_sidebars/version-4.0.0-sidebars.json index 6399724df..b04c6f541 100644 --- a/versioned_sidebars/version-4.0.0-sidebars.json +++ b/versioned_sidebars/version-4.0.0-sidebars.json @@ -118,6 +118,15 @@ "items": [ "quickstart/samples-csharp" ] + }, + { + "type": "category", + "label": "Ruby", + "collapsible": true, + "collapsed": true, + "items": [ + "quickstart/samples-sinatra-postgres" + ] } ] },