Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
GPII-1584: in midst of refactoring for svgDrawingArea grade, d3ViewCo…
…mponent + svgDrawingArea unit tests passing
- Loading branch information
Showing
6 changed files
with
200 additions
and
111 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,115 @@ | ||
| /* | ||
| Copyright 2016 OCAD University | ||
| Licensed under the Educational Community License (ECL), Version 2.0 or the New | ||
| BSD license. You may not use this file except in compliance with one these | ||
| Licenses. | ||
| You may obtain a copy of the ECL 2.0 License and BSD License at | ||
| https://raw.githubusercontent.com/fluid-project/chartAuthoring/master/LICENSE.txt | ||
| */ | ||
|
|
||
| (function ($, fluid) { | ||
|
|
||
| "use strict"; | ||
|
|
||
| // The D3 view component that is able to: | ||
| // 1. Convert jQuery DOM elements to D3 elements; | ||
| // 2. Attach D3 DOM event listeners; | ||
| // 3. Synthesize that.options.styles and that.options.selectors to combine elements with the same key into that.classes | ||
| // 4. Create a basic SVG drawing area for use by implementing grades that actually | ||
| // draw charts | ||
|
|
||
| fluid.defaults("floe.svgDrawingArea", { | ||
| gradeNames: ["floe.d3ViewComponent", "autoInit"], | ||
| members: { | ||
| classes: { | ||
| expander: { | ||
| funcName: "floe.d3ViewComponent.synthesizeClasses", | ||
| args: ["{that}.options.styles", "{that}.options.selectors"] | ||
| } | ||
| } | ||
| }, | ||
| model: { | ||
| svgTitle: "An SVG", | ||
| svgDescription: "An SVG image" | ||
| }, | ||
| // Options controlling the behaviour of the base SVG drawing area | ||
| svgOptions: { | ||
| width: 500, | ||
| height: 500 | ||
| }, | ||
| selectors: { | ||
| title: ".floec-ca-svgDrawingArea-title", | ||
| description: ".floec-ca-svgDrawingArea-description", | ||
| svg: ".floec-ca-svgDrawingArea-svg" | ||
| }, | ||
| invokers: { | ||
| createBaseSVGDrawingArea: { | ||
| funcName: "floe.svgDrawingArea.createBaseSVGDrawingArea", | ||
| args: ["{that}"] | ||
| } | ||
|
|
||
| } | ||
| }); | ||
|
|
||
| // Returns a properly formatted viewBox attribute that helps in making | ||
| // SVG elements scalable | ||
| // https://sarasoueidan.com/blog/svg-coordinate-systems/ has a lengthy | ||
| // explanation | ||
|
|
||
| floe.svgDrawingArea.getViewBoxConfiguration = function (x, y, width, height) { | ||
| return x + "," + y + "," + width + "," + height; | ||
| }; | ||
|
|
||
| // Given width, height and class, creates an initial SVG to draw in, | ||
| // and appends tags and attributes for alternative representation | ||
| floe.svgDrawingArea.createBaseSVGDrawingArea = function (that) { | ||
| var container = that.container, | ||
| width = that.options.svgOptions.width, | ||
| height = that.options.svgOptions.height, | ||
| titleClass = that.classes.title, | ||
| descriptionClass = that.classes.description, | ||
| svgClass = that.classes.svg; | ||
|
|
||
| that.svg = that.jQueryToD3(container) | ||
| .append("svg") | ||
| .attr({ | ||
| "width": width, | ||
| "height": height, | ||
| "class": svgClass, | ||
| "viewBox": floe.svgDrawingArea.getViewBoxConfiguration(0, 0, width, height), | ||
| // Set aria role to image - this causes the chart to appear as a | ||
| // static image to AT rather than as a number of separate | ||
| // images | ||
| "role": "img" | ||
| }); | ||
|
|
||
| that.svg | ||
| .append("title") | ||
| .attr({ | ||
| "class": titleClass | ||
| }) | ||
| .text(that.model.svgTitle); | ||
|
|
||
| // Allocate ID for the title element | ||
| var svgTitleId = fluid.allocateSimpleId(that.locate("title")); | ||
|
|
||
| that.svg | ||
| .append("desc") | ||
| .attr({ | ||
| "class": descriptionClass | ||
| }) | ||
| .text(that.model.svgDescription); | ||
|
|
||
| // Allocate ID for the desc element | ||
| var svgDescId = fluid.allocateSimpleId(that.locate("description")); | ||
|
|
||
| // Now that they've been created and have IDs, explicitly associate SVG | ||
| // title & desc via aria-labelledby | ||
| that.svg.attr({ | ||
| "aria-labelledby": svgTitleId + " " + svgDescId | ||
| }); | ||
| }; | ||
|
|
||
| })(jQuery, fluid); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | ||
| <title>SVG Drawing Area Component Tests</title> | ||
|
|
||
| <link rel="stylesheet" media="screen" href="../lib/infusion/lib/qunit/css/qunit.css" /> | ||
|
|
||
| <script src="../lib/infusion/lib/qunit/js/qunit.js"></script> | ||
| <script src="../../src/lib/infusion/infusion-custom.js"></script> | ||
| <script src="../../src/lib/ext/d3/d3.js"></script> | ||
| <script src="../lib/infusion/test-core/jqUnit/js/jqUnit.js"></script> | ||
| <script src="../lib/infusion/test-core/jqUnit/js/jqUnit-browser.js"></script> | ||
| <script src="../lib/infusion/test-core/utils/js/IoCTestUtils.js"></script> | ||
|
|
||
| <script src="../../src/js/d3Utils.js"></script> | ||
| <script src="../../src/js/d3ViewComponent.js"></script> | ||
| <script src="../../src/js/svgDrawingArea.js"></script> | ||
| <script src="../js/svgDrawingAreaTests.js"></script> | ||
| </head> | ||
|
|
||
| <body id="body"> | ||
| <h1 id="qunit-header">SVG Drawing Area Component Tests</h1> | ||
| <h2 id="qunit-banner"></h2> | ||
| <div id="qunit-testrunner-toolbar"></div> | ||
| <h2 id="qunit-userAgent"></h2> | ||
| <ol id="qunit-tests"></ol> | ||
|
|
||
| <!-- Test HTML --> | ||
| <h2>floec-svgDrawingArea-baseSVG</h2> | ||
| <div class="floec-svgDrawingArea-baseSVG"></div> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| /* | ||
| Copyright 2016 OCAD University | ||
| Licensed under the Educational Community License (ECL), Version 2.0 or the New | ||
| BSD license. You may not use this file except in compliance with one these | ||
| Licenses. | ||
| You may obtain a copy of the ECL 2.0 License and BSD License at | ||
| https://raw.githubusercontent.com/fluid-project/chartAuthoring/master/LICENSE.txt | ||
| */ | ||
|
|
||
| (function ($, fluid) { | ||
|
|
||
| "use strict"; | ||
|
|
||
| fluid.registerNamespace("floe.tests"); | ||
|
|
||
| jqUnit.test("Test createBaseSVGDrawingArea function", function () { | ||
| jqUnit.expect(5); | ||
|
|
||
| var that = floe.svgDrawingArea(".floec-svgDrawingArea-baseSVG"); | ||
|
|
||
| that.createBaseSVGDrawingArea(); | ||
|
|
||
| var svg = that.locate("svg"), | ||
| svgTitleId = that.locate("title").attr("id"), | ||
| svgDescId = that.locate("description").attr("id"), | ||
| svgAriaLabelledByAttr = svg.attr("aria-labelledby"); | ||
|
|
||
| jqUnit.assertEquals("The width is set correctly on the SVG", that.options.svgOptions.width, Number(svg.attr("width"))); | ||
| jqUnit.assertEquals("The height is set correctly on the SVG", that.options.svgOptions.height, Number(svg.attr("height"))); | ||
|
|
||
| jqUnit.assertEquals("The SVG's title has been created", that.model.svgTitle, that.locate("title").text()); | ||
| jqUnit.assertEquals("The SVG's description has been created", that.model.svgDescription, that.locate("description").text()); | ||
| jqUnit.assertDeepEq("The SVG's title and description are connected through the aria-labelledby attribute of the SVG", svgAriaLabelledByAttr, svgTitleId + " " + svgDescId); | ||
| }); | ||
|
|
||
| jqUnit.test("Test getViewBoxConfiguration function", function () { | ||
| jqUnit.expect(1); | ||
|
|
||
| var expectedViewBoxConfig = "0,0,300,500"; | ||
|
|
||
| var getViewBoxConfigurationOutput = floe.svgDrawingArea.getViewBoxConfiguration(0, 0, 300, 500); | ||
|
|
||
| jqUnit.assertEquals("function output matches expected format", expectedViewBoxConfig, getViewBoxConfigurationOutput); | ||
| }); | ||
|
|
||
| })(jQuery, fluid); |