Implementar las pruebas modernas de unidades de front-end paso a paso

Hoy estamos paso a paso para combinar una variedad de tecnologías diferentes para completar las pruebas de unidades de página y las pruebas e2e.

1 karma + mocha + poder afirmar

Karma es una herramienta de gestión de procesos de prueba , que incluye algunas acciones antes de la ejecución de la prueba, que ejecuta automáticamente el código de prueba en un entorno específico (puede ser un navegador real o un navegador sin cabeza como PhantamJS).
Marco de prueba de moca, similar a jazmín y jest . Personalmente, creo que el soporte asincrónico de mocha y la visualización de información de retroalimentación son muy buenos.
La biblioteca de aserciones de power asser se caracteriza por No API is the best API. La pantalla de error es muy clara y viene con una autodescripción completa.

```
1) Array #indexOf() should return index when the value is present:
   AssertionError: # path/to/test/mocha_node.js:10

assert(ary.indexOf(zero) === two)
       |   |       |     |   |
       |   |       |     |   2
       |   -1      0     false
       [1,2,3]

[number] two
=> 2
[number] ary.indexOf(zero)
=> -1
```

Se supone que todos los siguientes comandos se utilizan en el proyecto de demostración de prueba .

1.1 Dependencias de instalación e inicialización

# 为了操作方便在全局安装命令行支持
~/test-demo $ npm install karma-cli -g

# 安装 karma 包以及其他需要的插件和库，这里不一一阐述每个库的作用
~/test-demo $ npm install karma mocha power-assert karma-chrome-launcher karma-mocha karma-power-assert karma-spec-reporter karma-espower-preprocessor cross-env -D

# 创建测试目录
~/test-demo $ mkdir test

# 初始化 karma
~/test-demo $ karma init ./test/karma.conf.js

Realice el proceso de inicialización y siga las instrucciones para seleccionar e ingresar

Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> mocha

Do you want to use Require.js ?
This will add Require.js plugin.
Press tab to list possible options. Enter to move to the next question.
> no

Do you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> Chrome
>

What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
>

Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
>

Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
> no

El archivo de configuración generado se modifica ligeramente de la siguiente manera (por razones de espacio, los comentarios están ocultos):

