Cree una aplicación Web3 de una sola página con Vue 3, Vite y Pinia

Introducción

Creado en 2014, Vue.js es, sin duda, uno de los marcos frontend líderes en este momento. Con una comunidad en crecimiento y un ecosistema en expansión, parece que seguirá así durante bastante tiempo. Trabajé con Vue 2 hace varios años para algunos proyectos y me pareció una experiencia encantadora.

En un intento por mantenerme al día con las tendencias en evolución, pensé que ahora es el momento de actualizar mi conjunto de herramientas a la última versión y también con herramientas más nuevas como Vite y Pinia .

Esta guía cubrirá en detalle los pasos para crear una 'aplicación de una sola página de librería de ejemplo funcional' usando Vue 3 y ejecutándola usando Vite. También incluye detalles sobre cómo agregar, administración de estado mediante Pinia (el sucesor de Vuex ) y enrutamiento mediante Vue Router .

Los conceptos básicos que se tratarán son:

• Crear una aplicación de una sola página Vue 3 usando Vite
• Administrar rutas con Vue Router
• Administrar el estado de la aplicación con Pinia
• Ejecución, creación e implementación de la aplicación con Vite
• Escribir y ejecutar pruebas de componentes de Vue
• Escribir y ejecutar pruebas integrales automatizadas con Nightwatch.js

Esto puede parecer mucho, pero creo que es perfectamente posible repasarlo todo en menos de 20 minutos. Algunos de los temas enumerados anteriormente podrían expandirse en tutoriales completos propios, pero por ahora, solo cubriré lo que se necesita para tener todo en funcionamiento.

Una última cosa que debe mencionarse es que el backend no está cubierto en este tutorial. No hay un componente del lado del servidor per se, aunque los datos se cargan mediante la API Fetch del navegador (el sucesor de XHR), por lo que se podría agregar fácilmente un componente de back-end.

Para todas las cuentas y propósitos, la aplicación que construiremos aquí se puede implementar como un sitio web estático. Si está ansioso por comenzar a codificar y le gustaría comenzar de inmediato, puede poner en marcha el proyecto con:

 git clone https://github.com/beatfactor/middlemarch npm install npm run dev

O bifurca el proyecto en Github en: https://github.com/beatfactor/middlemarch

Paso 1: configuración de la aplicación con la herramienta Scaffolding create-vite

Vamos a utilizar la herramienta de andamiaje oficial 'create-vite' para configurar la estructura del proyecto. Asegúrese de tener Node 12+ instalado con NPM 6+. También admiten Yarn y PNPM como administradores de paquetes, pero solo cubriremos NPM.

La herramienta 'create-vite' también creará la carpeta del proyecto por ti, así que asegúrate de ingresar primero a la carpeta principal: cd ~/workspace

Instale Vite e inicialice el proyecto con:

 npm init vite@latest

Luego se le pedirá que ingrese el nombre del proyecto y seleccione la biblioteca que desea usar.

De la lista, elija vue :

 ~/workspace % npm init vite@latest npx: installed 6 in 1.051s ✔ Project name: … vue-bookstore ? Select a framework: › - Use arrow-keys. Return to submit. vanilla ❯ vue react preact lit svelte

Luego seleccione vue como la variante, ya que no usaremos TypeScript:

 ? Select a variant: › - Use arrow-keys. Return to submit. ❯ vue vue-ts

Debería ver el siguiente resultado:

 npx: installed 6 in 1.051s ✔ Project name: … vue-bookstore ✔ Select a framework: › vue ✔ Select a variant: › vue Scaffolding project in /Users/andrei/workspace/vue-bookstore... Done. Now run: cd vue-bookstore npm install npm run dev

Una vez que hayamos seguido las instrucciones anteriores, obtendremos el siguiente resultado de Vite indicándonos que la aplicación se está ejecutando:

 vite v2.7.7 dev server running at: > Local: http://localhost:3000/ > Network: use `--host` to expose ready in 611ms.

Visitemos la URL localhost:3000. La página de bienvenida se ve así:

