Custom commands or utility classes/functions? - javascript

I'm working with a team that has a project in Nightwatch.js. They are defining commands for almost everything:
Datetime functions as commands (return current day, array of days in a period, etc.)
SQL queries to get data as commands
To me, some of these fit better to utility classes, but they prefer to have them as commands, so they can access them via browser.Command.
What's the correct approach or recommendation? All in commands looks odd to me, but also the codes look more clean, as you don't need to do imports.
Thanks,

This question will probably get closed for being opinion based, but anyway.
I would agree that not all utilities should be commands. I would generally see the scope of command to be more to do with acting on things in the browser as the user would, or a way to group user actions, e.g. in a typical system I would see commands like -
login(), which would group the clicking into text fields and entering the username password and eventually clicking the login button.
addUser(), which would maybe be a small, but repetitive group of commands to add a user to an admin panel for example.
dragTo(x), which would maybe handle some drag and drop functionality.
etc.
I wouldn't see date utils etc as commands, but as you say, just utility functions, that are more about the underlying implementation of the test, and not how the user would interact with the system.
Although not Nightwatch, maybe take some advice from the Best Practices of Custom Commands from Cypress - https://docs.cypress.io/api/cypress-api/custom-commands#Best-Practices

Related

js / vue app doing CRUD, how can I track what needs updating?

I'm working on a vue app that uses vuex and gets objects from an api. The tables have paging and fetch batches of objects from the api, sometimes including related entities as nested objects. The UI allows some editing via inputs in a table, and adds via modals.
When the user wants to save all changes, I have a problem: how do I know what to patch via the api?
Idea 1: capture every change on every input and mark the object being edited as dirty
Idea 2: make a deep copy of the data after the fetch, and do a deep comparison to find out what's dirty
Idea 3: this is my question: please tell me that idea 3 exists and it's better than 1 or 2!
If the answer isn't idea 3, I'm really hoping it's not idea 1. There are so many inputs to attach change handlers to, and if the user edits something, then re-edits back to its original value, I'll have marked something dirty that really isn't.
The deep copy / deep compare at least isolates the problem to two places in code, but my sense is that there must be a better way. If this is the answer (also hoping not), do I build the deep copy / deep compare myself, or is there a package for it?
It looks like you have the final state on the UI and want to persist it on the server. Instead of sending over the delta - I would just send over the full final state and overwrite whatever there was on server side
So if you have user settings - instead of sending what settings were toggled - just send over the "this is what the new set of settings is"
Heavy stuff needs to be done on the server rather than the client most of the time. So I'll follow the answer given by Asad. You're not supposed to make huge objects diffs, it's 2022 so we need to think about performance.
Of course, it also depends of your app, what this is all about. Maybe your API guy is opposed to it for a specific reason (not only related to performance). Setup a meeting with your team/PO and check what is feasible.
You can always make something on your side too, looping on all inputs should be feasible without manually doing that yourself.
TLDR: this needs to be a discussion in your company with your very specific constrains/limitations. All "reasonable solutions" are already listed and you will probably not be able to go further because those kind of "opinion based" questions are not allowed anyway on SO.

What are "use-cases" in the Clean Architecture?

