Back to Repositories

Testing PWA Service Worker Integration in vue-cli

This test suite validates the Progressive Web App (PWA) generator functionality in Vue CLI, specifically focusing on service worker registration. It ensures proper import statement injection across both JavaScript and TypeScript implementations.

Test Coverage Overview

The test suite provides comprehensive coverage of service worker import injection functionality.

Key areas tested include:

Basic service worker import in JavaScript files
TypeScript compatibility for service worker registration
Integration with core Vue CLI service
Proper file generation and content verification

Implementation Analysis

The testing approach utilizes Vue CLI’s test utilities for plugin generation verification. It employs asynchronous testing patterns to handle plugin generation and file system operations.

Technical implementation features:

Plugin chaining with core and TypeScript services
File content validation using expect matchers
Modular plugin application structure

Technical Details

Testing tools and configuration:

@vue/cli-test-utils for plugin generation
Jest as the testing framework
Async/await pattern for asynchronous operations
File system manipulation through Vue CLI’s generator system

Best Practices Demonstrated

The test suite demonstrates several testing best practices in the Vue ecosystem.

Notable practices include:

Isolated test cases for different file types
Clear test descriptions and expectations
Proper setup and teardown of test environment
Consistent assertion patterns

vuejs/vue-cli

packages/@vue/cli-plugin-pwa/__tests__/pwaGenerator.spec.js

            
const generateWithPlugin = require('@vue/cli-test-utils/generateWithPlugin')

test('inject import statement for service worker', async () => {
  const { files } = await generateWithPlugin([
    {
      id: 'core',
      apply: require('@vue/cli-service/generator'),
      options: {}
    },
    {
      id: 'pwa',
      apply: require('../generator'),
      options: {}
    }
  ])

  expect(files['src/main.js']).toMatch(`import './registerServiceWorker'`)
})

test('inject import statement for service worker (with TS)', async () => {
  const { files } = await generateWithPlugin([
    {
      id: 'core',
      apply: require('@vue/cli-service/generator'),
      options: {}
    },
    {
      id: 'typescript',
      apply: require('@vue/cli-plugin-typescript/generator'),
      options: {}
    },
    {
      id: 'pwa',
      apply: require('../generator'),
      options: {}
    }
  ])

  expect(files['src/main.ts']).toMatch(`import './registerServiceWorker'`)
})