Feature/0 add cypress

cypress.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    baseUrl: "http://localhost:4200",
+    viewportWidth: 1280,
+    viewportHeight: 720,
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});

cypress/e2e/articles.cy.ts

@@ -0,0 +1,169 @@
+import { faker } from "@faker-js/faker";
+import { HomePage } from "../page-objects/homePage";
+import { User } from "../workflow/user";
+
+const username = faker.random.alphaNumeric(10);
+const email = faker.internet.email(username);
+const password = faker.random.alphaNumeric(10);
+
+const homePage = new HomePage();
+const user = new User();
+
+describe("Articles", () => {
+  beforeEach(() => {
+    cy.clearCookies();
+  });
+
+  before(function () {
+    // Create new user
+    user.signUp(username, email, password);
+  });
+
+  it("should create an article, verify it exists and then delete it.", () => {
+    homePage.navNewArticleButton.click();
+
+    user.createArticle("Testing", "All about testing", "Cypress is awesome");
+
+    cy.get("h1").should("have.text", "Testing");
+
+    // Delete using top button
+    homePage.articleDeleteTopButton.click();
+  });
+
+  it("should create an article, verify it exists and then delete it using second button.", function () {
+    user.signIn(email, password);
+
+    homePage.navNewArticleButton.click();
+
+    user.createArticle(
+      "Testing",
+      "All about testing",
+      "Cypress is awesome",
+      "e2e cypress typescript"
+    );
+
+    cy.get("h1").should("have.text", "Testing");
+
+    // Delete using down button
+    homePage.articleDeleteBottomButton.click();
+  });
+
+  it("should create an article, edit it's content and verify.", () => {
+    user.signIn(email, password);
+
+    homePage.navNewArticleButton.click();
+
+    user.createArticle(
+      "Testing",
+      "All about testing",
+      "Cypress is awesome",
+      "e2e cypress typescript"
+    );
+
+    cy.intercept("GET", "/api/articles/*").as("fetchArticle");
+
+    homePage.articleEditTopButton.click();
+
+    // Wait until article information is fetched and shown inside inputs
+    cy.wait("@fetchArticle");
+
+    // Workaround to wait until inputs have data
+    cy.get(".tag-default").should("exist");
+
+    user.createArticle(
+      "Edited title",
+      "Edited about",
+      "Edited body",
+      "e2e cypress typescript edited"
+    );
+
+    cy.get("h1").should("have.text", "Edited title");
+    cy.get("p").should("have.text", "Edited body");
+
+    // Delete
+    homePage.articleDeleteTopButton.click();
+  });
+
+  it("should create an article, edit it's content using second button and verify.", function () {
+    user.signIn(email, password);
+
+    homePage.navNewArticleButton.click();
+
+    user.createArticle(
+      "Testing 2",
+      "All about testing",
+      "Cypress is awesome",
+      "e2e cypress typescript"
+    );
+
+    homePage.articleEditTopButton.click();
+
+    // Workaround to wait until inputs have data
+    cy.get(".tag-default").should("exist");
+
+    // Edit
+    user.createArticle(
+      "Edited title 2",
+      "Edited about",
+      "Edited body",
+      "e2e cypress typescript edited"
+    );
+
+    cy.get("h1").should("have.text", "Edited title 2");
+    cy.get("p").should("have.text", "Edited body");
+
+    // Delete
+    homePage.articleDeleteTopButton.click();
+  });
+
+  it("should show errors while creating a form with invalid inputed data", () => {
+    // Login
+    user.signIn(email, password);
+
+    // Create a new article
+    homePage.navNewArticleButton.click();
+    user.createArticle(
+      "Testing",
+      "All about testing",
+      "Cypress is awesome",
+      "e2e cypress typescript"
+    );
+    cy.intercept("POST", "/api/articles").as("postArticles");
+    cy.wait("@postArticles");
+
+    // Try to create a new one with similar title
+    homePage.navHomeButton.click();
+    homePage.navNewArticleButton.click();
+    homePage.articleTitleInput.type("Testing");
+    homePage.articleAboutInput.type("Hello there");
+    homePage.articleBodyInput.type("Testing 1");
+    homePage.articleTagsInput.type("Testing 2");
+
+    homePage.articleFormSubmitButton.click();
+
+    homePage.errorMessage.should("contain.text", "title must be unique");
+
+    // Try to create one without title
+    homePage.articleTitleInput.clear();
+    homePage.articleFormSubmitButton.click();
+    homePage.errorMessage.should("contain.text", "title can't be blank");
+
+    // Restore title
+    homePage.articleTitleInput.type("TestingRandom");
+
+    // Try to create one without descriptioon
+    homePage.articleAboutInput.clear();
+    homePage.articleFormSubmitButton.click();
+    homePage.errorMessage.should("contain.text", "description can't be blank");
+
+    // Restore about
+    homePage.articleAboutInput.type("TestingRandomfwefewefw");
+
+    // Try to create one without body
+    homePage.articleBodyInput.clear();
+    homePage.articleFormSubmitButton.click();
+    homePage.errorMessage.should("contain.text", "body can't be blank");
+
+    homePage.navHomeButton.click();
+  });
+});

cypress/e2e/auth.cy.ts

