UI & API tests for challenge

cypress.config.cjs

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

cypress/e2e/api/get-charts.cy.js

@@ -0,0 +1,146 @@
+describe('Get Charts endpoint', () => {
+
+  //Use this to verify that the charts returned on the response, are sorted by descending order by the provided key
+  //Key parameter might be given one of the following values: name, created_at, modified_at
+  const verifyDescendingOrder = (response, key) => {
+    expect(response).to.have.property('status', 200);
+
+    const charts = response.body.charts;
+
+    charts.forEach(item => {
+      expect(item).to.have.property('name')
+      expect(item).to.have.property('created_at')
+      expect(item).to.have.property('modified_at')
+    });
+
+    const values = charts.map(chart => chart[key]);
+    const sortedValues = [...values].sort((a, b) => b - a);
+
+    expect(values).to.deep.equal(sortedValues);
+  };
+
+  //Use this to verify that the charts returned on the response, are sorted by ascending order by the provided key
+  //Key parameter might be given one of the following values: name, created_at, modified_at
+  const verifyAscendingOrder = (response, key) => {
+    expect(response).to.have.property('status', 200);
+
+    const charts = response.body.charts;
+
+    charts.forEach(item => {
+      expect(item).to.have.property('name')
+      expect(item).to.have.property('created_at')
+      expect(item).to.have.property('modified_at')
+    });
+
+    const values = charts.map(chart => chart[key]);
+    const sortedValues = [...values].sort((a, b) => a - b);
+
+    expect(values).to.deep.equal(sortedValues);
+  };
+
+  it('can get all charts ordered by dateCreated (ascending)', () => {
+    cy.request({
+      method: 'GET',
+      url: 'http://localhost:3000/api/charts',
+      qs: {
+        orderBy: 'dateCreated',
+        order: 'asc'
+      }
+    }).then(response => verifyAscendingOrder(response, 'created_at'));
+  });
+
+  //Will skip this because it returns 500, "Currently no order by dateCreated descending has been implemented"
+  //Will use this request to test error 500 instead
+  it.skip('can get all charts ordered by dateCreated (descending)', () => {
+    cy.request({
+      method: 'GET',
+      url: 'http://localhost:3000/api/charts',
+      qs: {
+        orderBy: 'dateCreated',
+        order: 'desc'
+      }
+    }).then(response => verifyAscendingOrder(response, 'created_at'));
+  });
+
+  it('can get all charts ordered by dateModified (ascending)', () => {
+    cy.request({
+      method: 'GET',
+      url: 'http://localhost:3000/api/charts',
+      qs: {
+        orderBy: 'dateModified',
+        order: 'asc'
+      }
+    }).then(response => verifyAscendingOrder(response, 'modified_at'));
+  });
+
+  it('can get all charts ordered by dateModified (descending)', () => {
+    cy.request({
+      method: 'GET',
+      url: 'http://localhost:3000/api/charts',
+      qs: {
+        orderBy: 'dateModified',
+        order: 'desc'
+      }
+    }).then(response => verifyDescendingOrder(response, 'modified_at'));
+  });
+
+  it('can get all charts ordered by name (ascending)', () => {
+    cy.request({
+      method: 'GET',
+      url: 'http://localhost:3000/api/charts',
+      qs: {
+        orderBy: 'name',
+        order: 'asc'
+      }
+    }).then(response => verifyAscendingOrder(response, 'name'));
+  });
+
+  it('can get all charts ordered by name (descending)', () => {
+    cy.request({
+      method: 'GET',
+      url: 'http://localhost:3000/api/charts',
+      qs: {
+        orderBy: 'name',
+        order: 'desc'
+      }
+    }).then(response => verifyAscendingOrder(response, 'name'));
+  });
+
+  it('returns 500 for internal server error', () => {
+    cy.request({
+      method: 'GET',
+      url: 'http://localhost:3000/api/charts',
+      qs: {
+        orderBy: 'dateCreated',
+        order: 'desc'
+      },
+      failOnStatusCode: false
+    }).then((response) => {
+      expect(response).to.have.property('status', 500);
+    });
+  });
+
+  it('returns 400 for invalid query parameters', () => {
+    cy.request({
+      method: 'GET',
+      url: 'http://localhost:3000/api/charts',
+      qs: {
+        orderBy: 'notAParameter',
+        order: 'asc'
+      },
+      failOnStatusCode: false
+    }).then((response) => {
+      expect(response).to.have.property('status', 400);
+    });
+  });
+
+  it('returns 404 when using invalid endpoint', () => {
+    cy.request({
+      method: 'GET',
+      url: 'http://localhost:3000/api/chartsss',
+      failOnStatusCode: false
+    }).then((response) => {
+      expect(response).to.have.property('status', 404);
+    });
+  });
+});

