Fix failing pipeline integration tests (#1621)

Author: bourdakos1

.github/workflows/build.yml

@@ -42,9 +42,9 @@ jobs:
         python-version: ${{ matrix.python-version }}
         architecture: 'x64'
     - name: Set up Node
-      uses: actions/setup-node@v1
+      uses: actions/setup-node@v2
       with:
-         node-version: '12.18'
+         node-version: '*'
     - name: Create npm configuration for authentication
       run: |
         echo "scripts-prepend-node-path=true" >> ~/.npmrc
@@ -89,6 +89,7 @@ jobs:
       if: failure()
       with:
         path: |
+          ${{ github.workspace }}/build/cypress-tests/*.log
           ${{ github.workspace }}/build/cypress-tests/screenshots//**/*
           ${{ github.workspace }}/build/cypress-tests/videos//**/*
           /home/runner/.npm/_logs/*.log

package.json

@@ -14,10 +14,10 @@
     "eslint:check": "eslint . --ignore-path .gitignore --ext .ts,.tsx,.js",
     "prettier": "prettier --ignore-path .gitignore --write \"**/*{.ts,.tsx,.js,.jsx,.css,.json}\"",
     "prettier:check": "prettier --ignore-path .gitignore --check \"**/*{.ts,.tsx,.js,.jsx,.css,.json}\"",
-    "start-jupyter": "mkdir -p build/cypress-tests && jupyter lab --config=./tests/test-config.py",
     "test": "npm run test:unit && npm run test:integration",
-    "test:integration": "start-server-and-test start-jupyter http-get://localhost:58888?token=test cy:run",
-    "test:integration:debug": "start-server-and-test start-jupyter http-get://localhost:58888?token=test cy:open",
+    "start": "mkdir -p build/cypress-tests && ts-node scripts/start-test-server.ts",
+    "test:integration": "server-test 'yarn start' ':9000/minio/health/live|http-get://localhost:58888?token=test' 'yarn cy:run'",
+    "test:integration:debug": "server-test 'yarn start' ':9000/minio/health/live|http-get://localhost:58888?token=test' 'yarn cy:open'",
     "test:unit": "lerna run test --scope \"@elyra/*\" --concurrency 1 --stream"
   },
   "husky": {
@@ -41,7 +41,9 @@
     "@4tw/cypress-drag-drop": "^1.3.1",
     "@cypress/webpack-preprocessor": "^5.5.0",
     "@jupyterlab/testutils": "3.0.0",
+    "@testing-library/cypress": "^7.0.4",
     "@types/jest": "^26.0.20",
+    "@types/node": "^15.0.1",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/react-intl": "^3.0.0",
@@ -50,6 +52,7 @@
     "cypress": "^6.2.0",
     "eslint": "^6.5.0",
     "eslint-config-prettier": "^6.9.0",
+    "eslint-plugin-cypress": "^2.11.2",
     "eslint-plugin-header": "^3.0.0",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-prettier": "^3.1.2",
@@ -63,9 +66,10 @@
     "lint-staged": "^9.5.0",
     "prettier": "^1.19.1",
     "rimraf": "~3.0.2",
-    "start-server-and-test": "1.7.9",
+    "start-server-and-test": "^1.12.1",
     "ts-jest": "^26.4.4",
     "ts-loader": "^6.2.2",
+    "ts-node": "^9.1.1",
     "typescript": "~4.1.3",
     "webpack": "^5.0.0"
   }

packages/ui-components/src/TextInput.tsx

