Add a test id to the shadow root element of the Reader to access it easily in e2e tests

Signed-off-by: Dominik Henneke <dominik.henneke@sda-se.com>

.changeset/techdocs-swift-mugs-invent.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-techdocs': patch
+---
+
+Add a test id to the shadow root element of the Reader to access it easily in e2e tests

plugins/techdocs/src/reader/components/Reader.test.tsx

@@ -0,0 +1,67 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ApiProvider, ApiRegistry } from '@backstage/core';
+import { wrapInTestApp } from '@backstage/test-utils';
+import { act, render } from '@testing-library/react';
+import React from 'react';
+import { TechDocsStorageApi, techdocsStorageApiRef } from '../../api';
+import { Reader } from './Reader';
+
+jest.mock('react-router-dom', () => {
+  const actual = jest.requireActual('react-router-dom');
+  return {
+    ...actual,
+    useParams: jest.fn(),
+  };
+});
+
+const { useParams }: { useParams: jest.Mock } = jest.requireMock(
+  'react-router-dom',
+);
+
+describe('<Reader />', () => {
+  it('should render Reader content', async () => {
+    useParams.mockReturnValue({
+      entityId: 'Component::backstage',
+    });
+
+    const techdocsStorageApi: Partial<TechDocsStorageApi> = {};
+
+    const apiRegistry = ApiRegistry.from([
+      [techdocsStorageApiRef, techdocsStorageApi],
+    ]);
+
+    await act(async () => {
+      const rendered = render(
+        wrapInTestApp(
+          <ApiProvider apis={apiRegistry}>
+            <Reader
+              entityId={{
+                kind: 'Component',
+                namespace: 'default',
+                name: 'example',
+              }}
+            />
+          </ApiProvider>,
+        ),
+      );
+      expect(
+        rendered.getByTestId('techdocs-content-shadowroot'),
+      ).toBeInTheDocument();
+    });
+  });
+});

plugins/techdocs/src/reader/components/Reader.tsx

@@ -17,10 +17,10 @@ import { EntityName } from '@backstage/catalog-model';
 import { useApi } from '@backstage/core';
 import { BackstageTheme } from '@backstage/theme';
 import { useTheme } from '@material-ui/core';
+import { Alert } from '@material-ui/lab';
+import React, { useEffect, useRef, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useAsync } from 'react-use';
-import React, { useEffect, useRef, useState } from 'react';
-import { Alert } from '@material-ui/lab';
 import { techdocsStorageApiRef } from '../../api';
 import transformer, {
   addBaseUrl,
@@ -343,7 +343,7 @@ export const Reader = ({ entityId, onReady }: Props) => {
       {docLoading || (docLoadError && syncInProgress) ? (
         <TechDocsProgressBar />
       ) : null}
-      <div ref={shadowDomRef} />
+      <div data-testid="techdocs-content-shadowroot" ref={shadowDomRef} />
     </>
   );
 };