E2E Test: Initial Adminisitrator Login Flow (#11840)

* Set baseUrl for Cypress tests.

* Fixed login form for tests.

* Added fixture data for initial admin credentials.

* First e2e test.

* Fixed a typo in a comment.

* Using an input of type submit like the login previously had was fine.

* Added a check to ensure user is redirected to the home page.

* Forgot to commit adding @testing-library/cypress

* Renamed and move login flow under loginFlows in integrations.

* Added testing library to support files so it does not need to be imported into every test explicitly by the test writer.

* Added some more Cypress related files that will be required for testing going forward.

* Took onboarding into account when checking the URL post login.

app/views/shared/authentication/_email_login_form.html.erb

@@ -1,4 +1,4 @@
-<%= form_for(User.new, as: :user, url: session_path(:user)) do |f| %>
+<%= form_for(User.new, as: :user, url: session_path(:user), data: { testid: "login-form" }) do |f| %>
   <div class="crayons-field mb-3">
     <%= f.label :email, class: "crayons-field__label" %>
     <%= f.email_field :email, autocomplete: "email", class: "crayons-textfield" %>

config/webpack/environment.js

@@ -24,25 +24,6 @@ environment.splitChunks((config) => {
         '@utilities': path.resolve(__dirname, '../../app/javascript/utilities'),
       },
     },
-    optimization: {
-      ...config.optimization,
-      splitChunks: {
-        ...config.optimization.splitChunks,
-        cacheGroups: {
-          vendor: {
-            test: /node_modules/,
-            chunks: 'initial',
-            name: 'vendor',
-            enforce: true,
-          },
-          default: {
-            minChunks: 2,
-            priority: -20,
-            reuseExistingChunk: true,
-          },
-        },
-      },
-    },
   };
 });
 

cypress.json

@@ -0,0 +1,3 @@
+{
+  "baseUrl": "http://localhost:3000"
+}

cypress/.eslintrc.js

@@ -32,6 +32,7 @@ module.exports = {
     },
   ],
   env: {
+    node: true,
     'cypress/globals': true,
   },
 };

cypress/fixtures/logins/initialAdmin.json

@@ -0,0 +1,4 @@
+{
+  "user": "admin@forem.local",
+  "password": "password"
+}

cypress/integration/loginFlows/initialAdminLogin.spec.js

@@ -0,0 +1,30 @@
+describe('First time for first administrator login', () => {
+  // Note if you are running these tests locallly, this test will fail
+  // if the first admin has already gone through the onboarding process.
+  it('should login the initial administrator user from the home page', () => {
+    cy.fixture('logins/initialAdmin.json').as('admin');
+
+    // Go to home page
+    cy.visit('/');
+
+    // Click on the login button in the top header
+    cy.findAllByText('Log in').first().click();
+
+    // Ensure we are redirected to the login page
+    cy.url().should('contains', '/enter');
+
+    cy.findByTestId('login-form').as('loginForm');
+    cy.get('@admin').then((admin) => {
+      // Enter credentials for the initial administrator user
+      cy.get('@loginForm').findByText('Email').type(admin.user);
+      cy.get('@loginForm').findByText('Password').type(admin.password);
+    });
+
+    // Submit the form
+    cy.get('@loginForm').findByText('Continue').click();
+
+    // User should be redirected to onboarding
+    const { baseUrl } = Cypress.config();
+    cy.url().should('include', `/onboarding?referrer=${baseUrl}/?signin=true`);
+  });
+});

cypress/plugins/index.js

@@ -0,0 +1,21 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+module.exports = (_on, _config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+};

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/index.js

@@ -0,0 +1,23 @@
+// ***********************************************************
+// This example support/index.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
+// ***********************************************************
+
+// For Testing Library APIs https://github.com/testing-library/cypress-testing-library
+import '@testing-library/cypress/add-commands';
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

package.json

@@ -96,6 +96,7 @@
     "@storybook/addon-storysource": "^6.1.10",
     "@storybook/addons": "^6.1.5",
     "@storybook/preact": "^6.1.9",
+    "@testing-library/cypress": "^7.0.2",
     "@testing-library/dom": "^7.28.1",
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/preact": "^2.0.1",

yarn.lock

@@ -3065,7 +3065,15 @@
   dependencies:
     defer-to-connect "^1.0.1"
 
-"@testing-library/dom@^7.16.2", "@testing-library/dom@^7.28.1":
+"@testing-library/cypress@^7.0.2":
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/@testing-library/cypress/-/cypress-7.0.2.tgz#a97bc7dee8756aff195e5be57db2889fe292f923"
+  integrity sha512-avBCbcCMPFHvWg4BBCA/pIh3MCwcKoJ+rc3XyZdKC5mFYPV7edjW3s4KZx/x3klXuttyuM/UesRhbSj4l5aQbw==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    "@testing-library/dom" "^7.26.6"
+
+"@testing-library/dom@^7.16.2", "@testing-library/dom@^7.26.6", "@testing-library/dom@^7.28.1":
   version "7.28.1"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-7.28.1.tgz#dea78be6e1e6db32ddcb29a449e94d9700c79eb9"
   integrity sha512-acv3l6kDwZkQif/YqJjstT3ks5aaI33uxGNVIQmdKzbZ2eMKgg3EV2tB84GDdc72k3Kjhl6mO8yUt6StVIdRDg==