Foundation-sites: JavaScript Unit Tests

[gakimball]

For the next patch cycle, we're looking to make a big push on testing, particularly JavaScript unit tests and visual regression tests. You may have noticed that we've begun adding regression tests alongside bug fixes. These will help us catch issues with the framework sooner.

Along with that, we want to work our way towards a full test suite for the Foundation JavaScript. We have a testing guide written, along with a sample test suite to use as a reference.

We're looking for the community's help to put it all together! Here's a complete list of modules. If you're interested in tackling one, leave a comment here to reserve it.

• [ ] Core
• [ ] Components
  
  
  
  • [ ] Abide
  
  
  • [ ] Accordion (in progress by @colin-marshall)
  
  
  • [ ] Accordion Menu
  
  
  • [ ] Drilldown Menu
  
  
  • [ ] Dropdown
  
  
  • [ ] Dropdown Menu
  
  
  • [ ] Equalizer
  
  
  • [ ] Interchange
  
  
  • [ ] Magellan
  
  
  • [ ] Off-canvas
  
  
  • [ ] Responsive Menu (in progress by @viren140290)
  
  
  • [ ] Responsive Toggle
  
  
  • [ ] Reveal
  
  
  • [ ] Slider
  
  
  • [ ] Sticky
  
  
  • [ ] Tabs (in progress by @gakimball)
  
  
  • [x] Toggler
  
  
  • [ ] Tooltip
  
  
• [ ] Utilities
  
  
  
  • [ ] Box
  
  
  • [ ] Keyboard
  
  
  • [ ] Media Query
  
  
  • [ ] Motion
  
  
  • [ ] Nest
  
  
  • [ ] Timer
  
  
  • [ ] Touch
  
  
  • [ ] Triggers
  
  

[colin-marshall]

@gakimball I'm working on the tests for the Accordion and I noticed that template literals, specifically multiline strings, would really come in handy for the tests. Example:

$html = $(`
    <ul class="accordion" data-accordion>
      <li class="accordion-item is-active" data-accordion-item>
        <a href="#" class="accordion-title">Accordion 1</a>
        <div class="accordion-content" data-tab-content>
          Accordion 1 Content
        </div>
      </li>
      <li class="accordion-item is-active" data-accordion-item>
        <a href="#" class="accordion-title">Accordion 2</a>
        <div class="accordion-content" data-tab-content>
          Accordion 2 Content
        </div>
      </li>
      <li class="accordion-item is-active" data-accordion-item>
        <a href="#" class="accordion-title">Accordion 3</a>
        <div class="accordion-content" data-tab-content>
          Accordion 3 Content
        </div>
      </li>
    </ul>
  `).appendTo('body');

Here's a gist with an example of how to make ES6 work with tests:
https://gist.github.com/nmabhinandan/6c63463d9f0987020c6f

Do you think this would be worth doing to make writing the tests easier?

[gakimball]

@colin-marshall Agreed, I ran into the same thing.

So keep in mind that we'll be running these tests in actual browsers as well, not just in headless WebKit. In which case, we'd need to transpile the test code in the browser to make it work. Looks like babel-standalone might do the trick? And we only need it to transform template strings, really, so hopefully there wouldn't be a huge amount of overhead.

[gakimball]

Another possibility is to try and Browserify the multiline Node module.

[colin-marshall]

@gakimball that gist I linked to uses Babel to transpile prior to running the tests. We're already using Babel so couldn't we just transpile and concatenate the tests into one JS file and use that file in the in-browser tests?

[gakimball]

@colin-marshall Ah yeah! If you want to set that up, go for it. :)

[viren140290]

If you allow me, I would be interested in testing responseiveMenu.js

[colin-marshall]

@viren140290 we would love for you to help out with our testing. I marked you down for the responsive menu on the checklist. Thanks!

[dragthor]

I can start tackling Utilities.

[DanielRuf]

I can start tackling Utilities.

Let us know if you need any assistance.

What is the current state of https://github.com/zurb/foundation-sites/issues/8311#issue-137716904 and who could help us with more unit test?

[99M8]

Hello! Would it be fine if I start working on the Dropdown Menu testing?

[DanielRuf]

Hi @99M8, this would be great and very helpful.

You can check the current unit tests in the develop branch to see what is needed and how they are structured so you can create new ones (which apply their codestyle).

[ncoden]

This issue is outdated. All components have unit tests now I think.

[DanielRuf]

Closing because of

This issue is outdated. All components have unit tests now I think.