Upgrade codebase

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -5,6 +5,7 @@ node_modules
 
 # testing
 coverage
+.nyc_output
 
 # production
 build
@@ -16,3 +17,6 @@ npm-debug.log
 .idea
 
 .eslintcache
+
+cypress/videos
+cypress/screenshots

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx pretty-quick --staged

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

cypress.json

@@ -0,0 +1,9 @@
+{
+  "baseUrl": "http://localhost:4100",
+  "env": {
+    "apiUrl": "https://conduit.productionready.io/api",
+    "username": "warren_boyd",
+    "email": "[email protected]",
+    "password": "Pa$$w0rd!"
+  }
+}

cypress/README.md

@@ -0,0 +1,22 @@
+# Cypress.io end-to-end tests 🚀
+
+[Cypress.io](https://www.cypress.io) is an open source, MIT licensed end-to-end test runner
+
+## Folder structure
+
+These folders hold the end-to-end tests and supporting files for the [Cypress Test Runner](https://github.com/cypress-io/cypress).
+
+- [fixtures](fixtures) folder holds optional JSON data for mocking, [read more](https://on.cypress.io/fixture)
+- [integration](integration) holds the actual test files, [read more](https://on.cypress.io/writing-and-organizing-tests)
+- [plugins](plugins) allow you to customize how tests are loaded, [read more](https://on.cypress.io/plugins)
+- [support](support) file runs before all tests and is a great place to write or load additional custom commands, [read more](https://on.cypress.io/writing-and-organizing-tests#Support-file)
+
+## `cypress.json` file
+
+You can configure project options in the [../cypress.json](../cypress.json) file, see [Cypress configuration doc](https://on.cypress.io/configuration).
+
+## More information
+
+- [https://github.com/cypress.io/cypress](https://github.com/cypress.io/cypress)
+- [https://docs.cypress.io/](https://docs.cypress.io/)
+- [Writing your first Cypress test](https://on.cypress.io/intro)

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/article-spec.js

@@ -0,0 +1,177 @@
+// enables intelligent code completion for Cypress commands
+// https://on.cypress.io/intelligent-code-completion
+/// <reference types="cypress" />
+/// <reference types="@testing-library/cypress" />
+import faker from 'faker';
+
+describe('Article page', () => {
+  beforeEach(() => {
+    cy.intercept('GET', '**/articles?*')
+      .as('getAllArticles')
+      .intercept('GET', '**/articles/*/comments')
+      .as('getCommentsForArticle')
+      .intercept('GET', '**/articles/*')
+      .as('getArticle')
+      .visit('/');
+
+    cy.wait('@getAllArticles').get('.preview-link').first().click();
+  });
+
+  it('should show the article', () => {
+    cy.wait('@getArticle')
+      .its('response.body.article')
+      .then((article) => {
+        cy.location('pathname').should('equal', `/article/${article.slug}`);
+
+        cy.findByRole('heading', { name: article.title }).should('be.visible');
+
+        cy.get('.article-meta').within(() => {
+          cy.findByRole('img', { name: article.author.username }).should(
+            'be.visible'
+          );
+
+          cy.findByText(article.author.username).should('be.visible');
+        });
+
+        cy.get('.article-content .col-xs-12')
+          .children()
+          .first()
+          .should('not.be.empty');
+
+        cy.get('.tag-list')
+          .children()
+          .should('have.length', article.tagList.length);
+      });
+  });
+
+  it('should require to be logged to comment', () => {
+    cy.findByText(/to add comments on this article/i).should('be.visible');
+  });
+});
+
+describe('Article page (authenticated)', () => {
+  const commentPlaceholder = 'Write a comment...';
+  const postCommentButton = 'Post Comment';
+
+  beforeEach(() => {
+    cy.intercept('GET', '**/articles?*')
+      .as('getAllArticles')
+      .intercept('GET', '**/articles/*/comments')
+      .as('getCommentsForArticle')
+      .intercept('GET', '**/articles/*')
+      .as('getArticle')
+      .intercept('POST', '**/articles/*/comments')
+      .as('createComment')
+      .intercept('DELETE', '**/articles/*/comments/*')
+      .as('deleteComment')
+      .visit('/')
+      .login();
+
+    cy.wait('@getAllArticles').get('.preview-link').first().click();
+  });
+
+  it('should show the comment box', () => {
+    cy.wait(['@getArticle', '@getCommentsForArticle']);
+
+    cy.get('.comment-form').should('exist');
+  });
+
+  it('should add a new comment', () => {
+    const comment = faker.lorem.paragraph();
+
+    cy.wait(['@getArticle', '@getCommentsForArticle']);
+
+    cy.findByPlaceholderText(commentPlaceholder).type(comment);
+
+    cy.findByRole('button', { name: postCommentButton }).click();
+
+    cy.wait('@createComment').its('response.statusCode').should('equal', 200);
+
+    cy.wait(100)
+      .get('.card:not(form)')
+      .first()
+      .within(() => {
+        cy.findByText(comment).should('exist');
+      });
+  });
+
+  it('should validate the comment box', () => {
+    cy.wait(['@getArticle', '@getCommentsForArticle']);
+
+    cy.findByRole('button', { name: postCommentButton }).click();
+
+    cy.wait('@createComment').its('response.statusCode').should('equal', 422);
+
+    cy.get('.error-messages').within(() => {
+      cy.findAllByRole('listitem').should('have.length', 1);
+    });
+  });
+
+  it('should remove my own comment', () => {
+    const comment = faker.lorem.sentence();
+
+    cy.wait(['@getArticle', '@getCommentsForArticle']);
+
+    cy.findByPlaceholderText(commentPlaceholder).type(comment);
+
+    cy.findByRole('button', { name: postCommentButton }).click();
+
+    cy.wait('@createComment');
+
+    cy.findByText(comment)
+      .as('comment')
+      .parent()
+      .parent()
+      .find('.mod-options i')
+      .click();
+
+    cy.wait('@deleteComment').its('response.statusCode').should('equal', 200);
+
+    cy.findByText(comment).should('not.exist');
+  });
+});
+
+describe('Article page (author)', () => {
+  const commentPlaceholder = 'Write a comment...';
+  const postCommentButton = 'Post Comment';
+
+  beforeEach(() => {
+    cy.intercept('GET', '**/articles/*')
+      .as('getArticle')
+      .intercept('GET', '**/articles/*/comments')
+      .as('getCommentsForArticle')
+      .intercept('POST', '**/articles/*/comments')
+      .as('createComment')
+      .intercept('DELETE', '**/articles/*')
+      .as('deleteArticle');
+
+    cy.visit('/')
+      .login()
+      .createArticle()
+      .then((article) => {
+        cy.visit(`/article/${article.slug}`);
+
+        cy.wait(['@getArticle', '@getCommentsForArticle']);
+      });
+  });
+
+  it('should add a new comment', () => {
+    const comment = faker.lorem.paragraph();
+
+    cy.findByPlaceholderText(commentPlaceholder).type(comment);
+
+    cy.findByRole('button', { name: postCommentButton }).click();
+
+    cy.wait('@createComment').its('response.statusCode').should('equal', 200);
+  });
+
+  it('should remove my article', () => {
+    cy.findByRole('button', {
+      name: /delete article/i,
+    }).click();
+
+    cy.wait('@deleteArticle').its('response.statusCode').should('equal', 200);
+
+    cy.location('pathname').should('equal', '/');
+  });
+});