Some updated for e2e tests (#9091)

Author: jamakase

airbyte-webapp-e2e-tests/cypress/global.d.ts

@@ -0,0 +1,11 @@
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      clearApp(): Chainable<Element>;
+
+      // sidebar
+
+      openSettings(): Chainable<Element>;
+    }
+  }
+}

airbyte-webapp-e2e-tests/cypress/support/commands/common.js

@@ -55,3 +55,9 @@ Cypress.Commands.add("deleteEntity", () => {
   cy.get("button[data-id='open-delete-modal']").click();
   cy.get("button[data-id='delete']").click();
 })
+
+Cypress.Commands.add("clearApp", () => {
+  indexedDB.deleteDatabase("firebaseLocalStorageDb");
+  cy.clearLocalStorage();
+  cy.clearCookies();
+});

airbyte-webapp-e2e-tests/cypress/support/commands/index.js renamed to airbyte-webapp-e2e-tests/cypress/support/commands/index.ts

@@ -1,4 +1,5 @@
 import "./common";
+import "./sidebar";
 import "./source";
 import "./destination";
 import "./connection";

airbyte-webapp-e2e-tests/cypress/support/commands/sidebar.ts

@@ -0,0 +1,3 @@
+Cypress.Commands.add("openSettings", () => {
+  cy.get("nav a[href*='settings']").click();
+});

airbyte-webapp-e2e-tests/package-lock.json

@@ -20,6 +20,7 @@
   },
   "devDependencies": {
     "cypress": "^9.2.0",
+    "typescript": "^4.5.4",
     "eslint-plugin-cypress": "^2.12.1"
   }
 }

airbyte-webapp-e2e-tests/package.json

@@ -0,0 +1,23 @@
+{
+  "include": ["./**/*.ts"],
+  "exclude": [],
+  "compilerOptions": {
+    "baseUrl": "src",
+    "target": "es5",
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "jsx": "react-jsx",
+    "noFallthroughCasesInSwitch": true,
+    "types": ["cypress"],
+    "lib": ["es2015", "dom"],
+    "isolatedModules": false,
+    "allowJs": true,
+    "noEmit": true
+  }
+}

airbyte-webapp-e2e-tests/tsconfig.json

@@ -8,7 +8,7 @@ export type SideMenuItem = {
   name: string | React.ReactNode;
   indicatorCount?: number;
   component: React.ComponentType<any>;
-  testId?: string;
+  id?: string;
 };
 
 export type CategoryItem = {
@@ -49,7 +49,7 @@ const SideMenu: React.FC<SideMenuProps> = ({ data, onSelect, activeItem }) => {
           )}
           {categoryItem.routes.map((route) => (
             <MenuItem
-              testId={route.testId}
+              id={route.id}
               key={route.path}
               name={route.name}
               isActive={activeItem?.endsWith(route.path)}

airbyte-webapp/src/components/SideMenu/SideMenu.tsx

@@ -5,7 +5,7 @@ type IProps = {
   name: string | React.ReactNode;
   isActive?: boolean;
   count?: number;
-  testId?: string;
+  id?: string;
   onClick: () => void;
 };
 
@@ -40,15 +40,9 @@ const Counter = styled.div`
   margin-left: 5px;
 `;
 
-const MenuItem: React.FC<IProps> = ({
-  count,
-  isActive,
-  name,
-  testId,
-  onClick,
-}) => {
+const MenuItem: React.FC<IProps> = ({ count, isActive, name, id, onClick }) => {
   return (
-    <Item data-testid={testId} isActive={isActive} onClick={onClick}>
+    <Item data-testid={id} isActive={isActive} onClick={onClick}>
       {name}
       {count ? <Counter>{count}</Counter> : null}
     </Item>

airbyte-webapp/src/components/SideMenu/components/MenuItem.tsx

@@ -72,6 +72,7 @@ export const CloudSettingsPage: React.FC = () => {
               path: CloudSettingsRoutes.AccessManagement,
               name: <FormattedMessage id="settings.accessManagementSettings" />,
               component: UsersSettingsView,
+              id: "workspaceSettings.accessManagementSettings",
             },
             {
               path: CloudSettingsRoutes.Notifications,