DEV Community: JPBlancoDB

Javascript Fundamentals Series: Blocks

JPBlancoDB — Sun, 28 Jun 2020 22:28:23 +0000

In this series, I'm going to explain the fundamentals of javascript.

In this post, we are going to learn more about Blocks.

Blocks

Let's read the definition by Mozilla - MDN

A block statement (or compound statement in other languages) is used to group zero or more statements. The block is delimited by a pair of braces ("curly brackets") and may optionally be labelled

In other words, a block is everything between {}

{ // block started
   var foo = "bar";
} // block ended

console.log(foo); // logs "bar"

It is important to mention that the block doesn't create a scope, so in our small example, foo variable is still accessible from outside the block, that is why we could log the variable with console.log(foo);. We'll see later in this post more about the scope.

This example is also valid:

function demo() {
   // first block
   { 
      var foo = "bar";
   }

   // second block
   {
      console.log(foo);
   }
}

Now, whenever we invoke demo(), we'll see that "bar" is logged in the console. Give it a try 💪!

It is worth mentioning, that we hardly ever gonna see this kind of snippet in a real-world app, please don't write functions with multiple blocks like I just did. This was only for demonstration purposes.

So, if blocks are not used as in the example above, why we need them? Well, the blocks are also the way we have to declare several statements "attached" to a conditional, loop, etc.

if (condition) {
  // this is a block
}

while (condition) {
  // this is a block
}

That’s it! If you have any doubt don’t hesitate to leave your comments or ask me via Twitter.

In the next post of this series, we're going to learn about functions 😎. Stay tuned!

Testing Svelte components with Jest

JPBlancoDB — Tue, 26 Nov 2019 18:47:22 +0000

I haven't found much information about how to test svelte components, so continuing with my previous article about creating a blog with Svelte, I will now explain how to test it. We are going to use Jest, Testing Library and jest-dom

Let's start by installing the required dependencies:

npm i @babel/core @babel/preset-env jest babel-jest -D
npm i jest-transform-svelte @testing-library/svelte @testing-library/jest-dom -D

Now, we need to create a jest.config.js and babel.config.js at the root folder of our project (more about jest configuration: Jest Configuration)

//jest.config.js
module.exports = {
  transform: {
    "^.+\\.svelte$": "jest-transform-svelte",
    "^.+\\.js$": "babel-jest"
  },
  moduleFileExtensions: ["js", "svelte"],
  testPathIgnorePatterns: ["node_modules"],
  bail: false,
  verbose: true,
  transformIgnorePatterns: ["node_modules"],
  setupFilesAfterEnv: ["@testing-library/jest-dom/extend-expect"]
};

//babel.config.js
module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        targets: {
          node: "current"
        }
      }
    ]
  ]
};

Finally, we should add into the scripts section of package.json the following:

"test": "jest src",
"test:watch": "npm run test -- --watch"

Result:

//package.json
"scripts": {
    "dev": "sapper dev",
    "build": "sapper build",
    "export": "sapper export --legacy",
    "start": "node __sapper__/build",
    "test": "jest src",
    "test:watch": "npm run test -- --watch"
},

Done! We can start writing our tests, let's create our first one 💪! You could create all your tests together within the same folder __tests__ but I rather prefer to have my tests in the same folder of the component, so I will create an index.spec.js in src/routes/ folder:

//index.spec.js
import { render } from "@testing-library/svelte";
import Index from "./index.svelte";

describe("index component", () => {
  test("should render component correctly", () => {
    const { container } = render(Index);

    expect(container).toContainHTML("<div></div>");
  });
});

Awesome 😎! We have our first test! But, what happened? Yes, it is failing with TypeError: Cannot read property 'length' of undefined, because is not triggering the preload, so our articles variable is not defined. What we could do is pass an empty array of articles as props.

test("should render component correctly", () => {
  const { container } = render(Index, {
    props: {
      articles: []
    }
  });

  expect(container).toContainHTML("<div></div>");
});

Great! Now is passing. But we are not really testing our component, so what we could do now is actually pass an article, so let's create a new test:

//index.spec.js
test("should render articles", () => {
  const title = "My title";
  const description = "some description";
  const readable_publish_date = "10 Oct";
  const canonical_url = "url";
  const { container, getByText } = render(Index, {
    props: {
      articles: [
        {
          title,
          canonical_url,
          readable_publish_date,
          description
        }
      ]
    }
  });

  expect(container.querySelector("a").href).toBe(
    `http://localhost/${canonical_url}`
  );
  expect(getByText(title)).toBeInTheDocument();
  expect(getByText(readable_publish_date)).toBeInTheDocument();
  expect(getByText(description)).toBeInTheDocument();
});

Again! The same error but now because of the tags! Should we validate that tags is not undefined before doing the each? Or this is not possible? In my opinion, I think validating this is not necessary as the api returns an empty array of tags in case is empty, so we should only fix our test by adding an empty array of tags.

//index.spec.js
test("should render articles", () => {
  const title = "My title";
  const description = "some description";
  const readable_publish_date = "10 Oct";
  const canonical_url = "url";
  const { container, getByText } = render(Index, {
    props: {
      articles: [
        {
          title,
          canonical_url,
          readable_publish_date,
          description,
          tag_list: []
        }
      ]
    }
  });

  expect(container.querySelector("a").href).toBe(
    `http://localhost/${canonical_url}`
  );
  expect(getByText(title)).toBeInTheDocument();
  expect(getByText(readable_publish_date)).toBeInTheDocument();
  expect(getByText(description)).toBeInTheDocument();
});

Finally, we could test that the tags render properly:

//index.spec.js
test("should render articles with tags", () => {
  const { getByText } = render(Index, {
    props: {
      articles: [
        {
          tag_list: ["my-tag"]
        }
      ]
    }
  });

  expect(getByText("#my-tag")).toBeInTheDocument();
});

Done! Now that we have our tests, you could refactor our component into smaller pieces, for example, you could extract a card component or also a Tags.svelte, try it! Let me know how it went in a comment! I would like to see the end results of your own blog app!

If you have any question or suggestion, leave a comment or contact me via Twitter

Create a blog with Svelte and DEV.to API

JPBlancoDB — Sun, 24 Nov 2019 21:50:37 +0000

We are going to create a Blog using dev.to API for retrieving our posts and finally deploy it with Now.

Demo: https://jpblanco.dev
Source: https://github.com/JPBlancoDB/svelte-blog

First step: Scaffolding our app.

Let's scaffold our new project with Sapper by cloning their repo as their official guide dictates:

npx degit "sveltejs/sapper-template#rollup" my-app
# or: npx degit "sveltejs/sapper-template#webpack" my-app
cd my-app
npm install
npm run dev

In this case, I've chosen webpack but it is really up to you. This is not going to affect the rest of the post neither I'm going to explain differences between bundlers.

Then, it would be:

npx degit "sveltejs/sapper-template#webpack" svelte-blog
cd svelte-blog
npm install
npm run dev

If we go to http://localhost:3000 we should see that everything is working as expected (and also Borat 😂).

Lastly, let's remove all the files we are not going to use (at least, it is not within this article).

rm -rf cypress cypress.json src/components/Nav.svelte src/routes/blog/ src/routes/about.svelte