Paso 2: enrutamiento con Vue Router y gestión de estado con Pinia

Revisemos la estructura de directorios del proyecto creada por la herramienta create-vite :

 vue-bookstore/ ├── public/ | ├── favicon.ico ├── src/ | ├── assets/ | | └── logo.png | ├── components/ | | └── HelloWorld.vue | ├── App.vue | └── main.js ├─── package.json ├─── README.md └─── vite.config.js

En esta sección de nuestra guía, agregaremos dos nuevas dependencias a nuestro proyecto: Vue-router y pinia . Sigamos adelante e instálelos desde NPM.

Enrutador Vue

Vue Router es el enrutador oficial de Vue.js. Necesitaremos instalar la versión 4 que es compatible con Vue 3:

 npm install vue-router@4 --save

Pinia

Pinia es uno de los proyectos más nuevos que emergen del ecosistema Vue y es la nueva herramienta oficial de administración de estado para las aplicaciones Vue.js. Su API es muy similar a Vuex (su predecesor) y está diseñada para ser más rápida y ligera.

Puede instalar pinia desde NPM con:

 npm install pinia --save 

Configuración de enrutamiento

Si no está familiarizado con la administración del estado o el enrutamiento en una aplicación de una sola página, no se preocupe; ambos conceptos son muy fáciles de entender y serán fáciles de comprender una vez que vea cómo funciona.

Además, recuerde que solo estamos creando un tutorial aquí y el objetivo es tener todo listo y funcionando en 20 minutos y eso no requiere aprender todo lo que hay que saber sobre Vue.js. Ni siquiera requiere entender todo lo que haremos.

¿Qué es una solicitud de una sola página?

Dado que aquí estamos creando una aplicación de una sola página, podría ser útil (aunque no esencial) considerar qué significa eso y por qué es una sola página.

Una aplicación de una sola página, en pocas palabras, es una aplicación web que no vuelve a cargar la página cuando navega a otra de sus subpáginas. Sin embargo, la URL del navegador se modifica para que parezca que la página se ha vuelto a cargar, y eso se hace mediante la API de historial de HTML5.

Trabajar con componentes Vue en Vite

El scaffolding creado con la herramienta create-vite agrega un componente Vue muy básico, ubicado en src/components/HelloWorld.vue . Luego se usa en el componente principal de la aplicación, ubicado en src/App.vue .

Hay otros dos archivos importantes a tener en cuenta:

• índice.html

• src/principal.js

  
  

El archivo index.html es lo que ve el navegador cuando navega a la página de nuestra aplicación, y main.js es el punto de entrada para la aplicación Vue.js.

Así es como se ven estos archivos:

índice.html

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" href="/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vite App</title> </head> <body> <div id="app"></div> <script type="module" src="/src/main.js"></script> </body> </html>

src/principal.js

 import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app')

Adición de rutas

Ahora es el momento de crear las rutas principales de nuestra aplicación. En Vue, cada ruta debe corresponder a un componente. Para esta aplicación, consideraremos un componente por subpágina, así:

• Página de inicio - la página de inicio de nuestra librería

• Carrito : el carrito de compras y la página de salida

• Iniciar sesión : la página de inicio de sesión del usuario

  
  

Dado que este es solo un ejemplo, se han omitido otras páginas, como el registro de usuario o la página de detalles del producto. Además, la página de inicio de sesión solo contiene un inicio de sesión simulado.

Para HTML y CSS básicos, también he usado Bootstrap 5 para elementos como menús desplegables y formularios de la interfaz de usuario, pero, por supuesto, puede usar cualquier biblioteca de interfaz de usuario que desee.

Pasaremos a crear componentes de página vacíos por ahora para que podamos configurar el enrutamiento. La nueva estructura de directorios src se verá así (después de eliminar el código repetitivo):

 src/ ├── components/ | └── TopNavbar.js ├── lib/ | ├── router.js | └── store.js ├── pages/ | ├── cart/ | | ├── cart.css | | ├── cart.html | | └── Cart.vue | ├── home/ | | ├── home.css | | ├── home.html | | └── Home.vue | ├── sign-in/ | | ├── sign-in.css | | ├── sign-in.html | | └── SignIn.vue | └── routes.js ├── App.vue └── main.js

