├── .github └── workflows │ └── e2e.yml ├── .gitignore ├── LICENSE ├── README.md ├── app ├── .env.test ├── components │ ├── AddCommentBox.js │ ├── Comments.js │ ├── Header.js │ ├── Markdown.js │ ├── PreviewBar.js │ ├── SEO.js │ ├── Theme.js │ └── Youtube.js ├── lib │ ├── mongodb.js │ ├── use-auth.js │ ├── use-comments.js │ └── use-live.js ├── package.json ├── pages │ ├── _document.js │ ├── api │ │ ├── auth │ │ │ └── [...nextauth].js │ │ ├── clear-preview.js │ │ ├── comments.js │ │ ├── preview.js │ │ └── reset-db.js │ ├── index.js │ └── post │ │ └── [slug].js └── yarn.lock └── e2e ├── cypress.json ├── cypress ├── fixtures │ └── example.json ├── integration │ ├── comments.js │ └── navigation.js ├── plugins │ └── index.js ├── support │ ├── commands.js │ └── index.js └── videos │ ├── comments.js.mp4 │ └── navigation.js.mp4 ├── package.json └── yarn.lock /.github/workflows/e2e.yml: -------------------------------------------------------------------------------- 1 | # This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node 2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions 3 | 4 | name: E2E 5 | 6 | on: 7 | pull_request: 8 | branches: [ master ] 9 | 10 | jobs: 11 | build: 12 | 13 | runs-on: ubuntu-latest 14 | 15 | steps: 16 | - uses: actions/checkout@v2 17 | - name: Use Node.js ${{ matrix.node-version }} 18 | uses: actions/setup-node@v1 19 | - name: Start MongoDB 20 | uses: supercharge/mongodb-github-action@1.3.0 21 | - run: | 22 | cd app 23 | yarn 24 | NODE_ENV=test yarn build 25 | NODE_ENV=test yarn start & 26 | - run: | 27 | cd e2e 28 | yarn 29 | npx cypress run --record --key ${{ secrets.CYPRSS_IO_TOKEN }} 30 | 31 | 32 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .next 2 | node_modules 3 | .now 4 | .env.local 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Arunoda Susiripala 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Next.js E2E Testing with Cypress.io 2 | 3 | This is an example Next.js application that uses Cypress for E2E testing. 4 | We build this app as a part of [this live stream](https://www.youtube.com/watch?v=6udU0T6AZK4&feature=youtu.be). Watch that if you need to learn about details. 5 | 6 | ### Test Results 7 | 8 | * This is running tests [inside a GitHub action](https://github.com/arunoda/nextjs-e2e-demo/runs/920711967) 9 | * This is how to view a test session [inside Cypress.io](https://dashboard.cypress.io/projects/y2s3h2/runs/9/specs) 10 | 11 | ### Run it locally 12 | 13 | * [Install & Run MongoDB](https://docs.mongodb.com/manual/administration/install-community/) in your machine 14 | * Run the app with the following commands: 15 | 16 | ``` 17 | cd app 18 | yarn 19 | NODE_ENV=test yarn dev 20 | ``` 21 | 22 | * Run tests in the CLI with 23 | 24 | ``` 25 | cd e2e 26 | yarn 27 | yarn test 28 | ``` 29 | 30 | * Run tests in the Dev mode 31 | 32 | ``` 33 | cd e2e 34 | yarn 35 | yarn dev 36 | ``` -------------------------------------------------------------------------------- /app/.env.test: -------------------------------------------------------------------------------- 1 | NEXT_PUBLIC_SITE=http://localhost:3004 2 | NEXTAUTH_URL=http://localhost:3004 3 | SESSION_MAX_AGE=2592000 4 | JWT_SECRET=this-is-a-token 5 | GITHUB_CLIENT_ID=9ece3e372cbe6ea67b04 6 | GITHUB_CLIENT_SECRET=7939792a9d2ed33305f524278c4275e6016293a6 7 | DATA_REPO_OWNER=arunoda 8 | DATA_REPO_NAME=github-cms-demo-data 9 | MONGO_URL=mongodb://localhost 10 | MONGO_DB_NAME=blog 11 | NEXT_PUBLIC_IS_TEST=1 -------------------------------------------------------------------------------- /app/components/AddCommentBox.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react" 2 | import useAuth from '../lib/use-auth' 3 | 4 | export default function AddCommentBox({onSubmit}) { 5 | const [commentText, setCommentText] = useState('') 6 | const [addingComment, setAddingComment] = useState(false) 7 | const {session, signIn} = useAuth() 8 | 9 | const handleLogin = () => { 10 | signIn(process.env.NEXT_PUBLIC_IS_TEST? 'test-auth' : 'github') 11 | } 12 | 13 | const addComment = async () => { 14 | try { 15 | setAddingComment(true) 16 | setCommentText('') 17 | await onSubmit(commentText) 18 | } finally { 19 | setAddingComment(false) 20 | } 21 | } 22 | 23 | const getCTA = () => { 24 | if (session) { 25 | return () 26 | } 27 | 28 | return ( 29 | 32 | ) 33 | } 34 | 35 | return ( 36 |
37 | {session? ( 38 |