teleren/devto huggingface dataset:
How to mock the Webshare API for a Cypress Test
Tags: cypress, webshare, testing
Published: 2021-12-05 15:55:07

---
title: How to mock the Webshare API for a Cypress Test
published: true
date: 2021-12-05 15:48:52 UTC
tags: cypress,webshare,testing
canonical_url: https://relatablecode.com/how-to-mock-the-webshare-api-in-a-cypress-test/
---

![Spider web](https://cdn-images-1.medium.com/max/1024/1*D-5LyF973x2ECv0SaBf-Tw.jpeg)

[Cypress](https://www.cypress.io/) is a very robust testing framework with a ton of utilities. It has been my go-to option for all my side projects where I think extensive integration testing is necessary. In one of my apps, I offer the ability to share images using the [WebShare](https://web.dev/web-share/) API. In order to properly test this, I decided to investigate how to test this using Cypress!

### Brief rundown

The WebShare looks up native sharing functionalities the device may have for the selected data type. This could be anything ranging from text, URLs, images, or any number of other files. The application or method which will be used for sharing is called the share target.

Before validating if the selected data/file can be shared there is an additional function available in the navigator called canShare. This function will be the crux of our test as will test if this can be shared and validate what changes in UI are visible.

However, the results of the WebShare API would not be something I would personally test for as it is outside the scope of the app. As a result, I much prefer mocking the desired results and checking what should happen in the UI!

### Setting up Cypress

Cypress offers a way to access resources before it even loads with the onBeforeLoad utility. We can access this as we are visiting the main site. Let's look at this example below:

![Mock Success](https://cdn-images-1.medium.com/max/1024/0*etlIz58u-DCvN7aH)

Firstly as it is not currently available in Firefox we only run the test on different browsers. Afterward in the onBeforeLoad function, we access the window object and completely replace the two functions we are attempting to mock. In this case the share and canShare. This way we can test the expected result with what should be displayed in the UI!

Below is a similar test but for the opposite case, for when a test fails:

![Mock Error](https://cdn-images-1.medium.com/max/838/0*21uKpei0PCdWJtBY)

Bonus tip: In earlier versions the canShare utility was not defined in the Navigator Type and if for some reason you receive some error using Typescript and canShare, you can go ahead and extend it and brute force the type for the purposes of testing.

Example:

![Typescript Tip](https://cdn-images-1.medium.com/max/1024/0*ieDHVtIpg0obLlEO)

Small disclaimer, the Webshare API and several of its utility functions do not have widespread compatibility.

Leave any questions or alternative implementations in the comments below!

More content at [Relatable Code](https://relatablecode.com)

_Originally published at_ [_https://relatablecode.com_](https://relatablecode.com/how-to-mock-the-webshare-api-in-a-cypress-test/) _on December 5, 2021._
Add initial testing to Camunda with Spring Boot 🍃
Tags: camunda, java, spring, testing
Published: 2021-12-05 17:59:01

Let's add a test to our application so that we don't have to confirm things like the `User Task` manually! As well as some assertions to know what got executed and what not.

[Here](https://github.com/TGotwig/camunda-demo) you can find the code for this chapter under the git tag chapter-2.

For doing the assertions we need:

```xml
<dependency>
  <groupId>org.camunda.bpm.assert</groupId>
  <artifactId>camunda-bpm-assert</artifactId>
  <version>8.0.0</version>
  <scope>test</scope>
</dependency>
```

And there is our final `happyPath` test which goes through all we did from the last article automatically! 🤗

```java
@SpringBootTest
class MainDelegateTest {

    @Autowired private RuntimeService runtimeService;

    @Autowired private ManagementService managementService;

    ProcessInstance pi;

    @BeforeEach
    public void beforeEach() {
        pi = runtimeService.startProcessInstanceByKey(
                "loanApproval");
        assertThat(pi).hasPassed("StartEvent_1")
                .hasNotPassed("Task_0dfv74n")
                .isNotEnded();
    }

    @Test
    public void happyPath() {
        completeTask().hasPassed("Task_0dfv74n").isEnded();
    }

    private ProcessInstanceAssert completeTask() {
        complete(task());
        return assertThat(pi);
    }
}
```

`loanApproval` is from `loanApproval.bpmn` which you can find inside the Camunda Modeler when nothing is selected 🖼️

`complete(task())` are two static functions which are doing the clicking on `Complete` part from the last article for you 🤖
Radio Buttons In HTML
Tags: html, webdev, beginners, tutorial
Published: 2021-12-05 17:46:00

An HTML radio button is used to select 1 among multiple choices.

When you select 1 choice in the radio buttons then other choices are automatically deselected.

I came through an awesome article for the [HTML radio button](https://www.tutorialstonight.com/html-radio-button) that discusses the radio buttons step-by-step with code and infographics.

The infographic shown below explains step-by-step how to create radio buttons, group them and give them value.

![HTML radio button TutorialsTonight](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ahb9v0p9s5pnddvr8wq4.png)

The explained steps are:

1: Create `input` element with type="radio"

``` html
<input type="radio"> Email
<input type="radio"> Phone
<input type="radio"> Mail
```
2: Specify `name` attribute to group them

``` html
<input type="radio" name="contact"> Email
<input type="radio" name="contact"> Phone
<input type="radio" name="contact"> Message
```
3: Add a `value` attribute to give the button an input value

``` html
<input type="radio" name="contact" value="email"> Email
<input type="radio" name="contact" value="phone"> Phone
<input type="radio" name="contact" value="message"> Message
```
4: Finally you can use `label` element to increase the clickable area of the radio button

``` html
<input type="radio" name="contact" value="email" id="email">
<label for="email">: Email</label>

<input type="radio" name="contact" value="phone" id="phone">
<label for="phone">: Phone</label>

<input type="radio" name="contact" value="message" id="message">
<label for="message">: Message</label>
```

Reference: [HTML radio button](https://www.tutorialstonight.com/html-radio-button.php) (TutorialsTonight)
How Emails Reach an Inbox
Tags: webdev, devops, emails, computerscience
Published: 2021-12-05 17:44:13

What happens when you send a message on let's say Twitter? Leaving Twitter's business logic, the answer is simple. The message gets stored in a database with the `id`s of the sender and the receiver. Whenever needed, messages can be retrieved and displayed. It's easy, right? Well, emails are not!

Let's now see how emails reach an inbox/mailbox.

## Bob sends an email to Sarah

Let's say Bob uses Gmail and Sarah uses Yahoo. Bob writes an email for Sarah and hits the send button.

Before going further, let me introduce two types of servers involved in this whole Email business; SMTP (Simple Mail Transfer Protocol) server and IMAP (Internet Message Access Protocol) server.

_POP, an alternative to IMAP, can also be used, but we will discuss that another day._

### SMTP

SMTP servers send and receive emails. For the most part, SMTP servers do what's called `relaying`. After receiving and processing the email, the server tries to move (relay) the email to its destination. A destination can be another SMTP server or if the server itself is the destination, a directory/folder on the same server.

An email may pass through several SMTP servers before reaching its destination.

### IMAP
IMAP is simple. It just retrieves the emails from where SMTP left them and makes them available to be used by Email Clients. You might remember configuring your Email Client like Thunderbird to use your mailbox provider's provided IMAP settings. Some Email Clients do it automatically though.

When Bob and Sarah signed up for their respective mailbox providers (Gmail and Yahoo), both got accounts on their providers' SMTP and IMAP servers.

**Now coming back to Bob and Sarah**

After all the routing and DNS business, Bob's email reaches his SMTP server (Gmail). SMTP server processes the email and finds out its destination which is Yahoo's SMTP server. It then relays the email to Yahoo's SMTP server.

Yahoo's SMTP server receives the email and determines that it itself is the destination server. The server then just move the email to Sarah's mailbox (directory/folder) which is on the same server.

Sarah's mailbox has a new Email. Sarah's IMAP server makes the email available to be fetched by Email Clients. And Email Clients, checking up with the IMAP server after a specified interval, find out Sarah has a new email. Sarah gets a notification and now she can read it 🙌 

Ask any question in the comments and I'll try to answer it!

Follow me on twitter [@MeInamUlHaq](https://twitter.com/MeInamUlHaq)

Also, checkout [Free Email Verifier](https://email-okay.com) which I built.
Advent
Tags: codingchallenges
Published: 2021-12-05 17:32:39

The good thing about this time of year is advent: a time when people do something every day from 1st to 24th or 25th December. And it's the same with coding challenges: you get one per day for 24/25 days.

Here are a few that I'm doing this year/have done in the past/will do in the future. It's not too late to start any of these! You might just have to do more than one a day to catch up, or just skip the first few.

##  [Advent of Code](https://adventofcode.com/) 
This is one that can be done in any language. It's also not easy. I started this last year, but only did a few days before the difficulty level rose above the amount of time I had available.

## [Scrimba's JavaScriptmas](https://scrimba.com/learn/javascriptmas2021) 
You have to sign up for a Scrimba account for this, but it's free. It's JavaScript challenges which start really easy and get harder. But they have additional challenges if it's too easy. And you can change the CSS too. I am doing it this year and enjoying it - it helps that if I have time I can do the additional challenges and if I don't I can just do the basic challenge.

## [Advent of CSS](https://www.adventofcss.com/) / [Advent of JS](https://www.adventofjs.com/) 
I've lumped these together because they're from the same people. You get a Figma design (for the CSS challenge) and instructions on what you should do. You can do just the CSS or just the JS, but both feels more satisfying. I haven't started this because I just don't have the time yet, but it looks fun, so I've been saving the files and will do them when things have quietened down - maybe one a weekend.

## Any more?
Anyone know of any more coding advent challenges?
Why do people still use Java, if Java is behind technologically
Tags: java, php, python, programming
Published: 2021-12-05 17:32:23

First off, there are a lot of jobs for Java developers, so that is one reason, but why do people still use Java, including for new projects?

More recently popular high-level languages like python or ruby can be better for developer productivity, flexibility, and fast iteration due to less code cruft and verbosity. But the dynamic nature of these languages is fantastic for many broad applications, starts to break down when a project becomes very large, lots of developers are involved, or when speed and fault-tolerance are critical.

There are techniques and conventions to work around the code stability problems of dynamic typing, but techniques and conventions mean people need to follow them, and even then, there are vulnerabilities that are difficult to prevent. Take for example PHP, which is used throughout Facebook for back-end coding, was extended by Facebook to give it static typing and dynamic compilation so that it could deliver the speed and stability you would get when using technologies like Java. Exotic languages, like Scala, Haskel, Erlang, and Golang, will mainly be for specific applications best suited to them.

Java on the other hand is still best-in-class for many applications. It is the best way to build a rock-solid, fast, scalable, bug-free back-end system. It’s got the fastest JVM. Only C or C++ is faster, and only in certain narrow circumstances like compute algorithm optimization. Java is also the language of Android, the most broadly deployed smartphone OS on the planet.

Some have pointed out in the comments that Rust is an up-and-coming language, and Go is getting a strong foothold as a scalable back-end server language. Java is probably not the “best” these days in terms of abstraction and execution speed, but it still has a tremendously large installed base of libraries that these newer languages don’t have yet and might not for a long time to come.

If you gain something from this article, take a minute of your time, hit the share button and share this piece with your network on social media, also give me a follow on all social media platform via @ifycoool.

Visit my official blog via https://blog.ifeanyiokeakwam.com
SQL Joins - Inner Join vs Outer Join
Tags: sql
Published: 2021-12-05 17:23:34

When storing information in a database, sometimes it will be necessary to link two tables that store information that is related. 

There are multiple types of joins in SQL, but the main two categories are INNER JOIN and OUTER JOIN. 

INNER JOIN: 
In the simplest way, inner joins will only keep the information from the tables that is related. If you picture a Venn diagram, the inner join will only keep the information that is inside of the diagram. 

The syntax for this is: 
```SELECT * FROM table1
    JOIN table2
    ON relation;```

OUTER JOIN:
Outer joins will link the two tables, while also keeping unrelated data. There are three main types of outer joins in SQL: LEFT JOIN, RIGHT JOIN, and FULL JOIN. 

LEFT JOIN will keep the unrelated data from the left (first) table. Picturing a Venn diagram, this join will keep the data is that is in the overlapping part of the diagram, as well as the data in the outside left circle. This is most commonly used. 
The syntax for a LEFT JOIN is: 

```SELECT columns
  FROM table1
  LEFT JOIN table2
  ON relation;```

RIGHT JOIN will link the related data of the two tables, while keeping the unrelated data of table two (right table). The syntax for a RIGHT JOIN is the same as LEFT JOIN, but using the word 'right' instead. 


A FULL JOIN will join the related information of two tables, while keeping the unrelated information.

The syntax for a FULL JOIN is:
 
```SELECT columns
  FROM table1
  FULL JOIN table2
  ON relation;```
How I used AWS to make a website more secure
Tags: aws
Published: 2021-12-05 17:09:36

MyProHouseKeeper is a website where users can go to order home cleaning services. This is a relatively new concept for a service such as this and customer need to be able to trust that entering their personal information and payment information online is safe and secure. 

On the booking page, the site initially loaded in HTTP. This is a big red flag for customers since there is large font that indicates this site is NOT SECURE. There’s also no lock symbol indicating safety and encryption. See image. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ah2di2ojdc0rzbtv3gu.png)
These issues likely has several consequences:

-This impacts conversion rates and profits. 
-Protecting customer data 
-Slower website speed
-higher rankings for the business within web browsers

From my AWS experience, I knew these issues could be solved using AWS tools. 
Here’s how I made MyProHouseKeeper faster and more secure using AWS services. 

First I used AWS Certificate Manager to configure a new  public SSL/TLS certificate. Public certificates are trusted by browsers and operating systems. 

Next I used Cloudfront to redirect all HTTP traffic to HTTPS. Cloudfront is a global distribution network, which will also make the website load faster. 

Lastly, I configured AWS Route53 to connect to the Cloudfront distribution ID. 

After testing out the the new webpages, all the pages loaded faster and with secure https setup.
 
I believe the changes made will create higher conversion rates and increased revenue for MyProHouseKeeper. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hhpvlns7ntsq446dggm6.png)
DPS909 - Release 0.4 Week 2 - Progress Update
Published: 2021-12-05 16:48:53

# The Continuation
So this week I went ahead and started making some more progress to finishing up one pull request. My goal for this week was to get some approvals for my [Legend](https://github.com/meshery/meshery.io/pull/617) pull request. As I have been making changes, the comments suggested further making more changes, so that not only does the legend look more like the Layer5 legend, but also get the table to look more like it too.

This is the reference that I was going for.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0gwhlqb3p0xh4dwr5irk.png)

After many iterations and changes, I was finally able to get my chart and legend to look almost identical to the reference one.

One of the biggest challenges was to ensure the table and legend were responsive, and would change sizing according to the screen size. Luckily, with Google Chromes device toolbar, it made the job of seeing the website on different devices simple. I was able to emulate iPhone, iPad, iPad Pro and many other different screen sizes.

Here are my final designs, according to screen sizing:
- Desktop
![Desktop](https://user-images.githubusercontent.com/17882264/144693194-6d21185b-313e-48dc-a84b-cfc27956f287.PNG)

- iPadPro
![iPadPro](https://user-images.githubusercontent.com/17882264/144693202-4b05f969-e9e1-43a2-badc-7feed1c7d8fd.PNG)

- Ipad
![Ipad](https://user-images.githubusercontent.com/17882264/144693210-99825b38-705c-40b0-992e-15778a7e6268.PNG)

- iPhoneX
![IPhoneX](https://user-images.githubusercontent.com/17882264/144693218-e8f5fd73-752d-4ed9-a4c4-31feca6b4d28.PNG)

One thing that I wanted to challenges myself with was to expand my CSS knowledge, and working on this pull request has really helped out with that front. After many different code changes, playing around with the CSS media queries.

- CSS media queries:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/go11hgmmbzzr89uheeqe.png)

I am actually pretty proud of the work that I have achieved in the pull request, as it has expanded my knowledge of CSS, and how everything works within it, and I know that these newly developed skills will come in handy in my future!

For the next week, I will start work on my next [issue](https://github.com/meshery/meshery.io/issues/605), and I will be back with another blog update, showing you guys the progress that I have achieved!
Hosting a SOCKS5 Proxy on GitHub Actions
Tags: actionshackathon21, socks5, proxy, actions
Published: 2021-12-05 16:47:53

### My Workflow
Since GitHub Actions is an IaaS, and Actions Hackathon 2021 allows Wacky Wildcards, I wonder if I can use it as a proxy and view the internet from the perspective of GitHub's servers. So I created a proof of concept SOCKS5 proxy hosted on GitHub Actions.

As GitHub Actions runners are firewalled from incoming connections, what I did is connect to it through Cloudflare Tunnel. And as Cloudflare Tunnel can't tunnel TCP connections (we can use Ngrok but that's for another story), we tunnel SOCKS5 through websockets using Chisel.

Here you can see that I'm browsing the internet using Microsoft's IP address.
![IP address check 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ycv3ftzsorlq3iicqqoo.png)
![IP address check 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b20zkk3b9xhbcrw2kzbv.png)
![IP address check 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j3xo20p56h7kbla93u2f.png)

Here you can see a speed test from my 45 mbps internet connection.
![Speed test](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fsqj0nim7udjsbge2cir.png)
This action can also be used as a VPN.

### Submission Category: 
Wacky Wildcards

### Yaml File or Link to Code
```
name: Host Chisel SOCKS5 Proxy
on:
  workflow_dispatch:
    inputs:
      time-duration:
        description: Time to run chisel
        required: true
        default: 10m
        
jobs:
  socks5-proxy:
    runs-on: ubuntu-latest
    steps:
      - name: Install chisel
        working-directory: ${{ runner.temp }}
        env:
          version: 1.7.6
        run: |
          aria2c -x 16 "https://github.com/jpillora/chisel/releases/latest/download/chisel_${version}_linux_amd64.gz"
          gzip -d chisel_${version}_linux_amd64.gz
          mv chisel_${version}_linux_amd64 /usr/local/bin/chisel
          chmod +x /usr/local/bin/chisel
          
      - name: Setup Cloudflare Tunnel client
        uses: AnimMouse/setup-cloudflared@v1
        with:
          cloudflare_tunnel_certificate: ${{ secrets.CLOUDFLARE_TUNNEL_CERTIFICATE }}
          cloudflare_tunnel_credential: ${{ secrets.CLOUDFLARE_TUNNEL_CREDENTIAL }}
          cloudflare_tunnel_configuration: ${{ secrets.CLOUDFLARE_TUNNEL_CONFIGURATION }}
          cloudflare_tunnel_id: ${{ secrets.CLOUDFLARE_TUNNEL_ID }}
          
      - name: Run chisel
        run: timeout "${{ github.event.inputs.time-duration }}" chisel server --socks5 || true
        
      - name: Shutdown and view logs of Cloudflare Tunnel
        if: always()
        uses: AnimMouse/setup-cloudflared/shutdown@v1
```
{% github https://github.com/AnimMouse/SOCKS5-proxy-actions %}

### Additional Resources / Info
{% github https://github.com/AnimMouse/setup-cloudflared %}
{% github https://github.com/jpillora/chisel %}
My Coding Bootcamp Odyssey - Week 7
Tags: beginners, webdev, codenewbie
Published: 2021-12-05 16:46:19

We’ve just finished the most satisfying week of the course so far IMHO. 

It has been a week long sprint to build an  [API](https://en.wikipedia.org/wiki/API)  for a Postgres database from scratch using test driven development (TDD). 

There were a few new topics introduced, such as:

- Intro to async-await
- Advanced error handling
- Hosting with Heroku
- CI/CD (continuous integration/continuous deployment)
- Using GitHub actions to create a pipeline

The main focus of the week was to build the API using full TDD and implementing the M & C of the  [MVC](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller) programming paradigm.

The week started slowly. It was a case of remembering our learning from the previous two weeks, consulting notes, Googling, asking tutors and fellow students to try and put a structure in place and start creating endpoints. Once the first one was done, tested and working, things speeded up a bit as I got in the swing.

Once again the value of TDD was at the fore - guiding my development progress, step-by-step. 🟥 Red 🟩 Green 🔁 Refactor is carved into my soul!

Come Friday afternoon I had reached the specified 🛑 stop point and I submitted my repo for code review by the tutors. It came back quickly and the first comment was 
> 
Really nice work!

I was over the moon with those three words and also the 5 pages of feedback that followed. I could use this to further develop my API to make it something to be proud of and "portfolio ready". Time to relax (for a little while!), that will be a job for the Christmas break over mulled wine and mince pies 😜.

The  [repo is on GitHub](https://github.com/Web-Dev-Rich/webdevrich-news) and includes instructions on how to find details of the endpoints and install it yourself.

So the next 3 weeks are dedicated to front end. We will be building a front end for our API. I cannot wait to bring it all together in a full-stack web app. This will set us up perfectly for the final project phase.

There is a long way to go but the end is in sight!