[legacy-framework] test(examples): add cypress tests to first demo

examples/first-demo/cypress.json

@@ -0,0 +1,7 @@
+{
+ "baseUrl": "http://localhost:3000",
+ "integrationFolder": "tests/integration",
+ "supportFile": "tests/support/index.js",
+ "pluginsFile": "tests/plugins/index.js",
+ "fixturesFolder": "tests/fixtures"
+}

examples/first-demo/package.json

@@ -6,7 +6,8 @@
  "start": "next dev",
  "migrate": "prisma2 generate && prisma2 migrate up --experimental",
  "build": "prisma2 generate && next build",
- "now-start": "next start"
+ "now-start": "next start",
+ "cy:open": "cypress open"
  },
  "dependencies": {
  "@blitzjs/core": "*",
@@ -19,9 +20,12 @@
  },
  "devDependencies": {
  "@fullhuman/postcss-purgecss": "2.1.0",
+ "@testing-library/cypress": "^5.3.0",
  "@types/node": "13.7.6",
  "@types/react": "16.9.23",
+ "@types/testing-library__cypress": "^5.0.3",
  "autoprefixer": "9.7.4",
+ "cypress": "^4.1.0",
  "prisma2": "2.0.0-alpha.833",
  "typescript": "3.8.2"
  },

examples/first-demo/pages/posts/[id].tsx

@@ -50,9 +50,10 @@ function Page({post}) {
  ))}
  <Form action={`/api/posts/${post.id}/comments`} method="POST" className="min-w-full mt-6">
  <div className="mb-4">
- <label className="block text-gray-700 text-sm font-bold mb-2">New Comment</label>
+ <label htmlFor="content" className="block text-gray-700 text-sm font-bold mb-2">New Comment</label>
  <input
  name="content"
+ id="content"
  className="disabled:bg-gray-400 shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
  />
  </div>

examples/first-demo/pages/posts/[id]/edit.js