I am trying to implement the Clean Architecture structure in an app that I am developing and I am having a hard time figuring out exactly what is what.
For example, if I am right, the entities of my appliaction are Employee, Department, EmployeeSkill the entities also include all of the "validation" logic, to ensure that these entities are valid.
And the use-cases are the various actions that I can do with these entities?
For example, use-cases about the Employee:
add-employee.js
remove-employee-by-id.js
update-employee-department.js
update-employee-phone-number.js
...and-more-employee-updates.js
Are these all actually use-cases?
Now the add and remove i dont think have much to discuss about, but what about the updates? Should they be granulated like this?
Also with such architecture, doesnt that mean that, I if I want to update both the employees department and phone number at the same time, I will have to make two separate calls to the database, for something that can be done with one, because the database adapter is being injected into the use case, and every use case starts with "finding" the entity in the database?
Defer thinking about the entities for now. Often, you get stuck trying to abstract the code after your mental model of the world and that is not as helpful as we are lead to believe.
Instead, couple code that change together for one reason into use-cases. A good start can be one for each crud operation in the GUI. what will be by a new method, or new parameter, or new class etc is not part of the CA pattern, that is part of the normal tradeoffs you face when you write code.
I can't see any entities from your example. In my code base ContactCard (I work on an yellow pages in 2021 kind of app) and UserContext (security) are the only entities, these two things are used all over the place.
Other things are just data holders and not really an entity. I have many duplicates of the data holders so that things that are not coupled, stay uncoupled.
Your repository should probably implement the bridge pattern. That means that the business logic defines a bridge, that some repository implements. The use-case is not aware of database tables, so it does not have any granular requirements (think if it as ordering food at mcdonalds, it won't say from the grill I want xxx, and from the fryer I want yyy).
The use case is very demanding in the bridge definition. So much, that many repositories end up having api layers that import and manage the implementation of the bridge, and then they adapters to the internal logic.
This is the difference between api layers in business apps and most B2C apis. An enterprise API for an use case, is the just what the use-case needed.
If you have already constrained yourself by a made up model of the world, and decided to split repos in that, instead of splitting them per use-case, then you end up with poor alignment. Having the same sql query, or parts of it, in more than one repository is not an issue. Over time, the queries look different a lot of the time even if they start out very similar.
I would call your example use-case for UpdatePhoneNumberEverywhere. And then the UpdatePhoneNumberEverywhereRepository implementation, can do what the heck it wants to, that is a detail. The use case does not care.
Another one I might do is UpdatePhoneNumber and the use-case accepts a strategy. Strategy.CASCADE or Strategy.Leaf etc.
In terms of your table design, even though it's a detail, Contacts probably deserves to be broken out.
Every use-case does not start with finding something from the database. Commands and queries are passed in or w/e you call it, and the use-case does something useful.
The most practical way to write a use-case, is to just implement exactly what you need for the business requirement, write all the tests against the public api in the use-case. Just pass in data as a start, a dictionary is often fine.
Entities are often found later when you cannot stand to have so many versions of something, you just need that something to be stable and the same all over, and your end users expects as much too. Then, just refactor.

How to handle login users when use maxInstances for webdriverio

Now I try to update webdriverio's maxInstances > 1 for our product automation test, but I cannot find a good way to make the different test instances use different user to run test. Sometimes different instances will use the same user to login, it will cause the first login instance session timeout.
Anybody knows how to lock/unlock user for this kind of scenario?
Let me get this straight: you are trying to run multiple instances, and have different parameters for each worker being spawned, right? (e.g: in your case use different, non-conflicting user accounts for the flows being run). Doesn't it seem like you zugzwang'ed yourself?
In theory, every test cases should have these three characteristics:
small
atomic
autonomous
❒ Possible solutions:
Wait for wdio-shared-store-service to be reviewed > approved > merged > released
This can take a week, or it can take a month, or several months. It might not even be a feature being shipped altogether as there was quite a lot of concern around being able to share data across checks (which people will eventually end up doing).
Currently there is not other functionality packaged inside the framework that will allow you to achieve the same outcome. If you are able to, maybe try to look for solutions by shifting the test approach.
Reorganise your testing logic:
have specific test accounts associated with specific checks (test cases) inside your feature files (test suites)
if you want to be extremely serious about your checks being atomic, then have each user account created for a specific test suite (as a test suite will only be run on one instance, per regression run)
organise your test suites as such that only specific user accounts will be used for a specific run, and make your runs specific: adding the -suite switch to your command
suites: {
user: [
'./test/features/user/AnalyticsChecks.js',
'./test/features/user/SitemapChecks.js'
],
superuser: [
'./test/features/superuser/HeaderChecks.js',
'./test/features/superuser/FooterChecks.js'
],
admin: [
'./test/features/admin/DropUserRoles.js',
'./test/features/admin/ClearCache.js'
],
batman: [
'./i/am/the/Darkness.js'
],
}
Create your users dynamically (pre-test, or during test run)
If you're lucky and have access to some backend calls to push users with specific configs to the DB (Ask for support from your Backend devs. Bring them candy!), then create a script that produces such users,
Alternatively, you can can create a custom_command that achieves the same. You call in your before/beforeEach hooks.
!Note: Don't forget to cleanup after yourself in the after/afterEach hooks.
Drawbacks:
contradicts the small principle
you won't be able to run them against PRODUCTION
you will probably be flagged by your backend for continuously polluting the DBs with new users (especially if you run 3-5 full regressions a day)
You can surely find a solution to remediate this framework limitation. Be creative. Everything goes. Cheers!

How to control dynamic class names which are auto-generated via CSS modules or styled-components with user-defined filters or other methods

Many websites today auto-generate dynamic class names via CSS modules or styled-components. This practice has the unfortunate and perhaps even deliberately malicious effect of disabling many user-defined filters and/or scripts; e.g. Reddit overrides all manner of client-side cosmetic changes; even simple things like karma are being forced upon the user due to the fact that there's apparently no persistent global identifier which the user could invoke to forbid the display of karma:
An example screenshot of Reddit code illustrating the dynamic class names at hand
I think this is authoritarian, inappropriate, and creates a horrible user experience. I don't believe it's reasonable that websites should exercise this kind of control. What exactly can the user do to reign in these seemingly un-manipulable dynamic class names? e.g., is there a way to reverse engineer the build processes used by CSS modules or styled-components in order to then inject the proper identifiers into a user-defined filter and/or script? Or are there better methods?
Note: I've already asked and received no decent response to this question on Webmaster, UX, and SuperUser. Is this the end of the road? Or is there a StackOverflow guru with a workable solution?
To hide karma spans on a comments page on Reddit, today, you could run the following JavaScript:
Array.from(document.querySelectorAll('span')).filter(i => /(\d+)\spoint/.test(i.innerHTML)).forEach(i => i.style.display = 'none');
Tested it here.
However, it only hides karma on the rendered comments, not on the ones that are not yet loaded.
To programatically open all "moreComments" links on a page, you'd need to run:
Array.from(document.querySelectorAll('div')).filter(i => /moreComments-/.test(i.id)).forEach(i => i.querySelector('p').click())
Depending on how many hidden comments are on the page, you'd need to wait a while until all requests resolve and all comments are rendered.
At which point running the first line will hide all karma spans on the page.
And this might not work tomorrow, as Reddit own that code and have the right, the ability and the resources to change its inner structure, layout or design as they see fit, any number of times a day, so that any puny attempts of altering the rendered output of their service, by coder wannabes like me and you, remain futile.
Edit: Ever since I answered your question I wanted to provide some helpful insight on how to approach StackOverflow. I hope you find it helpful or, at least, entertaining.

Code Organiser Programs

Does anyone know of any tools or easy methods to help re-arrange and organise source code files?
In particular, I am looking for a tool that can take a javascript file, with a number of separate functions, and show me a list of the functions which I can then re-arrange in a more logical order, and have it shuffle the code around to match my new ordering?
Ideally, it would be something that is interactive, rather than a single tool I have to run by command-line, as the order may differ each time.
I'm sure these sorts of tools must exist, but I can never find them whenever I look.
I also suspect that it is something that could be built rather easily by someone with good knowledge of Javascript meta-programming (it might just be a case of 'eval'ing the input, and finding all the functions, then rendering them in a re-orderable list).
I ended up buying WebStorm by JetBrains, which is a commercial product, but it has the ability to see an overview of the file structure, and to reorder statements, including function definitions easily.
This wasn't the reason I bought it, but I am satisfied that it also contains this functionality that I was seeking, so I am going to close this question for now.
There is one, a non-free, editor that I'm aware of so far. I found it when I was duckduckgo'ing months ago.
http://www.yaldex.com/JSFactory_Pro.htm
I've never tried it however.

Categories

Resources