Hemos agregado tres páginas, cada una de las cuales las mantendremos muy básicas. Solo agregaremos componentes TobNavbar para que la navegación funcione sin recargas de página.

Agregue lo siguiente para src/pages/cart/Cart.vue , src/pages/home/Home.vue y src/pages/sign-in/SignIn.vue :

 <script setup> import TopNavbar from '../../components/TopNavbar.vue'; </script> <template> <TopNavbar /> </template> <style></style> <script> export default { components: { TopNavbar }, computed: {}, mounted() { }, data() { return { }; }, }; </script>

El componente TopNavbar ubicado en src/components contendrá solo los enlaces de navegación.

Observe cómo aparece el componente de enlace del enrutador que forma parte del vue-router :

 <template> <router-link to="/">Home</router-link> <router-link to="/cart/">Cart</router-link> <router-link to="/sign-in/">Sign In</router-link> </template>

El archivo pages/routes.js contiene todas las declaraciones de ruta para la aplicación. Así es como se ve:

 import {createRouter} from 'vue-router' import Homepage from './home/Home.vue'; import SignIn from './sign-in/SignIn.vue'; import Cart from './cart/Cart.vue'; const routes = [ { path: '/', component: Homepage }, { path: '/sign-in/', component: SignIn }, { path: '/cart/', component: Cart }, ] export default function (history) { return createRouter({ history, routes }) }

Antes de que estemos listos para ver el vue-router en acción, necesitamos hacer 2 cosas más:

1) Cree el enrutador y agréguelo a la instancia principal de la aplicación Vue, en src/main.js :

 import { createApp } from 'vue' import { createWebHistory } from 'vue-router' import createRouter from './pages/routes.js' import App from './App.vue' const router = createRouter(createWebHistory()) const app = createApp(App) app.use(router).mount('#app')

2) Agregue el componente <router-view> en src/App.vue :

 <template> <router-view></router-view> </template>

Ahora vuelva a ejecutar npm run dev si es necesario y luego navegue a http://localhost:3000 donde tendrá una aplicación Vue 3 habilitada para enrutamiento.

Configuración de la gestión de estado mediante Pinia

A continuación, debemos configurar la tienda Pinia para nuestra aplicación. La tienda es donde se mantiene el estado de la aplicación.

Pinia es un nuevo proyecto del equipo central de Vue.js y ahora es el enfoque recomendado para trabajar con el estado de la aplicación. Si ya está familiarizado con Vuex, acostumbrarse a Pinia será sencillo. De hecho, la API de Pinia es un poco más fácil y menos detallada que Vuex.

Con Pinia, en una aplicación Vue 3 hay una tienda raíz y luego cualquier cantidad de tiendas individuales. Para nuestra aplicación de librería, vamos a usar solo dos tiendas:

• La tienda por catálogo : una lista de libros disponibles
• El carrito de la tienda: libros que el usuario quiere pedir

Creando una pinia

Una “Pinia” es la tienda raíz que tenemos que crear primero y luego pasar a la instancia de Vue.

Lo haremos en src/main.js y lo actualizaremos para que se vea así:

 import { createApp } from 'vue' import { createWebHistory } from 'vue-router' import { createPinia } from 'pinia' import createRouter from './pages/routes.js' import App from './App.vue' const store = createPinia() const router = createRouter(createWebHistory()) const app = createApp(App) app.use(router).use(store).mount('#app')

El siguiente paso es crear el catálogo individual y las tiendas de carros y usarlos en componentes.

Adición de la tienda de catálogo

Crear una tienda Pinia significa dos cosas principalmente:z

1. Definición de la tienda
2. Uso de la tienda en uno o más componentes

Definición de la tienda

Al igual que Vuex, la tienda de Pinia contiene el estado y dos tipos de métodos: captadores y acciones .

