Merge branch 'main' into pr/add-reactStrictMode-option

Author: eps1lon

Diff for: .all-contributorsrc

@@ -2555,6 +2555,69 @@
       "contributions": [
         "doc"
       ]
+    },
+    {
+      "login": "JoyelJohny",
+      "name": "Joyel Johny",
+      "avatar_url": "https://avatars.githubusercontent.com/u/81413791?v=4",
+      "profile": "https://github.com/JoyelJohny",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "bsheps",
+      "name": "bsheps",
+      "avatar_url": "https://avatars.githubusercontent.com/u/35780702?v=4",
+      "profile": "https://github.com/bsheps",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "kyle-n",
+      "name": "Kyle Nazario",
+      "avatar_url": "https://avatars.githubusercontent.com/u/13384477?v=4",
+      "profile": "http://www.kylenazario.com",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "thefalked",
+      "name": "Giuliano Crivelli",
+      "avatar_url": "https://avatars.githubusercontent.com/u/28029756?v=4",
+      "profile": "https://github.com/thefalked",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "mroforolhc",
+      "name": "mrkv",
+      "avatar_url": "https://avatars.githubusercontent.com/u/26799398?v=4",
+      "profile": "https://t.me/markov_ka",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "smk267",
+      "name": "smk267",
+      "avatar_url": "https://avatars.githubusercontent.com/u/88115182?v=4",
+      "profile": "https://github.com/smk267",
+      "contributions": [
+        "infra"
+      ]
+    },
+    {
+      "login": "agentdylan",
+      "name": "Dylan Gordon",
+      "avatar_url": "https://avatars.githubusercontent.com/u/3656794?v=4",
+      "profile": "https://www.dylangordon.co.nz/",
+      "contributions": [
+        "doc"
+      ]
     }
   ],
   "contributorsPerLine": 7,

Diff for: README.md

@@ -498,6 +498,15 @@ Thanks goes to these wonderful people
     <tr>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/andnorda"><img src="https://avatars.githubusercontent.com/u/1894119?v=4?s=100" width="100px;" alt="Andreas Nordahl"/><br /><sub><b>Andreas Nordahl</b></sub></a><br /><a href="https://github.com/testing-library/testing-library-docs/commits?author=andnorda" title="Documentation">📖</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://neaumusic.github.io"><img src="https://avatars.githubusercontent.com/u/3423750?v=4?s=100" width="100px;" alt="neaumusic"/><br /><sub><b>neaumusic</b></sub></a><br /><a href="https://github.com/testing-library/testing-library-docs/commits?author=neaumusic" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/JoyelJohny"><img src="https://avatars.githubusercontent.com/u/81413791?v=4?s=100" width="100px;" alt="Joyel Johny"/><br /><sub><b>Joyel Johny</b></sub></a><br /><a href="https://github.com/testing-library/testing-library-docs/commits?author=JoyelJohny" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/bsheps"><img src="https://avatars.githubusercontent.com/u/35780702?v=4?s=100" width="100px;" alt="bsheps"/><br /><sub><b>bsheps</b></sub></a><br /><a href="https://github.com/testing-library/testing-library-docs/commits?author=bsheps" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="http://www.kylenazario.com"><img src="https://avatars.githubusercontent.com/u/13384477?v=4?s=100" width="100px;" alt="Kyle Nazario"/><br /><sub><b>Kyle Nazario</b></sub></a><br /><a href="https://github.com/testing-library/testing-library-docs/commits?author=kyle-n" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/thefalked"><img src="https://avatars.githubusercontent.com/u/28029756?v=4?s=100" width="100px;" alt="Giuliano Crivelli"/><br /><sub><b>Giuliano Crivelli</b></sub></a><br /><a href="https://github.com/testing-library/testing-library-docs/commits?author=thefalked" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://t.me/markov_ka"><img src="https://avatars.githubusercontent.com/u/26799398?v=4?s=100" width="100px;" alt="mrkv"/><br /><sub><b>mrkv</b></sub></a><br /><a href="https://github.com/testing-library/testing-library-docs/commits?author=mroforolhc" title="Documentation">📖</a></td>
