docs: add contributing documentations (#6)

Deazl-Comparator · Jul 11, 2023 · 9c7f769 · 9c7f769
1 parent ec5867c
commit 9c7f769
Show file tree

Hide file tree

Showing 4 changed files with 305 additions and 0 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -0,0 +1,140 @@
+# Contributing to PComparator
+
+ - [Issues and Bugs](#issue)
+ - [Feature Requests](#feature)
+ - [Submission Guidelines](#submit)
+ - [Coding Rules](#rules)
+ - [Commit Message Guidelines](#commit)
+
+## <a name="issue"></a> Found a Bug?
+
+If you find a bug in the source code, you can help us by [submitting an issue](#submit-issue). Even better, you can [submit a Pull Request](#submit-pr) with a fix.
+
+## <a name="submit"></a> Submission Guidelines
+
+### <a name="submit-issue"></a> Submitting an Issue
+
+Before you submit an issue, please search the issue tracker, maybe an issue for your problem already exists and the discussion might inform you of workarounds readily available.
+
+We want to fix all the issues as soon as possible, but before fixing a bug we need to reproduce and confirm it. In order to reproduce bugs, we will systematically ask you to provide a minimal reproduction scenario. Having reproducible scenario gives us a wealth of important information without going back & forth to you with additional questions.
+
+We will be insisting on a minimal reproduce scenario in order to save maintainers time and ultimately be able to fix more bugs. Interestingly, from our experience users often find coding problems themselves while preparing a minimal plunk. We understand that sometimes it might be hard to extract essentials bits of code from a larger code-base but we really need to isolate the problem before we can fix it.
+
+You can file new issues by filling out our [new issue form](https://github.com/Clement-Muth/pcomparator/issues/new).
+
+### <a name="submit-pr"></a> Submitting a Pull Request (PR)
+Before you submit your Pull Request (PR) consider the following guidelines:
+
+1. Search [GitHub](https://github.com/Clement-Muth/pcomparator/pulls) for an open or closed PR that relates to your submission. You don't want to duplicate effort.
+
+1. Make your changes in a new git branch:
+
+    ```shell
+    git checkout -b my-fix-branch master
+    ```
+
+1. Follow our [Coding Rules](#rules).
+
+1. Run the full pcomparator test suite, as described in the [developer documentation][dev-doc], and ensure that all tests pass.
+1. Commit your changes using a descriptive commit message that follows our [commit message conventions](#commit). Adherence to these conventions is necessary because release notes are automatically generated from these messages.
+
+1. Push your branch to GitHub:
+
+    ```shell
+    git push origin my-fix-branch
+    ```
+
+1. In GitHub, send a pull request to `pcomparator:master`.
+
+That's it! Thank you for your contribution!
+
+## <a name="rules"></a> Coding Rules
+To ensure consistency throughout the source code, keep these rules in mind as you are working:
+
+* All features or bug fixes **must be tested** by one or more specs (unit-tests).
+* We use an automated formatter, see [rome.tools](https://rome.tools/).
+
+## <a name="commit"></a> Commit Message Guidelines
+
+We have very precise rules over how our git commit messages can be formatted. This leads to **more readable messages** that are easy to follow when looking through the **project history**. But also, we use the git commit messages to **generate the pcomparator change log**.
+
+### Commit Message Format
+
+Each commit message consists of a **header**, a **body** and a **footer**.  The header has a special format that includes a **type**, a **scope** and a **subject**:
+
+```
+<type>(<scope>): <subject>
+<BLANK LINE>
+<body>
+<BLANK LINE>
+<footer>
+```
+
+The **header** is mandatory and the **scope** of the header is optional.
+
+Any line of the commit message cannot be longer 100 characters! This allows the message to be easier
+to read on GitHub as well as in various git tools.
+
+The footer should contain a [closing reference to an issue](https://help.github.com/articles/closing-issues-via-commit-messages/) if any.
+
+```
+docs(changelog): update changelog to beta.5
+```
+```
+fix(release): need to depend on latest rxjs and zone.js
+
+The version in our package.json gets copied to the one we publish, and users need the latest of these.
+```
+
+### Revert
+
+If the commit reverts a previous commit, it should begin with `revert: `, followed by the header of the reverted commit. In the body it should say: `This reverts commit <hash>.`, where the hash is the SHA of the commit being reverted.
+
+### Type
+
+Must be one of the following:
+
+| Type | Description |
+| ------ | ----------- |
+| **build** | Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm) |
+| **ci** | Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs) |
+| **docs** | Documentation only changes |
+| **feat** | A new feature |
+| **fix** | A bug fix |
+| **perf** | A code change that improves performance |
+| **refactor** | A code change that neither fixes a bug nor adds a feature |
+| **style** | Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc) |
+| **test** | Adding missing tests or correcting existing tests |
+| **deps** | Adding or updating dependencies |
+
+
+### Scope
+
+The scope should be the name of the npm package affected (as perceived by the person reading the changelog generated from commit messages.
+
+The following is the list of supported scopes:
+
+- pcomparator
+- api
+
+There are currently a few exceptions to the "use package name" rule:
+
+- packaging: used for changes that change the npm package layout in all of our packages, e.g. public path changes, package.json changes done to all packages, d.ts file/format changes, changes to bundles, changes across all packages, etc.
+
+### Subject
+The subject contains a succinct description of the change:
+
+* use the imperative, present tense: "change" not "changed" nor "changes"
+* don't capitalize the first letter
+* no dot (.) at the end
+
+### Body
+Just as in the **subject**, use the imperative, present tense: "change" not "changed" nor "changes".
+The body should include the motivation for the change and contrast this with previous behavior.
+
+### Footer
+The footer should contain any information about **Breaking Changes** and is also the place to reference GitHub issues that this commit **Closes**.
+
+**Breaking Changes** should start with the word `BREAKING CHANGE:` with a space or two newlines. The rest of the commit message is then used for this.
+
+[dev-doc]:https://github.com/Clement-Muth/pcomparator/blob/master/docs/DEVELOPER.md
diff --git a/docs/DEBUG.md b/docs/DEBUG.md
@@ -0,0 +1,29 @@
+# Debugging pcomparator
+
+## Debugging in Jest
+
+`screen.logTestingPlaygroundURL()`
+
+The **`screen.logTestingPlaygroundURL()`** function is a method provided by Jest, a popular JavaScript testing framework. It is used to display the Testing Playground URL in the console output when running tests.
+
+### Usage
+
+When running tests using Jest, it can be helpful to display the Testing Playground URL. This can be convenient for debugging tests or accessing the Testing Playground directly to explore the state of components during the test.
+
+To use **`screen.logTestingPlaygroundURL()`**, you first need to have Jest configured and run your tests. In a test file, you can call this function to display the Testing Playground URL in the console output.
+
+Here's an example of usage:
+
+```tsx
+import { render, screen } from '@testing-library/react';
+
+test('my test', () => {
+  render(<MyComponent />);
+  // Perform test actions on your component
+
+  // Display the Testing Playground URL in the console
+  screen.logTestingPlaygroundURL();
+});
+```
+
+When this test is executed, the console output will display the Testing Playground URL. You can click on this URL to open the Testing Playground in your browser.
diff --git a/docs/DEVELOPER.md b/docs/DEVELOPER.md
@@ -0,0 +1,109 @@
+# Start and Testing pcomparator
+
+This document describes how to set up your development environment to start and test pcomparator.
+It also explains the basic mechanics of using `git`, `node`, and `npm`.
+
+- [Start and Testing pcomparator](#start-and-testing-pcomparator)
+  - [Prerequisite Software](#prerequisite-software)
+  - [Getting the Sources](#getting-the-sources)
+  - [Installing NPM Modules](#installing-npm-modules)
+          - [Install pcomparator project dependencies (package.json)](#install-pcomparator-project-dependencies-packagejson)
+  - [Start](#start)
+  - [Running Tests Locally](#running-tests-locally)
+  - [ Formatting your source code](#-formatting-your-source-code)
+  - [Linting/verifying your source code](#lintingverifying-your-source-code)
+  - [Publishing snapshot builds](#publishing-snapshot-builds)
+
+See the [contribution guidelines](https://github.com/Clement-Muth/pcomparator/blob/master/CONTRIBUTING.md) if you'd like to contribute to pcomparator.
+
+## Prerequisite Software
+
+Before you can start and test pcomparator, you must install and configure the following products on your development machine:
+
+* [Git](http://git-scm.com) and/or the **GitHub app** (for [Mac](http://mac.github.com) or [Windows](http://windows.github.com)); [GitHub's Guide to Installing Git](https://help.github.com/articles/set-up-git) is a good source of information.
+
+* [Node.js](http://nodejs.org), (version specified in the engines field of [`package.json`](../package.json)) which is used to run a development web server, run tests, and generate distributable files.
+
+* [Yarn](https://yarnpkg.com) (version specified in the engines field of [`package.json`](../package.json)) which is used to install dependencies.
+
+* [Docker](https://www.docker.com/) (version specified in the [`README.md`](../README.md)) which is used to wrap our application
+
+* [Mkcert](https://github.com/FiloSottile/mkcert) which is used to generate SSL certificates.
+
+
+## Getting the Sources
+
+Clone the pcomparator repository:
+
+1. Login to your GitHub account or create one by following the instructions given
+   [here](https://github.com/signup/free).
+2. [Clone](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository) the [main pcomparator repository](https://github.com/Clement-Muth/pcomparator).
+
+```shell
+# Clone your GitHub repository:
+git clone https://github.com/Clement-Muth/pcomparator
+
+# Go to the mono-web directory:
+cd mono-web
+```
+
+## Installing NPM Modules
+
+Next, install the modules needed to start and test pcomparator:
+
+###### Install pcomparator project dependencies (package.json)
+```shell
+make install
+```
+
+## Start
+
+To start pcomparator run:
+
+```shell
+make up
+```
+
+## Running Tests Locally
+
+To run tests:
+
+```shell
+yarn lint:check             # Run the lint checker
+
+yarn format:check          # Run the format checker
+
+yarn typescript:check      # Run the TypeScript checker
+
+yarn test                  # Run the jest suite tests (coming soon)
+```
+
+You should execute the 4 test suites before submitting a PR to github.
+
+See [DEBUG.md](DEBUG.md) for information on debugging the code while running the unit tests.
+
+All the tests are executed on our Continuous Integration infrastructure and a PR could only be merged once the tests pass.
+
+- Actions fails if your code is not formatted properly,
+
+## <a name="rome-format"></a> Formatting your source code
+
+pcomparator uses [rome](https://rome.tools/) to format the source code. If the source code is not properly formatted, the CI will fail and the PR can not be merged.
+
+You can automatically format your code by running:
+
+``` shell
+yarn format:fix
+```
+
+## Linting/verifying your source code
+
+You can check that your code is properly formatted and adheres to coding style by running:
+
+``` shell
+yarn lint:check
+```
+
+## Publishing snapshot builds
+
+When the `master` branch successfully builds, it automatically published build artifacts.
diff --git a/docs/NAMING.md b/docs/NAMING.md
@@ -0,0 +1,27 @@
+Naming Conventions in pcomparator
+---
+
+In general pcomparator should follow TypeScript naming conventions.
+See: https://github.com/Microsoft/TypeScript/wiki/Coding-guidelines
+
+
+Classes:
+  - Example: `Compiler`, `ApplicationMetadata`
+  - Camel case with first letter uppercase
+  - In general prefer single words. (This is so that when appending `Proto` or `Factory` the class is still reasonable to work with.)
+  - Should not end with `Impl` or any other word which describes a specific implementation of an interface.
+
+
+Interfaces:
+  - Follow the same rules as Classes
+  - Should not have `I` or `Interface` in the name or any other way of identifying it as an interface.
+
+
+Methods and functions:
+  - Example: `bootstrap`, `someMethod`
+  - Should be camel case with first letter lowercase
+
+
+Constants:
+  - Example: `CORE_DIRECTIVES`
+  - Should be all uppercase with SNAKE_CASE