Merge branch 'feat/multi-image-minds-3153' into 'master'

Feat/multi image minds#3153

See merge request minds/front!2020

e2e/test/conf/codecept.local.conf.ts

@@ -12,11 +12,14 @@ exports.config = {
       retries: 2,
       restart: 'session',
       reporter: 'html',
+      keepCookies: true,
+      keepBrowserState: true,
     },
   },
   include: {
     I: '../step_definitions/steps_file.ts',
     loginPage: '../pages/loginPage.ts',
+    newsfeedPage: '../pages/newsfeedPage.ts',
     devtoolsPage: '../pages/devtoolsPage.ts',
   },
   mocha: {},

e2e/test/features/composer.feature

@@ -0,0 +1,42 @@
+Feature: Composer
+  As a user
+  I want to create activity posts
+  So that I can share content
+
+  Scenario: one attachments by upload button
+    Given I am logged in
+    And I am on the newsfeed
+    And I have clicked on the sidebar composer button
+    When I add files via the upload button
+      | filename |
+      | image1.jpg |
+    Then I should see 1 previews of my selected imaged
+    When I click the post button
+    Then I am able to create the post
+
+  Scenario: two attachments by upload button
+    Given I am logged in
+    And I am on the newsfeed
+    And I have clicked on the sidebar composer button
+    When I add files via the upload button
+      | filename |
+      | image1.jpg |
+      | image2.jpg |
+    Then I should see 2 previews of my selected imaged
+    When I click the post button
+    Then I am able to create the post
+
+  Scenario: title input doesnt show if no attachments
+    Given I am logged in
+    And I am on the newsfeed
+    And I have clicked on the sidebar composer button
+    Then I should not see the title input
+
+  Scenario: title input shows when attachments
+    Given I am logged in
+    And I am on the newsfeed
+    And I have clicked on the sidebar composer button
+    When I add files via the upload button
+      | filename |
+      | image1.jpg |
+    Then I should see the title input

e2e/test/features/login.feature

@@ -4,7 +4,8 @@ Feature: login
   So users can successfully login
 
   Scenario: login invalid credentials errors
-    Given I am on Login page
+    Given I am logged out
+    And I am on Login page
     When I pass invalid credentials
       | username         | password          |
       | incorrectuser    | incorrectpassword | 
@@ -13,17 +14,20 @@ Feature: login
     And I see incorrect credentials error
 
   Scenario: login empty credentials errors
-    Given I am on Login page
+    Given I am logged out
+    And I am on Login page
     When I pass empty credentials
     Then I am still on Login page
     And I see empty credentials error
 
   Scenario: login banned credentials errors
-    Given I am on Login page
+    Given I am logged out
+    And I am on Login page
     When I pass banned credentials
     Then I am still on Login page
 
   Scenario: login successfully
-    Given I am on Login page
+    Given I am logged out
+    And I am on Login page
     When I pass valid credentials
     Then I am taken to Home page