Second step: Fix the base template

As we've removed src/components/Nav.svelte, we should fix the layout by removing the dependency in our _layout.svelte file.

<style>
  main {
    position: relative;
    max-width: 56em;
    background-color: white;
    padding: 2em;
    margin: 0 auto;
    box-sizing: border-box;
  }
</style>

<main>
  <slot />
</main>

And we could also add a global title for our blog, this could be achieved by adding svelte:head tag to our component:

<svelte:head>
  <title>Juan Pablo Blanco - Blog</title>
</svelte:head>

The svelte:head element allows you to insert elements inside the <head> of your document.

You could read more about svelte:head in the official doc: Svelte Head

So the end result would be:

<style>
  main {
    position: relative;
    max-width: 56em;
    background-color: white;
    padding: 2em;
    margin: 0 auto;
    box-sizing: border-box;
  }
</style>

<svelte:head>
  <title>Juan Pablo Blanco - Blog</title>
</svelte:head>

<main>
  <slot />
</main>

Third step: Home template

This blog is going to be really simple and we only need an index. My idea behind this is just to fetch the article's summary from the API and then show these in our home with a link to dev.to.

I've created a quick wireframe using Wireframe as reference:

So, let's start by doing the template for our articles:

//src/routes/index.svelte

<a href="/">
  Oct 10
  <h1>Svelte Create the Blog</h1>

  <div class="tags">
    <span class="tag">#svelte</span>
    <span class="tag">#javascript</span>
  </div>

  <p>How to create a blog using dev.to API and svelte</p>

  <img
    alt="Reactions"
    src="https://practicaldev-herokuapp-com.freetls.fastly.net/assets/reactions-stack-ee166e138ca182a567f74c986b6f810f670f4d199aca9c550cc7e6f49f34bd33.png" />
  <span>10</span>

  <img
    alt="Comments"
    src="https://practicaldev-herokuapp-com.freetls.fastly.net/assets/comments-bubble-9958d41b969a1620c614347d5ad3f270ab49582c1d9f82b617a6b4156d05dda0.png" />
  <span>3</span>

</a>

You will notice that is not the same as our wireframe. Let's add some CSS to our template.

<style>
  a {
    text-decoration: none;
  }
  .card {
    padding: 20px;
    margin-bottom: 10px;
    border: 2px solid #bababa;
    box-shadow: 3px 3px 0px #bababa;
  }
  .tags {
    margin: 10px 0;
  }
  .tag {
    border-radius: 100px;
    background-color: #eaeaea;
    padding: 2px 8px;
    margin-right: 10px;
  }

  @media (max-width: 640px) {
    .tag {
      margin-right: 5px;
      font-size: 0.6rem;
    }
  }
  .article-engagement {
    margin-right: 20px;
  }
  .article-engagement img {
    height: 20px;
    min-width: 26px;
    vertical-align: -5px;
  }
  .flex-container {
    display: flex;
  }
</style>

<a href="/">
  <div class="card">
    Nov 24
    <h1>Create a blog with Svelte and DEV.to API</h1>

    <div class="tags">
      <span class="tag">#svelte</span>
      <span class="tag">#javascript</span>
      <span class="tag">#tutorial</span>
      <span class="tag">#blog</span>
    </div>

    <p>How to create a blog using dev.to API and svelte</p>

    <div class="flex-container">
      <div class="article-engagement">
        <img
          alt="Reactions"
          src="https://practicaldev-herokuapp-com.freetls.fastly.net/assets/reactions-stack-ee166e138ca182a567f74c986b6f810f670f4d199aca9c550cc7e6f49f34bd33.png" />
        <span>10</span>
      </div>

      <div class="article-engagement">
        <img
          alt="Comments"
          src="https://practicaldev-herokuapp-com.freetls.fastly.net/assets/comments-bubble-9958d41b969a1620c614347d5ad3f270ab49582c1d9f82b617a6b4156d05dda0.png" />
        <span>3</span>
      </div>

    </div>
  </div>
</a>

Ok, I think now is better.

Fourth step: Get articles from the API

Let's use DEV.to API for fetching all our articles, this way we are going to publish our posts in DEV.to platform and automatically is going to be shown in our blog 💪 😎.

We could find documentation on how to use the API here: Docs API

For summarize, if we only want to fetch articles we could just do a GET request without any extra authentication or step:

curl https://dev.to/api/articles?username=jpblancodb

The API response is:

[
  {
    "type_of": "article",
    "id": 194541,
    "title": "There's a new DEV theme in town for all you 10x hackers out there (plus one actually useful new feature)",
    "description": "",
    "cover_image": "https://res.cloudinary.com/practicaldev/image/fetch/s--74Bl23tz--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://res.cloudinary.com/practicaldev/image/fetch/s--xU8cbIK4--/c_imagga_scale%2Cf_auto%2Cfl_progressive%2Ch_420%2Cq_auto%2Cw_1000/https://thepracticaldev.s3.amazonaws.com/i/8a39dzf3oovzc2snl7iv.png",
    "readable_publish_date": "Oct 24",
    "social_image": "https://res.cloudinary.com/practicaldev/image/fetch/s--SeMxdKIa--/c_imagga_scale,f_auto,fl_progressive,h_500,q_auto,w_1000/https://res.cloudinary.com/practicaldev/image/fetch/s--xU8cbIK4--/c_imagga_scale%2Cf_auto%2Cfl_progressive%2Ch_420%2Cq_auto%2Cw_1000/https://thepracticaldev.s3.amazonaws.com/i/8a39dzf3oovzc2snl7iv.png",
    "tag_list": [
      "meta",
      "changelog",
      "css",
      "ux"
    ],
    "tags": "meta, changelog, css, ux",
    "slug": "there-s-a-new-dev-theme-in-town-for-all-you-10x-hackers-out-there-plus-one-actually-useful-new-feature-2kgk",
    "path": "/devteam/there-s-a-new-dev-theme-in-town-for-all-you-10x-hackers-out-there-plus-one-actually-useful-new-feature-2kgk",
    "url": "https://dev.to/devteam/there-s-a-new-dev-theme-in-town-for-all-you-10x-hackers-out-there-plus-one-actually-useful-new-feature-2kgk",
    "canonical_url": "https://dev.to/devteam/there-s-a-new-dev-theme-in-town-for-all-you-10x-hackers-out-there-plus-one-actually-useful-new-feature-2kgk",
    "comments_count": 37,
    "positive_reactions_count": 142,
    "collection_id": null,
    "created_at": "2019-10-24T13:41:29Z",
    "edited_at": "2019-10-24T13:56:35Z",
    "crossposted_at": null,
    "published_at": "2019-10-24T13:52:17Z",
    "last_comment_at": "2019-10-25T08:12:43Z",
    "published_timestamp": "2019-10-24T13:52:17Z",
    "user": {
      "name": "Ben Halpern",
      "username": "ben",
      "twitter_username": "bendhalpern",
      "github_username": "benhalpern",
      "website_url": "http://benhalpern.com",
      "profile_image": "https://res.cloudinary.com/practicaldev/image/fetch/s--Y1sq1tFG--/c_fill,f_auto,fl_progressive,h_640,q_auto,w_640/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/1/f451a206-11c8-4e3d-8936-143d0a7e65bb.png",
      "profile_image_90": "https://res.cloudinary.com/practicaldev/image/fetch/s--DcW51A6v--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/1/f451a206-11c8-4e3d-8936-143d0a7e65bb.png"
    },
    "organization": {
      "name": "The DEV Team",
      "username": "devteam",
      "slug": "devteam",
      "profile_image": "https://res.cloudinary.com/practicaldev/image/fetch/s--0kDBq1Ne--/c_fill,f_auto,fl_progressive,h_640,q_auto,w_640/https://thepracticaldev.s3.amazonaws.com/uploads/organization/profile_image/1/0213bbaa-d5a1-4d25-9e7a-10c30b455af0.png",
      "profile_image_90": "https://res.cloudinary.com/practicaldev/image/fetch/s--8tTU-XkZ--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://thepracticaldev.s3.amazonaws.com/uploads/organization/profile_image/1/0213bbaa-d5a1-4d25-9e7a-10c30b455af0.png"
    }
  }
]

