How to write automated tests for the <noscript> tag?

Question

I'm building a webapp which falls back on a <noscript> tag if Javascript is disabled. I'd like to validate that that tag shows, but I'm unsure how to do that with any of the frameworks I have, or any framework in general.

The app in question by default shows the following when Javascript is disabled:

 <div>
  <noscript>
    <h1>Javascript Disabled</h1>
    Use this page to show content when Javascript has been disabled
  </noscript>
 </div>

The app replaces the above with the following when the script is loaded:

 <div>
   Hello World
 </div>

Right now for tests I'm using NightmareJS and Testem with jasmine. I don't have to be using those, but I'd like to still use Javascript if possible.

I'm completely stumped here and have no idea where I would even start - all the StackOverflow questions seem to be about how to USE <noscript>, and not validating it in an end-to-end or unit test (in an automated manner).

Answer 1

For those using Nightmare JS there is an option when creating an instance of nightmare, however some of the functions seem to fail to run (such as evaluate, or exists). In my case, I saved the page as HTML, and then verified that the HTML existed. It is also possible to save a screenshot, or pdf, to also verify the correct output.

const nightmare = require('nightmare')
const fs = require('fs')

const browser = nightmare({
  webPreferences: {
    javascript: false
  }
})

describe('Page with Javascript Off', () => {
  beforeAll((done) => {
    browser.goto('http://localhost:8080')
      .html('./tests/no-js-result.html', 'HTMLOnly')
      .then(() => done())
  })
  it('should show page when JS is disabled', (done) => {
    fs.readFile('./tests/no-js-result.html', 'utf8', function(err, html){
      if (err) fail('Could not read no-js-result.html')
      expect(html).toContain('<h1>Javascript Disabled</h1>')
      done()
    })
  })
})