Test for verifying external links and navbar content.

README.md

@@ -22,7 +22,7 @@ Before you run the project, make sure that you have the following tools and soft
 - [Git](https://git-scm.com/downloads)
 - [Node.js](https://nodejs.org/en/download/) `v18.11.0+`
 - [NPM](https://www.npmjs.com/) (usually included with Node.js)
-- SQL database
+- Docker
 
 ### Installation
 
@@ -31,13 +31,13 @@ To install the project on your computer, follow these steps:
 1. Clone the repository to your local machine.
 
    ```bash
-   git clone https://github.com/TonyMckes/conduit-realworld-example-app.git
+   git clone https://github.com/Toopemus/conduit-realworld-e2e-testing.git
    ```
 
 2. Navigate to the project directory.
 
    ```bash
-   cd conduit-realworld-example-app
+   cd conduit-realworld-e2e-testing
    ```
 
 3. Install project dependencies by running the command:
@@ -49,9 +49,9 @@ To install the project on your computer, follow these steps:
 ### Configuration
 
 1. Create a `.env` file in the root directory of the project
-2. Add the required environment variables as specified in the [`.env.example`](backend/.env.example) file
-3. (Optional) update the Sequelize configuration parameters in the [`config.js`](backend/config/config.js) file
-4. If you are **not** using PostgreSQL, you may also have to install the driver for your database:
+2. Copy the environment variables as specified in the [`.env.example`](backend/.env.example) file
+3. ~~(Optional) update the Sequelize configuration parameters in the [`config.js`](backend/config/config.js) file~~
+4. ~~If you are **not** using PostgreSQL, you may also have to install the driver for your database:~~
 
    <details>
    <summary>Use one of the following commands to install:</summary><br/>
@@ -75,7 +75,12 @@ To install the project on your computer, follow these steps:
 
 5. Create database specified by configuration by executing
 
-   > :warning: Please, make sure you have already created a superuser for your database.
+   > You should have docker engine running. In most cases this means you need to start the Docker Desktop app
+
+   ```bash
+   # spin up the database in backend/
+   docker compose up
+   ```
 
    ```bash
    npm run sqlz -- db:create
@@ -108,12 +113,14 @@ To run the project, follow these steps:
 
 #### Running Tests
 
-To run tests, simply run the following command:
+To start e2e-testing, simply run the tool.
 
 ```bash
-npm run test
+npm run cypress:open
 ```
 
+You can find some cypress example tests in `cypress/e2e/` to learn from.
+
 #### Production
 
 The following command will build the production version of the app:

backend/.env.example

@@ -3,25 +3,25 @@ PORT=3001
 JWT_KEY=supersecretkey_example
 
 ## Development Database
-DEV_DB_USERNAME=root
-DEV_DB_PASSWORD=null
+DEV_DB_USERNAME=test
+DEV_DB_PASSWORD=password
 DEV_DB_NAME=database_development
 DEV_DB_HOSTNAME=127.0.0.1
-DEV_DB_DIALECT=mysql
+DEV_DB_DIALECT=postgres
 DEV_DB_LOGGGIN=true
 
 ## Testing Database
-TEST_DB_USERNAME=root
-TEST_DB_PASSWORD=null
+TEST_DB_USERNAME=test
+TEST_DB_PASSWORD=password
 TEST_DB_NAME=database_testing
 TEST_DB_HOSTNAME=127.0.0.1
-TEST_DB_DIALECT=mysql
+TEST_DB_DIALECT=postgres
 TEST_DB_LOGGGIN=true
 
 ## Production Database
 PROD_DB_USERNAME=root
 PROD_DB_PASSWORD=null
 PROD_DB_NAME=database_production
 PROD_DB_HOSTNAME=127.0.0.1
-PROD_DB_DIALECT=mysql
-PROD_DB_LOGGGIN=false
+PROD_DB_DIALECT=postgres
+PROD_DB_LOGGGIN=false

backend/compose.yaml

@@ -0,0 +1,13 @@
+version: "1"
+volumes:
+  psql:
+services:
+  psql:
+    image: postgres # latest version
+    environment:
+      POSTGRES_USER: ${TEST_DB_USERNAME}
+      POSTGRES_PASSWORD: ${TEST_DB_PASSWORD} # ONLY in development !
+    # volumes:
+    #   - psql:/var/lib/postgresql/data # save data between restarts
+    ports:
+      - 5432:5432

backend/index.js

@@ -11,6 +11,7 @@ const userRoutes = require("./routes/user");
 const articlesRoutes = require("./routes/articles");
 const profilesRoutes = require("./routes/profiles");
 const tagsRoutes = require("./routes/tags");
+const testingRoutes = require("./routes/testing");
 
 const app = express();
 app.use(cors());
@@ -30,16 +31,20 @@ if (process.env.NODE_ENV === "production") {
 } else {
   app.get("/", (req, res) => res.json({ status: "API is running on /api" }));
 }
+if (env === "development") {
+  console.log("Toimii");
+  app.use("/api/testing/reset", testingRoutes);
+}
 app.use("/api/users", usersRoutes);
 app.use("/api/user", userRoutes);
 app.use("/api/articles", articlesRoutes);
 app.use("/api/profiles", profilesRoutes);
 app.use("/api/tags", tagsRoutes);
 app.get("*", (req, res) =>
-  res.status(404).json({ errors: { body: ["Not found"] } }),
+  res.status(404).json({ errors: { body: ["Not found"] } })
 );
 app.use(errorHandler);
 
 app.listen(PORT, () =>
-  console.log(`Server running on http://localhost:${PORT}`),
+  console.log(`Server running on http://localhost:${PORT}`)
 );

backend/routes/testing.js

@@ -0,0 +1,12 @@
+const express = require("express");
+const router = express.Router();
+const { sequelize } = require("../models");
+
+// Reset database
+router.get("/", async (req, res, next) => {
+  console.log("Clearing database");
+  await sequelize.sync({ force: true });
+  res.json({ message: "Database has been cleared for testing" });
+});
+
+module.exports = router;

cypress.config.js

@@ -0,0 +1,9 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});

