docs(devs-infra): add documentation for testing styles (#907)

e2e/ast-transformers/replace-resources/__tests__/bar.component.ts

@@ -28,7 +28,6 @@ test(
     const elementToFind = fixture.debugElement.nativeElement.querySelector('p');
     expect(elementToFind).toBeDefined();
     expect(window.getComputedStyle(elementToFind).color).toEqual('red');
-    console.warn(window.getComputedStyle(elementToFind));
     expect(window.getComputedStyle(elementToFind).fontSize).toEqual('1.6rem');
   }),
 );

website/docs/guides/testing-css-styles.md

@@ -0,0 +1,38 @@
+---
+id: testing-css-styles
+title: Testing CSS Styles
+---
+
+Starting from **v9.0.0**, `jest-preset-angular` supports testing CSS styles. The supported style extensions following
+Angular support, which are: `css`, `sass`, `scss`, `less` and `styl`. This is provided default by `jest-preset-angular`.
+
+One now can use [window.getComputedStyle](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle)
+to check styling of DOM elements. The styles which are returned by `window.getComputedStyle` come from styling files.
+
+## Example
+
+```
+// ...TestBed setup
+
+const elementToFind = fixture.debugElement.nativeElement.querySelector('p');
+expect(window.getComputedStyle(elementToFind).color).toEqual('red');
+```
+
+:::important
+
+To be able to use `window.getComputedStyle` API, please make sure that you remove
+
+```
+Object.defineProperty(window, 'getComputedStyle', {
+  value: () => {
+    return {
+      display: 'none',
+      appearance: ['-webkit-appearance'],
+    };
+  },
+});
+```
+
+or any codes that override the default behavior of `window.getComputedStyle` in your setup file or your global mock file.
+
+:::

website/docs/guides/babel-jest.md → website/docs/guides/using-with-babel.md

@@ -1,6 +1,6 @@
 ---
-id: babel-jest
-title: Combining with babel-jest
+id: using-with-babel
+title: Using with Babel
 ---
 
 If you wish to use `Babel`, you need to say jest to transpile such files manually.

website/sidebars.js

@@ -23,8 +23,9 @@ module.exports = {
       items: [
         'guides/angular-ivy',
         'guides/esm-support',
+        'guides/testing-css-styles',
         'guides/jsdom-version',
-        'guides/babel-jest',
+        'guides/using-with-babel',
         'guides/absolute-imports',
         'guides/troubleshooting',
       ],

website/versioned_docs/version-8.x/guides/testing-css-styles.md

@@ -0,0 +1,6 @@
+---
+id: testing-css-styles
+title: Testing CSS Styles
+---
+
+Testing CSS styles is only supported starting from **v9.0.0**.

website/versioned_docs/version-8.x/guides/babel-jest.md → website/versioned_docs/version-8.x/guides/using-with-babel.md

@@ -1,6 +1,6 @@
 ---
-id: babel-jest
-title: Combining with babel-jest
+id: using-with-babel
+title: Using with Babel
 ---
 
 If you wish to use `Babel`, you need to say jest to transpile such files manually.

website/versioned_sidebars/version-8.x-sidebars.json

@@ -51,13 +51,17 @@
           "type": "doc",
           "id": "version-8.x/guides/esm-support"
         },
+        {
+          "type": "doc",
+          "id": "version-8.x/guides/testing-css-styles"
+        },
         {
           "type": "doc",
           "id": "version-8.x/guides/jsdom-version"
         },
         {
           "type": "doc",
-          "id": "version-8.x/guides/babel-jest"
+          "id": "version-8.x/guides/using-with-babel"
         },
         {
           "type": "doc",