- Update links in documentation to remove file extensions for consistency

- Add new tests documentation page with detailed structure and examples
- Refactor JsonYamlTabs component to use Docusaurus components for better integration

Author: hawkeyexl

docs/get-started/concepts.md

@@ -12,7 +12,7 @@ A [test specification](/docs/references/schemas/specification) is a group of tes
 
 ## Test
 
-A [test](/docs/get-started/tests/index.md) is a sequence of steps to perform. Conceptually parallel to a procedure.
+A [test](/docs/get-started/tests/index) is a sequence of steps to perform. Conceptually parallel to a procedure.
 
 ## Step
 
@@ -24,23 +24,23 @@ An action is the task performed in a step. Doc Detective supports a variety of a
 
 | Name                                                        | Description                                                                                                                                               |
 | :---------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [checkLink](/docs/get-started/actions/checkLink.md)         | Check if a URL returns an acceptable status code from a GET request.                                                                                      |
-| [find](/docs/get-started/actions/find.md)                   | Locate and interact with an element on the page.                                                                                                          |
-| [click](/docs/get-started/actions/click.md)                 | Click an element.                                                                                                                                         |
-| [goTo](/docs/get-started/actions/goTo.md)                   | Navigate to a specified URL.                                                                                                                              |
-| [httpRequest](/docs/get-started/actions/httpRequest.md)     | Perform a generic HTTP request, for example to an API.                                                                                                    |
-| [runShell](/docs/get-started/actions/runShell.md)           | Perform a native shell command.                                                                                                                           |
-| [screenshot](/docs/get-started/actions/screenshot.md)       | Take a screenshot in PNG format.                                                                                                                          |
-| [loadVariables](/docs/get-started/actions/loadVariables.md) | Load environment variables from a `.env` file.                                                                                                            |
-| [record](/docs/get-started/actions/record.md)               | Capture a video of test run.                                                                                                                              |
-| [stopRecord](/docs/get-started/actions/stopRecord.md)       | Stop capturing a video of test run.                                                                                                                       |
-| [type](/docs/get-started/actions/type.md)                   | Type keys. To type special keys, begin and end the string with `$` and use the special key’s enum. For example, to type the Escape key, enter `$ESCAPE$`. |
-| [wait](/docs/get-started/actions/wait.md)                   | Pause before performing the next action.                                                                                                                  |
+| [checkLink](/docs/get-started/actions/checkLink)         | Check if a URL returns an acceptable status code from a GET request.                                                                                      |
+| [find](/docs/get-started/actions/find)                   | Locate and interact with an element on the page.                                                                                                          |
+| [click](/docs/get-started/actions/click)                 | Click an element.                                                                                                                                         |
+| [goTo](/docs/get-started/actions/goTo)                   | Navigate to a specified URL.                                                                                                                              |
+| [httpRequest](/docs/get-started/actions/httpRequest)     | Perform a generic HTTP request, for example to an API.                                                                                                    |
+| [runShell](/docs/get-started/actions/runShell)           | Perform a native shell command.                                                                                                                           |
+| [screenshot](/docs/get-started/actions/screenshot)       | Take a screenshot in PNG format.                                                                                                                          |
+| [loadVariables](/docs/get-started/actions/loadVariables) | Load environment variables from a `.env` file.                                                                                                            |
+| [record](/docs/get-started/actions/record)               | Capture a video of test run.                                                                                                                              |
+| [stopRecord](/docs/get-started/actions/stopRecord)       | Stop capturing a video of test run.                                                                                                                       |
+| [type](/docs/get-started/actions/type)                   | Type keys. To type special keys, begin and end the string with `$` and use the special key’s enum. For example, to type the Escape key, enter `$ESCAPE$`. |
+| [wait](/docs/get-started/actions/wait)                   | Pause before performing the next action.                                                                                                                  |
 
 ## Context
 
-A [context](/docs/references/schemas/context.md) consists of an application and platforms that support the tests.
+A [context](/docs/references/schemas/context) consists of an application and platforms that support the tests.
 
 ## Next steps
 