Let's add this API call into our index.svelte to fetch all our articles by adding a script tag:

<script context="module">
  export async function preload() {
    const res = await this.fetch(
      `https://dev.to/api/articles?username=jpblancodb`
    );
    return { articles: await res.json() };
  }
</script>

<script>
  export let articles;
</script>

We are using preload, this loads data before the component gets rendered, then we return { articles } and this is going to be passed as a prop to the component export let articles;

More about preload: Sapper preload

From the response of the API we are only going to use the following properties:

[
  {
    "title": "There's a new DEV theme in town for all you 10x hackers out there (plus one actually useful new feature)",
    "description": "",
    "readable_publish_date": "Oct 24",
    "tag_list": [
      "meta",
      "changelog",
      "css",
      "ux"
    ],
    "canonical_url": "https://dev.to/devteam/there-s-a-new-dev-theme-in-town-for-all-you-10x-hackers-out-there-plus-one-actually-useful-new-feature-2kgk",
    "comments_count": 37,
    "positive_reactions_count": 142
  }
]

Finally, we need to make our template dynamic.

<script context="module">
  export async function preload() {
    const res = await this.fetch(
      `https://dev.to/api/articles?username=jpblancodb`
    );
    return { articles: await res.json() };
  }
</script>

<script>
  export let articles;
</script>

<style>
  a {
    text-decoration: none;
  }
  .card {
    padding: 20px;
    margin-bottom: 10px;
    border: 2px solid #bababa;
    box-shadow: 3px 3px 0px #bababa;
  }
  .tags {
    margin: 10px 0;
  }
  .tag {
    border-radius: 100px;
    background-color: #eaeaea;
    padding: 2px 8px;
    margin-right: 10px;
  }
  .article-engagement {
    margin-right: 20px;
  }
  .article-engagement img {
    height: 20px;
    min-width: 26px;
    vertical-align: -5px;
  }
  @media (max-width: 640px) {
    .tag {
      margin-right: 5px;
      font-size: 0.6rem;
    }
  }
</style>

