add e2e test for installing

packages/app/src/components/InstallerForm.jsx

@@ -119,6 +119,7 @@ class InstallerForm extends React.Component {
                 <span className="input-group-text"><i className="icon-user" /></span>
               </div>
               <input
+                data-testid="tiUsername"
                 type="text"
                 className="form-control"
                 placeholder={this.props.t('User ID')}
@@ -135,6 +136,7 @@ class InstallerForm extends React.Component {
                 <span className="input-group-text"><i className="icon-tag" /></span>
               </div>
               <input
+                data-testid="tiName"
                 type="text"
                 className="form-control"
                 placeholder={this.props.t('Name')}
@@ -149,6 +151,7 @@ class InstallerForm extends React.Component {
                 <span className="input-group-text"><i className="icon-envelope" /></span>
               </div>
               <input
+                data-testid="tiEmail"
                 type="email"
                 className="form-control"
                 placeholder={this.props.t('Email')}
@@ -163,6 +166,7 @@ class InstallerForm extends React.Component {
                 <span className="input-group-text"><i className="icon-lock" /></span>
               </div>
               <input
+                data-testid="tiPassword"
                 type="password"
                 className="form-control"
                 placeholder={this.props.t('Password')}
@@ -175,6 +179,7 @@ class InstallerForm extends React.Component {
 
             <div className="input-group mt-4 mb-3 d-flex justify-content-center">
               <button
+                data-testid="btnSubmit"
                 type="submit"
                 className="btn-fill btn btn-register"
                 id="register"

packages/app/test/cypress/integration/1-install/install.spec.ts

@@ -1,8 +1,13 @@
-describe('Installer', () => {
-  it('successfully loads', () => {
-    cy.visit('/'); // change URL to match your dev URL
-    cy.screenshot('on-load');
+context('Installer', () => {
+
+  const ssPrefix = 'installer-';
 
+  beforeEach(() => {
+    cy.visit('/');
+  })
+
+  it('successfully loads', () => {
+    cy.screenshot(`${ssPrefix}-on-load`);
     cy.getByTestid('installerForm').should('be.visible');
   });
 
@@ -10,20 +15,42 @@ describe('Installer', () => {
     cy.getByTestid('dropdownLanguage').should('be.visible');
 
     cy.getByTestid('dropdownLanguage').click();
-    cy.screenshot('open-dropdownLanguage');
+    cy.screenshot(`${ssPrefix}-open-dropdownLanguage`);
     cy.getByTestid('dropdownLanguage').click(); // close
 
     cy.getByTestid('dropdownLanguage').click();
     cy.getByTestid('dropdownLanguageMenu-en_US').click();
-    cy.screenshot('select-en_US');
+    cy.screenshot(`${ssPrefix}-select-en_US`);
 
     cy.getByTestid('dropdownLanguage').click();
     cy.getByTestid('dropdownLanguageMenu-ja_JP').click();
-    cy.screenshot('select-ja_JP');
+    cy.screenshot(`${ssPrefix}-select-ja_JP`);
 
     cy.getByTestid('dropdownLanguage').click();
     cy.getByTestid('dropdownLanguageMenu-zh_CN').click();
-    cy.screenshot('select-zh_CN');
+    cy.screenshot(`${ssPrefix}-select-zh_CN`);
+  });
+
+});
+
+context('Installing', () => {
+
+  const ssPrefix = 'installing-';
+
+  beforeEach(() => {
+    cy.visit('/');
+  })
+
+  it('has succeeded', () => {
+    cy.getByTestid('tiUsername').type('admin');
+    cy.getByTestid('tiName').type('Admin');
+    cy.getByTestid('tiEmail').type('admin@example.com');
+    cy.getByTestid('tiPassword').type('adminadmin');
+    cy.screenshot(`${ssPrefix}-before-submit`);
+
+    cy.getByTestid('btnSubmit').click();
+
+    cy.screenshot(`${ssPrefix}-installed`, { capture: 'viewport' });
   });
 
 });