Algunas cosas a considerar sobre una tienda:

• Los Getters son funciones sincrónicas que se utilizan para recuperar datos del estado
• Actions son funciones que también pueden ser asíncronas y que se utilizan para actualizar el estado
• El state se define como una función que devuelve el estado inicial

Ahora es el momento de crear la tienda del catálogo dentro de src/stores/catalog.js :

 import { defineStore } from 'pinia' export const useCatalog = defineStore('catalog-store', { state: () => { return { newArrivals: [], fetching: false } }, getters: { results(state) { return state.newArrivals; }, isFetching(state) { return state.fetching; } }, actions: { async fetchNewArrivals() { this.fetching = true; const response = await fetch('/data/new-arrivals.json'); try { const result = await response.json(); this.newArrivals = result.books; } catch (err) { this.newArrivals = []; console.error('Error loading new arrivals:', err); return err; } this.fetching = false; } } })

Mirando el código fuente anterior, notará que tenemos dos 'captadores' ( results e isFetching ) y una acción ( fetchNewArrivals ). En lugar de un backend real, solo tenemos un archivo json ubicado en /data/new-arrivals.json que contiene algunos libros que usaremos como nuestro catálogo.

También notará que nuestros 'captadores' no hacen nada especial con los datos y, por lo tanto, son un poco innecesarios, pero se incluyen para mostrar cómo puede definirlos.

Uso de la tienda en una plantilla

Vincular la definición anterior a una plantilla también es bastante sencillo.

