We Keep Coding

In Cypress, should assertions be kept within test blocks themselves, or should they be in helper functions/automation steps [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 18 hours ago.
Improve this question
I recently started working on Cypress and I see a lot of assertions inside of helper functions/automation steps, this seems to me like it would be a bit of an anti-pattern since it would repeat these assertions in every and any other test that is also using that automation step, e.g. logging in,
Having this should in the helper function/step will cause every other test which is logged in to also have unnecessary assertions I would think, and longer functional tests would begin to have a lot of assertions which aren't needed for a specific test. Am I overthinking this issue, or is it valid? I also was interested if there were any performance impacts of this, I assume it's pretty fine for a simple one like this, but for much longer multi-step tests, would this begin to be a concern? I couldn't find any other resources on this specifically, so I would love any insight or direction if I'm overthinking it, or it is something to refactor and consider. (For reference as well, app actions and component testing are not in use here, and not currently an option)
cy.get('[data-cy="login-email"]').type('username')
cy.get('[data-cy="login-password"]').type('password')
cy.get('[data-cy="login-btn"]').click()
cy.get('[data-cy="profile-btn"]').should('exist').and('contain', 'username')
My fix would be to put assertions into the respective test case's IT/Specify block, instead of the helper functions.

I work with BDD tests. I often separate verifications from helper functions but if running time allows me I include verification steps at least for all forms/modals/pages which are used in test.
What is more, I include should() assertions to functions which return locators the following way:
cy.get('explore-button').should('be.visible')
if it doesn't break the logic, of course (if any element can be hidden by purpose or is not visible yet)

Your question is valid. You can create a custom action for login, and indeed when working on bigger applications the impact of performing the login as an assertion gets more noticeable as we might cause some performance issues and make our test suites more time-consuming, plus this would mean that we have a dependency between our tests which is generally a bad practice:
Tests should always be able to be run independently from one another
and still pass.
So that's why the documentation suggested this talk: https://youtu.be/5XQOK0v_YRE?t=512
Which talked about these recommendations:
Don't use the UI to build up the state, use it directly
Don't share page objects to share UI knowledge, write specs in
isolation
Don't limit yourself to trying to act like a user, you have native
access to everything
So basically you might make your login command use your authentication API endpoints and save the JWT tokens in your state and then just pull it from there instead of re-running your login assertions and actions.
Cypress.Commands.add('login', () => {
cy.request({
method: 'POST',
url: 'BASE_URL/login',
body: {
user: {
email: 'bar#foo.dz',
password: 'a_pwd',
}
}
})
.then((resp) => {
// if your application loads the jwt from localstorage for example
window.localStorage.setItem('jwt', resp.body.user.token)
})
})
Then in your tests:
beforeEach(() => {
cy.login()
})
This might be challenging if you want to test social logins, for that please have a closer look at:
https://docs.cypress.io/guides/references/best-practices#Visiting-external-sites
https://github.com/cypress-io/cypress-example-recipes#logging-in-recipes
https://docs.cypress.io/guides/end-to-end-testing/auth0-authentication

What's the added value of using Observable over normal Array? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 1 year ago.
Improve this question
I've been using Observables in Angular in the state layer to store the app data and to share that data among the components of the app. With a belief, using observables, that data would passively update itself in the template whenever it changes, without checking it manually.
So out of curiosity, I've made the following demonstration to see the result of not using Observables: stackblitz
It turns out that the template passively updates itself by using a normal array instead of using observables.
I'm wondering, what's the added value of using observable instead of a normal array to store/share data in the angular app?

Use RxJS Observables when
Composing multiple events together
Adding Delay
Clientside rate limiting
Coordinating async tasks
When cancellation required (although you can use abortController for modern Promises)
they're not good for
simple button clicks
basic forms use
Hello world apps
UPD: RxJS shines when you need fine-grained control over the stream of events (adding delays, or using operators like debounceTime/ThrottleTime, etc.). If you only intent to apply some changes per event (without having control over the stream itself), then reactive approach probably not the best option.
Although I feel obligated to state that you can implement the same logic (~control over stream) without reactive approach, but it would be much more error-prone and not easily scalable).
In your particular hello-world app reactive approach isn't the best option (IMHO). If you want to see the power of RxJS by your own eyes, you may try to write an app with search field, where the app should wait some time before sending actual request (limiting the amount of request: they shouldn't be made for every new letter, look debounceTime for reference) and also requests shouldn't be made for the same inputs (users typed something, then changed theirs mind and returned to previous input, and all of it within the range of, suppose, 600ms. Look distinctUntilChanges).
You'll see that the non-rxjs alternative is much more verbose and difficult to read (and, more importantly, scale).

