fix: jest tests

tolgee · Sep 3, 2022 · 44eff5c · 44eff5c
1 parent 7097b4a
commit 44eff5c
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 15 deletions.
diff --git a/packages/ui/src/KeyContextMenu/KeyContextMenu.tsx b/packages/ui/src/KeyContextMenu/KeyContextMenu.tsx
@@ -105,12 +105,12 @@ export class KeyContextMenu extends React.Component<KeyContextMenuProps> {
                 }}
                 key={index}
               >
-                <ScTranslation>
+                <ScTranslation data-cy="context-menu-value">
                   {this.props.dependencies.translationService.getFromCacheOrFallback(
                     key
                   )}
                 </ScTranslation>
-                <ScKey>{key}</ScKey>
+                <ScKey data-cy="context-menu-key">{key}</ScKey>
               </ScMenuItem>
             ))}
           </Menu>

diff --git a/packages/ui/src/__test__/keyContextMenu.test.ts b/packages/ui/src/__test__/keyContextMenu.test.ts
@@ -2,9 +2,13 @@ jest.autoMockOff();
 
 import '@testing-library/jest-dom/extend-expect';
 import { UI } from '../index';
-import { NodeHelper } from '@tolgee/core';
+import { DEVTOOLS_ID } from '@tolgee/core';
 import type { TranslationService } from '@tolgee/core/lib/services/TranslationService';
 
+const getDevtoolsRoot = () => document.getElementById(DEVTOOLS_ID).shadowRoot;
+const findByTestId = (testId: string) =>
+  Array.from(getDevtoolsRoot().querySelectorAll(`*[data-cy='${testId}']`));
+
 test('it selects the key', (done) => {
   const ui = new UI({
     coreService: {} as any,
@@ -41,23 +45,19 @@ test('it selects the key', (done) => {
 
   // check if keys and translations are in dom
   for (const key of keys) {
-    const element = NodeHelper.evaluateToSingle(
-      `//*[contains(text(), '${key}')]`,
-      document.body
-    );
-    // @ts-ignore
-    expect(element).toBeInTheDocument();
+    const elements = findByTestId('context-menu-key');
+
+    expect(elements.find((el) => el.textContent.includes(key))).not.toBeFalsy();
   }
-  const translatedKeys = NodeHelper.evaluate(
-    `//*[contains(text(), 'Translated key')]`,
-    document.body
+  const translatedKeys = findByTestId('context-menu-value').filter(
+    (el) => el.textContent === 'Translated key'
   );
   expect(translatedKeys).toHaveLength(2);
 
   // get key 2 and click it
-  const element = NodeHelper.evaluateToSingle(
-    `//*[contains(text(), 'key 2')]`,
-    document.body
+  const element = findByTestId('context-menu-key').find((el) =>
+    el.textContent.includes('key 2')
   );
+
   element.parentElement.click();
 });