# Testing

{% embed url="https://testing-angular.com/" %}
Third party Guide - Very Complete
{% endembed %}

{% embed url="https://angular.dev/guide/testing" %}
guide/testing
{% endembed %}

{% embed url="https://jasmine.github.io/tutorials/your_first_suite" %}
Jasmin Tutorial
{% endembed %}



## Details

The Angular CLI downloads and install everything you need to test Angular with `Jasmine` testing framework.

When you run `ng test`, the application is built in _watch mode_, and lauches the `Karma` test runner.

{% hint style="info" %}
You may generate a `karma.conf.js` running `ng generate config karma`, to customize [karma](https://karma-runner.github.io/6.4/config/configuration-file.html).
{% endhint %}



### Continuous Integration

You may run in `CI (Continuous Integration)` with:

```bash
ng test --no-watch --no-progress --browsers=ChromeHeadless
```



### Code Coverage

To generate a coverage report:

```bash
ng test --no-watch --code-coverage
```



### Code Coverage Enforcement

Suppose you want the code base to have a minimum of 80% code coverage.

To do so, open `karma.conf.js`, and add the `check` property in the `coverageReport:` key

```typescript
coverageReporter: {
    dir: require('path').join(__dirname, './coverage/<project-name>'),
    subdir: '.',
    reporters: [
        { type: 'html' },
        { type: 'text-summary' }
    ],
    check: {
        global: {
            statements: 80,
            branches: 80,
            functions: 80,
            lines: 80
        }
    }
}
```



### Executed Specific Tests

To execetute only specified choosen tests you may append a `f` in front of `describe` or `it`.

```typescript
// Only this will run
fdescribe(() => { ... });

describe(() => {
    // Will be skipped
    it(() => { ... });
    
    // Only this will run
    fit(() => { ... });
});
```



### Skiping Specific Tests

The same way you can specify choosen tests to skip with a `x` in front of `describe` or `it`.

```typescript
// Will be skipped
xdescribe(() => { ... });

describe(() => {
    // Will be skipped
    xit(() => { ... });
    
    // Will run
    it(() => { ... });
});
```





## Best Practices

### `DOM` querying

When writing tests for your Components, you will likely have to query for specific `DOM` elements.

It is good practice to add to these specific tested elements a HTML property, working like `ids`, so they can easily be reached inside the tests.

#### Ex.:

```html
<p data-test-id="user-title"> ... </p>
```





## Angular `TestBed`

It creates a dynamically constructed Angular test module that emulates an Angular `@NgModule`.

{% hint style="info" %}
Check the most important static methods [here](https://angular.dev/guide/testing/utility-apis#testbed-class-summary).
{% endhint %}

#### `TestBed.configureTestingModule()`

The `TestBed.configureTestingModule()` method takes a metada object that can have most of the properties of an `@NgModule`.





## WSL Problems/Tips

If you are running tests inside WSL2, it will have problems since it requires Chrome to execute and show the results.

Running `npm run test` with `--browsers=ChromeHeadless` will help, by avoiding opening a Chrome browser. But it will still require you to install Chrome inside the WSL Ubuntu.

{% hint style="info" %}
I tried mapping the `CHROME_BIN` to the external Windows Chrome executable.

But it did not work.
{% endhint %}

#### Install Chrome on Ubuntu

```bash
wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
sudo apt install ./google-chrome-stable_current_amd64.deb
```

_Check to see if_ `google-chrome` _autocompletes on the terminal._

#### Running tests on terminal only

If you just want to run the tests on the terminal just run with:

```bash
ng test --no-watch --browsers=ChromeHeadless
```

#### See test results on Chrome

Follow [here](https://nathanorick.com/wsl-setup/) or [here](https://dev.to/nickymeuleman/using-graphical-user-interfaces-like-cypress-in-wsl2-249j) to install `VcXsrv` on Windows, so that opening Chrome from ubuntu will show graphically on Windows.
