DEV Community: Julian Toscani

TIL: Stubbing nested, global properties in Vitest

Julian Toscani — Fri, 31 Mar 2023 09:15:16 +0000

I recently upgraded some functionality of our legacy codebase to fit our new Stack containing:

Vue3/Nuxt3
Vite
Vitest
Typescript

The feature that had to be rewritten was a scroll-depth tracking. It extensively uses IntersectionObservers and some global properties like innerWidth or document.visibilityState to do some checks. As I had a hard time testing changes on document.visibilityState changes, I write this post so you won't have to deal with them.

TLDR;

vi.spyOn(document, 'visibilityState', 'get').mockImplementationOnce(() => 'hidden');

First approach: simply setting it

Does not work as document.visibilityState is defined as read-only. It is, however a solution if you want to manipulate window.innerWidth as shown in the docs

Second Approach: Using global stubs

The first idea I had was to use global stubs. With these you can overwrite a global property or object and provide Mock to use instead. I used this to stub the IntersectionObservers as suggested in the docs.

Unfortunately, if you need the functionality of the original object somewhere else this won't work as it apparently gets hoisted, meaning it is not scoped to your current test. For me, this did not work. vi.unstubAllGlobals() did not reset the stubs which may have prevented this issue as we use JSDOM.

Third Approach: Using a `spy`

spys are functions which observe the use of methods. You can use them like so vi.spyOn(object, "methodName"). They are usefull in cases where you check if calling a function or method calls another function or method. This helped me to find out if the function I was testing was called. However, I needed to now if it was called with the correct argument.

Solution: mocking the return of a `getter` you `spy` on

After a bit of tinkering I found out, that vi.spy accepts a third argument and allows me to provide a mockImplementation for that setter/getter. The third parameter describes if the property - instead of being a method - is a getter or setter.

Hence I ended up with the following solution:

vi.spyOn(document, 'visibilityState', 'get').mockImplementationOnce(() => 'hidden');

// and later

vi.spyOn(document, 'visibilityState', 'get').mockImplementationOnce(() => 'visible');

If you have questions, better ideas or find errors, please leave a comment.

Cheers!

TIL: The easiest way to handle index overflow...

Julian Toscani — Thu, 22 Dec 2022 08:25:49 +0000

TLDR;

You can use the modulo operator in conjunction with the length of the array. This requires you to set you position after every change.

handleOverflow(options, chosen) {
 return (options.length + chosen) % options.length
}

Recently, I was working on a search input with an autocomplete feature. One of the requirements was that users should be able to cycle through the options by pressing arrow keys. Additionally, if you were at the last item and pressed down it should jump to the first item in the list. Similarly, if you were at the first element and pressed up it should jump to the last item.

First Solution

The Mental Model

I have an array of options
I have a numerical value to access one element of that array, the index
1. In order to get the next element I increase the index.
2. In order to get the previous element I decrease the index.
If the index gets below 0 I need to jump to the end
If the index gets bigger than the index of the last element, I need to jump to first element.

Solution

handleOverflow(options, chosen) {
  let next = chosen;

  if (next > options.length - 1) {
    next = min;
  }

  if (next < 0) {
    next = max;
  }

  return next;
}

What I did not like about the implementation

It is verbose
I have to reset a value inside of the function

'Improving' the solution

What basically happens is that I need to access an element in a list with a known size. So basically, I only need to worry about the size of the array and the position I am at.

So, if I am at position 5 (meaning the 6th element) in an array with 6 elements and I want to go to the next element I go to index 6. Unfortunately, that does not exist so I go back to the start which is at index 0. I know that 6 % 6 equals 0. Hence, accessing the array by index % array.length would work for positive numbers.

With negative numbers, that does not work unfortunately as -1 % array.length equals -1 so even by removing the - I would land at the first element, not the last. This forces me to add the length of the array to the result of the modulo operation and BAM, we have the solution:

handleOverflow(options, chosen) {
 return (options.length + chosen) % options.length
}

What do you think about this solution?
Is it better or worse than the first?
How would you handle this problem?

Best and Happy Holidays!

Linux - View and Edit File Permissions.

Julian Toscani — Wed, 30 Nov 2022 07:34:28 +0000

When working with servers most of the time you will work with linux servers (Ubuntu, Debian, etc.). In order to change, view or create files you need the right permissions. To get a basic understanding of what that means, I will tell you how to view, read and interpret these permissions.

Viewing Permissions

An easy way to view permissions for files inside a folder you can use the ls command with the o or l flag like so:

ls -o
#or
ls -l

Move to a directory that has files in it and type the above command into your terminal. It will generate multiple lines of output that look similar to this:

# permissions   hard links  user    group of user   file size    change date     file/folder name
  drwxrwxr-x    9           toscani toscani         288         11 Nov 09:07    public

The important part are the first ten letters drwxrwxr-x. They describe the permissions. These characters are broken down into four groups.

The first letter, in this case d
Letters two to four rwx
Letters five to seven rwx
and finally eight to ten r-x

Group one states if the entry describes a file -, a directory d or a link l. The other three groubs describe the permissons each type of user has. On linux we distinguish between the user, the group and others - in this order. Hence drwxrwxr-x means:

It is a directory which can be
read, written and executed by the user
read, written and executed by the group the user is in
read and executed by the others

You are maybe wondering what "executing a directory" means. It basically lets the you open that directory. "Reading a directory" on the other hand means "to be able to see" the directory, e.g. being able to list it with the ls command.

Changing permissions