How to Keep Multiple Instances of the Same Gadget Separate [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I have created a JIRA gadget. When I put only one instance of it on a dashboard, it's fine. When I put a second instance on the same dashboard, configure it to load different data, and then refresh the whole dashboard, I can see that they share most data -- as if they get their data from the server at almost the same time and then write to the same javascript variable and then render based on that variable.
When they render, they're mostly identical to each other when I know they should be totally different (I can see values that match instance A's configuration appearing in instance B).
Another way I can tell it's wrong is when I refresh each gadget separately, they display the correct data. But when I refresh the entire dashboard, they display mostly the same thing.
How do I keep these separate? One thought I had was to try the following:
Keep a thread-safe request counter on the server.
For each request, increment the counter and append the new value to the names of javascript variables in the velocity template.
When adding items to the context hash map, append the request counter to the keys so they match the javascript variables in step 2
The renderer takes the modified velocity template and the context hash map and produces something that refers to only its own request results.
But I'm having some trouble with step 2. I have the 'location' of the template file "/templates/gadgets/my-gadget.vm" -- it's not a real location in that there is no such file on the server at that path. The renderer expects the 'location' as an argument. I want to load /templates/gadgets/my-gadget.vm (wherever it actually is), write out a new /templates/gadgets/my-gadget..vm, and then pass this new location to the renderer... But /templates/gadgets/my-gadget.vm is not an ordinary file path. Where is it?
Or is there a better approach?
Note: nothing in the servlet is marked static or volatile -- everything in the servlet is instance-specific (and therefore request-specific ???) so the bleeding between requests is on the client side (see comments for discussion on whether this is correct and see the accepted answer for the tl;dr).

You mentioned in the comments that you were storing values passed in from the HttpServletRequest as "instance variables" on the server side. The issue is that JIRA only ever instantiates a single copy of your servlet object, meaning that anything you write to an instance variable will be shared between requests. If both requests come in at the same time and they get interleaved, thread #1 will see data from thread #2 by accident, which is probably what happened.
The solution is to keep everything on the stack. For example, instead of writing to instance variables, just declare local variables inside your service method and leave everything there instead of at the class scope.
If you already have other functions in your servlet class that are using the instance variables, you can either modify them to receive the values passed over as parameters during the method call, or else refactor and move that code to another class that uses its own instance variables (but make sure you explicitly instantiate a new object of that class within service() every time you receive a request!).

Passing JavaScript data to page, best practices? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I'm writing a web application where I need to pass some user data to the JS application on page load. I've identified 3 different approaches, and am wondering what is the best practice with regards to this. The data is not particularly sensitive, but it would be best it is somewhat more secure compare to others.
1. Asynchronously load the data
Using something like $.ajax(). I don't like this approach because it usually leads to the whole "loading" phenomenon and I would like to avoid. Have the data ready than make a separate call.
2. Burn the data into the page.
This can be achieved by doing something like this
<script>
var userdata = { somekey: somevalue }
</script>
3. Make a request using script tags
This can be achieved by doing something like this
<script src="server/getdata"></script>
I understand that this is somewhat like the 1st approach since it makes another get request to the server.
My question is, is any of the 3 approaches above different, or better in terms of security. I understand that all 3 methods are not particularly secure, especially since it can be easily sniffed either way, but is any of the above method a better practice than the other 2, and why?

Of the ones you've given, 2 is best, for just the reasons you said. However, I would not add a new global for it. Rather, I would do:
<script type="text/javascript" src="application.js"></script>
to create someGlobal (among other things) then:
<script>
someGlobal.userdata = { somekey: somevalue }
</script>
Another couple methods with the same advantages are:
data attributes. These are the data- ones. You can put arbitrary data, associated with particular elements (sometimes particular elements make sense; otherwise, you can use body).
Hidden form fields.

architecture for maintaining state and managing i/o in a purely client side quiz application (javascript / jquery)

This question is by necessity a bit general; it relates to the overall architecture of client side applications built with javascript and jquery:
I'm building a jquery based quiz application. For initial purposes I am trying to develop it entirely client side, with all the question and answer data stored in object literals in the js files (I'm not particular concerned right now that the data would be exposed in the source). I want to build it so that this implementation could readily be adapted into an ajax solution where the question data would be pulled from a php file or database.
I've written a question generation function which takes in the object literal describing the question and renders it as html and inserts it onto the page. My question is what would be the best practice for storing the users answer data and implementing the i/o as the user proceeds through the quiz. The questions would be displayed sequentially and there will be a logic which selects from a two dimensional grid of questions to determine which question would be rendered next based on whether the user answered correctly and the coordinate position on the question grid of the question they were on.
Happy to post any code I've already written if this would be helpful to providing an answer. Thanks.

The same principles apply.
Your entry point for the program will be some function which is attached to some event which kicks everything off. Typically this will be the page load function.
In this function you will set up the program (as you would in a C++ main), create variables (global or otherwise) representing program state etc. I'd guess you'd have some logic which selects and presents a question plus perhaps a 'Ok' button which the user should click once he's happy with his user. At this point the browser is just waiting for user input, the user selects his answer and clicks ok. The logic of your program is probably store the answer in a variable somewhere and calculate the next question to display. For this you have added a function to the onclick event handler which implements this logic. You present the next question and voila you are back at the start of your loop.
I'd recommend getting the simple loop aspect working to get comfortable with javascript and the event model rather than worrying about whether global variables are bad or not. Your going to have at least one global variable in any case probably a reference to a more complex ApplicationState object.
I'm not sure if its part of your confusion but you know that instead of :
button.onclick = new function() { // loads of program code to get next question };
you can do
function NextQuestion() {
// code to get next question
}
button.onclick = NextQuestion;