{#each articles as article}
  <a href={article.canonical_url}>
    <div class="card">
      {article.readable_publish_date}
      <h1>{article.title}</h1>

      <div class="tags">
        {#each article.tag_list as tag}
          <span class="tag">#{tag}</span>
        {/each}
      </div>

      <p>{article.description}</p>

      <div class="flex-container">
        <div class="article-engagement">
          <img
            alt="Reactions"
            src="https://practicaldev-herokuapp-com.freetls.fastly.net/assets/reactions-stack-ee166e138ca182a567f74c986b6f810f670f4d199aca9c550cc7e6f49f34bd33.png" />
          <span>{article.positive_reactions_count}</span>
        </div>

        <div class="article-engagement">
          <img
            alt="Comments"
            src="https://practicaldev-herokuapp-com.freetls.fastly.net/assets/comments-bubble-9958d41b969a1620c614347d5ad3f270ab49582c1d9f82b617a6b4156d05dda0.png" />
          <span>{article.comments_count}</span>
        </div>

      </div>
    </div>
  </a>
{/each}

Let's modify our global.css for customizing our styles;

body {
  margin: 0;
  font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}
h1 {
  margin: 0;
  font-weight: 400;
  line-height: 1.2;
  font-size: 2rem;
}
p {
  font-size: 1.2rem;
}
a {
  color: inherit;
  text-decoration: none;
}
.flex-container {
  display: flex;
}
@media (max-width: 640px) {
  body {
    font-size: 14px;
  }
  h1 {
    font-size: 1.2rem;
    margin: 0;
  }
  p {
    font-size: 0.9rem;
    line-height: normal;
  }
}

Fifth step: Adding a header to our template

For getting our blog ready, we could add a header with our name, description. As this is going to be static, you could just add whatever you prefer. Here is mine! If you want to share yours, you could do it in the comments section 😃!

//src/components/Header.svelte
<style>
  header {
    padding: calc(1.4vw + 8px) 0px;
    position: relative;
    overflow: hidden;
    width: 72em;
    max-width: 92%;
    margin: 30px auto 20px;
    background: #fff;
    background: var(--theme-container-background, #fff);
    border-radius: 3px;
    border: 2px solid #551029;
    box-shadow: 5px 6px 0px #551029;
  }
  .profile {
    display: flex;
    align-items: center;
    margin: 0 20px;
  }
  .profile-image {
    background: #61122f;
    width: calc(12.2vw + 50px);
    height: calc(12.2vw + 50px);
    border-radius: 200px;
    max-width: 220px;
    max-height: 220px;
    border: 4px solid #61122f;
  }
  .icon-img {
    margin-right: 1em;
    width: 35px;
    height: 35px;
  }
  .profile-description {
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
  .role {
    font-style: italic;
    font-size: 1.4rem;
    margin: 10px 0;
    color: #999999;
  }
  .social {
    margin-top: 25px;
    color: #61122f;
  }
  h1 {
    color: #61122f;
    font-weight: 600;
  }
  @media (max-width: 640px) {
    .role {
      font-size: 1rem;
    }
    .social {
      margin-top: 5px;
    }
    .icon-img {
      margin-right: 1em;
      width: 25px;
      height: 25px;
    }
  }
</style>

<header>
  <div class="flex-container">
    <div class="profile">
      <img
        class="profile-image"
        src="https://res.cloudinary.com/practicaldev/image/fetch/s--122RH5V_--/c_fill,f_auto,fl_progressive,h_320,q_auto,w_320/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/16453/b219d515-8ee9-4f1d-9541-e4e49ce8d066.png"
        alt="jpblancodb profile" />
    </div>
    <div class="profile-description">
      <h1>Juan Pablo Blanco</h1>
      <span class="role">Software Developer</span>
      <div class="social">
        <a href="https://twitter.com/jpblancodb" target="_blank">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 612 612"
            role="img"
            aria-labelledby="a3nwio0iehsz7gmmysvll02oakahlvob"
            class="icon-img">
            <title id="a3nwio0iehsz7gmmysvll02oakahlvob">Twitter logo</title>
            <path
              d="M612 116.258c-22.525 9.98-46.694 16.75-72.088 19.772
              25.93-15.527 45.777-40.155 55.184-69.41-24.322 14.378-51.17
              24.82-79.775 30.48-22.906-24.438-55.49-39.66-91.63-39.66-69.333
              0-125.55 56.218-125.55 125.514 0 9.828 1.11 19.427 3.25
              28.606-104.325-5.24-196.834-55.223-258.75-131.174-10.822
              18.51-16.98 40.078-16.98 63.1 0 43.56 22.182 81.994 55.836
              104.48-20.575-.688-39.926-6.348-56.867-15.756v1.568c0 60.806 43.29
              111.554 100.692 123.104-10.517 2.83-21.607 4.398-33.08 4.398-8.107
              0-15.947-.803-23.634-2.333 15.985 49.907 62.336 86.2 117.253
              87.194-42.946 33.655-97.098 53.656-155.915 53.656-10.134
              0-20.116-.612-29.944-1.72 55.568 35.68 121.537 56.484 192.44
              56.484 230.947 0 357.187-191.29 357.187-357.188l-.42-16.253C573.87
              163.525 595.21 141.42 612 116.257z" />
          </svg>
        </a>
        <a href="https://github.com/jpblancodb" target="_blank">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="438.549"
            height="438.549"
            viewBox="0 0 438.549 438.549"
            role="img"
            aria-labelledby="a9umsuhtdvycvrsulea35mewfzunyupy"
            class="icon-img">
            <title id="a9umsuhtdvycvrsulea35mewfzunyupy">GitHub logo</title>
            <path
              d="M409.132
              114.573c-19.608-33.596-46.205-60.194-79.798-79.8C295.736 15.166
              259.057 5.365 219.27 5.365c-39.78 0-76.47 9.804-110.062
              29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0
              184.853 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164
              63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.42-1.996
              2.474-2.282 3.71-5.14 3.71-8.562
              0-.57-.05-5.708-.144-15.417-.098-9.71-.144-18.18-.144-25.406l-6.567
              1.136c-4.187.767-9.47 1.092-15.846
              1-6.375-.09-12.992-.757-19.843-2-6.854-1.23-13.23-4.085-19.13-8.558-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.9-9.233-8.992-14.56-4.093-5.33-8.232-8.944-12.42-10.847l-1.998-1.43c-1.332-.952-2.568-2.1-3.71-3.43-1.143-1.33-1.998-2.663-2.57-3.997-.57-1.335-.097-2.43
              1.428-3.29 1.525-.858 4.28-1.275 8.28-1.275l5.708.853c3.807.763
              8.516 3.042 14.133 6.85 5.615 3.807 10.23 8.755 13.847 14.843 4.38
              7.807 9.657 13.755 15.846 17.848 6.184 4.093 12.42 6.136 18.7
              6.136 6.28 0 11.703-.476 16.273-1.423 4.565-.95 8.848-2.382
              12.847-4.284 1.713-12.758 6.377-22.56
              13.988-29.41-10.847-1.14-20.6-2.857-29.263-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.98-3.9-12.373-5.852-26.647-5.852-42.825
              0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.38-36.732
              1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.284 18.794
              7.953 23.84 10.995 5.046 3.04 9.09 5.618 12.135 7.708 17.706-4.947
              35.977-7.42 54.82-7.42s37.116 2.473 54.822
              7.42l10.85-6.85c7.418-4.57 16.18-8.757 26.26-12.564 10.09-3.806
              17.803-4.854 23.135-3.14 8.562 21.51 9.325 40.923 2.28 58.24
              15.035 16.18 22.558 35.788 22.558 58.818 0 16.178-1.958
              30.497-5.853 42.966-3.9 12.47-8.94 22.457-15.125 29.98-6.19
              7.52-13.9 13.85-23.13 18.985-9.233 5.14-18.183 8.85-26.84
              11.135-8.663 2.286-18.416 4.004-29.264 5.146 9.894 8.563 14.842
              22.078 14.842 40.54v60.237c0 3.422 1.19 6.28 3.572 8.562 2.38
              2.278 6.136 2.95 11.276 1.994 44.163-14.653 80.185-41.062
              108.068-79.226 27.88-38.16 41.826-81.126
              41.826-128.906-.01-39.77-9.818-76.454-29.414-110.05z" />
          </svg>
        </a>
        <a href="https://dev.to/jpblancodb">
          <img
            class="icon-img"
            src="https://d2fltix0v2e0sb.cloudfront.net/dev-badge.svg"
            alt="JPBlancoDB's DEV Profile" />
        </a>
      </div>
    </div>
  </div>
</header>

We need to create a Header.svelte component in src/components and then we should import it into our src/routes/_layout.svelte

<script>
  import Header from "../components/Header.svelte";
</script>

<style>
  main {
    position: relative;
    max-width: 56em;
    background-color: white;
    padding: 2em;
    margin: 0 auto;
    box-sizing: border-box;
  }
</style>

<svelte:head>
  <title>Juan Pablo Blanco - Blog</title>
</svelte:head>

<Header />

<main>
  <slot />
</main>

Bonus: Error template

As bonus track (and optional), when any error occurs let's show our Borat image with the error message:

//src/routes/_error.svelte
<script>
  export let status;
  export let error;

  const dev = process.env.NODE_ENV === "development";
</script>

<style>
  h1 {
    font-size: 2.8em;
    font-weight: 700;
    margin: 0 0 0.5em 0;
  }

  @media (min-width: 480px) {
    h1 {
      font-size: 4em;
    }
  }
</style>

<h1>{status}</h1>

<figure>
  <img alt="Borat" src="great-success.png" />
  <figcaption>{error.message}</figcaption>
</figure>

{#if dev && error.stack}
  <pre>{error.stack}</pre>
{/if}

For checking this blog running, you could visit my blog: JPBlancoDB

If you have any question, you could leave a comment or ask me via Twitter! I'm happy to help.

ps: I'm using [now](https://zeit.co] and for reference on deploying with v2 Sapper Now v2 demo

Angular series: Creating an authentication service with TDD

JPBlancoDB — Wed, 20 Nov 2019 14:15:15 +0000

Let's continue with the Angular series, now is time for implementing the service for doing the authentication.

The final project could be found in my personal Github: Angular series

If you missed the previous post, we created the Login component.

Angular series: Creating a Login with TDD

JPBlancoDB ・ Nov 18 '19 ・ 8 min read

#angular #tdd #javascript #tutorial

Before starting, let's run our tests and verify that everything is passing:

npm run test

If everything is still green we can continue otherwise, we need to fix it first.

First step: Add a test

Let's start by adding a test in our Login component to assert that after submitting our form, we are going to call the authentication service.

  //login.component.spec.ts
  it('should invoke auth service when form is valid', () => {
    const email = component.form.controls.email;
    email.setValue('test@test.com');
    const password = component.form.controls.password;
    password.setValue('123456');
    authServiceStub.login.and.returnValue(of());

    fixture.nativeElement.querySelector('button').click();

    expect(authServiceStub.login.calls.any()).toBeTruthy();
  });

As you noticed, is broken but don't worry! What happened? We've just added authServiceStub that is not declared and of that is not imported. Let's fix it all.

Import of from rxjs by doing (probably if you use an IDE or vscode, this could be done automatically):

import { of } from 'rxjs';

Now, let's continue by fixing authServiceStub, we need to declare this in our beforeEach:

  //login.component.spec.ts

  const authServiceStub: jasmine.SpyObj<AuthService> = jasmine.createSpyObj(
    'authService',
    ['login']
  );

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [LoginComponent],
      imports: [ReactiveFormsModule],
      providers: [
        {
          provide: AuthService,
          useValue: authServiceStub
        }
      ]
    }).compileComponents();
  }));

