jasmine-jquery

/* To run this, you'd typically include jasmine-jquery.js in an HTML test runner after jQuery and Jasmine are loaded globally. Example HTML setup: <script src="path/to/jquery.js"></script> <script src="path/to/jasmine.js"></script> <script src="path/to/jasmine-html.js"></script> <script src="path/to/boot.js"></script> <script src="path/to/jasmine-jquery.js"></script> <script src="path/to/your-spec.js"></script> And a fixture file: spec/javascripts/fixtures/myFixture.html --- <div id="test-container" class="active data-attr" data-info="example"> <input type="checkbox" id="myCheckbox" checked /> <button id="myButton">Click Me</button> <p>Some important text here.</p> </div> */ describe("Jasmine-jQuery Matchers and Fixtures Integration", function() { beforeEach(function() { // Configure the path to your fixtures (e.g., 'spec/javascripts/fixtures/') // jasmine.getFixtures().fixturesPath = 'base/spec/javascripts/fixtures'; // Load a fixture from a file into the DOM loadFixtures('myFixture.html'); }); afterEach(function() { // jasmine-jquery automatically removes fixtures after each spec, // but clearFixtures() can be called explicitly if needed. // clearFixtures(); }); it("should load the fixture and allow attribute checks", function() { const $container = $('#test-container'); expect($container).toExist(); expect($container).toHaveAttr('class', 'active data-attr'); expect($container).toHaveAttr('data-info', 'example'); expect($container).not.toHaveAttr('id', 'wrong-id'); }); it("should correctly check the state of a checkbox", function() { const $checkbox = $('#myCheckbox'); expect($checkbox).toBeChecked(); $checkbox.prop('checked', false); expect($checkbox).not.toBeChecked(); }); it("should verify element visibility and text content", function() { const $button = $('#myButton'); expect($button).toBeVisible(); $button.hide(); expect($button).toBeHidden(); const $paragraph = $('#test-container p'); expect($paragraph).toContainText('important text'); expect($paragraph).not.toContainText('unrelated'); }); it("should verify contained elements using selectors", function() { const $container = $('#test-container'); expect($container).toContainElement('input#myCheckbox'); expect($container).toContainElement('button'); expect($container).not.toContainElement('span'); }); });