fix: cypress tests

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

Hide file tree

Showing 7 changed files with 42 additions and 23 deletions.
diff --git a/e2e/cypress/common/devUiTools.ts b/e2e/cypress/common/devUiTools.ts
@@ -0,0 +1,7 @@
+export const getDevUiRoot = () => {
+  return cy.get('#__tolgee_dev_tools');
+};
+
+export const getDevUi = () => {
+  return getDevUiRoot().shadow();
+};
diff --git a/e2e/cypress/common/exampleAppDevTest.ts b/e2e/cypress/common/exampleAppDevTest.ts
@@ -1,3 +1,5 @@
+import { getDevUi } from './devUiTools';
+
 type Options = {
   noLoading: boolean;
 };
@@ -18,12 +20,12 @@ export const exampleAppDevTest = (url: string, options?: Options) =>
     it('title can be translated', () => {
       cy.contains('On the road').invoke('attr', '_tolgee').should('exist');
       cy.contains('On the road').trigger('keydown', { key: 'Alt' }).click();
-      cy.contains('Quick translation').should('be.visible');
+      getDevUi().contains('Quick translation').should('be.visible');
     });
 
     it('placeholder can be translated', () => {
       cy.contains('On the road').invoke('attr', '_tolgee').should('exist');
       cy.get('input').trigger('keydown', { key: 'Alt' }).click();
-      cy.contains('Quick translation').should('be.visible');
+      getDevUi().contains('Quick translation').should('be.visible');
     });
   });
diff --git a/e2e/cypress/common/nextInternalCommon.ts b/e2e/cypress/common/nextInternalCommon.ts
@@ -1,4 +1,5 @@
 import { createApiKey, deleteScreenshots, getScreenshots } from './apiCalls';