Basically, what we are doing here is to use our stub instead of the real service when unit testing our login component.

But, why is it still failing? You're right! Because AuthService does not exist... yet.

We could use schematics for this. So, open your terminal:

ng generate service login/auth

This will generate the auth.service.ts and the base auth.service.spec.ts in our login folder.

Now, is time for importing the created service.

import { AuthService } from './auth.service';

Lastly, we'll see a new error, to fix it, we should add the login method to our authentication service.

//auth.service.ts
login(): Observable<string> {
  throw new Error('not implemented');
}

Done! We should have our failing test 😎! But, you should have an error with your auth.service test. For now, just remove the default test, we are going to come back to this later.

It's time for making our test green:

//login.component.ts
onSubmit() {
  this.submitted = true;

  if (this.form.valid) {
    this.authService.login().subscribe(
      res => console.log(res),
      error => console.log(error)
    );
  }
}

But, as you noticed, we have a green test but this service is not useful if we don't pass as a parameter to the login function the email and the password. What we could do? Yes, a test!

We have two options, or we add an extra assertion to our test or we create a new test to verify that our stub is being called with correct parameters. For simplicity, I will just add an extra assertion, so our test would look like this:

//login.component.spec.ts
it('should invoke auth service when form is valid', () => {
  const email = component.form.controls.email;
  email.setValue('test@test.com');
  const password = component.form.controls.password;
  password.setValue('123456');
  authServiceStub.login.and.returnValue(of());

  fixture.nativeElement.querySelector('button').click();

  expect(authServiceStub.login.calls.any()).toBeTruthy();
  expect(authServiceStub.login).toHaveBeenCalledWith(
    email.value,
    password.value
  );
});

Yep, again to our beautiful red test! Remember our Red, Green, Refactor: The cycles of TDD)

Hands-on! Let's fix it.

//login.component.ts
this.authService
    .login(this.form.value.email, this.form.value.password)
    .subscribe(
       res => console.log(res),
       error => console.log(error)
    );

And we need to add email and password parameters to our login function in the service.

//auth.service.ts
login(email: string, password: string): Observable<string> {
  throw new Error('not implemented');
}

Done! Check that you have all the tests passing. If this is not the case, go back and review the steps or add a comment!

Second step: Authentication Service

It's time for creating our first test in auth.service.spec.ts. One remark, in this case, to avoid confusion I will avoid using jasmine-marbles for testing observables, you could read more here: Cold Observable. But, don't worry I'll write a separate post only for explaining it in deep.

How do we start? Exactly! By creating the test, and here I'll cheat a little bit because I already know that we need HttpClient dependency, so:

//auth.service.spec.ts
import { AuthService } from './auth.service';
import { HttpClient } from '@angular/common/http';
import { of } from 'rxjs';

describe('AuthService', () => {
    it('should perform a post to /auth with email and password', () => {
      const email = 'email';
      const password = 'password';
      const httpClientStub: jasmine.SpyObj<HttpClient> = jasmine.createSpyObj(
        'http',
        ['post']
      );
      const authService = new AuthService(httpClientStub);
      httpClientStub.post.and.returnValue(of());

      authService.login(email, password);

      expect(httpClientStub.post).toHaveBeenCalledWith('/auth', { email, password });
    });
});

This will cause some errors. We first need to inject HttpClient into AuthService:

//auth.service.ts
constructor(private httpClient: HttpClient) {}

Try again! What did you see? Our red test! Once more 😃.
This implementation is quite easy, let's do it:

  //auth.service.ts
  login(email: string, password: string): Observable<string> {
    return this.httpClient.post<string>('/auth', {
      email,
      password
    });
  }

And that is it! We should have our working service with all our tests green! 🎉🎉🎉

If you want to manually try this and to avoid creating the server, we could just add an interceptor (remember to add it as a provider in your app.module):

import { Injectable } from '@angular/core';
import {
  HttpInterceptor,
  HttpEvent,
  HttpHandler,
  HttpRequest,
  HttpResponse,
  HTTP_INTERCEPTORS
} from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { delay } from 'rxjs/operators';

@Injectable()
export class FakeServerInterceptor implements HttpInterceptor {
  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    if (req.url.endsWith('/auth')) {
      return this.authenticate();
    }

    return next.handle(req);
  }

  authenticate(): Observable<HttpResponse<any>> {
    return of(
      new HttpResponse({
        status: 200,
        body: 'jwt-token'
      })
    ).pipe(delay(1000));
  }
}

export const fakeServerProvider = {
  provide: HTTP_INTERCEPTORS,
  useClass: FakeServerInterceptor,
  multi: true
};

Lastly, if you were wondering how to do it with jasmine-marbles, would be something like this:

//auth.service.spec.ts
  it('should perform a post to /auth with email and password', () => {
    const serverResponse = 'jwt-token';
    const email = 'email';
    const password = 'password';
    const httpClientStub: jasmine.SpyObj<HttpClient> = jasmine.createSpyObj(
      'http',
      ['post']
    );
    const authService = new AuthService(httpClientStub);
    httpClientStub.post.and.returnValue(cold('a', {a: serverResponse}));

    const response = authService.login(email, password);

    expect(response).toBeObservable(cold('a', {a: serverResponse}));
    expect(httpClientStub.post).toHaveBeenCalledWith('/auth', { email, password });
  });

If you have any doubt you could add a comment or ask me via Twitter

Configurando LetsEncrypt con Apache en Debian

JPBlancoDB — Tue, 19 Nov 2019 07:55:29 +0000

Siguiendo con el post LetsEncrypt en Nginx vamos a ver como configurarlo con Apache en Debian.

Configurando LetsEncrypt con Nginx en Ubuntu

JPBlancoDB ・ Nov 7 '19

#letsencrypt #nginx #linux #servers

Instalamos certbot en el servidor:

echo 'deb http://ftp.debian.org/debian jessie-backports main' | sudo tee /etc/apt/sources.list.d/backports.
sudo apt-get update
sudo apt-get install python-certbot-apache -t jessie-backports

Configuramos el ServerName de Apache

sudo nano /etc/apache2/sites-available/000-default.conf

Tener en cuenta que 000-default.conf es la configuración por defecto de Apache pero si tienen otro archivo de configuración, deben configurar el ServerName y ServerAlias según corresponda dentro del tag

    ServerName dominio.com
    ServerAlias www.dominio.com

Reiniciamos Apache:

sudo systemctl restart apache2

Configuramos el firewall:

Ejemplo ufw:

sudo ufw allow 'WWW Full'

Ejemplo iptables:

sudo iptables -I INPUT -p tcp --dport 443 -j ACCEPT

Generamos el certificado con certbot:

