Merge pull request #122 from CSCfi/develop

bump to 0.6.0

.eslintrc.json

@@ -11,7 +11,8 @@
     "plugin:prettier/recommended",
     "plugin:flowtype/recommended",
     "plugin:import/errors",
-    "plugin:import/warnings"
+    "plugin:import/warnings",
+    "plugin:cypress/recommended"
   ],
   "parserOptions": {
     "ecmaFeatures": {
@@ -20,7 +21,7 @@
     "ecmaVersion": 2018,
     "sourceType": "module"
   },
-  "plugins": ["react", "jest", "flowtype", "import"],
+  "plugins": ["react", "jest", "flowtype", "import", "cypress"],
   "settings": {
     "react": {
       "version": "detect"
@@ -52,5 +53,9 @@
       }
     ]
   },
-  "ignorePatterns": ["node_modules/*", "build/*"]
+  "ignorePatterns": ["node_modules/*", "build/*", ".github/*"],
+  "globals": {
+    "cy": true,
+    "cypress/globals": true
+  }
 }

.github/workflows/codeql.yml

@@ -0,0 +1,45 @@
+name: "CodeQL"
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [master, develop]
+  schedule:
+    - cron: '0 17 * * 2'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+
+    strategy:
+      fail-fast: false
+      matrix:
+        # Override automatic language detection by changing the below list
+        # Supported options are ['csharp', 'cpp', 'go', 'java', 'javascript', 'python']
+        language: ['javascript']
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+      with:
+        # We must fetch at least the immediate parents so that if this is
+        # a pull request then we can checkout the head.
+        fetch-depth: 2
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v1
+      with:
+        languages: ${{ matrix.language }}
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v1
+
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v1

.github/workflows/e2etests.yml

