test: add test case for #437

projects/testing-library/tests/issues/issue-435.spec.ts

@@ -26,15 +26,12 @@ class DemoComponent {
   constructor(@Inject(DemoService) public demoService: DemoService) {}
 }
 
-// Test
-describe('DemoComponent', () => {
-  it('should render button', async () => {
-    await render(DemoComponent);
+test('issue #435', async () => {
+  await render(DemoComponent);
 
-    const button = screen.getByRole('button', {
-      name: /Click me/,
-    });
-
-    expect(button).toBeVisible();
+  const button = screen.getByRole('button', {
+    name: /Click me/,
   });
+
+  expect(button).toBeVisible();
 });

projects/testing-library/tests/issues/issue-437.spec.ts

@@ -0,0 +1,58 @@
+import userEvent from '@testing-library/user-event';
+import { screen, render } from '../../src/public_api';
+import { MatSidenavModule } from '@angular/material/sidenav';
+
+afterEach(() => {
+  jest.useRealTimers();
+});
+
+test('issue #437', async () => {
+  const user = userEvent.setup();
+  await render(
+    `
+      <ng-container>
+        <mat-sidenav-container>
+            <mat-sidenav [opened]="true" position="end" mode="over" role="complementary">
+                <button data-testid="test-button">test</button>
+            </mat-sidenav>
+            <mat-sidenav-content>
+              <div></div>
+            </mat-sidenav-content>
+        </mat-sidenav-container>
+      </ng-container>
+      `,
+    { imports: [MatSidenavModule] },
+  );
+
+  // eslint-disable-next-line testing-library/prefer-explicit-assert
+  await screen.findByTestId('test-button');
+
+  await user.click(screen.getByTestId('test-button'));
+});
+
+test('issue #437 with fakeTimers', async () => {
+  jest.useFakeTimers();
+  const user = userEvent.setup({
+    advanceTimers: jest.advanceTimersByTime,
+  });
+  await render(
+    `
+      <ng-container>
+        <mat-sidenav-container>
+            <mat-sidenav [opened]="true" position="end" mode="over" role="complementary">
+                <button data-testid="test-button">test</button>
+            </mat-sidenav>
+            <mat-sidenav-content>
+              <div></div>
+            </mat-sidenav-content>
+        </mat-sidenav-container>
+      </ng-container>
+      `,
+    { imports: [MatSidenavModule] },
+  );
+
+  // eslint-disable-next-line testing-library/prefer-explicit-assert
+  await screen.findByTestId('test-button');
+
+  await user.click(screen.getByTestId('test-button'));
+});