module.exports = function(config) {
  config.set({
    basePath: '',

    // 表示可以在测试文件中不需引入即可使用两个库的全局方法
    frameworks: ['mocha', 'power-assert'],
    files: [
      '../src/utils.js',
      './specs/utils.spec.js.js'
    ],
    exclude: [
    ],
    preprocessors: {
      './specs/utils.spec.js': ['espower']
    },
    reporters: ['spec'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: false,
    browsers: ['Chrome'],
    singleRun: false,
    concurrency: Infinity
  })
}

1.2 Código a probar

Colocamos los archivos fuente en el srcdirectorio.

// src/utils.js
function reverseString(string) {
  return string.split('').reverse().join('');
}

1.3 Código de prueba

Pruebe el código en el test/specsdirectorio, cada archivo de prueba .spec.jscomo sufijo.

// test/spes/utils.spec.js
describe('first test', function() {
  it('test string reverse => true', function() {
    assert(reverseString('abc') === 'cba');
  });

  it('test string reverse => false', function() {
    assert(reverseString('abc') === 'cba1');
  });
});

1.4 Ejecutar prueba

De regreso al directorio raíz del proyecto, ejecute el comando npm run testpara comenzar a realizar la prueba, y luego vea que el navegador se abrirá automáticamente. Se realiza la prueba, los resultados de salida del comando son los siguientes:

[karma]: Karma v2.0.0 server started at http://0.0.0.0:9876/
[launcher]: Launching browser Chrome with unlimited concurrency
[launcher]: Starting browser Chrome
[Chrome 63.0.3239 (Mac OS X 10.13.1)]: Connected on socket HEw50fXV-d24BZGBAAAA with id 24095855

  first test
    ✓ test string reverse => true
    ✗ test string reverse => false
	AssertionError:   # utils.spec.js:9

	  assert(reverseString('abc') === 'cba1')
	         |                    |
	         "cba"                false

	  --- [string] 'cba1'
	  +++ [string] reverseString('abc')
	  @@ -1,4 +1,3 @@
	   cba
	  -1

Chrome 63.0.3239 (Mac OS X 10.13.1): Executed 2 of 2 (1 FAILED) (0.022 secs / 0.014 secs)
TOTAL: 1 FAILED, 1 SUCCESS

Puede verse que una prueba tiene éxito y una prueba falla.

2 cobertura de prueba (cobertura de prueba)

La cobertura de prueba es uno de los criterios principales para medir la calidad de la prueba, lo que significa la cobertura de prueba actual de la ejecución del código fuente. En el karmauso de karma-coveragecomplementos, la cobertura de prueba de salida puede, el enchufe inferior se usa en Estambul.

~/test-demo $ npm i karma-coverage -D

Modifica el karma.conf.jsarchivo:

preprocessors: {
  '../src/utils.js': ['coverage'],
  './specs/utils.spec.js': ['espower']
},

reporters: ['spec', 'coverage'],
coverageReporter: {
  dir: './coverage', // 覆盖率结果文件放在 test/coverage 文件夹中
  reporters: [
    { type: 'lcov', subdir: '.' },
    { type: 'text-summary' }
  ]
},

Ejecute el comando de prueba nuevamente, y la información de cobertura de prueba se emitirá al final

=============================== Coverage summary ===============================
Statements   : 100% ( 2/2 )
Branches     : 100% ( 0/0 )
Functions    : 100% ( 1/1 )
Lines        : 100% ( 2/2 )
================================================================================

Abra la test/coverage/lcov-report/index.htmlpágina web puede ver datos detallados

3 paquete web + babel

El ejemplo anterior solo se puede usar para probar archivos js escritos de manera tradicional. Para modular y basado en componentes- , podemos utilizar la ES6, commonjs, AMDy otro programa modular, a continuación, utilizar los módulos de salida webpack UMD se empaquetan para ser compatible con diferentes maneras. Generalmente ES6+, la nueva sintaxis que necesitamos usar debe agregarse babelcomo un complemento de traducción en el paquete web .

El uso de webpack y babel y las dependencias y configuraciones requeridas no se describen en detalle aquí, porque se basan principalmente en las necesidades del proyecto. Este artículo solo señala los lugares que necesitan ser modificados para la prueba .

3.1 Dependencias de instalación

~/test-demo $ npm i babel-plugin-istanbul babel-preset-power-assert karma-sourcemap-loader karma-webpack -D

3.2 Modificar configuración

.babelrc

Modifique la inyección de código power-asserty coverageque se realizará durante la babelfase de compilación .babelrcy agregue la siguiente configuración al archivo:

{
  "env": {
    "test": {
      "presets": ["env", "babel-preset-power-assert"],
      "plugins": ["istanbul"]
    }
  }
}

test/index.js

En el caso de que haya muchos archivos de prueba y archivos de código fuente, o si queremos que nuestro código de prueba use la ES6+sintaxis y funciones anteriores, podemos crear una entrada para importar estos archivos de manera uniforme y luego usar webpack para procesar la entrada completa, en el testdirectorio Nuevo index.js:

// require all test files (files that ends with .spec.js)
const testsContext = require.context('./specs', true, /\.spec$/)
testsContext.keys().forEach(testsContext)

// require all src files except main.js for coverage.
// you can also change this to match only the subset of files that
// you want coverage for.
const srcContext = require.context('../src', true, /^\.\/(?!main(\.js)?$)/)
srcContext.keys().forEach(srcContext)

** karma.conf.js** La modificación ha agregado la configuración correspondiente

{
  files: [
    './index.js'
  ],
  preprocessors: {
    './index.js': ['webpack', 'sourcemap'],
  },
  webpack: webpackConfig,
  webpackMiddleware: {
    noInfo: false
  },
}

utils.spec.js

import reverseString from '../../src/utils';

describe('first test', function() {
  it('test string reverse => true', function() {
    assert(reverseString('abc') === 'cba');
  });

  it('test string reverse => false', function() {
    assert(reverseString('abc') === 'cba1');
  });
});

3.3 Ejecutar prueba

Ejecute la prueba y obtenga el mismo resultado que el segundo paso.

4 vista

Si se usa vue en el proyecto, queremos probar los componentes empaquetados, que también es muy simple.

Primero, agregue la lógica de procesamiento de vue a la configuración del paquete web e instale las dependencias requeridas, por lo que no entraré en detalles aquí.

srcAgregue en el directorio HelloWorld.vue:

<template>
  <div class="hello">
    <h1>{
   
   { msg }}</h1>
    <h2>Essential Links</h2>

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

Luego agregue el código de prueba:

// test/specs/vue.spec.js
import Vue from 'vue';
import HelloWorld from '@/HelloWorld';

describe('HelloWorld.vue', () => {
  it('should render correct contents', () => {
    const Constructor = Vue.extend(HelloWorld)
    const vm = new Constructor().$mount()
    assert(vm.$el.querySelector('.hello h1').textContent === 'Welcome to Your Vue.js App')
  })

})

Ejecute la prueba, puede ver la salida de la línea de comando:

 first test
    ✓ test string reverse => true
    ✗ test string reverse => false
        AssertionError:   # test/specs/utils.spec.js:9

          assert(reverseString('abc') === 'cba1')
                 |                    |
                 "cba"                false

          --- [string] 'cba1'
          +++ [string] reverseString('abc')
          @@ -1,4 +1,3 @@
           cba
          -1

  HelloWorld.vue
    ✓ should render correct contents

Aquí Vue se puede reemplazar con cualquier otro framework front-end, siempre que se pueda empaquetar correctamente de acuerdo con la configuración del framework correspondiente.
Si intercambia experiencia en pruebas de software, pruebas de interfaz, pruebas automatizadas y entrevistas. Si está interesado, puede agregar comunicación de prueba de software: 1085991341, y habrá intercambios técnicos con colegas.

Conclusión

Lo anterior probablemente explicó el método y el proceso de las pruebas frontales modernas, pero algunas personas pueden preguntarse, ¿por qué necesitamos hacer tanto, escribir tanto código o incluso probar código más que código real? Aquí hay un pasaje oficial de Egg para responder a esta pregunta:

先问我们自己以下几个问题：
  - 你的代码质量如何度量？  
  - 你是如何保证代码质量？  
  - 你敢随时重构代码吗？  
  - 你是如何确保重构的代码依然保持正确性？  
  - 你是否有足够信心在没有测试的情况下随时发布你的代码？  

如果答案都比较犹豫，那么就证明我们非常需要单元测试。  
它能带给我们很多保障：  
  - 代码质量持续有保障  
  - 重构正确性保障  
  - 增强自信心  
  - 自动化运行   

Web 应用中的单元测试更加重要，在 Web 产品快速迭代的时期，每个测试用例都给应用的稳定性提供了一层保障。 API 升级，测试用例可以很好地检查代码是否向下兼容。 对于各种可能的输入，一旦测试覆盖，都能明确它的输出。 代码改动后，可以通过测试结果判断代码的改动是否影响已确定的结果。

¿Eliminaste muchas dudas de tu mente?

Si hay algún error u omisión en el contenido anterior, o si tiene otras opiniones, deje un mensaje para discutirlo juntos.
El contenido anterior es el contenido completo de este artículo. El contenido anterior espera ser útil para usted. Los amigos que han recibido ayuda pueden dar me gusta y comentar.