e2e/test/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "test:e2e:local": "codeceptjs run --steps -c conf/codecept.local.conf.ts",
+    "test:e2e:local:ui": "codecept-ui run --steps -c conf/codecept.local.conf.ts",
     "test:e2e:real": "codeceptjs run-multiple browserStackCombo --steps -c conf/codecept.real.conf.ts"
   },
   "devDependencies": {

e2e/test/pages/commonPage.ts

@@ -0,0 +1,13 @@
+require('dotenv').config();
+const { I } = inject();
+
+class CommonPage {
+  /**
+   * Opens the composer from the sidebar
+   */
+  public openSidebarComposer(): void {
+    I.click('[data-ref=sidenav-composer]');
+  }
+}
+
+export = CommonPage;

e2e/test/pages/composerModal.ts

@@ -0,0 +1,10 @@
+export class ComposerModal {
+  private modalElementTag = 'm-composer__modal';
+
+  /**
+   * The wrapper element for the title input
+   */
+  public getTextareaTitle(): CodeceptJS.Locator {
+    return locate(`${this.modalElementTag} .m-composerTextarea__title`);
+  }
+}

e2e/test/pages/devtoolsPage.ts

@@ -58,7 +58,7 @@ class DevtoolsPage {
     const env = environment as string;
     I.seeCookie(env);
     const cookie = await I.grabCookie(env);
-    assert(cookie.value, '1');
+    assert(cookie, '1');
     I.seeElement(
       locate(this.getEnvironmentFlagSelector()).withText(
         env.replace(env[0], env[0].toUpperCase())

e2e/test/pages/newsfeedPage.ts

@@ -0,0 +1,6 @@
+require('dotenv').config();
+const { I } = inject();
+
+export = {
+  newsfeedURI: '/',
+};

e2e/test/step_definitions/steps.d.ts

@@ -1,17 +1,23 @@
 /// <reference types='codeceptjs' />
-type steps_file = typeof import('./steps_file.ts');
+//type steps_file = typeof import('./steps_file');
 type loginPage = typeof import('../pages/loginPage');
 type devtoolsPage = typeof import('../pages/devtoolsPage');
+type newsfeedPage = typeof import('../pages/newsfeedPage');
+type commonPage = typeof import('../pages/commonPage');
+type composerModal = typeof import('../pages/composerModal');
 
 declare namespace CodeceptJS {
   interface SupportObject {
     I: I;
     loginPage: loginPage;
     devtoolsPage: devtoolsPage;
+    newsfeedPage: newsfeedPage;
+    commonPage: commonPage;
+    composerModal: composerModal;
     current: any;
   }
   interface Methods extends Playwright {}
-  interface I extends ReturnType<steps_file> {}
+  interface I extends WithTranslation<Methods> {}
   namespace Translation {
     interface Actions {}
   }

e2e/test/steps/common-steps.ts

@@ -1,11 +1,20 @@
 namespace CommonSteps {
   const { I, loginPage } = inject();
 
-  Given('I am logged in', (): void => {
-    I.amOnPage(loginPage.loginURI);
-    loginPage.login(loginPage.validUsername, loginPage.validPassword);
-    I.seeCookie('minds_sess');
-  });
+  Given(
+    'I am logged in',
+    async (): Promise<void> => {
+      if (await I.grabCookie('minds_sess')) {
+        return;
+      }
+
+      I.amOnPage(loginPage.loginURI);
+      loginPage.login(loginPage.validUsername, loginPage.validPassword);
+      I.seeCookie('minds_sess');
+    }
+  );
 
-  Given('I am logged out', (): void => void 0);
+  Given('I am logged out', (): void => {
+    I.clearCookie('minds_sess');
+  });
 }

e2e/test/steps/composer-steps.ts

@@ -0,0 +1,56 @@
+import CommonPage from '../pages/commonPage';
+import { ComposerModal } from '../pages/composerModal';
+
+namespace ComposerSteps {
+  const { I, newsfeedPage } = inject();
+
+  const commonPage = new CommonPage();
+  const composerModal = new ComposerModal();
+
+  Given('I am on the newsfeed', () => {
+    I.amOnPage(newsfeedPage.newsfeedURI);
+  });
+
+  Given('I have clicked on the sidebar composer button', () => {
+    commonPage.openSidebarComposer();
+  });
+
+  When('I add files via the upload button', table => {
+    const tableByHeader = table.parse().hashes();
+    for (const row of tableByHeader) {
+      // TODO how do we make sure we're using the correct context (ie. modal or inline?)
+      I.attachFile(
+        'm-composer__modal [data-cy=upload-button] input[type=file]',
+        '../supporting-files/' + row.filename
+      );
+    }
+  });
+
+  When('I click the post button', () => {
+    I.click('m-composer__modal [data-cy=post-button]');
+  });
+
+  Then('I should see {int} previews of my selected imaged', num => {
+    for (let i = 1; i <= num; i++) {
+      I.seeElement(
+        locate('m-composer__modal m-composerpreview--attachment').at(i)
+      );
+    }
+  });
+
+  //
+
+  Then('I should not see the title input', () => {
+    I.dontSeeElement(composerModal.getTextareaTitle());
+  });
+
+  Then('I should see the title input', () => {
+    I.seeElement(composerModal.getTextareaTitle());
+  });
+
+  //
+
+  Then('I am able to create the post', () => {
+    // TODOD
+  });
+}