dimsum-e2e-tests 1.0.0-rc.1

package/ds-mobile/MobileCard/Card.visual.spec.js

@@ -0,0 +1,103 @@
+import MobileCardCO from './MobileCardCO';
+
+if (browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-4152 - MobileCard::', () => {
+    describe('mobile card with props', () => {
+      before('loading page', async () => {
+        const errorOnGo = await MobileCardCO.withPropsURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display mobile card with props', async () => {
+        await (await MobileCardCO.getCardTitle()).waitForDisplayed();
+        const snapshot = await browser.checkSnapshot(MobileCardCO.snapshotPath('with-props'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+    describe('mobile car with small height', () => {
+      before('loading page', async () => {
+        const errorOnGo = await MobileCardCO.smallHeightURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display mobile card with small height', async () => {
+        await (await MobileCardCO.getCardTitle()).waitForDisplayed();
+        const snapshot = await browser.checkSnapshot(MobileCardCO.snapshotPath('small-height'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+    describe('mobile card group', () => {
+      before('loading page', async () => {
+        const errorOnGo = await MobileCardCO.cardGroupURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display mobile card group', async () => {
+        await (await MobileCardCO.getCardTitle()).waitForDisplayed();
+        const snapshot = await browser.checkSnapshot(MobileCardCO.snapshotPath('card-group'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+    describe('mobile card group with no title', () => {
+      before('loading page', async () => {
+        const errorOnGo = await MobileCardCO.cardGroupNoTitleURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+
+      it('should display mobile card group with no title', async () => {
+        await (await MobileCardCO.getCardTitle()).waitForDisplayed();
+        const snapshot = await browser.checkSnapshot(MobileCardCO.snapshotPath('card-group-no-title'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+
+    describe('mobile card with details, subtext and props', () => {
+      before('loading page', async () => {
+        const errorOnGo = await MobileCardCO.withDetailsURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display mobile card with details, subtext and props', async () => {
+        await (await MobileCardCO.getCardTitle()).waitForDisplayed();
+        const snapshot = await browser.checkSnapshot(MobileCardCO.snapshotPath('with-details-subtext-and-props'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+    describe('mobile card with icons', () => {
+      before('loading page', async () => {
+        const errorOnGo = await MobileCardCO.withIconsURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display mobile card with icons', async () => {
+        await (await MobileCardCO.getCardTitle()).waitForDisplayed();
+        const snapshot = await browser.checkSnapshot(MobileCardCO.snapshotPath('with-icons'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+    describe('MobileCard:: Single Expandable', () => {
+      before('loading page', async () => {
+        const errorOnGo = await MobileCardCO.expandableURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display cards expanded', async () => {
+        await (await MobileCardCO.getCardTitle()).waitForDisplayed();
+        await (await MobileCardCO.expandCard(0)).click();
+        await (await MobileCardCO.getCardContent('111111')).waitForDisplayed();
+        const snapshot = await browser.checkSnapshot(MobileCardCO.snapshotPath('single-expandable'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+
+    describe('MobileCard:: Multi Expandable', () => {
+      before('loading page', async () => {
+        const errorOnGo = await MobileCardCO.multiExpandableURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display multiple cards expanded', async () => {
+        await (await MobileCardCO.getCardTitle()).waitForDisplayed();
+        await (await MobileCardCO.expandCard(1)).click();
+        await (await MobileCardCO.getCardContent('215622')).waitForDisplayed();
+        await (await MobileCardCO.expandCard(0)).click();
+        await (await MobileCardCO.getCardContent('215693')).waitForDisplayed();
+        const snapshot = await browser.checkSnapshot(MobileCardCO.snapshotPath('expandable-multi'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+  });
+}

package/ds-mobile/MobileCard/MobileCardCO.js

@@ -0,0 +1,42 @@
+import { PATH_MOBILE_CARD, PATH_E2E_MOBILE_CARD } from '../../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export const knobs = {
+  allowMultipleOpen: 'knob-allowMultipleOpen',
+};
+export default class MobileCard extends PageObject {
+  static withPropsURL = new Urlbuilder(PATH_MOBILE_CARD, 'with-props');
+
+  static expandableTouchableURL = new Urlbuilder(PATH_E2E_MOBILE_CARD, 'expandable-touchable-card');
+
+  static smallHeightURL = new Urlbuilder(PATH_MOBILE_CARD, 'small-height');
+
+  static cardGroupURL = new Urlbuilder(PATH_MOBILE_CARD, 'card-group');
+
+  static expandableURL = new Urlbuilder(PATH_MOBILE_CARD, 'expandable');
+
+  static multiExpandableURL = new Urlbuilder(PATH_MOBILE_CARD, 'multi-expandable');
+
+  static cardGroupNoTitleURL = new Urlbuilder(PATH_MOBILE_CARD, 'card-group-no-title');
+
+  static withDetailsURL = new Urlbuilder(PATH_MOBILE_CARD, 'With-Details-Subtext-And-Props');
+
+  static withIconsURL = new Urlbuilder(PATH_MOBILE_CARD, 'card-with-icons');
+
+  static async expandCard(index) {
+    return $$('//div[@data-testid="ds-card-expand-chevron"]/span')[index];
+  }
+
+  static async getCardContent(content) {
+    return $(`//p[contains(text(), '${content}')]`);
+  }
+
+  static async getCardTitle() {
+    return $('[data-testid="card-title"]');
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'with-props') {
+    return PageObject.getSnapshotPathBuilder('MobileCard', example, 'ds-mobile');
+  }
+}

package/ds-mobile/MobileContextMenu/MobileContextMenu.func.spec.js

@@ -0,0 +1,58 @@
+import MCMCO from './MobileContextMenuCO';
+
+if (browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-4403 - MobileContextMenu:: single select', () => {
+    before('loading page', async () => {
+      const errorOnGo = await MCMCO.singleSelect.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('only one item can be selected', async () => {
+      await (await MCMCO.getHandleOpenButton()).click();
+      await (await MCMCO.getMenuItem(1)).click();
+      await (await MCMCO.getHandleOpenButton()).click();
+      const checkMark1 = await MCMCO.getCheckMark(1);
+      const checkMark0 = await MCMCO.getCheckMark(0);
+      await expect(checkMark1).toBeDisplayed();
+      await expect(checkMark0).not.toBeDisplayed();
+    });
+  });
+  describe('PUI-4404 - MobileContextMenu:: multiselect', () => {
+    before('loading page', async () => {
+      const errorOnGo = await MCMCO.multiSelect.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display items checked', async () => {
+      await (await MCMCO.getHandleOpenButton()).waitForDisplayed();
+      await (await MCMCO.getHandleOpenButton()).click();
+      await (await MCMCO.getContextMenu()).waitForDisplayed();
+      await (await MCMCO.getMenuItem(0)).click();
+      await (await MCMCO.getMenuItem(2)).click();
+      const checkBox0Checked = await (await MCMCO.getCheckBox(0)).getAttribute('aria-checked');
+      await expect(checkBox0Checked).toBe('false');
+      const checkBox2Checked = await (await MCMCO.getCheckBox(2)).getAttribute('aria-checked');
+      await expect(checkBox2Checked).toBe('true');
+    });
+    it('checkbox can be unchecked', async () => {
+      await (await MCMCO.getMenuItem(0)).click();
+      await (await MCMCO.getMenuItem(2)).click();
+      const checkBox0Checked = await (await MCMCO.getCheckBox(0)).getAttribute('aria-checked');
+      await expect(checkBox0Checked).toBe('true');
+      const checkBox2Checked = await (await MCMCO.getCheckBox(2)).getAttribute('aria-checked');
+      await expect(checkBox2Checked).toBe('false');
+    });
+  });
+  describe('PUI-4444 - MobileContextMenu:: Single select - Verify onClick function', () => {
+    before('loading page', async () => {
+      const errorOnGo = await MCMCO.singleSelect.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should close contextmenu onClick event', async () => {
+      await (await MCMCO.getHandleOpenButton()).waitForDisplayed();
+      await (await MCMCO.getHandleOpenButton()).click();
+      await (await MCMCO.getContextMenu()).waitForDisplayed();
+      await (await MCMCO.getMenuItem(0)).click();
+      const contextMenu = await MCMCO.getContextMenu();
+      await expect(contextMenu).not.toBeDisplayed();
+    });
+  });
+}

package/ds-mobile/MobileContextMenu/MobileContextMenu.visual.spec.js

@@ -0,0 +1,28 @@
+import MCMCO from './MobileContextMenuCO';
+
+if (browser.capabilities['ice:options'].isPhone) {
+  describe('MobileContextMenu:: Basic', () => {
+    before('loading page', async () => {
+      const errorOnGo = await MCMCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display mobile context menu basic', async () => {
+      await (await MCMCO.getContextMenu()).waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(MCMCO.snapshotPath());
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-6818 - MobileContextMenu, Multi, Checkmarks rendering when grouped - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await MCMCO.multiSelectGroup.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display mobile context menu basic', async () => {
+      await (await MCMCO.getHandleOpenButton()).click();
+      await (await MCMCO.getMenuItem(0)).click();
+      const snapshot = await browser.checkSnapshot(MCMCO.snapshotPath());
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-mobile/MobileContextMenu/MobileContextMenuCO.js

@@ -0,0 +1,66 @@
+import { PATH_MOBILE_CONTEXT_MENU, PATH_E2E_MOBILE_CONTEXT_MENU } from '../../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class MobileContextMenu extends PageObject {
+  static basicURL = new Urlbuilder(PATH_MOBILE_CONTEXT_MENU, 'basic');
+
+  static withFooterURL = new Urlbuilder(PATH_MOBILE_CONTEXT_MENU, 'with-footer');
+
+  static groupURL = new Urlbuilder(PATH_MOBILE_CONTEXT_MENU, 'group');
+
+  static handleOpenURL = new Urlbuilder(PATH_MOBILE_CONTEXT_MENU, 'handle-open-state');
+
+  static singleSelect = new Urlbuilder(PATH_MOBILE_CONTEXT_MENU, 'single-select');
+
+  static overlayUseCaseUrl = new Urlbuilder(PATH_E2E_MOBILE_CONTEXT_MENU, 'not-triggering-click-below-overlay');
+
+  static multiSelect = new Urlbuilder(PATH_MOBILE_CONTEXT_MENU, 'multi-select');
+
+  static multiSelectGroup = new Urlbuilder(PATH_MOBILE_CONTEXT_MENU, 'multi-select-group');
+
+  static async getHandleOpenButton() {
+    return $('[data-testid="button-wrapper"]');
+  }
+
+  static async getCounterButton() {
+    return $('[data-testid="em-ds-button-counter"]');
+  }
+
+  static async getCounterTextNumber() {
+    return (await (await $('[data-testid="em-ds-context-menu-counter"]')).getText()).slice(-1);
+  }
+
+  static async getContextMenu() {
+    return $('[data-testid="ds-mobile-context-menu"]');
+  }
+
+  static async getMenuItem(index) {
+    return (await $$('[data-testid="mobile-touchable"]'))[index];
+  }
+
+  static async getLeftAddonSize(index) {
+    const size = await (await this.getLeftAddon(index)).getCSSProperty('grid-template-rows');
+    return size.value;
+  }
+
+  static async getCheckMark(index) {
+    return (await $$('[data-testid="mobile-touchable"]'))[index].$('[data-testid="leftAddon-checkmark"]');
+  }
+
+  static async getCheckBox(index) {
+    return (await $$('[data-testid="leftAddon-checkbox"]'))[index];
+  }
+
+  static async getLeftAddon(index) {
+    return (await $$('[data-testid="left-addon"]'))[index];
+  }
+
+  static async getChecked() {
+    return $('[aria-checked="true"]');
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('MobileContextMenu', example, 'ds-mobile');
+  }
+}

package/ds-mobile/MobileDatePicker/MobileDatePicker.func.spec.js

@@ -0,0 +1,15 @@
+import MobileDatePickerCO from './MobileDatePickerCO';
+
+if (MobileDatePickerCO.isPhone()) {
+  describe('MobileDatePicker', () => {
+    before('loading page', async () => {
+      const errorOnGo = await MobileDatePickerCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should trigger focus on input if icon is clicked', async () => {
+      await MobileDatePickerCO.clickButton();
+      const input = await MobileDatePickerCO.getInput();
+      await expect(input).toBeFocused();
+    });
+  });
+}

package/ds-mobile/MobileDatePicker/MobileDatePicker.visual.spec.js

@@ -0,0 +1,28 @@
+import MobileDatePickerCO from './MobileDatePickerCO';
+
+if (MobileDatePickerCO.isPhone()) {
+  describe('MobileDatePicker', () => {
+    before('loading page', async () => {
+      const errorOnGo = await MobileDatePickerCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('basic without focus', async () => {
+      await (await MobileDatePickerCO.getButton()).waitForDisplayed({ timeout: 10000 });
+      const snapshot = await browser.checkSnapshot(MobileDatePickerCO.snapshotPath());
+      await expect(snapshot).toEqual(0);
+    });
+
+    // TODO uncomment when checkRegionSnapshot is ready in e2e testing library
+    // eslint-disable-next-line jest/no-commented-out-tests
+    // it('basic with focus', async () => {
+    //   browser.url(MobileDatePickerCO.getUrl())
+    //   MobileDatePickerCO.clickInput()
+    //   const inputSize = MobileDatePickerCO.getInput().getSize()
+    //   const inputLocation = MobileDatePickerCO.getInput().getLocation()
+    //   expect(await browser.checkRegionSnapshot('mobiledatepicker--focus', {
+    //     ...inputLocation,
+    //     ...inputSize,
+    //   })).toEqual(0)
+    // })
+  });
+}

package/ds-mobile/MobileDatePicker/MobileDatePickerCO.js

@@ -0,0 +1,35 @@
+import { PATH_MOBILE_DATE_PICKER } from '../../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class MobileDatePickerCO extends PageObject {
+  static basicURL = new Urlbuilder(PATH_MOBILE_DATE_PICKER, 'basic');
+
+  static async getInput() {
+    return $('[data-testid="ds-mobile-date-picker"]');
+  }
+
+  static async wait() {
+    await (await MobileDatePickerCO.getInput()).waitForDisplayed({ timeout: 12000 });
+  }
+
+  static async getButton() {
+    return $('[data-testid="ds-mobile-date-picker"]');
+  }
+
+  static async setPickerValue(value) {
+    await (await MobileDatePickerCO.getInput()).setValue(value);
+  }
+
+  static async clickInput() {
+    return (await this.getInput()).click();
+  }
+
+  static async clickButton() {
+    return (await this.getButton()).click();
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('MobileDatePicker', example, 'ds-mobile');
+  }
+}

package/ds-mobile/MobileDropdownMenu/MobileDropdownMenu.func.spec.js

@@ -0,0 +1,38 @@
+import MDMCO from './MobileDropdownMenuCO';
+
+if (browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-3701 - MobileDropdownMenu', () => {
+    before('loading page', async () => {
+      const errorOnGo = await MDMCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should render input with placeholder', async () => {
+      await MDMCO.waitAfterGo();
+      const input = await MDMCO.getInput();
+      await expect(input).toBeDisplayed();
+    });
+
+    it('should render options', async () => {
+      await (await MDMCO.getInput()).click();
+      await (await MDMCO.getMenu()).waitForDisplayed({ timeout: 5000 });
+      const menu = await MDMCO.getMenu();
+      await expect(menu).toBeDisplayed();
+    });
+  });
+
+  describe('PUI-9123 - MobileDropdownMenu, populate input on item select', () => {
+    before('loading page', async () => {
+      const errorOnGo = await MDMCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should populate the input with the selected option text', async () => {
+      const dropDownMenu = await MDMCO.getInput();
+      await dropDownMenu.click();
+      const menuItem = await MDMCO.getMobileDDMenuOptions(2);
+      await menuItem.click();
+      const input = await MDMCO.getInputText();
+      const inputText = await input.getAttribute('value');
+      await expect(inputText).toEqual('Item 3');
+    });
+  });
+}

package/ds-mobile/MobileDropdownMenu/MobileDropdownMenu.visual.spec.js

@@ -0,0 +1,16 @@
+import MDMCO from './MobileDropdownMenuCO';
+
+if (browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-3700 - MobileDropdownMenu visual test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await MDMCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should render menu open', async () => {
+      await MDMCO.waitAfterGo();
+      await (await MDMCO.getInput()).click();
+      const snapshot = await browser.checkSnapshot(MDMCO.snapshotPath('menu-open'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-mobile/MobileDropdownMenu/MobileDropdownMenuCO.js

@@ -0,0 +1,37 @@
+import { PATH_MOBILE_DROPDOWN_MENU } from '../../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class MobileDropdownMenu extends PageObject {
+  static basicURL = new Urlbuilder(PATH_MOBILE_DROPDOWN_MENU, 'basic');
+
+  static formURL = new Urlbuilder(PATH_MOBILE_DROPDOWN_MENU, 'form');
+
+  static async getInput() {
+    return $('//input[@placeholder="Placeholder"]');
+  }
+
+  static async getInputText() {
+    return $('span input');
+  }
+
+  static async getMenu() {
+    return $('[data-testid="ds-mobile-context-menu"]');
+  }
+
+  static async getMobileDDMenuOptions(index) {
+    return $$('[data-testid="mobile-touchable"]')[index];
+  }
+
+  static async getMobileDDMenu() {
+    return $('[data-testid="ds-mobile-ddwn-menu"]');
+  }
+
+  static async waitAfterGo() {
+    await (await this.getInput()).waitForDisplayed({ timeout: 5000 });
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('MobileDropdownMenu', example, 'ds-mobile');
+  }
+}

package/ds-mobile/MobileEmptyState/MobileEmptyState.visual.spec.js

@@ -0,0 +1,15 @@
+import { MobileEmptyStateCO } from './MobileEmptyStateCO';
+
+if (browser.capabilities['ice:options'].isPhone) {
+  describe('MobileEmptyState', () => {
+    before('loading page', async () => {
+      const errorOnGo = await MobileEmptyStateCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('renders correctly', async () => {
+      await (await MobileEmptyStateCO.getEmpyMsg()).waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(MobileEmptyStateCO.snapshotPath());
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-mobile/MobileEmptyState/MobileEmptyStateCO.js

@@ -0,0 +1,14 @@
+import { PATH_MOBILE_EMPTY_STATE } from '../../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export class MobileEmptyStateCO extends PageObject {
+  static basicURL = new Urlbuilder(PATH_MOBILE_EMPTY_STATE, 'basic');
+
+  static async getEmpyMsg() {
+    return $('p*=No search results found');
+  }
+
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('MobileEmptyState', example, 'ds-mobile');
+  }
+}

package/ds-mobile/MobileFilterbar/MobileFilterbar.visual.spec.js

@@ -0,0 +1,39 @@
+import MobileFilterbarCO from './MobileFilterbarCO';
+
+if (browser.capabilities['ice:options'].isPhone) {
+  describe('MobileFilterBar', () => {
+    describe('MobileFilterBar:: SortPill', () => {
+      before('loading page', async () => {
+        const errorOnGo = await MobileFilterbarCO.sortPill.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should render a sort pill', async () => {
+        await (await MobileFilterbarCO.getFilterBar()).waitForDisplayed({ timeout: 10000 });
+        const snapshot = await browser.checkSnapshot(MobileFilterbarCO.snapshotPath('basic-sort-pill'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+    describe('MobileFilterBar:: Basic', () => {
+      before('loading page', async () => {
+        const errorOnGo = await MobileFilterbarCO.basicURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should render basic filter bar', async () => {
+        await (await MobileFilterbarCO.getFilterBar()).waitForDisplayed({ timeout: 10000 });
+        const snapshot = await browser.checkSnapshot(MobileFilterbarCO.snapshotPath());
+        await expect(snapshot).toEqual(0);
+      });
+    });
+    describe('MobileFilterBar:: RemovablePill', () => {
+      before('loading page', async () => {
+        const errorOnGo = await MobileFilterbarCO.removablePill.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should render removable pills', async () => {
+        await (await MobileFilterbarCO.getFilterBar()).waitForDisplayed({ timeout: 10000 });
+        const snapshot = await browser.checkSnapshot(MobileFilterbarCO.snapshotPath('basic-removable-pill'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+  });
+}

package/ds-mobile/MobileFilterbar/MobileFilterbarCO.js

@@ -0,0 +1,19 @@
+import { PATH_MOBILE_FILTER_BAR } from '../../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class MobileFilterbar extends PageObject {
+  static basicURL = new Urlbuilder(PATH_MOBILE_FILTER_BAR, 'basic');
+
+  static removablePill = new Urlbuilder(PATH_MOBILE_FILTER_BAR, 'basic-removable-pill');
+
+  static sortPill = new Urlbuilder(PATH_MOBILE_FILTER_BAR, 'sort-pill');
+
+  static async getFilterBar() {
+    return $('[data-testid="filter-bar-wrapper"]');
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('MobileFilterbar', example, 'ds-mobile');
+  }
+}

package/ds-mobile/MobileFooter/MobileFooter.func.spec.js

@@ -0,0 +1,26 @@
+import MobileFooterCO from './MobileFooterCO';
+
+if (browser.capabilities['ice:options'].isPhone) {
+  describe('MobileFooter', () => {
+    describe('MobileFooter:: ActionsWithLabels', () => {
+      before('loading page', async () => {
+        const errorOnGo = await MobileFooterCO.actionsWithLabelURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('action icon size is m with label', async () => {
+        const iconSizeWidth = (await (await $$('.em-ds-icon'))[2].getCSSProperty('width')).value;
+        await expect(iconSizeWidth).toBe('24px');
+      });
+    });
+    describe('MobileFooter:: Actions', () => {
+      before('loading page', async () => {
+        const errorOnGo = await MobileFooterCO.actionsURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('action icon size is l without label', async () => {
+        const iconSizeWidth = (await (await $('.em-ds-icon')).getCSSProperty('width')).value;
+        await expect(iconSizeWidth).toBe('32px');
+      });
+    });
+  });
+}

package/ds-mobile/MobileFooter/MobileFooter.visual.spec.js

@@ -0,0 +1,51 @@
+import MobileFooterCO from './MobileFooterCO';
+
+if (browser.capabilities['ice:options'].isPhone) {
+  describe('MobileFooter', () => {
+    describe('MobileFooter:: Actions', () => {
+      before('loading page', async () => {
+        const errorOnGo = await MobileFooterCO.actionsURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display mobile footer with actions', async () => {
+        await (await MobileFooterCO.footerAction()).waitForDisplayed({ timeout: 10000 });
+        const snapshot = await browser.checkSnapshot(MobileFooterCO.snapshotPath());
+        await expect(snapshot).toEqual(0);
+      });
+    });
+    describe('MobileFooter:: OneButton', () => {
+      before('loading page', async () => {
+        const errorOnGo = await MobileFooterCO.oneButtonURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display one button', async () => {
+        await (await MobileFooterCO.buttonLabel()).waitForDisplayed({ timeout: 100000 });
+        const snapshot = await browser.checkSnapshot(MobileFooterCO.snapshotPath('one-button'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+
+    describe('MobileFooter:: TwoButtons', () => {
+      before('loading page', async () => {
+        const errorOnGo = await MobileFooterCO.twoButtonsURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display two buttons', async () => {
+        await (await MobileFooterCO.buttonLabel()).waitForDisplayed({ timeout: 100000 });
+        const snapshot = await browser.checkSnapshot(MobileFooterCO.snapshotPath('two-buttons'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+    describe('MobileFooter:: TextAndButton', () => {
+      before('loading page', async () => {
+        const errorOnGo = await MobileFooterCO.textAndButtonURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display text and button', async () => {
+        await (await MobileFooterCO.buttonLabel()).waitForDisplayed({ timeout: 100000 });
+        const snapshot = await browser.checkSnapshot(MobileFooterCO.snapshotPath('text-button'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+  });
+}