How best to snapshot-test HTML snippets?

[inklesspen]

I'm writing tests for a not-quite-Markdown parser. It parses to a node tree, which I can test using debug serialization, and the node tree in turn can be rendered to strings containing HTML.

I'm unsure how best to snapshot-test those HTML strings. If the order of classes on an element changes, the browser won't actually care, right? But I don't think there's any good quality HTML parser that produces a serializable DOM tree right now…

Does anyone know of a good approach for this?

[Dietr1ch]

I'm also looking to test file-to-file transformations and would like the tooling to not impose a custom serialisation format. This way regular tools would still work with the outputs.

I'd like my test data to look something like,

$CRATE_ROOT
└── data
    └── test_fixtures
        ├── inputs
        │   └── simple_test.org                        # Test data
        └── outputs
            ├── simple_test.org.html              # Output from processing ../inputs/simple_test.org
            └── simple_test.org.html.snap   # Has extra metadata in RON/JSON format.

For instance, if I'm targeting HTML outputs I'd like the output files to pass validation with tidy data/outputs/*.html, or maybe I'm working with images and would like to be able to open the files (I think this is already possible with #610, but seems it could be simpler)

---

Before just dropping the +1 I gave it a try and got pretty much there with,

	#[test]
	fn simple_insta() {
		let path = Path::new("data/test_fixtures/simple_doc.org");

		let contents = std::fs::read_to_string(path).unwrap();

		let doc = MyDoc::new_from_string(&contents).unwrap();
		let html = doc.render_html().unwrap();

		let golden_path = path.with_extension("html");
		let golden_path = String::from(golden_path.to_str().unwrap());

		insta::assert_binary_snapshot!(&golden_path, html.as_bytes().to_vec());
	}

I don't like the outputs living in src/snapshots/, but I'm sure I can move that around.

[Dietr1ch]

Just to document. I ended up moving the test data from the default :/src/snapshots into :/data/fixtures/ and used globbing to have a single test render all my .org=>.html transformations.

	#[gtest]
	fn render() {
		let cwd = std::env::current_dir().unwrap();
		let snapshot_dir = cwd.join("data/fixtures/");

		# NOTE: The 3-parameter `glob` macro allows searching from the $CRATE_ROOT (instead of `:/src/`)
		insta::glob!("..", "data/fixtures/*.org", |path| {
			# NOTE: This is needed to keep paths relative to the $CRATE_ROOT, otherwise absolute paths show up in generated files.
			let path = path.strip_prefix(&cwd).unwrap();

			let my_doc = MyDoc::from(path);

			let out = my_doc.render_html().unwrap();

			let output_path = path.with_extension("html");
			let output_path = String::from(output_path.to_str().unwrap());

			let mut settings = insta::Settings::clone_current();
			settings.set_input_file(path);
			settings.set_snapshot_path(&snapshot_dir);
			settings.bind(|| {
				insta::assert_binary_snapshot!(&output_path, out.as_bytes().to_vec());
			});
		});
	}

I'm still not happy about cargo insta review showing metadata diffs instead of text diffs on the outputs.

To deal with that I'm using this fish script,

(./scripts/cargo-insta-diff)

#!/usr/bin/env fish

cargo insta test

for base in data/fixtures/*.snap.html
    set -l new (echo $base | sed 's!.snap.html!.snap.new.html!')

    if test -e $new
        difft $base $new
    end
end

Note that it hardcodes the non-standard data/fixtures/ path and the fact that I'm dealing with .html files as the output.