-- [Create your first test](/docs/get-started/create-your-first-test.md)
+- [Create your first test](/docs/get-started/create-your-first-test)

docs/get-started/create-your-first-test.md

@@ -8,7 +8,7 @@ In this tutorial, you will create a basic test that navigates to a webpage, vali
 
 ## What is a test?
 
-A [test](/docs/get-started/tests/index.md) in Doc Detective is a series of steps, where each step performs a single [action](/docs/category/actions). An action can be navigating to a URL, finding an element, or taking a screenshot, for example.
+A [test](/docs/get-started/tests/index) in Doc Detective is a series of steps, where each step performs a single [action](/docs/category/actions). An action can be navigating to a URL, finding an element, or taking a screenshot, for example.
 
 ## What does this test do?
 
@@ -18,7 +18,7 @@ This test navigates to `https://example.com`, checks for the presence of the `<h
 
 Before you begin, ensure you have the following:
 
-- [Doc Detective installed](/docs/get-started/installation.md).
+- [Doc Detective installed](/docs/get-started/installation).
 - A text editor.
 
 ## Steps
@@ -68,10 +68,10 @@ To create your first test, follow these steps:
 
    This test uses the following actions:
 
-   - [`goTo`](/docs/get-started/actions/goTo.md): Navigates to the specified URL, https://example.com, to start the test flow.
-   - [`find`](/docs/get-started/actions/find.md): Locates elements on the page using CSS selectors such as HTML tags like `h1` or `a`, and validates their presence and text content.
-   - [`click`](/docs/get-started/actions/click.md): Clicks on the specified element, in this case, the `More information...` link.
-   - [`screenshot`](/docs/get-started/actions/screenshot.md): Captures a screenshot of the current page and saves it to the specified path.
+   - [`goTo`](/docs/get-started/actions/goTo): Navigates to the specified URL, https://example.com, to start the test flow.
+   - [`find`](/docs/get-started/actions/find): Locates elements on the page using CSS selectors such as HTML tags like `h1` or `a`, and validates their presence and text content.
+   - [`click`](/docs/get-started/actions/click): Clicks on the specified element, in this case, the `More information...` link.
+   - [`screenshot`](/docs/get-started/actions/screenshot): Captures a screenshot of the current page and saves it to the specified path.
 
 4. Save the file.
 

docs/get-started/tests/index.md renamed to docs/get-started/tests/index.mdx

@@ -3,6 +3,8 @@ sidebar_position: 4
 description: Tests tell Doc Detective what actions to perform, how, and where.
 ---
 
+import JsonYamlTabs from "@site/src/components/JsonYamlTabs";
+
 # Tests
 
 > Want help writing your test steps? Check out the [Action Builder prototype](/app).
@@ -36,29 +38,26 @@ You can define test specs in multiple ways:
 - [Inline JSON](#inline-json) allows you to define tests directly in your documentation source files.
 - [Detected tests](#detected-tests) are automatically generated by Doc Detective based on your documentation source files and your configuration.
 
-### Standalone JSON
+### Standalone JSON or YAML
 
-Test specs in standalone JSON files use the following basic structure:
+Test specs in standalone JSON or YAML files use the following basic structure:
 
-```json
-{
-  "specId": "spec-id",
-  "description": "Spec Description",
-  "tests": [
+{<JsonYamlTabs object={{
+  specId: "spec-id",
+  description: "Spec Description",
+  tests: [
     {
-      "testId": "test-id",
-      "description": "Test Description",
-      "steps": [
+      testId: "test-id",
+      description: "Test Description",
+      steps: [
         {
-          "stepId": "step-id",
-          "description": "Step Description"
-          // Additional step properties, such as find, goTo, httpRequest, etc.
+          stepId: "step-id",
+          description: "Step description. This object also needs additional step properties like `find`, `goTo`, or `httpRequest`."
         }
       ]
     }
   ]
-}
-```
+}}></JsonYamlTabs>}
 
 > For comprehensive options, see [`specification`](/docs/references/schemas/specification).
 
@@ -118,6 +117,7 @@ If you declare a step without declaring a test, Doc Detective automatically crea
 Doc Detective supports different comment patterns depending on your file type:
 
 **Markdown files** (`.md`, `.markdown`, `.mdx`):
+
 - JSX-style comments: `{/* test { "testId": "my-test" } */}`
 - HTML comments: `<!-- test { "testId": "my-test" } -->`
 - Markdown link comments: `[comment]: # (test { "testId": "my-test" })`
@@ -126,12 +126,14 @@ Doc Detective supports different comment patterns depending on your file type:
 - Ignore blocks: `{/* test ignore start */}` and `{/* test ignore end */}`
 
 **HTML files** (`.html`, `.htm`):
+
 - Test comments: `<!-- test { "testId": "my-test" } -->`
 - Step comments: `<!-- step { "goTo": "https://example.com" } -->`
 - Test end: `<!-- test end -->`
 - Ignore blocks: `<!-- test ignore start -->` and `<!-- test ignore end -->`
 
 **AsciiDoc files** (`.adoc`, `.asciidoc`, `.asc`):
+
 - Line comments: `// (test { "testId": "my-test" })`
 - Step comments: `// (step { "goTo": "https://example.com" })`
 - Test end: `// (test end)`
@@ -165,30 +167,21 @@ To search for American Shorthair kittens,
 Here's the same example using **YAML syntax** in Markdown:
 
 ```markdown
-{/* test testId: kitten-search */}
+{/_ test testId: kitten-search _/}
 
 To search for American Shorthair kittens,
 
 1. Go to [Google](https://www.google.com).
 
-   {/* step goTo: https://www.google.com */}
+   {/_ step goTo: https://www.google.com _/}
 
 2. In the search bar, enter "American Shorthair kittens", then press Enter.
 
-   {/* step find:
-              selector: "[title=Search]"
-              click: true 
-   */}
-   {/* step type:
-              - "American Shorthair kittens"
-              - "$ENTER$"
-   */}
-   {/* step wait: 5000 */}
+   {/_ step find: selector: "[title=Search]" click: true _/} {/_ step type: - "American Shorthair kittens" - "$ENTER$" _/} {/_ step wait: 5000 _/}
 
 ![Search results](search-results.png)
 
-{/* step screenshot: search-results.png */}
-{/* test end */}
+{/_ step screenshot: search-results.png _/} {/_ test end _/}
 ```
 
 **HTML example**:
@@ -229,7 +222,7 @@ Detected tests are useful for keeping your tests in sync with your documentation
 
 Doc Detective includes several default markup patterns for Markdown files. Here are all the built-in patterns:
 
-```json
+````json
 {
   "fileTypes": [
     {
@@ -311,48 +304,54 @@ Doc Detective includes several default markup patterns for Markdown files. Here
     }
   ]
 }
-```
+````
 
 #### Default markup pattern descriptions
 
 **checkHyperlink**: Detects standard Markdown links (excluding images) and checks that they return a valid HTTP status code.
+
 - Pattern: `[link text](https://example.com)`
 - Action: Performs a GET request to verify the link is accessible
 
 **clickOnscreenText**: Detects action verbs followed by bold text and clicks on that element.
+
 - Pattern: `Click **Button Name**`, `Tap **Menu Item**`, `Select **Option**`
 - Action: Clicks on the specified element using its text content
 
 **findOnscreenText**: Detects any bold text and verifies it exists on the page.
+
 - Pattern: `**Any Bold Text**`
 - Action: Searches for the text on the current page
 
 **goToUrl**: Detects navigation instructions with links and opens the URL.
+
 - Pattern: `Go to [Page Name](https://example.com)`, `Navigate to [Site](https://example.com)`
 - Action: Opens the specified URL in the browser
 
 **screenshotImage**: Detects images with a `.screenshot` class or attribute and takes a screenshot.
+
 - Pattern: `![Alt text](image.png){.screenshot}`
 - Action: Saves a screenshot to the specified path
 
 **typeText**: Detects typing instructions with quoted text and types the content.
+
 - Pattern: `Type "Hello World"`, `Enter "username"`
 - Action: Types the specified text into the active element
 
 **httpRequestFormat**: Detects HTTP request code blocks and executes the request.
+
 - Pattern: HTTP request in code blocks with method, URL, headers, and body
 - Action: Executes the HTTP request with the specified parameters
 
 **runCode**: Detects code blocks in supported languages and executes the code.
+
 - Pattern: Code blocks with `bash`, `python`, `py`, `javascript`, or `js` language tags (excluding those marked with `testIgnore`)
 - Action: Executes the code in the specified language (marked as unsafe)
 
 The `regex` property defines the regular expression patterns to match, and the `actions` property defines the actions to perform when the pattern is detected. With the default configuration, Doc Detective would take the following Markdown and generate tests automatically:
 
 Markdown:
 
-<!-- test-start {"detectSteps":false} -->
-
 ```markdown
 To get started,
 
@@ -365,8 +364,6 @@ Check out our [documentation](https://docs.example.com) for more information.
 ![Search results](search-results.png){ .screenshot }
 ```
 
-<!-- test-end -->
-
 Detected tests:
 
 ```json
@@ -429,11 +426,13 @@ You can extend or override the default patterns by defining custom markup patter
 Doc Detective also includes default configurations for HTML and AsciiDoc files, though these only include inline statement patterns for test definitions and don't include markup patterns for detected tests:
 
 **HTML files** (`.html`, `.htm`):
+
 - Uses HTML comment syntax for inline test statements
 - Example: `<!-- test { "testId": "my-test" } -->`
 
 **AsciiDoc files** (`.adoc`, `.asciidoc`, `.asc`):
-- Uses AsciiDoc comment syntax for inline test statements  
+
+- Uses AsciiDoc comment syntax for inline test statements
 - Example: `// (test { "testId": "my-test" })`
 
 To add detected test functionality to HTML or AsciiDoc files, you would need to define custom markup patterns in your configuration similar to the Markdown examples above.

src/components/JsonYamlTabs/index.jsx

@@ -1,28 +1,27 @@
-import React, { useState } from 'react';
-import { Tabs, Tab } from 'react-bootstrap';
-import yaml from 'yaml';
+import React, { useState } from "react";
+import yaml from "yaml";
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import CodeBlock from "@theme/CodeBlock";
 
-const JsonYamlTabs = ({ jsonInput }) => {
-    const [yamlOutput, setYamlOutput] = useState('');
-
-    const handleTabSelect = (key) => {
-        if (key === 'yaml') {
-            const parsedJson = JSON.parse(jsonInput);
-            const yamlString = yaml.stringify(parsedJson);
-            setYamlOutput(yamlString);
-        }
-    };
-// Change to use Docusaurus code block
-    return (
-        <Tabs defaultActiveKey="json" onSelect={handleTabSelect}>
-            <Tab eventKey="json" title="JSON">
-                <pre>{jsonInput}</pre>
-            </Tab>
-            <Tab eventKey="yaml" title="YAML">
-                <pre>{yamlOutput}</pre>
-            </Tab>
-        </Tabs>
-    );
+const JsonYamlTabs = ({ object }) => {
+  const jsonInput = JSON.stringify(object, null, 2);
+  const yamlOutput = yaml.stringify(object, { lineWidth: -1 });
+  // Change to use Docusaurus code block
+  return (
+    <Tabs defaultValue="json">
+      <TabItem value="json" label="JSON">
+        <CodeBlock language="json" showLineNumbers>
+          {jsonInput}
+        </CodeBlock>
+      </TabItem>
+      <TabItem value="yaml" label="YAML">
+        <CodeBlock language="yaml" showLineNumbers>
+          {yamlOutput}
+        </CodeBlock>
+      </TabItem>
+    </Tabs>
+  );
 };
 
-export default JsonYamlTabs;
+export default JsonYamlTabs;