Unit testing Angular SVG to retrieve the SVGLengthList

Hello everybody! I am in need of some assistance regarding SVG. I am currently working on writing unit tests and I need to add an object with the type SVGLengthList to a method. I have gone through the documentation provided by W3, however, I am unsure of how to obtain this object. I have attempted operations within the DOM where there are 3 svg elements present, but so far I can only manage to get an object of type SVGLength.

var $document = $injector.get("$document");
svgParent = $document.find('svg')[0];
svgLength = $document[1].createSVGLength();

Here is a snippet of my DOM:

 var virtualDOM = [
        '<html>',
            '<body>',
                '<svg>',
                    ic_dialog_info,
                    ic_edit,
                '</svg>',
                ic_down,
            '</body>',
        '</html>'
    ].join("");

In this code, ic_dialog_info, ic_edit, ic_down represent svg icons.

Answer №1

I managed to find a solution on how to create an SVGLengthList. I created an element called tspan with the specified namespace "http://www.w3.org/2000/svg". Then, I utilized the property 'x', where 'x' represents SVGAnimatedLengthList, and accessed baseVal. It's as simple as that :)

svgLengthList = document.createElementNS('http://www.w3.org/2000/svg', 'tspan').x.baseVal; 

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Alert: Zone.js has identified that the ZoneAwarePromise '(window|global).Promise' has been replaced with polyfills. Kindly address this issue

Recently, I updated my Angular application from version 8 to 9. After updating the packages and successfully compiling the application, I encountered an error message in the Chrome browser console: Error: Zone.js has detected that ZoneAwarePromise `(wind ...

How can I detect breaks in intervals?

Consider the following ranges as examples: const ranges = [ [ 0, 10, ], [ 20, 30, ], [ 40, 50, ], ]; In this scenario, I am looking to identify the missing ranges between two given values. For instance, if the input ran ...

Is there a way to apply CSS to an image so that it appears to be resting on a surface like a 3D object

I need to create a 3D floor with cartoons placed on top. The floor has a grid where each cartoon is positioned. I want to maintain the same axis for both the floor and grid, but I need the images and text in each grid element to be at a 90-degree angle to ...

Navigating horizontally within a list using Sencha Touch2

I currently have a list set up with the following configuration: var grid = Ext.create('Ext.List', { scrollable: { direction: 'horizontal', directionLock: true }, store: compStore, i ...

Customizing Magnific Popup: Changing showCloseBtn and closeOnBgClick settings during display

Is there a way to customize the behavior of an open instance of a magnific popup? I want to have different settings for when the popup is closable and when it should be prevented from closing. It appears that these options are only available during initial ...

Create a link for editing in a data table that can filter based on multiple column values and also enable global search on specific custom

How can I generate an edit link with a function that requires multiple parameters extracted from different data columns received via ajax? I have come across the render callback, but it seems to only return one column value at a time and my requirement is ...

serve.js module located within the node_modules directory

I recently stumbled upon this snippet in the package.json file: "serve": "node ./node_modules/serve/bin/serve.js -p 5050" After exploring that directory, I discovered the presence of the serve.js file, which appears to be utilized for hosting and serving ...

Enhanced capabilities for the <input> element

I am seeking to develop a component that incorporates an <input> tag and offers additional functionalities like a clear text value "X" icon or any other customized actions and markup, all while maintaining the same event bindings ((click), (keyup), e ...

What are some ways to postpone the execution of a function in React or NextJs?

How do I automatically redirect to the home page after 5 seconds of accessing a page in NextJS? I attempted to achieve this using the following code: useEffect(() => { const timer = setTimeout(() => { redirect('/home') ...

The challenge of PHP's HTTP_REFERER

I am experiencing an issue with http_referer. In my setup, I have two files: index.php and index.html. The index.php file contains a form that, upon submission, includes information like the http_referer. On the other hand, the index.html file runs an aja ...

Tips for dynamically modifying the default keyword in a div using Jquery to apply color

I am attempting to dynamically apply colors to default SQL keywords. For example, when a user enters the words "select * from table" in a div, I want the words select, from, and table to be displayed in blue color while the remaining default words are di ...

What is the best approach for handling @RequestParam in a JSP file?

Hello there! I have a query regarding the usage of @RequestParam in @RestController. My question is about extracting @RequestParam from the client side. Below is an example of server code using @RestController: @ResponseBody @RequestMapping(method = Reque ...

The conditional statement is failing to execute properly in the JavaScript AJAX response

When checking the value in the alert, it always shows as 'Initial'. However, the condition if(checkoption == 'Initial') always returns false. The actual code is as follows: function changeItem(id,item,option) { var xhttp; xht ...

Is the click count feature malfunctioning?

My goal is to track every mouse click made by the user, so I created a function for this purpose. However, it seems that the function is only counting the first click. To store the count values, I have created a variable. <!DOCTYPE html PUBLIC "-//W3 ...

JavaScript function that allows jQuery .val() to replace trailing decimal points

Currently, I am working on restricting the input allowed in a numeric text field. My approach involves checking the length of the input field's value, and if it is greater than or equal to the specified maxlength attribute, no further input is accepte ...

Issue with loop detected in <fieldset> tags - prematurely adding closing tag

In the development of my web app using Google Apps Script, I am faced with the challenge of creating a set of checkbox fields for each learner/student, displayed in rows of three. These checkboxes are generated from data stored in a spreadsheet. My goal i ...

I created a thorough duplicate that successfully addressed an issue with a table

Currently, I am facing an issue with the material-table library as it automatically adds a new element called tableData to my object when I update it using Patch in my code and API. To resolve this problem, I tried implementing both a conventional and cust ...

Transforming the response.render method in Express to be a promise-enabled

I have a task at hand where I need to develop a render method that constructs HTML blocks into a string. Initially, it appears to be working fine, but I ended up using the infamous "new Promise" and now I'm not sure if my approach is correct. Here&apo ...

Modify all the content within the DIV using Regex, while keeping the HTML tags intact

I am attempting to replace all the text inside a DIV, including within its children, without modifying any HTML tags. Specifically, I want to switch all instances of 'Hello' to 'Hi'. Thank you for your help. var changes = $('div ...

Streamline jQuery code for dynamically populating two select dropdowns

I am looking to streamline and enhance this script to make it more dynamic. There could be multiple items in options, potentially even up to ten items. In the current scenario, the maximum number of items allowed is 2. The total value selected across both ...