sudo certbot --apache

Listo! Ya tenemos configurado nuestro certificado con LetsEncrypt y Apache. Recuerden que el certificado hay que renovarlo, para ver el instructivo de como se configura la renovación automática pueden verlo en el paso 5) de Configurando LetsEncrypt con Nginx en Ubuntu.

Cualquier duda o consulta no duden en dejar sus comentarios o bien me pueden consultar vía Twitter.

Saludos!

How to make an API with dotnet core

JPBlancoDB — Mon, 18 Nov 2019 17:21:33 +0000

The goal of this post is to explain the purposes of the most important stuff going on in the process of creating an API for a blog. One consideration before starting is that I'm using netcore 2.2 at the moment of writing this post. If you use netcore 3.0 or higher, you are going to have a different controller created from scratch but the explanation on what the annotations mean is the same.

Initializing the project:

Let's create the project:

dotnet new webapi -n BlogApi

Create .sln file:

dotnet new sln -n BlogApi
dotnet sln add BlogApi/BlogApi.csproj

Create respective folders for unit tests and integration tests (we are going to put hands on this within the upcoming posts):

dotnet new xunit -n BlogApi.UnitTests
dotnet new xunit -n BlogApi.IntegrationTests
dotnet sln add BlogApi.UnitTests/BlogApi.UnitTests.csproj
dotnet sln add BlogApi.IntegrationTests/BlogApi.IntegrationTests.csproj

We are going to delete wwwroot since we won’t be going to use it. If you are using an IDE like Rider, you can just delete the folder, but if you are using Visual Studio Code you need to remove the reference from BlogApi.csproj.

<ItemGroup>
  <Folder Include="wwwroot\" />
</ItemGroup>

We are now ready to start putting hands on. Let’s go to the ValuesController.

[Route("api/[controller]")]
public class ValuesController : Controller

Before declaring the class, we have this Route annotation. In case you don’t know what it means, it is the route where you can access that controller. For example, in this case, we have:

[Route("api/[controller]")]

So, to access that controller you must go to:

http://whatever-your-url.com/api/values

And here, the important thing that we're interested in is /api/values. You can notice there that [controller] is a variable defined by NetCore and it is going to get the name of the controller. For example, if you have “PostsController” then, in this case, [controller] = posts. But, you can always define the route yourself as for example: [Route("this-is-my-route")] then your endpoint to access this controller will be:

http://whatever-your-url.com/this-is-my-route

Let’s go to our methods.

[HttpGet]
public IEnumerable<string> Get()
{
  return new string[] { "value1", "value2" };
}

The first method begins with [HttpGet], which is the verb of the method. Therefore, we can also have: [HttpGet], [HttpPost], [HttpPut], [HttpDelete], [HttpPatch] and [HttpOptions].

What if we want to specify the explicit action in the url?

In this case, we can add a parameter to this annotation with the “name”. If we have [HttpGet("my-action")] then to access this method we have to go to:

http://whatever-your-url.com/api/values/my-action

Also, we could have [HttpGet("[action]")] (as we have with [controller]) and then it will take the name of the method. For example, let’s take the original example again:

[HttpGet("[action]")]
public IEnumerable<string> Get()
{
  return new string[] { "value1", "value2" };
}

To have access to it, we need to go to:

http://whatever-your-url.com/api/values/get

Lastly, we could receive variables to our methods included an object.

[HttpPut("{id}")]
public void Put(int id, [FromBody]string value)
{
}

In this example, we have [HttpPut("{id}")] whatever goes between curly brackets is a variable, so here we have to make a PUT request to:

http://whatever-your-url.com/api/values/1

Being in this case, id = 1. In addition, we can also send objects in the body of the request. In this case, to access the body we need [FromBody] as well as [FromQuery] to access whatever we send in the querystring.

That’s it! If you have any doubt don’t hesitate to leave your comments or ask me via Twitter.

Angular series: Creating a Login with TDD

JPBlancoDB — Mon, 18 Nov 2019 14:55:16 +0000

Let's create a Login page with Angular and TDD. The final project could be found in my personal Github: Angular series

First step: Creating the project

Let's start by creating a new angular project:

ng new [project-name]

In my case, I created ng new angular-series and then select with routing and your file style extension of preference.

An equivalent alternative would be just adding the respective options:

ng new angular-series --style=css --routing

More options of the CLI could be found in the official docs: ng new

Now, if we run npm start we should everything working, and npm run test we should also see 3 tests passing.

Second step: App Component

Our goal is going to show our login page, so let's modify the current tests to reflect our intention:

We should remove the tests from src/app/app.component.spec.ts that no longer make sense:

it(`should have as title 'angular-series'`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;

    expect(app.title).toEqual('angular-series');
});

it('should render title', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;

    expect(compiled.querySelector('.content span').textContent)
      .toContain('angular-series app is running!');
});

And replace it with:

it('should have router-outlet', () => {
    const fixture = TestBed.createComponent(AppComponent);

    expect(fixture.nativeElement.querySelector('router-outlet')).not.toBeNull();
});

This way we expect that our app.component has <router-outlet></router-outlet> defined, and this is needed for the router to inject other components there. More information: Router Outlet

If you noticed, our test is already passing. This is because the default app.component.html already has that directive. But now, we are going to remove the unnecessary files. Remove app.component.html and app.component.css. Check your console, you should see an error because app.component.ts is referencing to those files we've just removed.

Let's first fix the compilation errors:

//app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: 'hello world'
})
export class AppComponent {}

Notice the difference between templateUrl: ... and template

If we open http://localhost:4200 we should see: "hello world", but now our test is failing (is important to first check that our test is failing and then make it "green", read more about the Red, Green, Refactor here: The cycles of TDD)

Ok, now that we have our failing test, let's fix it:

//app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<router-outlet></router-outlet>'
})
export class AppComponent {}

Third step: Creating the Login Component

Open the terminal and run:

ng generate module login --routing

You should see:

src/app/login/login.module.ts
src/app/login/login-routing.module.ts

Next, create the login component:

ng generate component login

You should see:

src/app/login/login.component.css
src/app/login/login.component.html
src/app/login/login.component.spec.ts
src/app/login/login.component.ts

Finally, let's reference our newly created module into our app-routing.module.ts

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./login/login.module').then(m => m.LoginModule),
    data: { preload: true }
  }
];

End result:

//app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./login/login.module').then(m => m.LoginModule),
    data: { preload: true }
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

And we should also modify our login-routing.module.ts:

//login-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login.component';

const routes: Routes = [
  {
    path: '',
    component: LoginComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class LoginRoutingModule {}

If you open http://localhost:4200, you should see: "login works!"

Fourth step: Login component

Before we start, we could remove the unnecessary css file.

First, let's create our test that asserts we have a form rendered:

//login.component.spec.ts
  it('should render form with email and password inputs', () => {
    const element = fixture.nativeElement;

    expect(element.querySelector('form')).toBeTruthy();
    expect(element.querySelector('#email')).toBeTruthy();
    expect(element.querySelector('#password')).toBeTruthy();
    expect(element.querySelector('button')).toBeTruthy();
  });

We should have our failing test 😎. Now, we need to make it pass!

Let's do that, open login.component.html:

<form>
  <input id="email" type="email" placeholder="Your email" />
  <input id="password" type="password" placeholder="********" />
  <button type="submit">Sign in</button>
</form>

We should see that we have 4 passing tests! Great, but still we don't have a usable form.

So, let's add a test for our form model (we're going to use Reactive forms)

//login.component.spec.ts

  it('should return model invalid when form is empty', () => {
    expect(component.form.valid).toBeFalsy();
  });

As you could notice an error is thrown error TS2339: Property 'form' does not exist on type 'LoginComponent'..

Let's define our form in our login.component.ts:

import { Component, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html'
})
export class LoginComponent implements OnInit {
  form: FormGroup;

