Unit Testing - ProjectEvergreen/create-evergreen-app GitHub Wiki

// Prevent Karma from running prematurely.
__karma__.loaded = function () {};

// Then we find all the tests.
const context = require.context('./src', true, /\.spec\.js$/);

// And load the modules.
context.keys().map(context);

// Finally, start Karma to run the tests.
__karma__.start();

const path = require('path');
const webpackConfig = require('./webpack.config.common');
const isProductionBuild = process.env.NODE_ENV === 'production';
const shouldWatch = !isProductionBuild;
const shouldSingleRun = isProductionBuild;

process.env.CHROME_BIN = require('puppeteer').executablePath();
webpackConfig.devtool = 'inline-source-map';
webpackConfig.mode = 'development';

webpackConfig.module.rules.push({
  test: /\.js$/,
  enforce: 'post',
  exclude: [/\.spec.js$/, /node_modules/],
  loader: 'istanbul-instrumenter-loader',
  query: {
    esModules: true
  }
});

module.exports = function (config) {
  const logLevel = isProductionBuild ? config.LOG_DEBUG : config.LOG_INFO;

  config.set({
    basePath: '',
    files: [
      { pattern: './karma-test-shim.js', watched: false }
    ],
    preprocessors: {
      './karma-test-shim.js': ['webpack', 'sourcemap']
    },
    frameworks: ['jasmine'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-junit-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('karma-webpack'),
      require('karma-sourcemap-loader')
    ],

    webpack: webpackConfig,

    reporters: ['progress', 'dots', 'junit', 'coverage-istanbul'],
    port: 9876,
    colors: true,
    logLevel: logLevel,
    autoWatch: shouldWatch,
    browsers: ['ChromiumHeadlessConfigured'],
    customLaunchers: {
      ChromiumHeadlessConfigured: {
        base: 'ChromeHeadless',
        flags: [
          '--no-sandbox',
          '--disable-setuid-sandbox'
        ]
      }
    },
    singleRun: shouldSingleRun,
    captureTimeout: 210000,
    browserDisconnectTolerance: 3,
    browserDisconnectTimeout: 210000,
    browserNoActivityTimeout: 210000,
    concurrency: Infinity,
    junitReporter: {
      outputDir: './reports/test-results/',
      outputFile: 'test-results.xml',
      suite: 'my-app',
      useBrowserName: false
    },
    coverageIstanbulReporter: {
      dir: path.join(__dirname, 'reports'),
      reports: ['html', 'cobertura', 'text-summary'],
      'report-config': {
        html: {
          subdir: 'test-coverage'
        },
        cobertura: {
          file: 'test-coverage/coverage.xml'
        },
        'text-summary': {}
      },
      fixWebpackSourcePaths: true,
      remapOptions: {
        exclude: [/\*.spec.ts/]
      },
      thresholds: {
        emitWarning: false,
        global: {
          statements: 90,
          branches: 80,
          functions: 90,
          lines: 90
        }
      }
    }
  });
};

import { html, LitElement } from '@polymer/lit-element';

class HeaderComponent extends LitElement {

  render() {
    return html`      

      <header>

        <h1>Welcome to Create Evergreen App!</h1>
      
      </header>
    `;
  }
}

customElements.define('x-header', HeaderComponent);

import './header.js';

describe('Header Component', () => {
  let header;

  beforeEach(async () => {
    header = document.createElement('eve-header');

    document.body.appendChild(header);

    // this is what makes the magic happen ✨
    await header.updateComplete;
  });

  afterEach(() => {
    header.remove();
    header = null;
  });

  describe('Default Behavior', () => {
    
    it('should have a greeting', () => { 
      const greeting = header.shadowRoot.querySelectorAll('header h1')[0];

      expect(greeting.innerHTML).toBe('Welcome to Create Evergreen App!');
    });

  });

});

"scripts": {
  ...
  "test": "karma start"
}

import { LitElement, html } from '@polymer/lit-element';

class GreetingComponent extends LitElement {
  
  static get properties() {
    return {
      name: {
        type: String,
        attrName: 'name'
      }
    };
  }

  _render(props) {
    return html`
      <style>
        :host .name {
          color: green;
        }
      </style>
      
      <h1 class="greeting">Hello <span class="name">${props.name}</span>!</h1>
    `;
  }
}

customElements.define('x-greeting', GreetingComponent);

describe('GreetingComponent', () => {
  const name = 'Owen';
  let componentRoot;
  let greetingContainer;
  let nameContainer;

  beforeEach(() => {
    componentRoot = fixture('greeting').shadowRoot;

    greetingContainer = componentRoot.querySelectorAll('.greeting');
    nameContainer = componentRoot.querySelectorAll('.name');
  });

  it('should have a container element for the greeting', () => {
    expect(greetingContainer.length).to.equal(1);
  });

  it('should have a container element for the name', () => {
    expect(nameContainer.length).to.equal(1);
  });

  it('should display the full greeting in the greeting container element', () => {
    expect(greetingContainer[0].textContent).to.equal(`Hello ${name}!`);
  });

  it('should display just the name attribute in name container element', () => {
    expect(nameContainer[0].textContent).to.equal(name);
  });
});

"scripts": {
  ...
  "test": "wct --npm --expanded"
}