+    </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/smk267"><img src="https://avatars.githubusercontent.com/u/88115182?v=4?s=100" width="100px;" alt="smk267"/><br /><sub><b>smk267</b></sub></a><br /><a href="#infra-smk267" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://www.dylangordon.co.nz/"><img src="https://avatars.githubusercontent.com/u/3656794?v=4?s=100" width="100px;" alt="Dylan Gordon"/><br /><sub><b>Dylan Gordon</b></sub></a><br /><a href="https://github.com/testing-library/testing-library-docs/commits?author=agentdylan" title="Documentation">📖</a></td>
     </tr>
   </tbody>
 </table>

Diff for: docs/angular-testing-library/api.mdx

@@ -150,6 +150,42 @@ await render(AppComponent, {
 })
 ```
 
+### `deferBlockBehavior`
+
+Set the defer blocks behavior.
+
+For more info see the
+[Angular docs](https://angular.io/api/core/testing/DeferBlockBehavior)
+
+**default** : `undefined` (uses the Angular default, which is
+`DeferBlockBehavior.Manual`)
+
+**example**:
+
+```typescript
+await render(AppComponent, {
+  deferBlockBehavior: DeferBlockBehavior.Playthrough,
+})
+```
+
+### `deferBlockStates`
+
+Set the initial state of a deferrable blocks in a component.
+
+For more info see the
+[Angular docs](https://angular.io/api/core/testing/DeferBlockState)
+
+**default** : `undefined` (uses the Angular default, which is
+`DeferBlockState.Placeholder`)
+
+**example**:
+
+```typescript
+await render(FixtureComponent, {
+  deferBlockStates: DeferBlockState.Loading,
+})
+```
+
 ### `componentProviders`
 
 A collection of providers needed to render the component via Dependency
@@ -395,20 +431,39 @@ properties that are not defined are cleared.
 
 ```typescript
 const {rerender} = await render(Counter, {
-  componentProperties: {count: 4, name: 'Sarah'},
+  componentInputs: {count: 4, name: 'Sarah'},
 })
 
 expect(screen.getByTestId('count-value').textContent).toBe('4')
 expect(screen.getByTestId('name-value').textContent).toBe('Sarah')
 
-await rerender({componentProperties: {count: 7}})
+await rerender({componentInputs: {count: 7}})
 
-// count updated to 7
+// count is updated to 7
 expect(screen.getByTestId('count-value').textContent).toBe('7')
 // name is undefined because it's not provided in rerender
 expect(screen.getByTestId('name-value').textContent).toBeUndefined()
 ```
 
+Using `partialUpdate`, only the newly provided properties will be updated. Other
+input properties that aren't provided won't be cleared.
+
+```typescript
+const {rerender} = await render(Counter, {
+  componentInputs: {count: 4, name: 'Sarah'},
+})
+
+expect(screen.getByTestId('count-value').textContent).toBe('4')
+expect(screen.getByTestId('name-value').textContent).toBe('Sarah')
+
+await rerender({componentInputs: {count: 7}, partialUpdate: true})
+
+// count is updated to 7
+expect(screen.getByTestId('count-value').textContent).toBe('7')
+// name is still rendered as "Sarah" because of the partial update
+expect(screen.getByTestId('name-value').textContent).toBe('Sarah')
+```
+
 ### `detectChanges`
 
 Trigger a change detection cycle for the component.
@@ -473,3 +528,22 @@ screen.getByRole('heading', {
 })
 queryByLabelText(/First name/i')
 ```