  constructor() {}

  ngOnInit() {}
}

We see that the compilation error is not there anymore, but we still have our test failing.

Why you think is still failing if we already declared form?
That's right! Is still undefined! So, in the ngOnInit function let's initialize our form using FormBuilder:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html'
})
export class LoginComponent implements OnInit {
  form: FormGroup;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.form = this.formBuilder.group({});
  }
}

Oh no! Now, we have more than 1 test failing!!! Everything is broken! Don't panic 😉, this is because we have added a dependency to FormBuilder and our testing module does not know how to solve that. Let's fix it by importing ReactiveFormsModule:

//login.component.spec.ts

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [LoginComponent],
      imports: [ReactiveFormsModule] //here we add the needed import
    }).compileComponents();
  }));

But, we still have 2 tests failing! We need to add formGroup to our <form>:

<form [formGroup]="form">

Now, we should only see failing our form is invalid test 😃.

How do you think we could make our form invalid to make the test pass?
Yes, adding our form controls with required validators. So, let's add another test to assert it:

//login.component.spec.ts
it('should validate email input as required', () => {
  const email = component.form.controls.email;

  expect(email.valid).toBeFalsy();
  expect(email.errors.required).toBeTruthy();
});

Let's make those tests pass:

ngOnInit() {
  this.form = this.formBuilder.group({
    email: ['', Validators.required]
  });
}

Great 😎! We need also a password property in our form with the required validator.

//login.component.spec.ts
it('should validate password input as required', () => {
  const password = component.form.controls.password;

  expect(password.valid).toBeFalsy();
  expect(password.errors.required).toBeTruthy();
});

To make it green we need to add password property to our form declaration:

ngOnInit() {
  this.form = this.formBuilder.group({
    email: ['', Validators.required],
    password: ['', Validators.required]
  });
}

Let's verify that we should insert a valid email:

it('should validate email format', () => {
  const email = component.form.controls.email;
  email.setValue('test');
  const errors = email.errors;

  expect(errors.required).toBeFalsy();
  expect(errors.pattern).toBeTruthy();
  expect(email.valid).toBeFalsy();
});

For adding the correct validator, we need to add a regex pattern like this:

ngOnInit() {
  this.form = this.formBuilder.group({
    email: ['', [Validators.required, Validators.pattern('[^ @]*@[^ @]*')]],
    password: ['', Validators.required]
  });
}

We could add an extra test to validate that is working as expected:

it('should validate email format correctly', () => {
  const email = component.form.controls.email;
  email.setValue('test@test.com');
  const errors = email.errors || {};

  expect(email.valid).toBeTruthy();
  expect(errors.required).toBeFalsy();
  expect(errors.pattern).toBeFalsy();
});

It is time for rendering errors in our HTML. As we are getting used to, we need first to add a test.

it('should render email validation message when formControl is submitted and invalid', () => {
  const elements: HTMLElement = fixture.nativeElement;
  expect(elements.querySelector('#email-error')).toBeFalsy();

  component.onSubmit();

  fixture.detectChanges();
  expect(elements.querySelector('#email-error')).toBeTruthy();
  expect(elements.querySelector('#email-error').textContent).toContain(
    'Please enter a valid email.'
  );
});

Of course, as we didn't define an onSubmit function it is failing. Add onSubmit() {} in our login.component.ts and there it is, our beautiful red test 😃.

How to make this test green? We need a submitted property as stated in our test for only showing errors after we trigger the onSubmit:

//login.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html'
})
export class LoginComponent implements OnInit {
  form: FormGroup;
  submitted = false;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.form = this.formBuilder.group({
      email: ['', [Validators.required, Validators.pattern('[^ @]*@[^ @]*')]],
      password: ['', Validators.required]
    });
  }

  onSubmit() {
    this.submitted = true;
  }
}

And add the validation message error in the HTML

<span *ngIf="submitted && form.controls.email.invalid" id="email-error">
  Please enter a valid email.
</span>

Good, now we have our test green but if we run our app we are not going to see the error message after clicking Sign in.

What is wrong? YES, our test is calling onSubmit() directly instead of clicking the button.

It is important to recognize this kind of errors when writing our tests to avoid "false positives". Having a green test does not necessarily mean that is working as expected.

So, if we fix our test replacing component.onSubmit() by clicking the button, we should have again a failing test:

it('should render email validation message when formControl is submitted and invalid', () => {
  const elements: HTMLElement = fixture.nativeElement;
  expect(elements.querySelector('#email-error')).toBeFalsy();

  elements.querySelector('button').click();

  fixture.detectChanges();
  expect(elements.querySelector('#email-error')).toBeTruthy();
  expect(elements.querySelector('#email-error').textContent).toContain(
    'Please enter a valid email.'
  );
});

What is missing now to make this test green? Correct, we should call onSubmit from our form when clicking Sign In button by adding (ngSubmit)="onSubmit()" to our form.

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <input id="email" type="email" placeholder="Your email" />
  <span *ngIf="submitted && form.controls.email.invalid" id="email-error">
    Please enter a valid email.
  </span>
  <input id="password" type="password" placeholder="********" />
  <button type="submit">Sign in</button>
</form>

Lastly, let's do the same for our password input.

it('should render password validation message when formControl is submitted and invalid', () => {
  const elements: HTMLElement = fixture.nativeElement;
  expect(elements.querySelector('#password-error')).toBeFalsy();

  elements.querySelector('button').click();

  fixture.detectChanges();
  expect(elements.querySelector('#password-error')).toBeTruthy();
  expect(elements.querySelector('#password-error').textContent).toContain(
    'Please enter a valid password.'
  );
});

Before proceeding, check that the test is failing.
Good, now we need the html part to make it green:

<span *ngIf="submitted && form.controls.password.invalid" id="password-error">
  Please enter a valid password.
</span>

Fifth step: Styling

Now it is time to make our login form look nice! You could use plain css or your preferred css framework. In this tutorial, we are going to use TailwindCSS, and you could read this post on how to install it:

Angular 8/9/10 + Tailwind CSS Guide

Sean Kerwin ・ Nov 12 '19

#angular #tailwindcss #webpack #css

And for styling our form, we could just follow official doc:
Login Form

Our final result:

The next post is going to be the authentication service and how to invoke it using this form we've just built.

Angular series: Creating an authentication service with TDD

JPBlancoDB ・ Nov 20 '19

#angular #tdd #javascript #tutorial

If you have any doubt, you could leave a comment or contact me via Twitter. I'm happy to help!

Dependency Injection in NetCore