Now that you know how to view file permissions, I will tell you how to change them. For this we use the chmod (change mode) command. There are two different methods for this. The symbolic method and the absolute method.

If you have ever seen the chmod command in a tutorial before the symbolic method is the one with the letters, the absolute method is the one with the numbers ;).

Symbolic method

The symbolic method combines an access class with an operator and an access type to set permissions. A common example is to make a file executable for everybody:

chmod a+x my_file.sh
# or, as `a` is the default
chmod +x my_file.sh

Access class	Operator	Access Type
`u`, user	`+`, to add access	`r`, read
`g`, group	`-`, remove access	`w`, write
`o`, other	`=`, set exact access	`x`, execute
`a`, all

These parameters can be combined in many different ways. Although I can´t tell you what the right configuration for a specific usecase is, the following examples might help you to find that out yourself.

u always means the current user and g always refers to the group the current user is in.

# remove read and write permissions for all except you
chmod go-rw my_file.sh

# set access to only read for everybody
chmod a=r myfile.sh

# remove write access from and add execution rights for the group
chmod g-w+x myfile.sh

# grant read permission for a directory and all files in it to all
# -R is used as a flag, not as a parameter to describe the permissions
chmod -R +r mydir

Absolute method

In contrast to the symbolic method, the absolute method sets all permissions at once by using a three digit number. Each of the digits is the sum of it´s individual permissions. Let´s use the following example:

chmod 774 myfile.sh

Base permissions

Permission	Number
4	read
2	write
1	execute
0	no permissions

Combinations

Permission	Number
7	read, write and execute (4 + 2 + 1)
6	read and write (4 + 2)
5	read and execute (4 + 1)
3	execute and write (1 + 2)

The first number represents the user, the second the group and the last represents others. Hence, the example above sets the following permissions:

read, write and execute for the user
read, write and execute for the group
read for others

Now you know how to read and change file and directory permissions on linux. If you need further information just consult the man page by typing man chmod into the command line.

If you have questions or feedback, please leave a comment :).

TIL: Bash - Redirect Errors (stderr) to other files

Julian Toscani — Thu, 17 Nov 2022 16:37:40 +0000

Today I learned that, when redirecting output to a file in bash, you can specify where you want to redirect the stdout and stderr.

Redirecting in bash

In bash you can use > to redirect output of a command to a file. A basic example would be this:

$ echo "Hello World" > hello.txt

This will redirect the output of the echo command to the file. As a result, it will create a hello.txt file with the content Hello World.

The cat command prints the content of a file to the terminal. Hence

$ cat foo.txt > new.txt

will create a file called new.txt with the content of foo.txt. However, if foo.txt does not exist, it will prompt you with an error and create a file without content. Why?

$ cat foo.txt > hello.txt
$ cat: foo.txt: No such file or directory

The reason for this is that the command differentiates between the handles stdout and stderr. Per default it only redirects stdout.

Explicitly redirecting

In order to redirect the output explicitly you have to prepend > with either 1 or 2. 1 standing for stdout and 2 for stderr. E.g.

$ cat foo.txt 1> hello.txt 2> error.txt

This command will now redirect all stdout to hello.txt and all errors to error.txt.

As long as you are only working with one file, this might not be very helpful. However, if you loop over files in a directory it might be a different story.

If you find any mistakes or want to add something, don´t hesitate to leave a comment!

Bash Basics - Navigating the Filesystem.

Julian Toscani — Fri, 11 Nov 2022 09:00:00 +0000

Being able to use a server without a UI is a crucial skill for every developer. In this article I will tell how to navigate a servers filesystem using bash.

The Commands

pwd         # print path to current directory
ls <path>   # print visible content of current directory
cd <path>   # change current directory
cat <path>  # print content of a file

Paths can be expressed in different ways. Here is an overview of what this means in practise.

# Ways to express paths
foo/bar      # relative to current directory
./foo/bar    # equivalent to foo/bar

/foo/bar     # from root
~/foo/bar    # from home directory
../          # to parent directory

Hence, if you want to move to the parent directory, you type:

cd ../

In order to check the content of the assets/ folder in your current directory (if one exists) you would type:

ls assets/
# or
ls ./assets/

Some of these commands can show even more information. For that to happen, you can apply flags to them. A good example of this is the ls command. Here are some examples:

# show all files and folders with their current permissions, creation date and file size
# remove `a` to hide hidden files (prefixed with `.`)
ls -ao <path>

# also show all subdirectories recursively
# caution - gets big fast!
ls -R

# show all files and folders including all their subdirectories
# with their current permissions, creation date and file size
ls -aoR <path>

# Add line-numbers to the output
cat -n <path>

Did I miss something? Let me know!

Image taken from unsplash by Gabriel Heinzer

DEV Community: Julian Toscani

TIL: Stubbing nested, global properties in Vitest

First approach: simply setting it

Second Approach: Using global stubs

Third Approach: Using a spy

Solution: mocking the return of a getter you spy on

TIL: The easiest way to handle index overflow...

TLDR;

First Solution

The Mental Model

Solution

What I did not like about the implementation

'Improving' the solution

Linux - View and Edit File Permissions.

Viewing Permissions

Changing permissions

Symbolic method

Absolute method

Base permissions

Combinations

TIL: Bash - Redirect Errors (stderr) to other files

Redirecting in bash

Explicitly redirecting

Bash Basics - Navigating the Filesystem.

The Commands

Third Approach: Using a `spy`

Solution: mocking the return of a `getter` you `spy` on