@@ -78,6 +78,7 @@ export const TextInput: React.FC<ITextFieldProps> = ({
     >
       <CustomTooltip title={description ?? ''}>
         <TextField
+          id={fieldName}
           label={label}
           required={required}
           variant="outlined"

scripts/start-test-server.ts

@@ -0,0 +1,52 @@
+/*
+ * Copyright 2018-2021 Elyra Authors
+ *
+ * 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 { exec, spawn } from 'child_process';
+import fs from 'fs';
+import path from 'path';
+
+const config = path.join(__dirname, '..', 'tests', 'test-config.py');
+const jupyter = exec(`jupyter lab --config ${config}`);
+
+const CONTAINER_NAME = 'minio_test';
+
+const docker = spawn('docker', [
+  'run',
+  '--rm',
+  '--name',
+  CONTAINER_NAME,
+  '-p',
+  '9000:9000',
+  'minio/minio',
+  'server',
+  '/data'
+]);
+
+const logDir = path.join(__dirname, '..', 'build', 'cypress-tests');
+
+const jupyterLog = fs.createWriteStream(path.join(logDir, 'jupyter.log'));
+jupyter.stderr?.pipe(jupyterLog);
+
+const dockerLog = fs.createWriteStream(path.join(logDir, 'docker.log'));
+docker.stderr.pipe(dockerLog);
+
+const handleTeardown = (): void => {
+  spawn('docker', ['kill', CONTAINER_NAME]);
+  process.exit();
+};
+
+process.on('SIGINT', handleTeardown);
+process.on('SIGTERM', handleTeardown);

tests/.eslintrc.js

@@ -0,0 +1,23 @@
+/*
+ * Copyright 2018-2021 Elyra Authors
+ *
+ * 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.
+ */
+
+module.exports = {
+  plugins: ['cypress'],
+  env: {
+    'cypress/globals': true,
+    node: true
+  }
+};

tests/integration/codesnippet.ts

@@ -18,7 +18,7 @@ describe('Code Snippet tests', () => {
   const snippetName = 'test-code-snippet';
 
   beforeEach(() => {
-    cy.openJupyterLab();
+    cy.resetJupyterLab();
     openCodeSnippetExtension();
   });
 
@@ -36,8 +36,6 @@ describe('Code Snippet tests', () => {
     cy.get(
       '.elyra-metadata .elyra-metadataHeader-button[title="Create new Code Snippet"]'
     ).should('be.visible');
-    // Close metadata editor tab
-    cy.closeCurrentTab();
   });
 
   it('should provide warnings when required fields are not entered properly', () => {
@@ -53,9 +51,6 @@ describe('Code Snippet tests', () => {
       'required-warnings'
     );
     cy.get('@required-warnings').should('have.length', 2);
-
-    // Close metadata editor tab
-    cy.closeCurrentTab();
   });
 
   it('should create valid code-snippet', () => {
@@ -339,21 +334,6 @@ const saveAndCloseMetadataEditor = (): void => {
   cy.get('.elyra-metadataEditor-saveButton > button:visible').click();
 };
 
-// const fillMetadaEditorForm = (snippetName: string): void => {
-//   // Name code snippet
-//   cy.get('.elyra-metadataEditor-form-display_name').type(snippetName);
-
-//   // Select python language from dropdown list
-//   editSnippetLanguage(snippetName, 'Python');
-
-//   // Add snippet code
-//   cy.get('.elyra-metadataEditor-code > .bp3-form-content').type(
-//     'print("Code Snippet Test")'
-//   );
-
-//   saveAndCloseMetadataEditor();
-// };
-
 const deleteSnippet = (snippetName: string): void => {
   // Find element by name
   const item = getSnippetByName(snippetName);
@@ -374,19 +354,6 @@ const getActionButtonsElement = (snippetName: string): any => {
   return actionButtonsElement;
 };
 
-// const deleteFileByType = (type: string): void => {
-//   cy.getFileByType(type).rightclick();
-//   cy.get('.p-Menu-content > [data-command="filebrowser:delete"]').click();
-//   cy.get('.jp-mod-accept > .jp-Dialog-buttonLabel:visible').click();
-//   cy.wait(100);
-// };
-
-// const checkCodeMirror = (): void => {
-//   cy.get('span.cm-string')
-//     .first()
-//     .contains('Code Snippet Test');
-// };
-
 const insert = (snippetName: string): void => {
   getActionButtonsElement(snippetName).within(() => {
     cy.get('button[title="Insert"]').click();
@@ -403,8 +370,3 @@ const editSnippetLanguage = (snippetName: string, lang: string): void => {
     .contains(`${lang}`)
     .click();
 };
-
-// const closeTabWithoutSaving = (): void => {
-//   cy.closeCurrentTab();
-//   cy.get('button.jp-mod-accept.jp-mod-warn').click();
-// };

tests/integration/git.ts

@@ -15,8 +15,8 @@
  */
 
 describe('Git', () => {
-  it('opens jupyterlab', () => {
-    cy.visit('?token=test&reset');
+  beforeEach(() => {
+    cy.resetJupyterLab();
   });
 
   it('opens git extension', () => {

tests/integration/launcher.ts

@@ -16,7 +16,7 @@
 
 describe('Elyra launcher is in use', () => {
   beforeEach(() => {
-    cy.openJupyterLab();
+    cy.resetJupyterLab();
   });
 
   it('should have Elyra extensions', () => {

tests/integration/lsp.ts

@@ -15,34 +15,25 @@
  */
 
 describe('LSP', () => {
-  before(() => {
+  beforeEach(() => {
     // read python file used for testing
-    cy.readFile('tests/assets/helloworld.py').then((file: any) => {
-      cy.writeFile('build/cypress-tests/helloworld.py', file);
-    });
+    cy.bootstrapFile('helloworld.py');
 
-    cy.openJupyterLab();
+    cy.resetJupyterLab();
   });
 
-  after(() => {
+  afterEach(() => {
     // delete Python file used for testing
-    cy.exec('find build/cypress-tests/ -name helloworld.py -delete', {
-      failOnNonZeroExit: false
-    });
+    cy.deleteFile('helloworld.py');
   });
 
   it('LSP extension is initialized', () => {
     // open Python file
-    cy.getFileByType('python').dblclick();
-
-    cy.wait(1000);
+    cy.openFile('helloworld.py');
 
     //check for lsp item on status bar
     cy.get('.lsp-statusbar-item ').find(
       '[title="Fully connected & initialized (1 virtual document)"]'
     );
-
-    // close tab
-    cy.closeCurrentTab();
   });
 });