[15 minute fix] Added custom Cypress command to create an article. (#13151)

cypress/support/commands.js

@@ -140,3 +140,59 @@ Cypress.Commands.add(
     );
   },
 );
+
+/**
+ * Creates an article.
+ *
+ * @param {string} title The title of an article.
+ * @param {Array<string>} [tags=[]] The tags of an article.
+ * @param {string} [content=''] The content of the article.
+ * @param {boolean} [published=true] Whether or not an article should be published.
+ * @param {string} [description=''] The description of the article.
+ * @param {string} [canonicalUrl=''] The canonical URL for the article.
+ * @param {string} [series=''] The series the article is associated with.
+ * @param {string} [allSeries=[]] The list of available series the article can be a part of.
+ * @param {string} [organizations=[]] The list of organizations the author of the article belongs to.
+ * @param {string} [organizationId=null] The selected organization's ID to create the article under.
+ * @param {'v1'|'v2'} [editorVersion='v2'] The editor version.
+ *
+ * @returns {Cypress.Chainable<Cypress.Response>} A cypress request for creating an article.
+ */
+Cypress.Commands.add(
+  'createArticle',
+  ({
+    title,
+    tags = [],
+    content = '',
+    published = true,
+    description = '',
+    canonicalUrl = '',
+    series = '',
+    allSeries = [],
+    organizations = [],
+    organizationId = null,
+    editorVersion = 'v2',
+  }) => {
+    return cy.request('POST', '/articles', {
+      article: {
+        id: null,
+        title,
+        tagList: tags.join(','),
+        description,
+        canonicalUrl,
+        series,
+        allSeries,
+        bodyMarkdown: content,
+        published,
+        submitting: false,
+        editing: false,
+        mainImage: null,
+        organizations,
+        organizationId,
+        edited: true,
+        updatedAt: null,
+        version: editorVersion,
+      },
+    });
+  },
+);

docs/tests/e2e-tests.md

@@ -108,6 +108,42 @@ Pro as there were issues integrating the cypress-rails gem with the
 [knapsack-pro-cypress](https://github.com/KnapsackPro/knapsack-pro-cypress) npm
 package.
 
+## Cypress Custom commands
+
+[Cypress custom commands](https://docs.cypress.io/api/cypress-api/custom-commands.html)
+allow you to extend the functionality of the E2E testing framework. In the case
+of Forem, we need custom commands to create an article, for example.
+
+A custom command is prefixed like any Cypress command by `cy.` All custom
+commands can be found in the
+[commands.js](https://github.com/forem/forem/blob/master/cypress/support/commands.js) file.
+
+### Creating a Custom Article Command
+
+To create an article as part of your test's setup, use the `cy.createArticle`
+custom command. It can be called like so:
+
+```javascript
+cy.createArticle({
+  title: 'Test Article',
+  tags: ['beginner', 'discuss'], // tags are optional
+  content: 'This is a test article',
+});
+```
+
+If you want to do something with the article creation's response, you can call
+it like so.
+
+```javascript
+cy.createArticle({
+  title: 'Test Article',
+  tags: ['beginner', 'discuss'], // tags are optional
+  content: 'This is a test article',
+}).then((response) => {
+  cy.visit(response.body.current_state_path); // path to article
+});
+```
+
 ## Additional Resources
 
 - [Cypress documentation](https://docs.cypress.io)