cypress/e2e/1-getting-started/todo.cy.js

@@ -0,0 +1,143 @@
+/// <reference types="cypress" />
+
+// Welcome to Cypress!
+//
+// This spec file contains a variety of sample tests
+// for a todo list app that are designed to demonstrate
+// the power of writing tests in Cypress.
+//
+// To learn more about how Cypress works and
+// what makes it such an awesome testing tool,
+// please read our getting started guide:
+// https://on.cypress.io/introduction-to-cypress
+
+describe('example to-do app', () => {
+  beforeEach(() => {
+    // Cypress starts out with a blank slate for each test
+    // so we must tell it to visit our website with the `cy.visit()` command.
+    // Since we want to visit the same URL at the start of all our tests,
+    // we include it in our beforeEach function so that it runs before each test
+    cy.visit('https://example.cypress.io/todo')
+  })
+
+  it('displays two todo items by default', () => {
+    // We use the `cy.get()` command to get all elements that match the selector.
+    // Then, we use `should` to assert that there are two matched items,
+    // which are the two default items.
+    cy.get('.todo-list li').should('have.length', 2)
+
+    // We can go even further and check that the default todos each contain
+    // the correct text. We use the `first` and `last` functions
+    // to get just the first and last matched elements individually,
+    // and then perform an assertion with `should`.
+    cy.get('.todo-list li').first().should('have.text', 'Pay electric bill')
+    cy.get('.todo-list li').last().should('have.text', 'Walk the dog')
+  })
+
+  it('can add new todo items', () => {
+    // We'll store our item text in a variable so we can reuse it
+    const newItem = 'Feed the cat'
+
+    // Let's get the input element and use the `type` command to
+    // input our new list item. After typing the content of our item,
+    // we need to type the enter key as well in order to submit the input.
+    // This input has a data-test attribute so we'll use that to select the
+    // element in accordance with best practices:
+    // https://on.cypress.io/selecting-elements
+    cy.get('[data-test=new-todo]').type(`${newItem}{enter}`)
+
+    // Now that we've typed our new item, let's check that it actually was added to the list.
+    // Since it's the newest item, it should exist as the last element in the list.
+    // In addition, with the two default items, we should have a total of 3 elements in the list.
+    // Since assertions yield the element that was asserted on,
+    // we can chain both of these assertions together into a single statement.
+    cy.get('.todo-list li')
+      .should('have.length', 3)
+      .last()
+      .should('have.text', newItem)
+  })
+
+  it('can check off an item as completed', () => {
+    // In addition to using the `get` command to get an element by selector,
+    // we can also use the `contains` command to get an element by its contents.
+    // However, this will yield the <label>, which is lowest-level element that contains the text.
+    // In order to check the item, we'll find the <input> element for this <label>
+    // by traversing up the dom to the parent element. From there, we can `find`
+    // the child checkbox <input> element and use the `check` command to check it.
+    cy.contains('Pay electric bill')
+      .parent()
+      .find('input[type=checkbox]')
+      .check()
+
+    // Now that we've checked the button, we can go ahead and make sure
+    // that the list element is now marked as completed.
+    // Again we'll use `contains` to find the <label> element and then use the `parents` command
+    // to traverse multiple levels up the dom until we find the corresponding <li> element.
+    // Once we get that element, we can assert that it has the completed class.
+    cy.contains('Pay electric bill')
+      .parents('li')
+      .should('have.class', 'completed')
+  })
+
+  context('with a checked task', () => {
+    beforeEach(() => {
+      // We'll take the command we used above to check off an element
+      // Since we want to perform multiple tests that start with checking
+      // one element, we put it in the beforeEach hook
+      // so that it runs at the start of every test.
+      cy.contains('Pay electric bill')
+        .parent()
+        .find('input[type=checkbox]')
+        .check()
+    })
+
+    it('can filter for uncompleted tasks', () => {
+      // We'll click on the "active" button in order to
+      // display only incomplete items
+      cy.contains('Active').click()
+
+      // After filtering, we can assert that there is only the one
+      // incomplete item in the list.
+      cy.get('.todo-list li')
+        .should('have.length', 1)
+        .first()
+        .should('have.text', 'Walk the dog')
+
+      // For good measure, let's also assert that the task we checked off
+      // does not exist on the page.
+      cy.contains('Pay electric bill').should('not.exist')
+    })
+
+    it('can filter for completed tasks', () => {
+      // We can perform similar steps as the test above to ensure
+      // that only completed tasks are shown
+      cy.contains('Completed').click()
+
+      cy.get('.todo-list li')
+        .should('have.length', 1)
+        .first()
+        .should('have.text', 'Pay electric bill')
+
+      cy.contains('Walk the dog').should('not.exist')
+    })
+
+    it('can delete all completed tasks', () => {
+      // First, let's click the "Clear completed" button
+      // `contains` is actually serving two purposes here.
+      // First, it's ensuring that the button exists within the dom.
+      // This button only appears when at least one task is checked
+      // so this command is implicitly verifying that it does exist.
+      // Second, it selects the button so we can click it.
+      cy.contains('Clear completed').click()
+
+      // Then we can make sure that there is only one element
+      // in the list and our element does not exist
+      cy.get('.todo-list li')
+        .should('have.length', 1)
+        .should('not.have.text', 'Pay electric bill')
+
+      // Finally, make sure that the clear button no longer exists.
+      cy.contains('Clear completed').should('not.exist')
+    })
+  })
+})