@@ -0,0 +1,45 @@
+name: End-to-end tests
+on: [pull_request]
+
+jobs:
+  cypress-e2e-headless:
+    name: Cypress e2e
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node: ["14"]
+        browser: ["firefox", "chrome"]
+    steps:
+      - uses: actions/checkout@v2
+      - name: Build Frontend
+        run: npm install && npm run build
+      - name: Setup and Run backend
+        run: |
+          BRANCH=$(echo ${GITHUB_REF#refs/heads/} | sed -r 's#/+#-#g')
+          if [[ $BRANCH == master ]]; then
+            VERSION=master
+          else
+            VERSION=develop
+          fi
+          git clone --branch $VERSION https://github.com/CSCfi/metadata-submitter
+          cd metadata-submitter/metadata_backend
+          mkdir -p frontend
+          cp -r ../../build/* frontend/
+          cd ../
+          docker-compose up -d --build
+          sleep 30
+      - uses: cypress-io/github-action@v2
+        with:
+          browser: ${{ matrix.browser }}
+          headless: true
+          env: port=5430
+      - uses: actions/upload-artifact@v2
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: cypress/screenshots
+      - uses: actions/upload-artifact@v2
+        if: failure()
+        with:
+          name: cypress-videos
+          path: cypress/videos

.gitignore

@@ -7,6 +7,7 @@
 
 # testing
 /coverage
+debug.log
 
 # production
 /build
@@ -17,6 +18,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.eslintcache
 
 npm-debug.log*
 yarn-debug.log*

.prettierignore

@@ -1 +1,2 @@
 coverage
+.github

CONTRIBUTING.md

@@ -6,6 +6,8 @@ If you're reading this, it means you saw something that is not right, you want t
 
 We have a handful of unit tests and integration tests. In our Git workflow unit tests are run on every Push and Pull Request, while integration tests run on every Pull Request.
 
+We use [Cypress](https://www.cypress.io/) for e2e testing, which are run agains the develop branch of [metadata-submitter backend](https://github.com/CSCfi/metadata-submitter).
+
 ### Submitting Issues
 
 We have templates for submitting new issues, that you can fill out. For example if you found a bug, use the following [template to report a bug](https://github.com/CSCfi/metadata-submitter-frontend/issues/new?template=bug_report.md).

README.md

@@ -29,6 +29,8 @@ After installing and running, frontend can be found from `http://localhost:3000`
 
 Run Jest-based tests with `npm test`. Check code formatting and style errors with `npm run lint:check` and fix them with `npm run lint`. Respectively for formatting errors in json/yaml/css/md -files, use `npm run format:check` or `npm run format`. Possible type errors can be checked with `npm run flow`.
 
+End-to-end tests can be run with `npx cypress open`.
+
 We're following recommended settings from eslint, react and prettier -packages with couple exceptions, which you can find in `.eslintrc` and `.prettierrc`. Linting, formatting and testing are also configured for you as a git pre-commit, which is recommended to use to avoid fails on CI pipeline.
 
 ## Building

cypress.json

@@ -0,0 +1,7 @@
+{
+  "env": {
+    "port": "3000",
+    "mockAuthHost": "localhost",
+    "mockAuthPort": "8000"
+  }
+}

cypress/fixtures/study_test.xml

@@ -0,0 +1,34 @@
+<STUDY_SET>
+    <STUDY center_name="GEO" alias="GSE10966" accession="SRP000539">
+        <IDENTIFIERS>
+            <PRIMARY_ID>SRP000539</PRIMARY_ID>
+            <EXTERNAL_ID namespace="BioProject" label="primary">PRJNA108793</EXTERNAL_ID>
+            <EXTERNAL_ID namespace="GEO">GSE10966</EXTERNAL_ID>
+        </IDENTIFIERS>
+        <DESCRIPTOR>
+            <STUDY_TITLE>Highly integrated epigenome maps in Arabidopsis - whole genome shotgun bisulfite sequencing
+            </STUDY_TITLE>
+            <STUDY_TYPE existing_study_type="Other"/>
+            <STUDY_ABSTRACT>Part of a set of highly integrated epigenome maps for Arabidopsis thaliana. Keywords:
+                Illumina high-throughput bisulfite sequencing Overall design: Whole genome shotgun bisulfite sequencing
+                of wildtype Arabidopsis plants (Columbia-0), and met1, drm1 drm2 cmt3, and ros1 dml2 dml3 null mutants
+                using the Illumina Genetic Analyzer.
+            </STUDY_ABSTRACT>
+            <CENTER_PROJECT_NAME>GSE10966</CENTER_PROJECT_NAME>
+        </DESCRIPTOR>
+        <STUDY_LINKS>
+            <STUDY_LINK>
+                <XREF_LINK>
+                    <DB>pubmed</DB>
+                    <ID>18423832</ID>
+                </XREF_LINK>
+            </STUDY_LINK>
+        </STUDY_LINKS>
+        <STUDY_ATTRIBUTES>
+            <STUDY_ATTRIBUTE>
+                <TAG>parent_bioproject</TAG>
+                <VALUE>PRJNA107265</VALUE>
+            </STUDY_ATTRIBUTE>
+        </STUDY_ATTRIBUTES>
+    </STUDY>
+</STUDY_SET>

cypress/integration/app.spec.js

@@ -0,0 +1,51 @@
+describe("Basic e2e", function () {
+  const baseUrl = "http://localhost:" + Cypress.env("port") + "/"
+
+  it("should navigate to home with click of login button", () => {
+    cy.visit(baseUrl)
+    cy.get('[alt="CSC Login"]').click()
+  })
+
+  it("should create new folder, add study form and publish folder", () => {
+    cy.visit(baseUrl)
+    cy.get('[alt="CSC Login"]').click()
+    cy.visit(baseUrl + "newdraft")
+
+    // Navigate to folder creation
+    cy.get("button[type=button]").contains("New folder").click()
+
+    // Add folder name & description, navigate to submissions
+    cy.get("input[name='name']").type("Test name")
+    cy.get("textarea[name='description']").type("Test description")
+    cy.get("button[type=button]").contains("Next").click()
+
+    // Fill a study form and submit object
+    cy.get("div[role=button]").contains("Study").click()
+    cy.get("div[role=button]").contains("Fill Form").click()
+    cy.get("input[name='descriptor.studyTitle']").type("Test title")
+    cy.get("select[name='descriptor.studyType']").select("Metagenomics")
+    cy.get("button[type=submit]").contains("Submit").click()
+    cy.get(".MuiListItem-container", { timeout: 10000 }).should("have.length", 1)
+
+    // Upload an xml file.
+    cy.get("div[role=button]").contains("Upload XML File").click()
+    cy.fixture("study_test.xml").then(fileContent => {
+      cy.get('input[type="file"]').attachFile({
+        fileContent: fileContent.toString(),
+        fileName: "testFile.xml",
+        mimeType: "text/xml",
+        force: true,
+      })
+    })
+    // Hacky way to get past RHF watch -method problem that doesn't allow cypress to get updated value for file
+    cy.get("form").submit()
+
+    // Saved objects list should have newly added item
+    cy.get(".MuiListItem-container", { timeout: 10000 }).should("have.length", 2)
+
+    // // Navigate to summary and publish
+    cy.get("button[type=button]").contains("Next").click()
+    cy.get("button[type=button]").contains("Publish").click()
+    cy.get('button[aria-label="Publish folder contents and move to frontpage"]').contains("Publish").click()
+  })
+})

cypress/integration/login.spec.js

@@ -0,0 +1,28 @@
+describe("Login e2e", function () {
+  beforeEach(() => {
+    cy.setMockUser("frontend.test", "FrontendTest", "E2EUser")
+  })
+
+  const baseUrl = "http://localhost:" + Cypress.env("port") + "/"
+
+  it("should contain session cookie", () => {
+    cy.visit(baseUrl)
+    cy.get('[alt="CSC Login"]').click()
+    cy.getCookie("MTD_SESSION").should("exist")
+  })
+
+  it("should contain the test user name", () => {
+    cy.visit(baseUrl)
+    cy.get('[alt="CSC Login"]').click()
+    cy.get("div").contains("Logged in as: E2EUser FrontendTest")
+  })
+
+  it("should go to main page on logout", () => {
+    cy.visit(baseUrl)
+    cy.get('[alt="CSC Login"]').click()
+    cy.contains("Log out").click()
+    cy.location().should(loc => {
+      expect(loc.pathname).to.eq("/")
+    })
+  })
+})

cypress/plugins/index.js

@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

cypress/support/commands.js

@@ -0,0 +1,38 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+
+// File upload
+import "cypress-file-upload"
+
+Cypress.Commands.add("setMockUser", (eppnUser, familyName, givenName) => {
+  const mockAuthUrl = "http://" + Cypress.env("mockAuthHost") + ":" + Cypress.env("mockAuthPort") + "/setmock"
+
+  cy.request({
+    method: "GET",
+    url: mockAuthUrl,
+    qs: { eppn: eppnUser + "@test.fi", family: familyName, given: givenName },
+  })
+})

cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import "./commands"
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')