Vamos a crear un nuevo componente llamado NewArrivals dentro de src/components/NewArrivals.vue que usaremos en el componente de la página Home.vue .

 <script setup> import {useCatalog} from '../../store/catalog.js' </script> <template> </template> <style scoped></style> <script> import { mapState, mapActions } from 'pinia' export default { computed: { ...mapState(useCatalog, {newArrivals: 'results'}) }, methods: { ...mapActions(useCatalog, ['fetchNewArrivals']), addToCart() { // we'll populate this later } }, created() { // when the template is created, we call this action this.fetchNewArrivals(); } }; </script>

El componente Home.vue se convierte en:

 <script setup> import TopNavbar from '../../components/TopNavbar.vue'; import NewArrivals from '../../components/NewArrivals.vue'; </script> <template> <TopNavbar /> <NewArrivals /> </template> <style></style> <script> export default { components: { TopNavbar, NewArrivals }, computed: {}, mounted() {}, data() { return {}; }, }; </script>

Aquí hay un diagrama de cómo la tienda y el componente funcionan juntos en la aplicación:

También escribí una tienda y un componente para el carrito, pero no lo incluiré en el tutorial. El mecanismo es similar y puedes inspeccionar el código fuente en el repositorio que tiene todo incluido, incluso algunos estilos extra.

Paso 3: prueba de los componentes de Vue.js

La prueba de componentes es un tipo de prueba de interfaz de usuario en la que el componente se representa de forma aislada y sin el resto de los componentes de la aplicación, con el fin de verificar su funcionalidad. Por lo general, es una estrategia de prueba que ocurre antes del paso de prueba de extremo a extremo, que explicaremos en la siguiente sección.

Necesitamos instalar el proyecto Vue TestUtils ; la biblioteca oficial de pruebas unitarias para Vue.js, necesitamos la que apunta a Vue 3.

Puede instalar eso desde NPM con:

 npm install @vue/test-utils@next --save-dev 

Instalación de Nightwatch.js y ChromeDriver

Usaremos Nightwatch.js tanto para las pruebas de componentes como para las pruebas de un extremo a otro. Nightwatch ya es uno de los marcos de prueba recomendados por el equipo de Vue.js y se publicó casi al mismo tiempo que Vue. Recientemente obtuvo soporte (todavía en versión beta) para la prueba de componentes de Vue a través de vite-plugin-nightwatch .

Continuaremos e instalaremos Nightwatch v2 usando:

 npm install nightwatch--save-dev

Y también necesitaremos el vite-plugin-nightwatch mencionado anteriormente:

 npm install vite-plugin-nightwatch --save-dev

Nightwatch usa la API W3C WebDriver para tareas de automatización del navegador y también necesitaremos instalar el paquete chromedriver NPM, porque vamos a usar Chrome para ejecutar nuestras pruebas.

 npm install chromedriver --save-dev

Prueba del componente <NewArrivals>

Y con eso, hemos llegado al punto en el que finalmente podemos comenzar a escribir la prueba real para nuestro componente NewArrivals.

El vite-plugin-nightwatch mencionado anteriormente incluye una página de renderizador de prueba y Nightwatch ya contiene todo lo necesario para ejecutar la prueba inicial de nuestro componente.

Crea una carpeta test y dentro de ella dos subcarpetas:

• component - esto llevará a cabo pruebas de componentes
• e2e : esto llevará a cabo pruebas de extremo a extremo

También necesitamos un archivo de configuración nightwatch.conf.js , pero podemos ejecutar Nightwatch directamente y crear el archivo de configuración automáticamente. Solo asegúrese de que chromedriver también esté instalado (y el navegador Chrome, por supuesto).

Asegúrese de que el directorio de trabajo actual sea la raíz del proyecto y luego simplemente ejecute una prueba de ejemplo que se incluye con Nightwatch. duckDuckGo la prueba duckDuckGo porque es la más rápida:

 $ npx nightwatch examples/tests/duckDuckGo.js

La estructura del proyecto debería verse así ahora:

 vue-bookstore/ ├── public/ | ├── data/ | └── favicon.ico ├── src/ ├── ... | └── main.js ├── test/ | ├── component/ | └── e2e/ ├─── nightwatch.conf.js ├─── package.json ├─── README.md └─── vite.config.js

Continuaremos y crearemos un nuevo archivo llamado newArrivalsTest.js dentro test/component . En él, agregaremos una prueba básica que monta el componente y comprueba si el elemento devuelto se puede encontrar en la página (es decir, el componente se ha montado).

 describe('New Arrivals Component Test', function() { it('checks if the component has been mounted', async (browser) => { const component = await browser.mountVueComponent('/src/components/new-arrivals/NewArrivals.vue', { plugins: { router: '/src/lib/router.js' } }) expect(component).to.be.present; }); });

Nightwatch usa la misma sintaxis describe() que Mocha. Incluso puede usar Mocha como corredor de pruebas si ya está familiarizado con él, pero no lo haremos por ahora. En caso de que desee usar Mocha, solo necesita deslizar algunos interruptores en el archivo de configuración de Nightwatch y hay documentación disponible en el sitio web de Nightwatch sobre cómo hacerlo.

Ahora es el momento de ejecutar la prueba anterior y para eso ejecutaremos Nightwatch usando Chrome, así:

 npx nightwatch test/component/newArrivalsTest.js --env chrome

Esto abrirá el navegador Chrome y renderizará el componente, luego realizará la prueba. Si no le gusta ver aparecer la ventana del navegador durante la prueba, puede pasar el argumento --headless the, así:

 npx nightwatch test/component/newArrivalsTest.js --env chrome --headless

La salida de la prueba debería verse como a continuación:

 [New Arrivals Component Test] Test Suite ────────────────────────────────────────────────────────────── ℹ Connected to ChromeDriver on port 9515 (652ms). Using: chrome (97.0.4692.99) on MAC OS X. Running tests the component: ────────────────────────────────────────────────────────────── ✔ Expected element <web element{e53f9b1e-11d3-4dc4-8728-4d3cd077343e}> to be present (1ms) OK. 1 assertions passed. (781ms)

Por supuesto, puede consultar todas las opciones de CLI que proporciona el corredor Nightwatch, ya sea yendo a las páginas de documentos o ejecutando:

 npx nightwatch --help

Ampliación de la prueba <NewArrivals>

Es posible que haya notado que nuestra prueba de componentes no está probando mucho, lo que significa que la prueba no es tan útil como podría ser. Así que seguiremos adelante y lo extenderemos solo un poco.

Solo inspeccionaremos el componente NewArrivals y verificaremos si hay una propiedad llamada newArrivals , que se usa en el HTML para representar los resultados.

La prueba se ve así ahora. Hemos refactorizado el montaje del componente en el gancho before para que solo podamos hacer las comprobaciones dentro de la prueba, el bloque it . La biblioteca expect la proporciona Nightwatch lista para usar y se basa en la popular y versátil biblioteca de afirmaciones Chai.js.

Más información sobre cómo usar la expect en el sitio web de documentos de Nightwatch .

 describe('New Arrivals Component Test', function() { let component; before(async () => { component = await browser.mountVueComponent('/src/components/new-arrivals/NewArrivals.vue', { plugins: { router: '/src/lib/router.js' } }) }); it('checks if the component has been mounted', function(browser) { expect(component).to.be.present; expect(component).to.have.property('newArrivals'); expect(component).text.toContain('The Memory Police') expect.elements('div.col-md-6').count.toEqual(4); expect(component.property('newArrivals')).to.be.an('array').with.length(1); }); });

Paso 4: prueba de extremo a extremo de la aplicación Vue.js

Nos acercamos al final de este tutorial, pero antes de que podamos considerar que tenemos una aplicación Vue.js en funcionamiento, debemos agregar soporte para pruebas de extremo a extremo y configurar una canalización de CI en Github Actions.

Afortunadamente, no necesitamos instalar ni configurar ninguna otra herramienta, excepto algunos reporteros elegantes, pero por ahora podemos obtener todo lo que necesitamos en términos de pruebas automatizadas de extremo a extremo de Nightwatch. Además de Chrome, Nightwatch tiene soporte integrado para todos los principales navegadores, incluidos Firefox, Edge y Safari, todo gracias a su integración con la API W3C Webdriver y Selenium. También le permite utilizar plataformas de pruebas en la nube distribuidas como BrowserStack , SauceLabs , CrossBrowserTesting o LambdaTest .

Por ahora, mantendremos las cosas menos complejas y solo nos concentraremos en escribir algunas pruebas automatizadas básicas y ejecutarlas en Chrome, Firefox y Safari.

Escribir la prueba de extremo a extremo de la página de inicio

Comencemos con la prueba de extremo a extremo de la página de inicio y creemos un nuevo archivo en test/e2e/homePageTest.js . La sintaxis es la misma que para la prueba de componentes, pero para ejecutar las pruebas de extremo a extremo usaremos la versión compilada de nuestra aplicación.

Por supuesto, podemos ejecutarlos contra la compilación del desarrollador, pero la práctica establecida en el desarrollo de software, por lo que sé, es ejecutar las pruebas de extremo a extremo en un entorno que simule la producción con una precisión razonable. Supongo que es por eso que se llaman pruebas de extremo a extremo, para ejecutarlas contra el producto final.

Ejecución de la compilación de producción

Para ejecutar la compilación de producción, tenemos dos opciones y cada una de ellas implica ejecutar un comando de Vite , que está envuelto en tareas de NPM.

1. npm run build : esto generará index.html y los otros activos estáticos. Puede usar esta opción si ya tiene un servidor web local configurado.
2. npm run preview : esto generará una compilación de producción y la ejecutará utilizando el servidor de desarrollo integrado, de forma predeterminada en http://localhost:5000 .

La segunda opción es claramente más sencilla, así que ejecutemos el comando de preview y veamos qué sucede:

 $ npm run preview > [email protected] preview /Users/andrei/workspace/vue-bookstore > vite preview > Local: http://localhost:5000/ > Network: use `--host` to expose

Escribir el guión de prueba

Ahora que tenemos una compilación lista para producción en ejecución, podemos comenzar a escribir la prueba real en test/e2e/homePageTest.js .

Comenzaremos poco a poco, con solo lo siguiente:

 describe('Homepage End-to-end Test', () => { it('tests if homepage is loaded', browser => { browser .navigateTo('http://localhost:3000') .assert.visible('#app .new-arrivals-panel') .expect.elements('#app .new-arrivals-panel .col-md-6').count.toEqual(4) }); it('adds 2 volumes of "Rhinoceros and Other Plays" to cart', browser => { browser .click('.new-arrivals-panel .col-md-6:nth-child(2) button.add-to-cart') .click('.new-arrivals-panel .col-md-6:nth-child(2) button.add-to-cart') .assert.textEquals('.shopping-cart .badge', '2'); }); after(browser => browser.end()); });

La prueba verifica si el panel Novedades se muestra en la página y si contiene las 4 entradas que ya hemos visto.

Ejecutar el script de prueba en Chrome

Para ejecutar esto en Chrome, el comando es muy similar al de la prueba de componentes:

 npx nightwatch test/e2e/homePageTest.js --env chrome

Y la salida será:

 [Homepage End-to-end Test] Test Suite ────────────────────────────────────────────────────────────── ℹ Connected to ChromeDriver on port 9515 (2454ms). Using: chrome (97.0.4692.99) on MAC OS X. Running tests the homepage: ────────────────────────────────────────────────────────────── ✔ Testing if element <#app .new-arrivals-panel> is visible (157ms) ✔ Expected elements <#app .new-arrivals-panel .col-md-6> count to equal: "4" (18ms) OK. 2 assertions passed. (765ms)

Ejecutar el script de prueba en Firefox

Si también queremos ejecutar nuestras pruebas de extremo a extremo en el navegador Firefox, solo necesitamos instalar GeckoDriver (la implementación específica de Firefox de la API W3C WebDriver). No se necesita ninguna otra configuración para que funcione, a menos que desee personalizarla aún más.

Así que sigamos adelante e instálelo desde NPM:

 npm i geckodriver --save-dev

Y luego ejecuta Nightwatch con el siguiente comando:

 npx nightwatch test/e2e/homePageTest.js --env firefox

Y la salida:

 [Homepage End-to-end Test] Test Suite ────────────────────────────────────────────────────────────── ℹ Connected to GeckoDriver on port 4444 (1737ms). Using: firefox (96.0.2) on MAC (20.6.0). Running tests the homepage: ────────────────────────────────────────────────────────────── ✔ Testing if element <#app .new-arrivals-panel> is visible (54ms) ✔ Expected elements <#app .new-arrivals-panel .col-md-6> count to equal: "4" (6ms) OK. 2 assertions passed. (612ms)

Ejecutar el script de prueba en Safari

Si está utilizando una Mac, es probable que safaridriver ya esté instalado, dependiendo de su versión de Safari.

Puede verificar con el uso de:

 safaridriver --help

Y la salida debería verse así:

 Usage: safaridriver [options] -h, --help Prints out this usage information. --version Prints out version information and exits. -p, --port Port number the driver should use. If the server is already running, the port cannot be changed. If port 0 is specified, a default port will be used. --enable Applies configuration changes so that subsequent WebDriver sessions will run without further authentication. --diagnose Causes safaridriver to log diagnostic information for all sessions hosted by this instance. See the safaridriver(1) man page for more details about diagnostic logging.

Antes de ejecutar su primera prueba en Safari, solo necesita habilitar la automatización con el siguiente comando:

 safaridriver --enable

Y luego simplemente ejecute la prueba Nightwatch con:

 npx nightwatch test/e2e/homePageTest.js --env safari

Ejecución en paralelo en varios navegadores

Si necesita ejecutar sus pruebas de Nightwatch (ya sea por componentes o de un extremo a otro) en más de un navegador, puede hacerlo.

Simplemente pase los navegadores como una lista separada por comas (sin espacios):

Ejecutando en Firefox+Chrome

 npx nightwatch test/e2e/homePageTest.js --env firefox,chrome

Ejecutar en Firefox+Chrome+Safari

 npx nightwatch test/e2e/homePageTest.js --env firefox,chrome,safari

Nightwatch también admite la ejecución de pruebas en paralelo al dividir la cantidad total de archivos de script de prueba entre una cantidad configurable de trabajadores. Pero como solo tenemos un archivo por ahora, omitiremos esta parte. Más información sobre el paralelismo en el sitio web de documentos de Nightwatch .

Paso 5: habilitar la integración continua con las acciones de Github

Parece que es hora de terminar las cosas y poner todo junto. Antes de que podamos habilitar la implementación continua en Github Actions, debemos crear la tarea NPM de test .

Creación de la tarea "prueba npm"

Ahora tenemos pruebas de componentes y pruebas de extremo a extremo en nuestro proyecto de ejemplo. Por supuesto, es solo un nivel mínimo, por lo que no cubre todo, pero diría que es un buen comienzo.

La forma más fácil de decirle a Nightwatch que ejecute todas las pruebas dentro de la carpeta de prueba es pasar la carpeta como el segundo argumento de la CLI.

Agregaremos eso como una nueva tarea de NPM llamada test así que editemos el package.json y agreguemos lo siguiente, dentro del diccionario de "scripts":

 { "test": "nightwatch ./test" }

Podemos ejecutar la tarea NPM y pasar argumentos CLI relacionados con Nightwatch de la siguiente manera:

 npm test -- --env chrome --headless

Usaremos el modo --headless para ejecutar las pruebas en Github Actions.

Agregar el flujo de trabajo de la acción de Github

Finalmente, podemos agregar el flujo de trabajo de Github Actions para que nuestras pruebas puedan ejecutarse en cada envío y cada solicitud de extracción.

Hacerlo es bastante sencillo. Usaremos la plantilla de Node.js y agregaremos algunos pasos nuevos en la lista, para:

• iniciar el servidor de desarrollo en segundo plano
• construir el proyecto e iniciar el servidor de desarrollo en modo de vista previa, también en segundo plano
• ejecutando pruebas de componentes y de un extremo a otro en Chrome, en modo sin cabeza

Crear el flujo de trabajo de Github Actions significa agregar un nuevo archivo llamado node.js.yml en la carpeta .github/workflows que debería verse como se muestra a continuación. La mayor parte de esto se genera automáticamente cuando navega a la sección Acciones de su proyecto de Github y elige la plantilla de Node.js.

 name: Node.js CI on: push: branches: [ main ] pull_request: branches: [ main ] jobs: build: runs-on: ubuntu-latest strategy: matrix: node-version: [12.x, 14.x] steps: - uses: actions/checkout@v2 - name: Use Node.js ${{ matrix.node-version }} uses: actions/setup-node@v2 with: node-version: ${{ matrix.node-version }} - run: npm ci - name: Start vite dev server run: npm run dev & - name: Build the app run: npm run build - name: Start vite dev server in preview run: npm run preview & - name: Run Nightwatch tests run: npm test

Y eso es. Se ejecutará una nueva compilación para cada nuevo git push o cada vez que se envíe una nueva solicitud de extracción. La compilación se ejecutará en 2 entornos separados, uno para el Nodo 12 y el otro para el Nodo 14, como se define en la definición del flujo de trabajo.

A dónde ir desde aquí

El proyecto está disponible en Github en https://github.com/beatfactor/middlemarch y todo el código cubierto aquí y un poco más de estilo e imágenes. También contiene el código para el carrito de compras y una página de pago simulada.

Puede ejecutarlo en su máquina local con los pasos habituales:

 git clone https://github.com/beatfactor/middlemarch npm install npm run dev

Siéntase libre de enviar solicitudes de extracción o informar problemas.

Obtener apoyo

Vue3, Vite y Pinia

El equipo central de Vue.js brinda soporte comunitario para Vue3, Vite y Pinia en los siguientes canales:

• Servidor de chat VueLand en Discord
• Foro Vue
• Debates de Vite en Github
• Debates de Pinia en Github

Vigilancia nocturna.js

Para soporte con todo lo relacionado con las pruebas de Nightwatch, tenemos los siguientes canales:

• Debates de Github
• Servidor de chat Nightwatch.js en Discord

Publicado por primera vez aquí