queryselectorAll used in ember - 3.14


#1

i have no experience with web development , but recently i had started develop my website using emberJs framework . Now the issue is that queryselectionAll generate an error when i write this code:

// [list-scalatutorials-testJs]
test('List of Programming Tutorials', async function(assert){
    await visit('/');
    assert.equal(this.element.querySelectionAll('.listing').length, 'Tutorials Display');
  }); 

it works but results are not display …

Error received 
failed@ 284 ms
Expected: 	
"Display listing"
Result: 	
36
Diff: 	
"Display listing"36
Source: 	
    at Object.<anonymous> (http://localhost:7357/assets/tests.js:14:14)

Template:

	{{#each model as |tutorial|}}
		<article class = "listing">
			<h3>{{tutorial.no}}</h3>
			<div class = "topic name">
				<span>Name:</span>{{tutorial.name}}
			</div>
		</article>
	{{/each}}	

Kindly Help me


#2

The issue you are seeing is due to this line. I see a few issues here:

  • I believe that you must be using this.element.querySelectorAll as I am pretty sure that this.element.querySelectionAll is not a thing.
  • element.querySelectorAll (see online docs here) returns a NodeList which you then call .length on. This will return the total number of elements found that match the selector.
  • assert.equal accepts three arguments (see its docs here):
    • the actual value
    • the expected value
    • optionally a message to associate with the assertion

tldr; you are comparing a number (the count of elements matching your selectors) to the string Tutorials Display.