feat(test): restart Cypress initiative

README.md

@@ -12,15 +12,58 @@ For system requirements, installation/upgrade guides, troubleshooting etc., head
 
 ## API Docs
 
-If you're interested in the development of a client, Koel's offical API documentation is available [here](https://api-docs.koel.dev).
+If you're interested in the development of a client, Koel's official API documentation is available [here](https://api-docs.koel.dev).
 
-## Contribute
+## Development
 
-All contributions, big or small, are warm-heartedly welcome! Please note, however, that if you want to work on a new feature, first open an issue to make sure it's something desired – doing this will greatly save time for all of us.
+Since Koel makes use of [git submodules](https://git-scm.com/book/en/v2/Git-Tools-Submodules), you'll want to make sure the submodule is up-to-date:
 
-A quick and easy way to start hacking on koel is to open and run this repo in Gitpod, an online IDE with full Laravel support.
+```bash
+git pull
+git submodule update --init --recursive --remote
+```
 
-[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/koel/koel)
+To start the **PHP dev server**, which serves as the API of the application, run the following command. By default, the server will listen at port `8000`.
+
+```bash
+php artisan serve
+```
+
+For the **client application** itself, run this command:
+
+```bash
+yarn hot
+```
+
+A development version of Koel, with full support for hot module reloading etc., should now be available at `http://localhost:8080`.
+
+Alternatively, you can start both the PHP server and the client application in one go with `yarn dev`, which uses [`start-server-and-test`](https://github.com/bahmutov/start-server-and-test) under the hood.
+
+## Testing, Linting, Static Analysis and Stuff
+
+```bash
+# PHP-related code quality tasks
+# Basically, take a look at the "scripts" section in composer.json
+composer test        # Run the PHP test suite
+composer cs          # Run code style checker
+composer cs:fix      # Run code style fixer 
+composer analyze     # Run PHP static analysis
+
+yarn build # Build a production version of the client application
+
+# Client/E2E code quality tasks
+# You may want to run `yarn build` first.
+yarn test:e2e        # Run the Cypress test suite interactively
+yarn test:e2e:ci     # Run the Cypress test suite non-interactively (CI mode)
+# These commands need to be run from within the submodule (resources/assets)
+yarn lint            # Lint
+yarn type-check      # TypeScript type checking
+yarn test            # Unit testing
+```
+
+> A quick and easy way to start hacking on koel is to open and run this repo in Gitpod, an online IDE with full Laravel support.
+> 
+> [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/koel/koel)
 
 ## Backers
 
@@ -62,7 +105,6 @@ A quick and easy way to start hacking on koel is to open and run this repo in Gi
 #### GitHub Sponsors
 
 * Eduardo San Martin Morote ([@posva](https://github.com/posva))
-* Nina Reynolds ([@cutecycle](https://github.com/cutecycle))
 * [You](https://github.com/users/phanan/sponsorship)?
 
 #### OpenCollective

cypress.json

@@ -1,5 +1,7 @@
 {
   "baseUrl": "http://localhost:8088",
+  "pluginsFile": "cypress/plugins/index.ts",
   "viewportWidth": 1440,
-  "viewportHeight": 900
+  "viewportHeight": 768,
+  "video": false
 }

cypress/.eslintrc

@@ -1,6 +0,0 @@
-{
-  "plugins": ["jest"],
-  "env": {
-    "jest/globals": true
-  }
-}

cypress/fixtures/token.json

@@ -1,3 +0,0 @@
-{
-  "token": "4AZUKXmPtbHqXHbyDWFyRVHBMdRPJYQYaUVNu3RRf2qfu7s8aPNYhdJBChj5nKZ5mNRgUa9Mhzd4rnY49bQpRBhj53SY8YfzQAHMxhxkzn3yHdUErNFKYECETsxP3kMwFQ8gM8P5X42G9AqmaWfQHk82e5AzMZv3EVvGPsxVJRybtyzFQ42XnRFVsRs43ZRMESwdUYqYpKgGDm7JDdEQ7yeheWfFBfQakW4beXAPVMrmtCG7qzPZxydDe55rffzz4wNuNuVa9677FrZBt9Fv5QcJFRsrQUmvcXV6mTpt9UxNv2CgGGQEMAEw4R4n5uQwAN4eD3Y9w2Mr8YA2DGt3yz5XnhzrtbEJBGGc"
-}

cypress/integration/authentication.spec.js

@@ -1,19 +0,0 @@
-describe('authentication', () => {
-  it('requires login', () => {
-    cy.visit('/')
-    cy.get('[data-cy=loginForm]').should('be.visible')
-  })
-
-  it('logs in with valid username and password', () => {
-    cy.login()
-    cy.get('[data-cy=appHeader]').should('be.visible')
-  })
-
-  it('logs out', () => {
-    cy.login()
-    cy.route('DELETE', '/api/me', [])
-    cy.get('[data-cy=btnLogOut]').click({ force: true }) // https://github.com/cypress-io/cypress/issues/695
-    cy.get('[data-cy=loginForm]').should('be.visible')
-    cy.get('[data-cy=appHeader]').should('not.be.visible')
-  })
-})

cypress/integration/authentication.spec.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+
+context('Authentication', () => {
+  beforeEach(() => {
+    cy.visit('/')
+  })
+
+  const submitLoginForm = () => {
+    cy.get('[type=email]').type('admin@koel.test')
+    cy.get('[type=password]').type('super-secret')
+    cy.get('[type=submit]').click()
+  }
+
+  it('logs in with valid credentials', () => {
+    cy.intercept('POST', '/api/me', {
+      token: 'mock-token'
+    })
+
+    cy.intercept('/api/data', {
+      fixture: 'data.json'
+    })
+
+    submitLoginForm()
+    cy.get('[id=main]').should('be.visible')
+  })
+
+  it('fails to log in with invalid credentials', () => {
+    cy.intercept('POST', '/api/me', {
+      statusCode: 401
+    })
+
+    submitLoginForm()
+    cy.findByTestId('login-form')
+      .should('be.visible')
+      .and('have.class', 'error')
+  })
+})

cypress/integration/remote.spec.js

@@ -1,11 +0,0 @@
-describe('remote', () => {
-  it('requires login', () => {
-    cy.visit('/remote')
-    cy.get('[data-cy=loginForm]').should('be.visible')
-  })
-
-  it('logs in with valid username and password', () => {
-    cy.login('/remote')
-    cy.get('[data-cy=main]').should('be.visible')
-  })
-})

cypress/plugins/index.ts

@@ -1,3 +1,4 @@
+/// <reference types="cypress" />
 // ***********************************************************
 // This example plugins/index.js can be used to load plugins
 //
@@ -8,10 +9,8 @@
 // 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)
-
-module.exports = (on, config) => {
-  // `on` is used to hook into various events Cypress emits
-  // `config` is the resolved Cypress config
+export default (on, config) => {
+  return Object.assign({}, config, {
+    supportFile: 'cypress/support/index.ts'
+  })
 }

cypress/support/commands.js

@@ -1,36 +0,0 @@
-// ***********************************************
-// 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 is will overwrite an existing command --
-// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
-
-Cypress.Commands.add('login', (path = '/', email = 'me@phanan.net', password = 'secret') => {
-  cy.server()
-  cy.route('POST', '/api/me', 'fixture:token.json')
-  cy.route('GET', '/api/data', 'fixture:data.json')
-  cy.route('GET', '/api/ping', '')
-  cy.visit(path)
-  cy.get('[type=email]').type(email)
-  cy.get('[type=password]').type(password)
-  cy.get('[type=submit]').click()
-})

cypress/support/commands.ts

@@ -0,0 +1 @@
+import '@testing-library/cypress/add-commands'

cypress/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "baseUrl": ".",
+    "lib": ["es5", "dom"],
+    "types": ["cypress", "@testing-library/cypress", "@types/node"]
+  },
+  "include": [
+    "**/*.ts"
+  ]
+}

package.json

@@ -14,8 +14,9 @@
     "url": "https://github.com/koel/koel"
   },
   "devDependencies": {
+    "@testing-library/cypress": "^7.0.3",
     "cross-env": "^3.2.3",
-    "cypress": "^3.2.0",
+    "cypress": "^6.2.0",
     "font-awesome": "^4.7.0",
     "husky": "^4.2.5",
     "laravel-mix": "^5.0.4",
@@ -23,6 +24,7 @@
     "resolve-url-loader": "^3.1.1",
     "sass": "^1.26.5",
     "sass-loader": "^8.0.2",
+    "start-server-and-test": "^1.11.7",
     "ts-loader": "^7.0.1",
     "typescript": "^3.8.3",
     "vue-template-compiler": "^2.6.11",
@@ -30,13 +32,15 @@
     "webpack-node-externals": "^1.6.0"
   },
   "scripts": {
-    "dev": "yarn hot",
     "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
     "watch-poll": "yarn watch -- --watch-poll",
     "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "cy": "kill-port 8088 && php artisan serve --port=8088 & wait-on http://localhost:8088 && cypress run --browser chrome",
-    "build": "yarn production",
-    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "dev": "start-test 'php artisan serve --port=8000 --quiet' :8000 hot",
+
+    "test:e2e": "start-test 'php artisan serve --port=8088 --quiet' :8088 'cypress open'",
+    "test:e2e:ci": "start-test 'php artisan serve --port=8088 --quiet' :8088 'cypress run'",
+
+    "build": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
     "build-demo": "cross-env NODE_ENV=demo node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
   },
   "dependencies": {},