search

gjtorikian / html-proofer

Test your rendered HTML files to make sure they're accurate.
MIT License
1.57k stars 199 forks source link

swap_attributes not working #846

Closed andreadellacorte closed 2 months ago

andreadellacorte commented 2 months ago

Hi, I am running html proofer as follows

%w[
    ./test.html
  ].each do |file|
    # See  https://github.com/gjtorikian/html-proofer?tab=readme-ov-file#configuration
    HTMLProofer.check_file(
      file,
      {
        allow_missing_href: true,
        disable_external: true,
        checks: ["Links", "Images"],
        ignore_urls: [%r{/docs}, %r{/customer-portal}, %r{/resume-submission}],
        root_dir: "_site",
        swap_attributes: { "img": ["data-src", "src"] }
      }
    ).run
  end

(note: swap_attributes: { "img": [["data-src", "src"]] } doesn't work either))

on this file

<html>
  <body>
    <p>Blah blah blah. <img alt="An http image" data-src="gpl.png" /></p>
  </body>
</html>

and getting

For the Images check, the following failures were found:

* At ./test.html:3:

  image has no src or srcset attribute

Is my syntax wrong? I copied the command and test from the repo itself.

riccardoporreca commented 2 months ago

@andreadellacorte, according to the README, the correct syntax should be (note the double [[...]])

swap_attributes: { "img": [["data-src", "src"]] }
andreadellacorte commented 2 months ago

thanks @riccardoporreca

apologies that was me testing with 1 [] to see if it made a difference (it doesn't)

I have just now put back the [[...]] and

%w[
    ./test.html
  ].each do |file|
    # See  https://github.com/gjtorikian/html-proofer?tab=readme-ov-file#configuration
    HTMLProofer.check_file(
      file,
      {
        allow_missing_href: true,
        disable_external: true,
        checks: ["Links", "Images"],
        ignore_urls: [%r{/docs}, %r{/customer-portal}, %r{/resume-submission}],
        root_dir: "_site",
        swap_attributes: { "img": [["data-src", "src"]] }
      }
    ).run
  end

still fails with

For the Images check, the following failures were found:

* At ./test.html:3:

  image has no src or srcset attribute

HTML-Proofer found 1 failure!

on test.html

<html>
  <body>
    <p>Blah blah blah. <img alt="An http image" data-src="gpl.png" /></p>
  </body>
</html>
riccardoporreca commented 2 months ago

I see, the example in the README is not up-to-date. I did not realize your example is actually what is already covered and fully working as expected in the unit tests:

https://github.com/gjtorikian/html-proofer/blob/f6538b15c09b9a232d4c175fa0e438b6af0a2fea/spec/html-proofer/check/images_spec.rb#L247

which indicates the issue is with the wrong usage of "img": ... instead of the correct "img" => ....

The correct syntax makes sure the hash key is as string, not a symbol, which is what we want since the HTML tag name, used to lookup the swapped attributes, is also a string, like "img" in this case.

The README should be updated accordingly.