solution

cypress/e2e/article.cy.js

@@ -1,13 +1,32 @@
-describe('', () => {
-  before(() => {
+import ArticlePageObject from '../support/pages/article.pageObject';
 
-  });
+const ArticlePage = new ArticlePageObject();
 
-  it('', () => {
+describe('Article', () => {
+  let user;
 
+  beforeEach(() => {
+    cy.task('generateUser').then((generatedUser) => {
+      user = generatedUser;
+      cy.login(user.email, user.username, user.password);
+      cy.visit('/editor');
+    });
   });
 
-  it('', () => {
+  it('should fill in article and create it', () => {
+    const article = ArticlePage.generateArticle();
+    ArticlePage.createArticle(article);
+    ArticlePage.onClickSubmitArticle();
+    ArticlePage.assertArticleTitle(article.title);
+  });
 
+  it('should be able to delete an article', () => {
+    const article = ArticlePage.generateArticle();
+    cy.createArticle(article).then((response) => {
+      cy.visit(`/article/${response.body.article.slug}`);
+      ArticlePage.assertArticleTitle(article.title);
+      cy.get('.btn.btn-outline-danger.btn-sm').eq(0).click();
+      cy.assertPageURL('/');
+    });
   });
 });

cypress/support/PageObject.js

@@ -0,0 +1,7 @@
+class PageObject {
+  visit(url) {
+    cy.visit(url || this.url);
+  }
+}
+
+export default PageObject;

cypress/support/commands.js

@@ -47,24 +47,35 @@ Cypress.Commands.add('login', (email, username, password) => {
   });
 });
 
-Cypress.Commands.add('createArticle', (title, description, body) => {
-  cy.getCookie('auth').then((token) => {
-    const authToken = token.value;
+Cypress.Commands.add('findByPlaceholder', (placeholder) => {
+  return cy.get(`[placeholder="${placeholder}"]`);
+});
+
+Cypress.Commands.add(
+  'createArticle',
+  ({ title, description, body, tag }) => {
+    cy.getCookie('auth').then((token) => {
+      const authToken = token.value;
 
-    cy.request({
-      method: 'POST',
-      url: '/api/articles',
-      body: {
-        article: {
-          title,
-          description,
-          body,
-          tagList: []
+      cy.request({
+        method: 'POST',
+        url: '/api/articles',
+        body: {
+          article: {
+            title,
+            description,
+            body,
+            tagList: [tag]
+          }
+        },
+        headers: {
+          Authorization: `Token ${authToken}`
         }
-      },
-      headers: {
-        Authorization: `Token ${authToken}`
-      }
+      });
     });
-  });
+  }
+);
+
+Cypress.Commands.add('assertPageURL', (url) => {
+  cy.url().should('equal', Cypress.config().baseUrl + url);
 });

cypress/support/pages/article.pageObject.js

@@ -0,0 +1,52 @@
+import { faker } from '@faker-js/faker';
+import PageObject from '../PageObject';
+
+class ArticlePageObject extends PageObject {
+  get articleTitleField() {
+    return cy.findByPlaceholder('Article Title');
+  }
+
+  get articleAboutField() {
+    return cy.findByPlaceholder(`What's this article about?`);
+  }
+
+  get articleBodyField() {
+    return cy.findByPlaceholder('Write your article (in markdown)');
+  }
+
+  get articleTagsField() {
+    return cy.findByPlaceholder('Enter tags');
+  }
+
+  get submitButton() {
+    return cy.get('.btn.btn-lg.btn-primary');
+  }
+
+  onClickSubmitArticle() {
+    this.submitButton.click();
+  }
+
+  generateArticle() {
+    return {
+      title: faker.lorem.word(),
+      description: faker.lorem.words(),
+      body: faker.lorem.words(),
+      tag: faker.lorem.word()
+    };
+  }
+
+  createArticle(article) {
+    const { title, description, tag, body } = article;
+
+    this.articleTitleField.type(title);
+    this.articleAboutField.type(description);
+    this.articleBodyField.type(body);
+    this.articleTagsField.type(`${tag}{Enter}`);
+  }
+
+  assertArticleTitle(title) {
+    cy.contains(title).should('be.visible');
+  }
+};
+
+export default ArticlePageObject;