JPBlancoDB — Sat, 09 Nov 2019 08:00:20 +0000

Dependency Injection in NetCore

Dependency Injection [DI] is a pattern that gives the implementation of a class to an object without needing a Factory or the object knowing how to instantiate it with the intent to decoupling these objects.

We are going to describe the purposes of the three types of patterns available in NetCore: “Singleton”, “Scoped” and “Transient”.

The purpose of Singleton is to instantiate your object only once and then whenever you need that object, you will use the same implementation. This is useful for example for caching.

Then, we have Scoped. When it is applied your object will be instantiated once per request lifecycle. This is useful for example for Repositories or Services.

Lastly, we have Transient. This is the most common of the three because it is going to be instantiated whenever it is invoked.

In NetCore you define your DI inside Startup.cs on ConfigureServices method. Now, let’s see how you can define this.

Singleton:

services.AddSingleton<Interface, ImplementationClass>();

Scoped:

services.AddScoped<Interface, ImplementationClass>();

Transient:

services.AddTransient<Interface, ImplementationClass>();

You can read more about this pattern on:

https://martinfowler.com/articles/injection.html

If you have any doubt don’t hesitate to leave your comments or asking me via Twitter.

Configure Let's Encrypt + Nginx in Ubuntu

JPBlancoDB — Thu, 07 Nov 2019 22:09:53 +0000

Step-by-step guide to install Let's Encrypt certificate

Translated into: Español

First, let's briefly define what Let's Encrypt is for by quoting them.

Let’s Encrypt is a free, automated, and open Certificate Authority.

In summary, with Let's Encrypt we obtain a secure domain certificate (SSL) for our site and for free.

Steps:

Install Certbot in the server:

sudo add-apt-repository ppa:certbot/certbot
sudo apt-get update
sudo apt-get install python-certbot-nginx

We need to modify nginx file (we are going to use the default file for simplicity):

sudo nano /etc/nginx/sites-available/default

Search and replace the line that contains server_name with:

server_name domain.com www.domain.com;

Verify nginx configuration is correct:

sudo nginx -t

Restart Nginx:

sudo systemctl reload nginx

Installing the certificate:

sudo certbot --nginx -d domain.com -d www.domain.com
sudo openssl dhparam -out /etc/ssl/certs/dhparam.pem 2048
sudo nano /etc/nginx/sites-available/default

Add in the server section:

ssl_dhparam /etc/ssl/certs/dhparam.pem;

Let's verify again that our configuration is correct:

sudo nginx -t

Restart Nginx:

sudo systemctl reload nginx

Finally, we need to automatically renew our certificate because it expires every 90 days:

sudo crontab -e

and add:

15 3 \* \* \* /usr/bin/certbot renew –quiet

Done! We have our domain secure with SSL.

Lastly, we could verify the state of our certificates with certbot by executing this command:

certbot certificates

I hope this is helpful! If you have any doubts you could contact me via Twitter or by adding a comment :)

Translated into Español

Configurando LetsEncrypt con Nginx en Ubuntu

JPBlancoDB ・ Nov 7 '19 ・ 2 min read

#letsencrypt #nginx #linux #servers

Configurando LetsEncrypt con Nginx en Ubuntu

JPBlancoDB — Thu, 07 Nov 2019 19:56:41 +0000

Traducido al: English

En primer lugar, deberíamos preguntarnos para que sirve LetsEncrypt y nada mejor que citarlos para entender:

Let’s Encrypt is a free, automated, and open Certificate Authority.

En resumen, con LetsEncrypt obtenemos un certificado de dominio seguro, el famoso SSL para nuestro sitio y de forma gratuita. Todo esto gracias a la Linux Foundation.

Hecha ya la introducción, pasemos a lo que nos interesa que es como lo configuramos en un servidor linux con Nginx

Instalamos certbot en el servidor:

sudo add-apt-repository ppa:certbot/certbot
sudo apt-get update
sudo apt-get install python-certbot-nginx

Configuramos el archivo de Nginx: (En este caso como ejemplo usamos el archivo default)

sudo nano /etc/nginx/sites-available/default

Buscamos la linea que contiene server_name y la reemplazamos por:

server_name dominio.com www.dominio.com;

Verificamos que la configuración de nginx sea correcta con:

sudo nginx -t

Reiniciamos Nginx:

sudo systemctl reload nginx

Instalando el certificado:

sudo certbot --nginx -d dominio.com -d www.dominio.com
sudo openssl dhparam -out /etc/ssl/certs/dhparam.pem 2048
sudo nano /etc/nginx/sites-available/default

Agregamos dentro del bloque server:

ssl_dhparam /etc/ssl/certs/dhparam.pem;

Volvemos a verificar que nos haya quedado bien:

sudo nginx -t

Reiniciamos Nginx nuevamente:

sudo systemctl reload nginx

Configuramos la renovación automática del certificado:

sudo crontab -e

En nuestro archivo agregamos:

15 3 \* \* \* /usr/bin/certbot renew –quiet

De esta forma nos aseguramos que se renueve de forma automática nuestro certificado, dado que caduca cada 90 días.

Listo! Ya tenemos nuestro SSL configurado y funcionando!

Por último, si queremos verificar el estado de nuestros certificados con certbot para verificar la fecha de expiración o por ejemplo los dominios que tenemos registrados en nuestro servidor con LetsEncrypt, debemos ejecutar lo siguiente:

certbot certificates

Cualquier duda o consulta no duden en dejar sus comentarios o bien me pueden consultar vía twitter.

DEV Community: JPBlancoDB

Javascript Fundamentals Series: Blocks

Blocks

Testing Svelte components with Jest

Create a blog with Svelte and DEV.to API

First step: Scaffolding our app.

Second step: Fix the base template

Third step: Home template

Fourth step: Get articles from the API

Fifth step: Adding a header to our template

Bonus: Error template

Angular series: Creating an authentication service with TDD

Angular series: Creating a Login with TDD

JPBlancoDB ・ Nov 18 '19 ・ 8 min read

First step: Add a test

Second step: Authentication Service

Configurando LetsEncrypt con Apache en Debian

Configurando LetsEncrypt con Nginx en Ubuntu

JPBlancoDB ・ Nov 7 '19

How to make an API with dotnet core

Initializing the project:

Angular series: Creating a Login with TDD

First step: Creating the project

Second step: App Component

Third step: Creating the Login Component

Fourth step: Login component

Fifth step: Styling

Angular 8/9/10 + Tailwind CSS Guide

Sean Kerwin ・ Nov 12 '19

Angular series: Creating an authentication service with TDD

JPBlancoDB ・ Nov 20 '19

Dependency Injection in NetCore

Dependency Injection in NetCore

Configure Let's Encrypt + Nginx in Ubuntu

Step-by-step guide to install Let's Encrypt certificate

Translated into: Español

Steps:

Translated into Español

Configurando LetsEncrypt con Nginx en Ubuntu

JPBlancoDB ・ Nov 7 '19 ・ 2 min read

Configurando LetsEncrypt con Nginx en Ubuntu

Traducido al: English

Traducido al inglés

Configure Let's Encrypt + Nginx in Ubuntu

JPBlancoDB ・ Nov 7 '19 ・ 2 min read