+
+### `renderDeferBlock`
+
+To test [Deferrable views](https://angular.dev/guide/defer#defer), you can make
+use of `renderDeferBlock`. `renderDeferBlock` will set the desired defer state
+for a specific deferrable block. The default value of a deferrable view is
+`Placeholder`, but you can also set the initial state while rendering the
+component.
+
+```typescript
+const {renderDeferBlock} = await render(FixtureComponent, {
+  deferBlockStates: DeferBlockState.Loading,
+})
+
+expect(screen.getByText(/loading/i)).toBeInTheDocument()
+
+await renderDeferBlock(DeferBlockState.Complete)
+expect(screen.getByText(/completed/i)).toBeInTheDocument()
+```

Diff for: docs/angular-testing-library/examples.mdx

@@ -57,11 +57,13 @@ describe('Counter', () => {
 
 ## With Standalone Components
 
-Angular Testing Library can also test your standalone components.
-In fact, it even becomes easier because you don't have to set up the whole Angular TestBed.
-This was previously only [possible when you used Single Component Angular Modules (SCAMs)](https://timdeschryver.dev/blog/single-component-angular-modules-and-component-tests-go-hand-in-hand).
+Angular Testing Library can also test your standalone components. In fact, it
+even becomes easier because you don't have to set up the whole Angular TestBed.
+This was previously only
+[possible when you used Single Component Angular Modules (SCAMs)](https://timdeschryver.dev/blog/single-component-angular-modules-and-component-tests-go-hand-in-hand).
 
-Let's migrate the counter component to a standalone component, and let's take a look at how this affects the test.
+Let's migrate the counter component to a standalone component, and let's take a
+look at how this affects the test.
 
 ```ts title="counter.component.ts"
 @Component({
@@ -86,8 +88,8 @@ export class CounterComponent {
 }
 ```
 
-Just as you would've expected, this doesn't affect the test cases.
-Writing tests for standalone components remains the same as for "regular" components.
+Just as you would've expected, this doesn't affect the test cases. Writing tests
+for standalone components remains the same as for "regular" components.
 
 ```ts title="counter.component.spec.ts"
 import {render, screen, fireEvent} from '@testing-library/angular'
@@ -114,7 +116,8 @@ describe('Counter', () => {
 })
 ```
 
-To override an import of a standalone component for your component test, you can use the [`componentImports` property](api.mdx#componentImports).
+To override an import of a standalone component for your component test, you can
+use the [`componentImports` property](api.mdx#componentImports).
 
 ## More examples
 
@@ -125,7 +128,9 @@ These examples include:
 - `@Input` and `@Output` properties
 - Forms
 - Integration with services
-- And [more](https://github.com/testing-library/angular-testing-library/tree/master/apps/example-app/src/app/examples)
+- And
+  [more](https://github.com/testing-library/angular-testing-library/tree/master/apps/example-app/src/app/examples)
 
 If you're looking for an example that isn't on the list, please feel free to
-create a [new issue](https://github.com/testing-library/angular-testing-library/issues/new).
+create a
+[new issue](https://github.com/testing-library/angular-testing-library/issues/new).

Diff for: docs/angular-testing-library/faq.mdx

@@ -31,7 +31,8 @@ As you write your tests, keep in mind:
 
 In general, you should avoid mocking out components (see
 [the Guiding Principles section](guiding-principles.mdx)). However, if you need
-to, then try to use [ng-mocks](https://ng-mocks.sudo.eu/) and its [`MockBuilder`](https://ng-mocks.sudo.eu/extra/with-3rd-party#testing-libraryangular-and-mockbuilder).
+to, then try to use [ng-mocks](https://ng-mocks.sudo.eu/) and its
+[`MockBuilder`](https://ng-mocks.sudo.eu/extra/with-3rd-party#testing-libraryangular-and-mockbuilder).
 
 ```typescript
 import {Component, NgModule} from '@angular/core'
@@ -58,7 +59,7 @@ export class AppModule {}
 describe('ParentComponent', () => {
   it('should not render ChildComponent when shallow rendering', async () => {
     // all imports, declarations and exports of AppModule will be mocked.
-    const dependencies = MockBuilder(ParentComponent, AppModule).build();
+    const dependencies = MockBuilder(ParentComponent, AppModule).build()
 
     await render(ParentComponent, dependencies)
 

Diff for: docs/angular-testing-library/version-compatibility.mdx

@@ -3,12 +3,13 @@ id: version-compatibility
 title: Version compatibility
 ---
 
-An overview of the compatibility between different versions of Angular Testing Library and Angular.
+An overview of the compatibility between different versions of Angular Testing
+Library and Angular.
 
 | Angular | Angular Testing Library |
 | ------- | ----------------------- |
-| 16.x    | 13.x \|\| 14.x          |
-| >= 15.1 | 13.x \|\| 14.x          |
-| < 15.1  | 11.x \|\| 12.x          |
-| 14.x    | 11.x \|\| 12.x          |
-
+| 17.x    | 15.x, 14.x, 13.x        |
+| 16.x    | 14.x, 13.x              |
+| >= 15.1 | 14.x, 13.x              |
+| < 15.1  | 12.x, 11.x              |
+| 14.x    | 12.x, 11.x              |

Diff for: docs/bs-react-testing-library/intro.mdx

@@ -15,6 +15,9 @@ Bindings for several testing libraries have been ported to [ReasonML][re].
 
 ```bash npm2yarn
 npm install --save-dev bs-dom-testing-library
+```
+
+```bash npm2yarn
 npm install --save-dev bs-react-testing-library
 ```
 

Diff for: docs/cypress-testing-library/intro.mdx

@@ -22,8 +22,7 @@ Add this line to your project's `cypress/support/commands.js`:
 import '@testing-library/cypress/add-commands'
 ```
 
-You can now use all of `DOM Testing Library`'s `findBy`, `findAllBy`, `queryBy`
-and `queryAllBy` commands off the global `cy` object.
+You can now use some of `DOM Testing Library`'s `findBy`, and `findAllBy` commands off the global `cy` object.
 [See the `About queries` docs for reference](/docs/queries/about).
 
 > Note: the `get*` queries are not supported because for reasonable Cypress

Diff for: docs/dom-testing-library/api-custom-queries.mdx

@@ -3,9 +3,6 @@ id: api-custom-queries
 title: Custom Queries
 ---
 
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
-
 `DOM Testing Library` exposes many of the helper functions that are used to
 implement the default queries. You can use the helpers to build custom queries.
 For example, the code below shows a way to override the default `testId` queries

Diff for: docs/dom-testing-library/api-debugging.mdx

@@ -32,7 +32,7 @@ value is `7000`. You will see `...` in the console, when the DOM content is
 stripped off, because of the length you have set or due to default size limit.
 Here's how you might increase this limit when running tests:
 
-```
+```bash npm2yarn
 DEBUG_PRINT_LIMIT=10000 npm test
 ```
 
@@ -42,11 +42,11 @@ you'd like a solution that works for both, see
 
 **Note**: The output of the DOM is colorized by default if your tests are
 running in a node environment. However, you may sometimes want to turn off
-colors, such as in cases where the output is written to a log file for
-debugging purposes. You can use the environment variable `COLORS` to explicitly
-force the colorization off or on. For example:
+colors, such as in cases where the output is written to a log file for debugging
+purposes. You can use the environment variable `COLORS` to explicitly force the
+colorization off or on. For example:
 
-```
+```bash npm2yarn
 COLORS=false npm test
 ```
 
@@ -105,9 +105,9 @@ This function is what also powers
 
 ## `screen.debug()`
 
-For convenience `screen` also exposes a `debug` method.
-This method is essentially a shortcut for `console.log(prettyDOM())`. It
-supports debugging the document, a single element, or an array of elements.
+For convenience `screen` also exposes a `debug` method. This method is
+essentially a shortcut for `console.log(prettyDOM())`. It supports debugging the
+document, a single element, or an array of elements.
 
 ```javascript
 import {screen} from '@testing-library/dom'
@@ -129,8 +129,8 @@ screen.debug(screen.getAllByText('multi-test'))
 ## `screen.logTestingPlaygroundURL()`
 
 For debugging using [testing-playground](https://testing-playground.com), screen
-exposes this convenient method which logs and returns a URL that can be opened in
-a browser.
+exposes this convenient method which logs and returns a URL that can be opened
+in a browser.
 
 ```javascript
 import {screen} from '@testing-library/dom'

Diff for: docs/dom-testing-library/setup.mdx

@@ -18,9 +18,10 @@ the DOM and browser APIs that runs in node. If you're not using Jest and you
 would like to run your tests in Node, then you must install jsdom yourself.
 There's also a package called
 [global-jsdom](https://github.com/modosc/global-jsdom) which can be used to
-setup the global environment to simulate the browser APIs. Note that if you're using
-Vitest you only need to configure [`environment`](https://vitest.dev/config/#environment)
-to `jsdom` to achieve the same effect, you don't need global-jsdom.
+setup the global environment to simulate the browser APIs. Note that if you're
+using Vitest you only need to configure
+[`environment`](https://vitest.dev/config/#environment) to `jsdom` to achieve
+the same effect, you don't need global-jsdom.
 
 First, install jsdom and global-jsdom.
 

Diff for: docs/example-external.mdx

@@ -6,7 +6,8 @@ sidebar_label: External Examples
 
 ## Code Samples
 
-- You can find more React Testing Library examples at [https://react-testing-examples.netlify.app/](https://react-testing-examples.netlify.app/).
+- You can find more React Testing Library examples at
+  [https://react-testing-examples.netlify.app/](https://react-testing-examples.netlify.app/).
 
 ## Playground