BVB Source Codes

web-design-standards Show accordion.spec.js Source code

Return Download web-design-standards: download accordion.spec.js Source code - Download web-design-standards Source code - Type:.js
  1. var should = require('should');
  2. var template = require('./template.js');
  3. var $ = require('jquery');
  4. var Accordion = require('../../../src/js/components/accordion.js');
  5.  
  6. // `aria` prefixed attributes
  7. var EXPANDED = 'aria-expanded';
  8. var CONTROLS = 'aria-controls';
  9. var HIDDEN   = 'aria-hidden';
  10.  
  11. describe('Accordion component', function () {
  12.   var $el;
  13.   var $button, button;
  14.   var $content;
  15.   var accordion;
  16.  
  17.   beforeEach(function () {
  18.     var $component = $(template);
  19.  
  20.     $('body').append($component);
  21.  
  22.     accordion = new Accordion($component.get(0));
  23.  
  24.     $el = $(accordion.root);
  25.     $button = $el.find('button');
  26.     button = $button.get(0);
  27.     $content = $el.find('#' + $button.attr(CONTROLS));
  28.   });
  29.  
  30.   afterEach(function () {
  31.     document.body.textContent = '';
  32.   });
  33.  
  34.   it('exposes its underlying html element', function () {
  35.     accordion.root.should.not.be.undefined();
  36.   });
  37.  
  38.   describe('DOM state', function () {
  39.     it('has an "aria-expanded" attribute', function () {
  40.       $button.attr(EXPANDED).should.not.be.undefined();
  41.     });
  42.  
  43.     it('has an "aria-controls" attribute', function () {
  44.       $button.attr(CONTROLS).should.not.be.undefined();
  45.     });
  46.  
  47.     describe('when show is triggered', function () {
  48.       beforeEach(function () {
  49.         accordion.show(button);
  50.       });
  51.  
  52.       afterEach(function () {
  53.         accordion.hide(button);
  54.       });
  55.  
  56.       it('toggles "aria-expanded" to true', function () {
  57.         $button.attr(EXPANDED).should.equal('true');
  58.       });
  59.  
  60.       it('toggles "aria-hidden" to false', function () {
  61.         $content.attr(HIDDEN).should.equal('false');
  62.       });
  63.     });
  64.  
  65.     describe('when hide is triggered', function () {
  66.       beforeEach(function () {
  67.         accordion.show(button);
  68.         accordion.hide(button);
  69.       });
  70.  
  71.       it('toggles "aria-expanded" to false', function () {
  72.         $button.attr(EXPANDED).should.equal('false');
  73.       });
  74.  
  75.       it('toggles "aria-hidden" to true', function () {
  76.         $content.attr(HIDDEN).should.equal('true');
  77.       });
  78.     });
  79.   });
  80. });
  81.  
  82.  
downloadaccordion.spec.js Source code - Download web-design-standards Source code
Related Source Codes/Software:
KineticJS - KineticJS is an HTML5 Canvas JavaScript framework ... 2017-01-07
yui3 - A library for building richly interactive web appl... 2017-01-07
TextBlob - Simple, Pythonic, text processing--Sentiment analy... 2017-01-07
monaco-editor - A browser based code editor 2017-01-07
grumpy - Grumpy is a Python to Go source code transcompiler... 2017-01-07
Knuff - The debug application for Apple Push Notification ... 2017-01-07
RoundedImageView - A fast ImageView that supports rounded corners, ov... 2017-01-07
flowchart.js - Draws simple SVG flow chart diagrams from textual ... 2017-01-08
TextFieldEffects - Custom UITextFields effects inspired by Codrops, b... 2017-01-08
glide - Package Management for Golang h... 2017-01-08
react-templates - Light weight templates for react ... 2017-04-28
afterglow-theme - A minimal dark Theme for Sublime Text 2 and 3 2017-04-28
jwt-go - Golang implementation of JSON Web Tokens (JWT) 2017-04-28
DeerResume - Tool MarkDown online resume, online preview, edit,... 2017-04-28
mailgen - A Node.js package that generates clean, responsive... 2017-04-28
desk - A lightweight workspace manager for the shell 2017-04-28
Glimpse - The open source diagnostics platform for the web ... 2017-04-28
xonsh - Python-powered, cross-platform, Unix-gazing shell ... 2017-04-28
react-monocle - A developer tool to visualize a React application'... 2017-04-28

 Back to top