Merge pull request #4388 from backstage/blam/e2e

Use Tugboat as a place to run some tests

.github/workflows/tugboat.yml

@@ -48,11 +48,14 @@ jobs:
               target_url: "https://github.com/${{github.repository}}/actions/runs/${{github.run_id}}"
             });
 
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
           node-version: '14'
 
+      - name: yarn install
+        run: yarn --cwd cypress install
+
       # This is required because the environment_url param that Tugboat uses
       # to tell us where the preview is located isn't supported unless you
       # specify the custom Accept header when getting the deployment_status,
@@ -77,9 +80,25 @@ jobs:
             });
             console.log(result);
             return result.data.environment_url;
-      - name: echo tugboat preview url
-        run: |
-          curl ${{steps.get-status-env.outputs.result}}
+
+      - name: cypress run
+        uses: cypress-io/github-action@v2
+        env:
+          CYPRESS_baseUrl: ${{steps.get-status-env.outputs.result}}
+        with:
+          config-file: ./cypress.json
+          working-directory: ./cypress
+          browser: chrome
+          install: false
+          headless: true
+
+      - name: update artifact
+        if: ${{ always() }}
+        uses: actions/upload-artifact@v1
+        with:
+          name: cypress-videos
+          path: ./cypress/cypress/videos
+
       - name: set status
         if: ${{ failure() }}
         uses: actions/github-script@v3
@@ -94,6 +113,7 @@ jobs:
               context: 'Backstage Tugboat E2E Tests',
               target_url: "https://github.com/${{github.repository}}/actions/runs/${{github.run_id}}"
             });
+
       - name: set status
         if: ${{ success() }}
         uses: actions/github-script@v3

cypress/.eslintrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+  extends: [require.resolve('@backstage/cli/config/eslint.backend')],
+  rules: {
+    'no-console': 0,
+    'import/no-extraneous-dependencies': [
+      'error',
+      {
+        devDependencies: true,
+        optionalDependencies: false,
+        peerDependencies: false,
+        bundledDependencies: false,
+      },
+    ],
+    'jest/expect-expect': 'off',
+    'no-restricted-syntax': 'off',
+  },
+};

cypress/README.md

@@ -0,0 +1,27 @@
+# Cypress Tests for Backstage
+
+Hey 👋 Welcome to the Cypress tests for Backstage. They're designed to be run against the `packages/app` folder in the main repo, and be some form of smoke tests to make sure that we don't break any core functionality.
+
+They run part of the PR build, and are triggered from the `.github/workflows/tugboat.yml` file.
+
+The main app gets built up part of a [Tugboat Build](https://tugboat.qa), which when complete, sends a `deployment event` to the PR triggering the aforementioned workflow.
+
+### Running Locally
+
+In order to make typescript happy, this `cypress` package is separate from all the Jest dependencies in the monorepo workspaces setup.
+
+You can run the e2e tests locally pointing at your local running version like so:
+
+```sh
+cd cypress
+yarn install
+yarn cypress run
+```
+
+You can open up the `cypress` console by using `yarn cypress open`.
+
+You can also run towards any Backstage installation by using the Cypress Environment Variable overrides.
+
+```sh
+CYPRESS_baseUrl="http://demo.backstage.io" yarn cypress run
+```

cypress/cypress.json

@@ -0,0 +1,8 @@
+{
+  "baseUrl": "http://localhost:7000",
+  "integrationFolder": "./src/integration",
+  "supportFile": "./src/support",
+  "fixturesFolder": "./src/fixures",
+  "pluginsFile": "./src/plugins",
+  "defaultCommandTimeout": 10000
+}

cypress/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@backstage/cypress-tests",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "private": true,
+  "dependencies": {
+    "cypress": "^6.4.0",
+    "typescript": "^4.1.3"
+  }
+}

cypress/src/integration/catalog.ts

@@ -0,0 +1,29 @@
+/*
+ * Copyright 2021 Spotify AB
+ *
+ * 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.
+ */
+/// <reference types="cypress" />
+import 'os';
+
+describe('Catalog', () => {
+  describe('default entities', () => {
+    it('displays the correct amount of entities from default config', () => {
+      cy.loginAsGuest();
+
+      cy.visit('/catalog');
+
+      cy.contains('Owned (7)').should('be.visible');
+    });
+  });
+});

cypress/src/plugins/index.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright 2021 Spotify AB
+ *
+ * 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.
+ */
+export default () => {};

cypress/src/support/index.ts

@@ -0,0 +1,25 @@
+/*
+ * Copyright 2021 Spotify AB
+ *
+ * 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.
+ */
+/// <reference types="cypress" />
+
+Cypress.Commands.add('loginAsGuest', () => {
+  cy.visit('/', {
+    onLoad: (win: Window) =>
+      win.localStorage.setItem('@backstage/core:SignInPage:provider', 'guest'),
+  });
+});
+
+export {};

cypress/src/types.d.ts

@@ -0,0 +1,26 @@
+/*
+ * Copyright 2021 Spotify AB
+ *
+ * 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.
+ */
+declare module 'zombie';
+declare module 'pgtools';
+declare namespace Cypress {
+  interface Chainable {
+    /**
+     * Login as guest
+     * @example cy.loginAsGuests
+     */
+    loginAsGuest(): Chainable<Element>;
+  }
+}

cypress/tsconfig.json

@@ -0,0 +1,37 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "declaration": true,
+    "declarationMap": false,
+    "esModuleInterop": true,
+    "experimentalDecorators": false,
+    "forceConsistentCasingInFileNames": true,
+    "importHelpers": false,
+    "incremental": true,
+    "isolatedModules": true,
+    "jsx": "react",
+    "lib": ["DOM", "DOM.Iterable", "ScriptHost", "ES2020", "ESNext.Promise"],
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "noEmit": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitAny": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "pretty": true,
+    "removeComments": false,
+    "resolveJsonModule": true,
+    "sourceMap": false,
+    "skipLibCheck": false,
+    "strict": true,
+    "strictBindCallApply": true,
+    "strictFunctionTypes": true,
+    "strictNullChecks": true,
+    "strictPropertyInitialization": true,
+    "stripInternal": true,
+    "target": "ES2019",
+    "types": ["node", "cypress"]
+  }
+}

packages/e2e-test/.eslintrc.js

@@ -1,6 +1,5 @@
 module.exports = {
   extends: [require.resolve('@backstage/cli/config/eslint.backend')],
-  ignorePatterns: ['templates/**'],
   rules: {
     'no-console': 0,
     'import/no-extraneous-dependencies': [

yarn.lock

@@ -20529,9 +20529,9 @@ prettier@^2.0.5, prettier@~2.0.5:
   integrity sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg==
 
 pretty-bytes@^5.3.0:
-  version "5.3.0"
-  resolved "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.3.0.tgz#f2849e27db79fb4d6cfe24764fc4134f165989f2"
-  integrity sha512-hjGrh+P926p4R4WbaB6OckyRtO0F0/lQBiT+0gnxjV+5kjPBrfVBFCsCLbMqVQeydvIoouYTCmmEURiH3R1Bdg==
+  version "5.5.0"
+  resolved "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.5.0.tgz#0cecda50a74a941589498011cf23275aa82b339e"
+  integrity sha512-p+T744ZyjjiaFlMUZZv6YPC5JrkNj8maRmPaQCWFJFplUAzpIUTRaTcS+7wmZtUoFXHtESJb23ISliaWyz3SHA==
 
 pretty-error@^2.1.1:
   version "2.1.1"