Merge pull request #17009 from overleaf/ae-file-tree-classname

Remove duplicate className from Angular file tree

GitOrigin-RevId: 238b1ad8631b5a861361113679a9f1f8a66da6ea

package-lock.json

@@ -43,6 +43,7 @@
         "eslint-config-standard": "^17.0.0",
         "eslint-plugin-chai-expect": "^3.0.0",
         "eslint-plugin-chai-friendly": "^0.7.2",
+        "eslint-plugin-cypress": "^2.15.1",
         "eslint-plugin-import": "^2.26.0",
         "eslint-plugin-mocha": "^10.1.0",
         "eslint-plugin-node": "^11.1.0",
@@ -46237,7 +46238,6 @@
         "es6-promise": "^4.2.8",
         "escodegen": "^2.0.0",
         "eslint-config-standard-jsx": "^11.0.0",
-        "eslint-plugin-cypress": "^2.15.1",
         "eslint-plugin-jsx-a11y": "^6.7.1",
         "eslint-plugin-react": "^7.32.2",
         "eslint-plugin-react-hooks": "^4.6.0",
@@ -55100,7 +55100,6 @@
         "es6-promise": "^4.2.8",
         "escodegen": "^2.0.0",
         "eslint-config-standard-jsx": "^11.0.0",
-        "eslint-plugin-cypress": "^2.15.1",
         "eslint-plugin-jsx-a11y": "^6.7.1",
         "eslint-plugin-react": "^7.32.2",
         "eslint-plugin-react-hooks": "^4.6.0",

package.json

@@ -11,6 +11,7 @@
     "eslint-config-standard": "^17.0.0",
     "eslint-plugin-chai-expect": "^3.0.0",
     "eslint-plugin-chai-friendly": "^0.7.2",
+    "eslint-plugin-cypress": "^2.15.1",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-mocha": "^10.1.0",
     "eslint-plugin-node": "^11.1.0",

server-ce/.eslintrc

@@ -13,5 +13,9 @@
   "rules": {
     // Do not allow importing of implicit dependencies.
     "import/no-extraneous-dependencies": "error"
-  }
+  },
+  "overrides": [
+    // Extra rules for Cypress tests
+    { "files": ["**/*.spec.ts"], "extends": ["plugin:cypress/recommended"] }
+  ]
 }

server-ce/test/create-and-compile-project.spec.ts

@@ -8,11 +8,10 @@ describe('Project creation and compilation', function () {
     // this is the first project created, the welcome screen is displayed instead of the project list
     createProject('test-project', { isFirstProject: true })
     cy.url().should('match', /\/project\/[a-fA-F0-9]{24}/)
-    cy.findByText('\\maketitle')
-      .parent()
-      .click()
-      .type('\n\\section{{}Test Section}')
+    cy.findByText('\\maketitle').parent().click()
+    cy.findByText('\\maketitle').parent().type('\n\\section{{}Test Section}')
     // Wait for the PDF compilation throttling
+    // eslint-disable-next-line cypress/no-unnecessary-waiting
     cy.wait(3000)
     cy.findByText('Recompile').click()
     cy.get('.pdf-viewer').should('contain.text', 'Test Section')
@@ -62,10 +61,7 @@ describe('Project creation and compilation', function () {
       cy.findByLabelText('Select a File').select('frog.jpg')
       cy.findByText('Create').click()
     })
-    // FIXME: should be aria-labeled or data-test-id
-    cy.get('.file-tree').first().within(() => {
-      cy.findByText('frog.jpg').click()
-    })
+    cy.findByTestId('file-tree').findByText('frog.jpg').click()
     cy.findByText('Another project')
       .should('have.attr', 'href')
       .then(href => {
@@ -121,9 +117,7 @@ describe('Project creation and compilation', function () {
       cy.url().should('include', targetProjectId)
     })
 
-    cy.get('.file-tree').first().within(() => {
-      cy.findByText('frog.jpg').click()
-    })
+    cy.findByTestId('file-tree').findByText('frog.jpg').click()
     cy.findByText('Another project')
       .should('have.attr', 'href')
       .then(href => {

services/web/app/views/project/editor/file-tree-react.pug

@@ -8,7 +8,7 @@ aside.editor-sidebar.full-size(
 	vertical-resizable-panes-resize-on="left-pane-resize-all"
 )
 
-	.file-tree(
+	div(
 		ng-controller="ReactFileTreeController"
 		vertical-resizable-top
 	)

services/web/frontend/js/features/file-tree/components/file-tree-root.tsx

@@ -49,7 +49,11 @@ const FileTreeRoot = React.memo<{
   if (!isReady) return null
 
   return (
-    <div className="file-tree" ref={setFileTreeContainer}>
+    <div
+      className="file-tree"
+      data-testid="file-tree"
+      ref={setFileTreeContainer}
+    >
       {fileTreeContainer && (
         <FileTreeContext
           refProviders={refProviders}

services/web/package.json

@@ -284,7 +284,6 @@
     "es6-promise": "^4.2.8",
     "escodegen": "^2.0.0",
     "eslint-config-standard-jsx": "^11.0.0",
-    "eslint-plugin-cypress": "^2.15.1",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",