> ## Documentation Index
> Fetch the complete documentation index at: https://trydent.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Contributing Guidelines

Thank you for your interest in contributing to Trydent! We welcome and appreciate contributions from the community. This document outlines the guidelines to follow when contributing to the project.

## Installation: Manual

1. Ensure you have the required prerequisites installed:
   * [npm](https://www.npmjs.com/) *(version 9.5.1 or higher)*
   * [Google Chrome](https://www.google.com/chrome/) *(version 112.0 or higher)*
2. Fork the Trydent repository to your own GitHub account.
3. Clone your forked repository to your local machine:

```bash theme={null}
git clone https://github.com/<your-github-username>/trydent.git
```

4. Navigate to the root project directory and install dependencies:

```bash theme={null}
cd trydent
npm install
```

5. Navigate to the client directory and install dependencies:

```bash theme={null}
cd client
npm install
```

6. In the client directory, build the application:

```bash theme={null}
npm run build
```

7. Load Trydent into your Chrome extensions.
   * Open Google Chrome and navigate to `chrome://extensions/`
   * Enable Developer Mode
   * Click "Load unpacked" and select the `extensions` directory in your local Trydent repository.

Now you should be able to access Trydent in the developer tools or right-click and select Trydent.

<Tip>
  Trydent is a tool aimed to provide a better experience for developers in creating E2E tests.\
  Therefore, it is recommended to familiarize yourself with the [Trydent documentation](./chrome-overview).\
  Please ensure you have read the documentation before contributing to the project.
</Tip>

## Coding Standards

Follow these coding standards when contributing to Trydent:

<CardGroup cols={3}>
  <Card title="ESLint" icon="broom" href="https://eslint.org/" color="#00FF00">
    Use ESLint to ensure your code adheres to the project's style guidelines.
  </Card>

  <Card title="JSDocs" icon="font" href="https://jsdoc.app/" color="FFC0CB">
    Write comments to explain code following the JSDoc format. Also, use descriptive variable and function names.
  </Card>

  <Card title="Modularization" icon="shapes" color="FFA500">
    Organize your code into logical units and separate files as needed.
  </Card>
</CardGroup>

## File Structure

```bash theme={null}
.
├── LICENSE
├── README.md
├── client
│   ├── assets
│   │   ├── testing-tamed.png
│   │   └── trydent-banner.png
│   ├── components
│   │   ├── App.tsx
│   │   ├── TopBar.tsx
│   │   └── pages
│   │       ├── CodeBlock.tsx
│   │       ├── TestPage.tsx
│   │       └── WelcomePage.tsx
│   ├── index.html
│   ├── jest.config.js
│   ├── main.tsx
│   ├── package-lock.json
│   ├── package.json
│   ├── scss
│   │   ├── _codeBlock.scss
│   │   ├── _eventLogger.scss
│   │   ├── _styles.scss
│   │   ├── _testPage.scss
│   │   ├── _topBar.scss
│   │   ├── _variables.scss
│   │   ├── _welcomePage.scss
│   │   └── application.scss
│   ├── tsconfig.json
│   ├── tsconfig.node.json
│   ├── utils
│   │   ├── testCreator.ts
│   │   └── types
│   │       └── types.ts
│   └── vite.config.ts
├── extension
│   ├── assets
│   │   ├── icon128.png
│   │   ├── icon16.png
│   │   └── icon48.png
│   ├── background.js
│   ├── bundles
│   │   ├── assets
│   │   │   ├── buttons.esm.js
│   │   │   ├── index.css
│   │   │   └── index.js
│   │   ├── components
│   │   │   ├── App.js
│   │   │   ├── TopBar.js
│   │   │   └── pages
│   │   │       ├── CodeBlock.js
│   │   │       ├── TestPage.js
│   │   │       └── WelcomePage.js
│   │   ├── index.html
│   │   ├── main.js
│   │   ├── utils
│   │   │   ├── testCreator.js
│   │   │   └── types
│   │   │       └── types.js
│   │   └── vite.config.js
│   ├── content-script.js
│   ├── devtool.html
│   ├── devtools.js
│   ├── manifest.json
│   ├── panel.html
│   └── panel.js
├── package-lock.json
├── package.json
└── server
    ├── index.ts
    ├── package-lock.json
    ├── package.json
    └── tsconfig.json
```

## Chrome Developer Resources

If you're new to Chrome extension development, we recommend checking out the official [Chrome Developer Docs](https://developer.chrome.com/) to get started.

## Feature Development and Code Contribution Process

1. Create a new branch in your forked repository for each feature or bug fix.
2. Write clear, concise, and well-documented code following the project's coding standards.
3. Add or update tests to cover your changes.
4. Ensure all tests pass and your code adheres to the project's style guidelines.
5. Commit your changes and push your branch to your forked repository.
6. Submit a pull request (PR) to the main Trydent repository's 'dev' branch with a clear description of your changes.

## Issue Tracking and Bug Reporting

Before submitting a new issue or bug report, please search the existing issues to avoid duplicates. When creating a new issue, include the following information:

<CardGroup cols={3}>
  <Card title="Clear Description" icon="wind">
    Include a clear and concise description of the issue or feature request as well as steps to reproduce the issue (if applicable)
  </Card>

  <Card title="Expected vs Actual" icon="bug" color="#FF0000">
    Describe expected behavior and actual behavior (for bug reports).
  </Card>

  <Card title="Pictures" icon="camera" color="#A020F0">
    Include screenshots, logs, or error messages (if applicable).
  </Card>
</CardGroup>

## Review Process

Once you submit a PR, the project maintainers will review your changes. They may request changes or provide feedback. Address any requested changes promptly to ensure your PR can be merged in a timely manner.

## Trydent Website

The Trydent website can be updated [here](https://github.com/oslabs-beta/trydent-splash-page).

## Stretch Features to Implement

* [ ] Add support for more granular events
* [ ] Add support for utilizing multiple it statements
* [ ] Add support for deletion of inputs without breaking test (ie: a click event before a type event shouldn't be able to be deleted without deleting the type event first)
* [ ] Adding support to editing existing tests
* [ ] More robust xPath generation (currently only supports xPath generation for elements with an id attribute)
* [ ] Add ability to run the test from the extension

Thank you for contributing to Trydent!