@@ -0,0 +1,92 @@
+import { faker } from "@faker-js/faker";
+import { SettingsPage } from "../page-objects/settingsPage";
+import { HomePage } from "../page-objects/homePage";
+import { FormPage } from "../page-objects/formPage";
+import { NavigateTo } from "../workflow/navigateTo";
+import { User } from "../workflow/user";
+
+const username = faker.random.alphaNumeric(10);
+const email = faker.internet.email(username);
+const password = faker.random.alphaNumeric(10);
+
+const settingsPage = new SettingsPage();
+const homePage = new HomePage();
+const formPage = new FormPage();
+const navigateTo = new NavigateTo();
+
+const user = new User();
+
+describe("Authentication", () => {
+  beforeEach(() => {
+    cy.clearCookies();
+  });
+
+  it("should signup, login and logout", function () {
+    // Signup
+    user.signUp(username, email, password);
+
+    // Logout
+    homePage.navSettingsButton.click();
+    settingsPage.logout.click();
+
+    // Login
+    user.signIn(email, password);
+
+    // Check userInfo if correct
+    homePage.navUsername.should("contain", username);
+    homePage.navNewArticleButton.should("be.visible");
+    homePage.navSettingsButton.should("be.visible");
+    homePage.navSignInButton.should("not.exist");
+    homePage.navSignUpButton.should("not.exist");
+
+    // Logout
+    homePage.navSettingsButton.click();
+    settingsPage.logout.click();
+
+    // Check if login and logout button exists and also check uri location
+    homePage.navSignInButton.should("exist");
+    homePage.navSignUpButton.should("exist");
+  });
+
+  it("should display login errors", () => {
+    navigateTo.homePage();
+
+    // Get login page
+    homePage.navSignInButton.click();
+
+    // Check if button is disabled
+    formPage.formSubmitButton.should("be.disabled");
+
+    // Enter dummy username / password
+    formPage.emailInput.type("[email protected]");
+    formPage.passwordInput.type("passdummy");
+
+    // Sign in button should be enabled
+    formPage.formSubmitButton.should("be.enabled");
+    formPage.formSubmitButton.click();
+
+    // Check if error shows with non-existing username
+    homePage.errorMessage.should("have.length", "1");
+  });
+
+  it("should display signup errors", () => {
+    navigateTo.homePage();
+
+    homePage.navSignUpButton.click();
+
+    // Check if button is disabled
+    formPage.formSubmitButton.should("be.disabled");
+
+    // Add existing data
+    formPage.usernameInput.type(username);
+    formPage.emailInput.type(email);
+    formPage.passwordInput.type(password);
+
+    formPage.formSubmitButton.click();
+
+    homePage.errorMessage
+      .find("li")
+      .should("have.length", "2")
+      .and("contain.text", "already been taken");
+  });
+});

cypress/e2e/user-settings.cy.ts

@@ -0,0 +1,66 @@
+import { faker } from "@faker-js/faker";
+import { HomePage } from "../page-objects/homePage";
+import { SettingsPage } from "../page-objects/settingsPage";
+import { ProfilePage } from "../page-objects/profilePage";
+import { User } from "../workflow/user";
+
+const homePage = new HomePage();
+const settingsPage = new SettingsPage();
+const profilePage = new ProfilePage();
+const user = new User();
+
+const username = faker.random.alphaNumeric(10);
+const email = faker.internet.email(username);
+const password = faker.random.alphaNumeric(10);
+
+const newUsername = faker.random.alphaNumeric(10);
+const newEmail = faker.internet.email(username);
+const newPassword = faker.random.alphaNumeric(10);
+
+const imageUrl =
+  "https://static5.depositphotos.com/1007168/472/i/950/depositphotos_4725473-stock-photo-hot-summer-sun-wearing-shades.jpg";
+
+describe("User Settings", () => {
+  before(() => {
+    user.signUp(username, email, password);
+  });
+
+  it("should get the user settings form", () => {
+    user.signIn(email, password);
+    homePage.navSettingsButton.click();
+    cy.location("pathname").should("include", "/settings");
+  });
+
+  it("should update user settings", () => {
+    cy.intercept("PUT", "*").as("update");
+
+    user.signIn(email, password);
+    homePage.navSettingsButton.click();
+
+    settingsPage.imageUrl.clear().type(imageUrl);
+
+    settingsPage.username.clear().type(newUsername);
+    settingsPage.bio.clear().type("Short bio");
+    settingsPage.email.clear().type(newEmail);
+    settingsPage.newPassword.clear().type(newPassword);
+
+    settingsPage.updateButton.click();
+
+    cy.wait("@update");
+
+    profilePage.username.should("have.text", newUsername);
+
+    profilePage.bio.should("have.text", "Short bio");
+
+    homePage.navSettingsButton.first().click();
+
+    settingsPage.logout.click();
+
+    // Login with New Details
+    user.signIn(newEmail, newPassword);
+
+    cy.location("pathname").should("contain", "");
+
+    homePage.navUsername.should("contain.text", newUsername);
+  });
+});

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/page-objects/formPage.ts

@@ -0,0 +1,17 @@
+export class FormPage {
+  get usernameInput() {
+    return cy.get('[data-test="form-username"]');
+  }
+
+  get emailInput() {
+    return cy.get('[data-test="form-email"]');
+  }
+
+  get passwordInput() {
+    return cy.get('[data-test="form-password"]');
+  }
+
+  get formSubmitButton() {
+    return cy.get('[data-test="form-submit"]');
+  }
+}