repo_description: The official Semantic-UI-React integration
repo_topics: component-library components frontend-components frontend-framework javascript-libraries javascript-library js-library react react-components react-library semantic-ui
code: import fs from 'fs'
  import puppeteer from 'puppeteer'
  
  import config from './config'
  import webpackConfig from './webpack.karma.config'
  
  process.env.CHROME_BIN = puppeteer.executablePath()
  
  const { paths } = config
  
  const formatError = (msg) => {
    // filter out empty lines and node_modules
    if (!msg.trim() || /~/.test(msg) || /node_modules\//.test(msg)) return ''
  
    // indent the error beneath the it() message
    let newLine = `  ${msg}`
  
    if (newLine.includes('webpack:///')) {
      // remove webpack:///
      newLine = newLine.replace('webpack:///', '')
  
      // remove bundle location, showing only the source location
      newLine = newLine.slice(0, newLine.indexOf(' <- '))
    }
  
    return `${newLine}\n`
  }
  
  export default (karmaConfig) => {
    karmaConfig.set({
      basePath: __dirname,
      browsers: ['puppeteer'],
      browserConsoleLogOptions: {
        level: 'log',
        terminal: true,
      },
      client: {
        mocha: {
          reporter: 'html', // change Karma's debug.html to mocha web reporter
          ui: 'bdd',
        },
      },
      coverageReporter: {
        reporters: [{ type: 'lcov', dir: 'coverage', subdir: '.' }],
        includeAllSources: true,
      },
      customLaunchers: {
        puppeteer: {
          base: 'ChromeHeadless',
          flags: [
            '--disable-setuid-sandbox',
            '--no-sandbox',
            // Avoid "Maximum call stack size exceeded" errors on CircleCI
            '--stack-trace-limit 200000',
          ],
        },
      },
      files: [
        './node_modules/@babel/standalone/babel.js',
        './node_modules/lodash/lodash.js',
        './node_modules/react/umd/react.development.js',
        './node_modules/react-dom/umd/react-dom.development.js',
        './node_modules/react-dom/umd/react-dom-server.browser.development.js',
  
        { pattern: 'docs/public/logo.png', watched: false, included: false, served: true },
        { pattern: 'docs/public/**/*.jpg', watched: false, included: false, served: true },
        { pattern: 'docs/public/**/*.png', watched: false, included: false, served: true },
        './test/tests.bundle.js',
      ],
      formatError,
      frameworks: ['mocha'],
      // make karma serve all files that the web server does: /* => /docs/app/*
      proxies: fs.readdirSync(paths.docsPublic()).reduce((acc, file) => {
        const isDir = fs.statSync(paths.docsPublic(file)).isDirectory()
        const trailingSlash = isDir ? '/' : ''
  
        const original = `/${file}${trailingSlash}`
        acc[original] = `/base/docs/public/${file}${trailingSlash}`
  
        return acc
      }, {}),
      reporters: ['mocha', 'coverage'],
      reportSlowerThan: 100,
      singleRun: true,
      preprocessors: {
        // do not include 'coverage' preprocessor for karma-coverage
        // code is already instrumented by babel-plugin-__coverage__
        'test/tests.bundle.js': ['webpack'],
      },
      webpack: {
        ...webpackConfig,
        entry: './test/tests.bundle.js',
      },
      webpackServer: {
        progress: false,
        stats: config.compiler_stats,
        debug: true,
        noInfo: false,
        quiet: false,
      },
    })
  }
  