AutoDOM

AutoDOM is an automatic DOM fixture CLI util. If you're building a product that depends on third-party markup, such as a browser extension that looks for selectors and injects itself into a page. You can use AutoDOM to download a pages HTML which can be used as test fixtures.

AutoDOM keeps a lockfile to determine the last time a fixture was downloaded see updatePolicy below. That way if the DOM changes and your selectors will miss, you're aware just before you publish.

Having a cron job can do the same thing and you can notify yourself. But that's not the purpose of this library. Your fixtures can be used to check if your code will mount against a realistic environment.

Why not just use something like Cypress or Selenium and do end-to-end testing?

Valid argument, and if you can get your e2e tests stable enough that you don't want to comment them out. Go for it! This might not be the library for you. You will get much, much more value from something like Cypress. For those edge cases where you need a little bit more predictability and stability. This could be for you.

This project is just testing the grounds to see if it adds value to a project I work on. Use with caution and respect of the third-party you're snapshotting.

Should I use this library?

1. Do you have e2e tests that work fine for you?
   • Yes - You don't need this library
   • No - This library may help you.

Setup

Create a autodom.config.js at your project root. See below for options.

Update your package.json to include a pretest script. For example:

{
  "scripts": {
    "test": "jest",
    "pretest": "autodom"
  }
}

Use your fixture

import { homepage } from './__domfixtures/'
describe('Homepage tests', () => {
  it('should have mount point', () => {
    document.body.innerHTML = homepage()
    const match = document.querySelector('#sidebar')
    expect(match.length).toEqual(1)
  })
})

autodom.config.js

const path = require('path')
module.exports = {
  updatePolicy: iso => addDays(iso, 7) > new Date(), // Only update weekly
  outputDirectory: path.resolve('./tests/__domfixtures__'),
  resourceFetchType: 'puppeteer',
  urls: [{ url: 'https://www.example.com', name: 'homepage' }],
  outputJavascript: true,
  removeScripts: true,
}

If you look for multiple DOM nodes for your entry points then this function may come in handy for your tests:

/**
 * Test if DOM has one of the given selectors
 *
 * @export
 * @param {*} selectors
 * @returns
 */
export function hasSelectorMatch(selectors) {
  return selectors.some(
    selector => document.querySelectorAll(selector).length > 0
  )
}

Configuration Options

| Option | Description | Default value | | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- | | urls | The collection of urls to download the markup from. Must match the following shape. {url: string, name: string} | [] | | updatePolicy | How often should be new fixtures be downloaded? You can use the following options: daily or a function with the following signature: (dateIsoString:string) => Boolean | daily | | outputJavascript | If outputJavascript is true then the markup is placed in a javascript file. Useful when you don't want to use a HTML loader in Webpack for example. If false a HTML file is created instead. | true | | outputDirectory | The absolute path to output the fixtures | path.join(process.cwd(), './__domfixtures__') | | resourceFetchType | fetch or puppeteer | fetch | | removeScripts | Do you want to remove script tags from the downloaded markup | true |