@@ -21,17 +21,19 @@ function Page({post}) {
 
  <Form action={`/api/posts/${post.id}`} method="PATCH" className="min-w-full">
  <div className="mb-4">
- <label className="block text-gray-700 text-sm font-bold mb-2">Title</label>
+ <label htmlFor="title" className="block text-gray-700 text-sm font-bold mb-2">Title</label>
  <input
  name="title"
+ id="title"
  defaultValue={post.title}
  className="disabled:bg-gray-400 shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
  />
  </div>
  <div className="mb-4">
- <label className="block text-gray-700 text-sm font-bold mb-2">Content</label>
+ <label htmlFor="content" className="block text-gray-700 text-sm font-bold mb-2">Content</label>
  <input
  name="content"
+ id="content"
  defaultValue={post.content}
  className="disabled:bg-gray-400 shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
  />

examples/first-demo/pages/posts/new.js

@@ -18,16 +18,18 @@ function Page() {
 
  <Form action={`/api/posts`} method="POST" className="min-w-full">
  <div className="mb-4">
- <label className="block text-gray-700 text-sm font-bold mb-2">Title</label>
+ <label htmlFor="title" className="block text-gray-700 text-sm font-bold mb-2">Title</label>
  <input
  name="title"
+ id="title"
  className="disabled:bg-gray-400 shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
  />
  </div>
  <div className="mb-4">
- <label className="block text-gray-700 text-sm font-bold mb-2">Content</label>
+ <label htmlFor="content" className="block text-gray-700 text-sm font-bold mb-2">Content</label>
  <input
  name="content"
+ id="content"
  className="disabled:bg-gray-400 shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
  />
  </div>

examples/first-demo/tests/integration/home_spec.ts

@@ -0,0 +1,23 @@
+describe('The Home Page', () => {
+ it('successfuly loads', () => {
+ cy.visit('/')
+
+ cy.findByText('First Ever Blitz ⚡️ Demo!').should('exist')
+ })
+
+ it('links to project GitHub', () => {
+ cy.visit('/')
+
+ cy.findByText(/view on github/i)
+ .should('have.attr', 'href', 'https://github.com/blitz-js/blitz')
+ })
+
+ it('links to post page', () => {
+ cy.visit('/')
+
+ cy.findByText(/view posts/i)
+ .click()
+
+ cy.url().should('eq', `${Cypress.config().baseUrl}/posts`)
+ })
+})

examples/first-demo/tests/integration/new_post_spec.ts

@@ -0,0 +1,29 @@
+describe('The New Post Page', () => {
+ it('successfuly loads', () => {
+ cy.visit('/posts/new')
+
+ cy.findByText(/new post/i).should('exist')
+ })
+
+ it('links back to posts page', () => {
+ cy.visit('/posts/new')
+
+ cy.findByText(/cancel/i)
+ .click()
+
+ cy.url().should('eq', `${Cypress.config().baseUrl}/posts`)
+ })
+
+ it('can add new posts', () => {
+ cy.visit('/posts/new')
+
+ cy.findByLabelText(/title/i)
+ .type('Apple')
+ cy.findByLabelText(/content/i)
+ .type('Banana')
+ cy.findByText(/create/i)
+ .click()
+
+ cy.findByText("Apple").should('exist')
+ })
+})

examples/first-demo/tests/integration/post_edit_spec.ts

@@ -0,0 +1,42 @@
+describe('The Post Edit Page', () => {
+ beforeEach(() => {
+ cy.task('db:clear')
+ cy.task('db:posts:add', {title: 'Apple', content: 'Banana'})
+ .as('post')
+ })
+
+ it('successfuly loads', function() {
+ const {id} = this.post
+ cy.visit(`/posts/${id}/edit`)
+
+ cy.findByText('Apple').should('exist')
+ })
+
+ it('links back to post page', function() {
+ const {id} = this.post
+ cy.visit(`/posts/${id}/edit`)
+
+ cy.findByText(/cancel/i)
+ .click()
+
+ cy.url().should('eq', `${Cypress.config().baseUrl}/posts/${id}`)
+ })
+
+ it('can update post data', function() {
+ const {id} = this.post
+ cy.visit(`/posts/${id}/edit`)
+
+ cy.findByLabelText(/title/i)
+ .clear()
+ .type('Strawberry')
+ cy.findByLabelText(/content/i)
+ .clear()
+ .type('Blueberry')
+ cy.findByText(/save/i)
+ .click()
+
+ cy.url().should('eq', `${Cypress.config().baseUrl}/posts/${id}`)
+ cy.findByText('Strawberry').should('exist')
+ cy.findByText('Blueberry').should('exist')
+ })
+})

examples/first-demo/tests/integration/post_spec.ts

@@ -0,0 +1,72 @@
+describe('The Post Page', () => {
+ beforeEach(() => {
+ cy.task('db:clear')
+ cy.task('db:posts:add', {title: 'Apple', content: 'Banana'})
+ .as('post')
+ })
+
+ it('successfuly loads', function() {
+ const {id} = this.post
+ cy.visit(`/posts/${id}`)
+
+ cy.findByText('Apple').should('exist')
+ cy.findByText('Banana').should('exist')
+ })
+
+ it('links back to posts page', function() {
+ const {id} = this.post
+ cy.visit(`/posts/${id}`)
+
+ cy.findByText(/back to posts/i)
+ .click()
+
+ cy.url().should('eq', `${Cypress.config().baseUrl}/posts`)
+ })
+
+ it('links to post edit page', function() {
+ const {id} = this.post
+ cy.visit(`/posts/${id}`)
+
+ cy.findByText(/edit/i)
+ .click()
+
+ cy.url().should('eq', `${Cypress.config().baseUrl}/posts/${id}/edit`)
+ })
+
+ it('can add comments', function() {
+ const {id} = this.post
+ cy.visit(`/posts/${id}`)
+
+ cy.findByLabelText(/new comment/i)
+ .type('Strawberry')
+ cy.findByText(/^comment$/i)
+ .click()
+
+ cy.findByText('Strawberry').should('exist')
+ })
+
+ it('can delete a post', function() {
+ const {id} = this.post
+ cy.visit(`/posts/${id}`)
+
+ cy.findAllByText(/delete/i)
+ .first()
+ .click()
+
+ cy.url().should('eq', `${Cypress.config().baseUrl}/posts`)
+ cy.findByText('Apple').should('not.exist')
+ })
+
+ it('can delete a comment', function() {
+ cy.task('db:comments:add', {post: this.post, content: 'Awesome!'})
+
+ const {id} = this.post
+ cy.visit(`/posts/${id}`)
+
+ cy.findAllByText(/delete/i)
+ .last()
+ .click()
+
+ cy.findByText('Awesome!').should('not.exist')
+ })
+})

examples/first-demo/tests/integration/posts_spec.ts

@@ -0,0 +1,35 @@
+describe('The Posts Page', () => {
+ it('successfuly loads', () => {
+ cy.visit('/posts')
+
+ cy.findByText(/first \d posts/i).should('exist')
+ })
+
+ it('links to home page', () => {
+ cy.visit('/posts')
+
+ cy.findByText(/home/i)
+ .click()
+
+ cy.url().should('eq', `${Cypress.config().baseUrl}/`)
+ })
+
+ it('links to new post page', () => {
+ cy.visit('/posts')
+
+ cy.findByText(/new post/i)
+ .click()
+
+ cy.url().should('eq', `${Cypress.config().baseUrl}/posts/new`)
+ })
+
+ it('shows the number of added posts', () => {
+ cy.task('db:clear')
+ cy.task('db:posts:add', {title: 'Apple', content: 'Apple'})
+ cy.task('db:posts:add', {title: 'Banana', content: 'Banana'})
+
+ cy.visit('/posts')
+
+ cy.findByText(/first 2 posts/i).should('exist')
+ })
+})

examples/first-demo/tests/plugins/index.js

@@ -0,0 +1,9 @@
+const {addComment, addPost, clear} = require('./tasks/db')
+
+module.exports = (on) => {
+ on('task', {
+ 'db:clear': clear,
+ 'db:posts:add': addPost,
+ 'db:comments:add': addComment,
+ })
+}

examples/first-demo/tests/plugins/tasks/db.js

@@ -0,0 +1,25 @@
+const {PrismaClient} = require('@prisma/client')
+const db = new PrismaClient()
+
+const clear = async () => {
+ await db.connect()
+ await db.comment.deleteMany({})
+ await db.post.deleteMany({})
+ return null
+}
+
+const addPost = async (post) => {
+ await db.connect()
+ return db.post.create({data: post})
+}
+
+const addComment = async ({post, content}) => {
+ await db.connect()
+ return db.comment.create({data: {post: {connect: {id: post.id}}, content}})
+}
+
+module.exports = {
+ clear,
+ addPost,
+ addComment
+}

examples/first-demo/tests/support/commands.js

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

examples/first-demo/tests/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')

examples/first-demo/tsconfig.json

@@ -28,6 +28,7 @@
  "resolveJsonModule": true,
  "isolatedModules": true,
  "jsx": "preserve",
- "noImplicitAny": false
+ "noImplicitAny": false,
+ "types": ["cypress", "@types/testing-library__cypress"]
  }
 }