+import { getDevUi, getDevUiRoot } from './devUiTools';
 import { Scope } from './types';
 
 export const openUI = (translation = 'On the road') => {
@@ -8,7 +9,8 @@ export const openUI = (translation = 'On the road') => {
     .trigger('mouseover')
     .click();
   cy.window().trigger('keyup', { key: 'Alt' });
-  cy.get('textarea').contains(translation).should('be.visible');
+  getDevUiRoot().should('exist');
+  getDevUi().find('textarea').contains(translation).should('be.visible');
   cy.wait(300);
 };
 

diff --git a/e2e/cypress/common/selectors.ts b/e2e/cypress/common/selectors.ts
@@ -1,3 +1,5 @@
+import { getDevUi } from './devUiTools';
+
 export const getByAriaLabel = (label: string) => {
-  return cy.get(`*[aria-label="${label}"]`);
+  return getDevUi().find(`*[aria-label="${label}"]`);
 };
diff --git a/e2e/cypress/e2e/next-internal/screenshots.cy.ts b/e2e/cypress/e2e/next-internal/screenshots.cy.ts
@@ -5,6 +5,7 @@ import {
   removeScreenshots,
   visitWithApiKey,
 } from '../../common/nextInternalCommon';
+import { getDevUi } from '../../common/devUiTools';
 
 context('UI Dialog', () => {
   beforeEach(() => {
@@ -26,8 +27,11 @@ context('UI Dialog', () => {
       'screenshots.upload',
     ]);
     openUI();
-    cy.get('*[aria-label="Take screenshot"]').should('be.visible').click();
-    cy.get('*[aria-label="Screenshot"]').should('be.visible');
+    getDevUi()
+      .find('*[aria-label="Take screenshot"]')
+      .should('be.visible')
+      .click();
+    getDevUi().find('*[aria-label="Screenshot"]').should('be.visible');
   });
 
   it('screenshots not editable', () => {
@@ -38,7 +42,7 @@ context('UI Dialog', () => {
       'screenshots.view',
     ]);
     openUI();
-    cy.contains('There are no screenshots.').should('be.visible');
+    getDevUi().contains('There are no screenshots.').should('be.visible');
     getByAriaLabel('Take screenshot').should('not.exist');
   });
 
@@ -51,13 +55,13 @@ context('UI Dialog', () => {
       'screenshots.upload',
     ]);
     openUI();
-    cy.contains('There are no screenshots.').should('be.visible');
+    getDevUi().contains('There are no screenshots.').should('be.visible');
     getByAriaLabel('Take screenshot').should('be.visible').click();
     getByAriaLabel('Screenshot').should('be.visible').trigger('mouseover');
     // we should be able to delete just uploaded images
     getByAriaLabel('Delete').should('be.visible');
 
-    cy.contains('Update').click();
+    getDevUi().contains('Update').click();
 
     openUI();
     getByAriaLabel('Screenshot').should('be.visible').trigger('mouseover');
@@ -77,12 +81,12 @@ context('UI Dialog', () => {
     openUI();
     getByAriaLabel('Take screenshot').should('be.visible').click();
     getByAriaLabel('Screenshot').should('be.visible');
-    cy.contains('Update').click();
+    getDevUi().contains('Update').click();
 
     openUI();
     getByAriaLabel('Screenshot').trigger('mouseover');
     getByAriaLabel('Delete').should('be.visible').click();
-    cy.contains('Update').click();
+    getDevUi().contains('Update').click();
 
     openUI();
     getByAriaLabel('Screenshot').should('not.exist');

diff --git a/e2e/cypress/e2e/next-internal/ui.cy.ts b/e2e/cypress/e2e/next-internal/ui.cy.ts
@@ -7,6 +7,7 @@ import {
   removeScreenshots,
   visitWithApiKey,
 } from '../../common/nextInternalCommon';
+import { getDevUi } from '../../common/devUiTools';
 
 context('UI Dialog', () => {
   beforeEach(() => {
@@ -28,9 +29,10 @@ context('UI Dialog', () => {
       'screenshots.upload',
     ]);
     openUI();
-    cy.contains('Quick translation');
-    cy.contains('Update');
-    cy.get('#_tolgee_platform_link')
+    getDevUi().contains('Quick translation');
+    getDevUi().contains('Update');
+    getDevUi()
+      .find('#_tolgee_platform_link')
       .invoke('attr', 'href')
       .should(
         'contain',
@@ -65,21 +67,20 @@ context('UI Dialog', () => {
       'screenshots.view',
     ]);
     openUI();
-    cy.get('textarea').contains('Auf dem Weg').should('be.disabled');
+    getDevUi().find('textarea').contains('Auf dem Weg').should('be.disabled');
     assertCanEditEnglish();
   });
 
   it('disabled when view only', () => {
     visitWithApiKey(['translations.view', 'screenshots.view']);
     openUI();
-    cy.contains('There are no screenshots.').should('be.visible');
+    getDevUi().contains('There are no screenshots.').should('be.visible');
     getByAriaLabel('Take screenshot').should('not.exist');
-    cy.contains('Update').should('be.disabled');
+    getDevUi().contains('Update').should('be.disabled');
   });
 
   function assertCanEditEnglish() {
-    cy.get('textarea').contains('On the road').click();
-    cy.focused().clear().type('Hello world');
+    getDevUi().find('textarea').contains('On the road').type('Hello world');
     cy.intercept({ path: '/v2/projects/keys/**', method: 'put' }, (req) => {
       req.reply({
         body: {
@@ -96,8 +97,8 @@ context('UI Dialog', () => {
         },
       });
     }).as('updateTranslation');
-    cy.contains('Update').click();
+    getDevUi().contains('Update').click();
     cy.wait('@updateTranslation');
-    cy.contains('Hello world').should('be.visible');
+    getDevUi().contains('Hello world').should('be.visible');
   }
 });
diff --git a/e2e/cypress/e2e/react/dev.cy.ts b/e2e/cypress/e2e/react/dev.cy.ts
@@ -1,6 +1,7 @@
 import { exampleAppTest } from '../../common/exampleAppTest';
 import { translationMethodsTest } from '../../common/translationMethodsTest';
 import { exampleAppDevTest } from '../../common/exampleAppDevTest';
+import { getDevUi } from '../../common/devUiTools';
 
 context('React app in dev mode', () => {
   const url = 'http://localhost:8113';
@@ -46,12 +47,12 @@ context('React app in dev mode', () => {
 
     it('opens inner translation correctly', () => {
       cy.gcy('translationInner').trigger('keydown', { key: 'Alt' }).click();
-      cy.contains('translation_inner').should('be.visible');
+      getDevUi().contains('translation_inner').should('be.visible');
     });
 
     it('opens outer translation correctly', () => {
       cy.gcy('translationOuter').trigger('keydown', { key: 'Alt' }).click();
-      cy.contains('translation_outer').should('be.visible');
+      getDevUi().contains('translation_outer').should('be.visible');
     });
   });
 });