cypress/e2e/ui/charts-page.cy.js

@@ -0,0 +1,79 @@
+before(() => {
+  cy.visit('http://localhost:3000')
+})
+
+describe('Charts page', () => {
+
+  it('shows Charts page', () => {
+    cy.get('h5').contains('Charts').should('be.visible')
+  });
+
+  it('shows all charts', () => {
+    cy.get('p').contains('Chart 1').should('be.visible')
+    cy.get('p').contains('Chart 2').should('be.visible')
+    cy.get('p').contains('Chart 5').should('be.visible')
+    cy.get('p').contains('My awesome test 4').should('be.visible')
+    cy.get('p').contains('Test 3').should('be.visible')
+  });
+
+  it('shows Name column', () => {
+    cy.get('button').contains('Name').should('be.visible')
+  });
+
+  it('shows Date created column', () => {
+    cy.get('button').contains('Date created').should('be.visible')
+  });
+
+  it('shows Last modified column', () => {
+    cy.get('button').contains('Last modified').should('be.visible')
+  });
+
+  it('shows Create a chart button', () => {
+    cy.get('button').contains('Create a chart').should('be.visible')
+  });
+})
+
+describe('Search', () => {
+  it('can search for a chart', () => {
+    cy.get('input[placeholder="Search charts"]').should('be.visible')
+      .type('Chart 1')
+    cy.get('p').contains('Chart 1').should('be.visible')
+    cy.get('p').contains('Chart 2').should('not.exist')
+    cy.get('p').contains('Chart 5').should('not.exist')
+    cy.get('p').contains('My awesome test 4').should('not.exist')
+    cy.get('p').contains('Test 3').should('not.exist')
+  });
+
+  after(() => {
+    cy.get('input[placeholder="Search charts"]').clear()
+  })
+})
+
+describe('Sorting', () => {
+  it('can sort by Name', () => {
+    cy.get('button').contains('Name').click()
+    cy.get('.root > :nth-child(2)').should('contain', 'Chart 1')
+    cy.get('.root > :nth-child(3)').should('contain', 'Chart 2')
+    cy.get('.root > :nth-child(4)').should('contain', 'Chart 5')
+    cy.get('.root > :nth-child(5)').should('contain', 'My awesome test 4')
+    cy.get('.root > :nth-child(6)').should('contain', 'Test 3')
+  });
+
+  it('can sort by Date Created', () => {
+    cy.get('button').contains('Date created').click()
+    cy.get('.root > :nth-child(2)').should('contain', 'Chart 2')
+    cy.get('.root > :nth-child(3)').should('contain', 'Chart 5')
+    cy.get('.root > :nth-child(4)').should('contain', 'My awesome test 4')
+    cy.get('.root > :nth-child(5)').should('contain', 'Test 3')
+    cy.get('.root > :nth-child(6)').should('contain', 'Chart 1')
+  });
+
+  it('can sort by Last modified date', () => {
+    cy.get('button').contains('Last modified').click()
+    cy.get('.root > :nth-child(2)').should('contain', 'Chart 5')
+    cy.get('.root > :nth-child(3)').should('contain', 'My awesome test 4')
+    cy.get('.root > :nth-child(4)').should('contain', 'Test 3')
+    cy.get('.root > :nth-child(5)').should('contain', 'Chart 2')
+    cy.get('.root > :nth-child(6)').should('contain', 'Chart 1')
+  });
+})

cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// 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 will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

cypress/support/e2e.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.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')