jlukic
11 years ago
33 changed files with 516 additions and 178 deletions
Split View
Diff Options
-
26Gruntfile.js
-
3karma.conf.js
-
1package.json
-
1src/modules/accordion.js
-
7src/modules/dimmer.js
-
35src/modules/dropdown.js
-
5src/modules/popup.js
-
15src/modules/rating.js
-
3src/modules/tab.js
-
2src/modules/transition.js
-
8src/modules/video.js
-
24test/fixtures/accordion.html
-
46test/fixtures/checkbox.html
-
9test/fixtures/dropdown.html
-
8test/fixtures/popup.html
-
7test/fixtures/rating.html
-
7test/fixtures/shape.html
-
25test/fixtures/sidebar.html
-
8test/fixtures/tab.html
-
1test/fixtures/transition.html
-
5test/fixtures/video.html
-
10test/modules/accordion.spec.js
-
8test/modules/checkbox.spec.js
-
8test/modules/dropdown.spec.js
-
150test/modules/modal.spec.js
-
215test/modules/module.spec.js
-
8test/modules/popup.spec.js
-
8test/modules/search.spec.js
-
8test/modules/shape.spec.js
-
8test/modules/sidebar.spec.js
-
9test/modules/tab.spec.js
-
8test/modules/transition.spec.js
-
8test/modules/video.spec.js
@ -0,0 +1,24 @@ |
|||
<div class="ui accordion"> |
|||
<div class="active title"> |
|||
<i class="dropdown icon"></i> |
|||
What is a dog? |
|||
</div> |
|||
<div class="active content"> |
|||
<p>A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p> |
|||
</div> |
|||
<div class="title"> |
|||
<i class="dropdown icon"></i> |
|||
What kinds of dogs are there? |
|||
</div> |
|||
<div class="content"> |
|||
<p>There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.</p> |
|||
</div> |
|||
<div class="title"> |
|||
<i class="dropdown icon"></i> |
|||
How do you acquire a dog? |
|||
</div> |
|||
<div class="content"> |
|||
<p>Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.</p> |
|||
<p>A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.</p> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,46 @@ |
|||
<div class="ui form"> |
|||
<div class="grouped inline fields"> |
|||
<div class="field"> |
|||
<div class="ui radio checkbox"> |
|||
<input type="radio" name="fruit" checked="checked" /> |
|||
<label>Apples</label> |
|||
</div> |
|||
</div> |
|||
<div class="field"> |
|||
<div class="ui radio checkbox"> |
|||
<input type="radio" name="fruit" /> |
|||
<label>Oranges</label> |
|||
</div> |
|||
</div> |
|||
<div class="field"> |
|||
<div class="ui radio checkbox"> |
|||
<input type="radio" name="fruit" /> |
|||
<label>Pears</label> |
|||
</div> |
|||
</div> |
|||
<div class="field"> |
|||
<div class="ui radio checkbox"> |
|||
<input type="radio" name="fruit" /> |
|||
<label>Grapefruit</label> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="field"> |
|||
<div class="ui checkbox"> |
|||
<input type="checkbox"> |
|||
<label>Poodle</label> |
|||
</div> |
|||
</div> |
|||
<div class="field"> |
|||
<div class="ui toggle checkbox"> |
|||
<input type="checkbox" name="pet" /> |
|||
<label>Allow other people to pet my dog</label> |
|||
</div> |
|||
</div> |
|||
<div class="field"> |
|||
<div class="ui slider checkbox"> |
|||
<input type="checkbox" name="pet" /> |
|||
<label>Allow other people to pet my dog</label> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,9 @@ |
|||
<div class="ui selection dropdown"> |
|||
<input type="hidden" name="gender"> |
|||
<i class="dropdown icon"></i> |
|||
<div class="default text">Gender</div> |
|||
<div class="menu"> |
|||
<div class="item" data-value="male">Male</div> |
|||
<div class="item" data-value="female">Female</div> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,8 @@ |
|||
<i class="circular heart icon link" data-content="Top Left" data-position="top left"></i> |
|||
<i class="circular heart icon link" data-content="Top Center" data-position="top center"></i> |
|||
<i class="circular heart icon link" data-content="Top Right" data-position="top right"></i> |
|||
<i class="circular heart icon link" data-content="Left Center" data-position="left center"></i> |
|||
<i class="circular heart icon link" data-content="Right Center" data-position="right center"></i> |
|||
<i class="circular heart icon link" data-content="Bottom Left" data-position="bottom left"></i> |
|||
<i class="circular heart icon link" data-content="Bottom Center" data-position="bottom center"></i> |
|||
<i class="circular heart icon link" data-content="Bottom Right" data-position="bottom right"></i> |
|||
@ -0,0 +1,7 @@ |
|||
<div class="ui star rating"> |
|||
<i class="icon"></i> |
|||
<i class="icon"></i> |
|||
<i class="icon"></i> |
|||
<i class="icon"></i> |
|||
<i class="icon"></i> |
|||
</div> |
|||
@ -0,0 +1,7 @@ |
|||
<div class="ui shape"> |
|||
<div class="sides"> |
|||
<div class="active side">This side is visible.</div> |
|||
<div class="side">This side is not visible.</div> |
|||
<div class="side">This side is not visible.</div> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,25 @@ |
|||
<div class="ui red vertical demo sidebar menu"> |
|||
<a class="item"> |
|||
<i class="home icon"></i> |
|||
Home |
|||
</a> |
|||
<a class="active item"> |
|||
<i class="heart icon"></i> |
|||
Current Section |
|||
</a> |
|||
<a class="item"> |
|||
<i class="facebook icon"></i> |
|||
Like us on Facebook |
|||
</a> |
|||
<div class="item"> |
|||
<b>More</b> |
|||
<div class="menu"> |
|||
<a class="item">About</a> |
|||
<a class="item">Contact Us</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="ui disabled teal toggle button"> |
|||
<i class="left arrow icon"></i> |
|||
Trigger Sidebar |
|||
</div> |
|||
@ -0,0 +1,8 @@ |
|||
<div class="ui menu"> |
|||
<a class="active item" data-tab="first">First</a> |
|||
<a class="item" data-tab="second">Second</a> |
|||
<a class="item" data-tab="third">Third</a> |
|||
</div> |
|||
<div class="ui active tab segment" data-tab="first">First</div> |
|||
<div class="ui tab segment" data-tab="second">Second</div> |
|||
<div class="ui tab segment" data-tab="third">Third</div> |
|||
@ -0,0 +1 @@ |
|||
<div class="ui image"></div> |
|||
@ -0,0 +1,5 @@ |
|||
<div class="ui video"> |
|||
<div class="play"></div> |
|||
<div class="placeholder"></div> |
|||
<div class="embed"></div> |
|||
</div> |
|||
@ -0,0 +1,10 @@ |
|||
describe("UI Accordion", function() { |
|||
|
|||
$.fn.dimmer.settings.debug = false; |
|||
|
|||
moduleTests({ |
|||
module : 'accordion', |
|||
element : '.ui.accordion' |
|||
}); |
|||
|
|||
}); |
|||
@ -0,0 +1,8 @@ |
|||
describe("UI Checkbox", function() { |
|||
|
|||
moduleTests({ |
|||
module : 'checkbox', |
|||
element : '.ui.checkbox' |
|||
}); |
|||
|
|||
}); |
|||
@ -0,0 +1,8 @@ |
|||
describe("UI Dropdown", function() { |
|||
|
|||
moduleTests({ |
|||
module : 'dropdown', |
|||
element : '.ui.dropdown' |
|||
}); |
|||
|
|||
}); |
|||
@ -1,152 +1,10 @@ |
|||
describe("UI Modal", function() { |
|||
var |
|||
module = 'modal', |
|||
testValue = 'Test', |
|||
name = module.charAt(0).toUpperCase() + module.slice(1), |
|||
fixtures = jasmine.getFixtures(), |
|||
|
|||
$module |
|||
; |
|||
|
|||
fixtures.fixturesPath = 'base/test/fixtures/'; |
|||
|
|||
beforeEach(function() { |
|||
// load fixtures
|
|||
fixtures.load(module + '.html'); |
|||
// disable debug
|
|||
$.fn[module].debug = false; |
|||
// module available in scope
|
|||
$module = $('.ui.'+ module); |
|||
}); |
|||
|
|||
afterEach(function() { |
|||
$('.ui.'+ module).remove(); |
|||
}); |
|||
|
|||
/******************************* |
|||
Module |
|||
*******************************/ |
|||
|
|||
/*------------------- |
|||
Instantiation |
|||
--------------------*/ |
|||
|
|||
it("should have an instance in metadata after init", function() { |
|||
$module[module](); |
|||
expect($module).toHaveData('module-' + module); |
|||
}); |
|||
|
|||
/*------------------- |
|||
Settings |
|||
--------------------*/ |
|||
describe('Settings', function() { |
|||
|
|||
it("should allow default settings to be changed", function() { |
|||
$.fn[module].settings.name = testValue; |
|||
$module[module](); |
|||
|
|||
var retrievedValue = $module[module]('setting', 'name'); |
|||
$.fn[module].settings.name = name; |
|||
|
|||
expect(retrievedValue).toBe(testValue); |
|||
}); |
|||
|
|||
it("should allow settings to be changed during init", function() { |
|||
$module[module]({ |
|||
name: testValue |
|||
}); |
|||
|
|||
var retrievedValue = $module[module]('setting', 'name'); |
|||
|
|||
expect(retrievedValue).toBe(testValue); |
|||
}); |
|||
|
|||
it("should allow settings to be changed during runtime", function() { |
|||
$module[module](); |
|||
|
|||
var retrievedValue = $module[module]('setting', 'name'); |
|||
|
|||
expect(retrievedValue).toBe(name); |
|||
}); |
|||
|
|||
}); |
|||
|
|||
/*------------------- |
|||
Groups |
|||
--------------------*/ |
|||
|
|||
describe('Group Contamination', function() { |
|||
|
|||
it("should create settings for all instances", function() { |
|||
$moduleClone = $module.clone().appendTo( $(sandbox() )); |
|||
$modules = $moduleClone.add($module); |
|||
|
|||
$modules[module]('setting', 'name', testValue); |
|||
|
|||
var retrievedValue = $module[module]('setting', 'name'); |
|||
var clonedSetting = $moduleClone[module]('setting', 'name'); |
|||
|
|||
expect(retrievedValue).toBe(testValue); |
|||
expect(clonedSetting).toBe(testValue); |
|||
|
|||
$modules[module]({ |
|||
'name': testValue |
|||
}); |
|||
|
|||
expect(retrievedValue).toBe(testValue); |
|||
expect(clonedSetting).toBe(testValue); |
|||
|
|||
}); |
|||
|
|||
it("should not change other elements settings when changing one element", function() { |
|||
$moduleClone = $module.clone().appendTo( $(sandbox() )); |
|||
$modules = $moduleClone.add($module); |
|||
|
|||
$modules[module](); |
|||
$module[module]('setting', 'name', testValue); |
|||
|
|||
var retrievedValue = $module[module]('setting', 'name'); |
|||
var clonedSetting = $moduleClone[module]('setting', 'name'); |
|||
|
|||
expect(retrievedValue).toBe(testValue); |
|||
expect(clonedSetting).toBe(name); |
|||
|
|||
}); |
|||
|
|||
it("should not change other elements when re-initalized", function() { |
|||
$moduleClone = $module.clone().appendTo( $(sandbox() )); |
|||
$modules = $moduleClone.add($module); |
|||
|
|||
$modules[module](); |
|||
$module[module]({ |
|||
'name': testValue |
|||
}); |
|||
|
|||
var retrievedValue = $module[module]('setting', 'name'); |
|||
var clonedSetting = $moduleClone[module]('setting', 'name'); |
|||
|
|||
expect(retrievedValue).toBe(testValue); |
|||
expect(clonedSetting).toBe(name); |
|||
|
|||
}); |
|||
|
|||
}); |
|||
|
|||
/*------------------- |
|||
Destroy |
|||
--------------------*/ |
|||
describe('Destroy', function() { |
|||
|
|||
it("destroy should remove all events from page", function() { |
|||
$module[module]('destroy'); |
|||
expect($.events().length).toBe(0); |
|||
}); |
|||
|
|||
it("destroy should remove instance metadata", function() { |
|||
$module[module]('destroy'); |
|||
expect( $module.data('module-'+ module) ).toBe(undefined); |
|||
}); |
|||
$.fn.dimmer.settings.debug = false; |
|||
|
|||
moduleTests({ |
|||
module : 'modal', |
|||
element : '.ui.modal' |
|||
}); |
|||
|
|||
}); |
|||
@ -0,0 +1,215 @@ |
|||
|
|||
function moduleTests(ui) { |
|||
var |
|||
module = ui.module, |
|||
element = ui.element, |
|||
singleton = ui.singleton, |
|||
name = $.fn[module].settings.name, |
|||
|
|||
testValue = 'Test', |
|||
fixtures = jasmine.getFixtures(), |
|||
|
|||
originalSettings, |
|||
$modules, |
|||
$oneModule, |
|||
$module, |
|||
$clone |
|||
; |
|||
|
|||
// set fixture path
|
|||
fixtures.fixturesPath = 'base/test/fixtures/'; |
|||
|
|||
// disable debug
|
|||
$.fn[module].settings.debug = false; |
|||
$.fn[module].settings.performance = false; |
|||
$.fn[module].settings.verbose = false; |
|||
|
|||
|
|||
beforeEach(function() { |
|||
// load fixtures
|
|||
fixtures.load(module + '.html'); |
|||
// save settings
|
|||
originalSettings = $.fn[module].settings; |
|||
|
|||
// module available in scope
|
|||
$module = $(element); |
|||
|
|||
// one module available in fixture
|
|||
if($module.size() == 1) { |
|||
$oneModule = $module; |
|||
$clone = $module.clone().appendTo( $(sandbox()) ); |
|||
$modules = $clone.add($module); |
|||
} |
|||
// multiple modules available in fixture
|
|||
else { |
|||
$modules = $(element); |
|||
$clone = $module.eq(1); |
|||
$oneModule = $modules.first(); |
|||
} |
|||
|
|||
}); |
|||
|
|||
afterEach(function() { |
|||
// restore settings
|
|||
$.fn[module].settings = originalSettings; |
|||
// remove element
|
|||
$(element).remove(); |
|||
}); |
|||
|
|||
/******************************* |
|||
Module |
|||
*******************************/ |
|||
|
|||
/*------------------- |
|||
Instantiation |
|||
--------------------*/ |
|||
describe('Module', function() { |
|||
|
|||
it("allows chaining when no settings returned", function() { |
|||
var $chain = $modules[module](); |
|||
expect($chain).toExist(); |
|||
expect($chain.size()).toBe($modules.size()); |
|||
}); |
|||
|
|||
it("returns a string when one setting returned", function() { |
|||
var result = $oneModule[module]('setting', 'name'); |
|||
expect(typeof result).toBe('string'); |
|||
}); |
|||
|
|||
it("returns an array when multiple settings returned", function() { |
|||
var result = $modules[module]('setting', 'name'); |
|||
expect( $.isArray(result) ).toBeTruthy(); |
|||
}); |
|||
|
|||
it("has an instance in metadata after init", function() { |
|||
$oneModule[module](); |
|||
expect($module).toHaveData('module-' + module); |
|||
}); |
|||
|
|||
}); |
|||
|
|||
/*------------------- |
|||
Settings |
|||
--------------------*/ |
|||
|
|||
describe('Settings', function() { |
|||
|
|||
it("clears settings on re-init", function() { |
|||
$oneModule[module]({ |
|||
name: testValue |
|||
}); |
|||
|
|||
var retrievedValue = $oneModule[module]('setting', 'name'); |
|||
expect(retrievedValue).toBe(testValue); |
|||
|
|||
// reinit
|
|||
$oneModule[module](); |
|||
retrievedValue = $oneModule[module]('setting', 'name'); |
|||
expect(retrievedValue).toBe(name); |
|||
}); |
|||
|
|||
it("allows default settings to be changed", function() { |
|||
$.fn[module].settings.name = testValue; |
|||
$oneModule[module](); |
|||
|
|||
var retrievedValue = $oneModule[module]('setting', 'name'); |
|||
$.fn[module].settings.name = name; |
|||
|
|||
expect(retrievedValue).toBe(testValue); |
|||
}); |
|||
|
|||
it("allows settings to be changed during init", function() { |
|||
$oneModule[module]({ |
|||
name: testValue |
|||
}); |
|||
|
|||
var retrievedValue = $oneModule[module]('setting', 'name'); |
|||
|
|||
expect(retrievedValue).toBe(testValue); |
|||
}); |
|||
|
|||
it("allows settings to be changed during runtime", function() { |
|||
$oneModule[module](); |
|||
|
|||
var retrievedValue = $oneModule[module]('setting', 'name'); |
|||
|
|||
expect(retrievedValue).toBe(name); |
|||
}); |
|||
|
|||
}); |
|||
|
|||
/*------------------- |
|||
Groups |
|||
--------------------*/ |
|||
|
|||
if(!singleton) { |
|||
|
|||
describe('Group Contamination', function() { |
|||
|
|||
it("creates settings for all instances", function() { |
|||
$modules[module]('setting', 'name', testValue); |
|||
|
|||
var retrievedValue = $oneModule[module]('setting', 'name'); |
|||
var clonedSetting = $clone[module]('setting', 'name'); |
|||
|
|||
expect(retrievedValue).toBe(testValue); |
|||
expect(clonedSetting).toBe(testValue); |
|||
|
|||
$oneModule[module]({ |
|||
'name': testValue |
|||
}); |
|||
|
|||
expect(retrievedValue).toBe(testValue); |
|||
expect(clonedSetting).toBe(testValue); |
|||
|
|||
}); |
|||
|
|||
it("does not change other elements settings when changing one element", function() { |
|||
$modules[module](); |
|||
$oneModule[module]('setting', 'name', testValue); |
|||
|
|||
var retrievedValue = $oneModule[module]('setting', 'name'); |
|||
var clonedSetting = $clone[module]('setting', 'name'); |
|||
|
|||
expect(retrievedValue).toBe(testValue); |
|||
expect(clonedSetting).toBe(name); |
|||
|
|||
}); |
|||
|
|||
it("does not change other elements when re-initalized", function() { |
|||
$modules[module](); |
|||
|
|||
$oneModule[module]({ |
|||
'name': testValue |
|||
}); |
|||
|
|||
var retrievedValue = $oneModule[module]('setting', 'name'); |
|||
var clonedSetting = $clone[module]('setting', 'name'); |
|||
|
|||
expect(retrievedValue).toBe(testValue); |
|||
expect(clonedSetting).toBe(name); |
|||
|
|||
}); |
|||
|
|||
}); |
|||
|
|||
} |
|||
|
|||
/*------------------- |
|||
Destroy |
|||
--------------------*/ |
|||
describe('Destroy', function() { |
|||
|
|||
it("removes all events from page", function() { |
|||
$module[module]('destroy'); |
|||
expect($.events().length).toBe(0); |
|||
}); |
|||
|
|||
it("removes instance metadata", function() { |
|||
$module[module]('destroy'); |
|||
expect( $module.data('module-'+ module) ).toBe(undefined); |
|||
}); |
|||
|
|||
}); |
|||
|
|||
} |
|||
@ -0,0 +1,8 @@ |
|||
describe("UI Popup", function() { |
|||
|
|||
moduleTests({ |
|||
module : 'popup', |
|||
element : 'i.icon' |
|||
}); |
|||
|
|||
}); |
|||
@ -0,0 +1,8 @@ |
|||
xdescribe("UI Search", function() { |
|||
|
|||
moduleTests({ |
|||
module : 'search', |
|||
element : '.ui.search' |
|||
}); |
|||
|
|||
}); |
|||
@ -0,0 +1,8 @@ |
|||
describe("UI Shape", function() { |
|||
|
|||
moduleTests({ |
|||
module : 'shape', |
|||
element : '.ui.shape' |
|||
}); |
|||
|
|||
}); |
|||
@ -0,0 +1,8 @@ |
|||
describe("UI Rating", function() { |
|||
|
|||
moduleTests({ |
|||
module : 'rating', |
|||
element : '.ui.rating' |
|||
}); |
|||
|
|||
}); |
|||
@ -0,0 +1,9 @@ |
|||
xdescribe("UI Tab", function() { |
|||
|
|||
moduleTests({ |
|||
module : 'tab', |
|||
element : '.ui.menu .item', |
|||
singleton : true |
|||
}); |
|||
|
|||
}); |
|||
@ -0,0 +1,8 @@ |
|||
xdescribe("UI Transition", function() { |
|||
|
|||
moduleTests({ |
|||
module : 'transition', |
|||
element : '.ui.image' |
|||
}); |
|||
|
|||
}); |
|||
@ -0,0 +1,8 @@ |
|||
describe("UI Video", function() { |
|||
|
|||
moduleTests({ |
|||
module : 'video', |
|||
element : '.ui.video' |
|||
}); |
|||
|
|||
}); |
|||
Write
Preview
Loading…
Cancel
Save