patricksevat

// Potential fix for https://github.com/ionic-team/stencil/issues/1948 (Components without shadowdom are rendering twice when dynamically added to the DOM)
// copied code from https://github.com/angular/angular.js/blob/master/src/ng/directive/ngIf.js#L3 and https://github.com/angular/angular.js/blob/add78e62004e80bb1e16ab2dfe224afa8e513bc3/src/Angular.js#L2015
angular
  .module('demo', [])
  .directive('ngIf', function ($animate, $compile) {
    function getBlockNodes(nodes) {
      var node = nodes[0];
      var endNode = nodes[nodes.length - 1];
      var blockNodes;

patricksevat

// ./objects/base/component-object-base.ts

export interface IComponentObjectConfig {
  featureName?: string;
  visibleOnMobile: boolean;
  visibleOnDesktop: boolean;
}

export abstract class ComponentObjectBase {
  componentName: string;

patricksevat

// ./objects/pages/dashboard-page.ts
import { BankAccountObject } from '../objects/features';
import { NavigationObject } from '../objects/ui-components';

export class DashboardPageObject {
  // the root element for the page <dashboard-page />
  element = 'dashboard-page';
  // all registered features and UI components
  features = [
      new BankAccountObject(), 

patricksevat

// ./spec/dashboard-page.spec.ts
import { dashboardPage } from '../objects/pages/';

describe('Dashboard page', () => {
  it('should render all features', async () => {
    await browser.url(dashboardPage.url);
    const isRendered = await dashboardPage.waitUntilRendered();

    // at this point, the page is rendered and we can safely kick off all our tests
    expect(isRendered).toBe(true);

patricksevat

// ./objects/base/component-object-base.ts
export abstract class ComponentObjectBase {
  componentName: string;
  element: string;
  elementToRender: string;

  render = async () => {
    if (!this.element || !this.elementToRender) {
      throw new Error('please define an element and elementToRender to check if the feature was rendered');
    }

patricksevat

// ./objects/pages/dashboard-page.ts
import { BankAccountObject } from '../features';
import { NavigationObject } from '../ui-components';
import { PageObjectBase } from '../base';

class DashboardPageObject extends PageObjectBase {
  element = 'dashboard-page';
  features = [new BankAccountObject(), new NavigationObject()];
  url: string = '/dashboard';
}

patricksevat

// ./objects/features/bank-account.ts
import { ComponentObjectBase } from '../base';

export class BankAccountObject extends ComponentObjectBase {
  componentName = 'bank-account';
  element = 'my-bank-account';
  elementToRender = '[data-test="async-fetch-bank-account-balance"]';
}

patricksevat

// wdio.conf.js
exports.config = {
  specs: ['spec/**/*.spec.ts'],
  framework: 'jasmine',
  jasmineNodeOpts: {
    defaultTimeoutInterval: 60000,
    grep: '#smoke',
    invertGrep: false,
  },
  // ... other config

patricksevat

// ./spec/grep-example.spec.ts
describe('various tests', () => {
  it('I will be executed #smoke', () => {});
  
  it('I will be filtered', () => {});
});

patricksevat

// ./wdio.conf.js
const argv = require('yargs').argv;

const { getFilteredSpecFiles, getRegularExpression } = require('./getSpecFiles');

const cmdOpts = {
  smoke: argv.smoke,
  target: argv.target,
};