DEV Community: Ola Johansson

My Tuples in C# note to self

Ola Johansson — Thu, 29 Jun 2023 11:51:45 +0000

Everytime i just temporary need to send some data from one method to another i'm running into the issue, "I don't want to create a class just for this, can't just send some anonymous method of some sort".

And each time I'm struggling with Tuples. The worst thing is that it's so hard to search for "where i used it before" since it doesn't really have name to search for.

And that is why i'm writing this now.

var myListOfTuple = row.SomeTable
    .Select(o => new { o.UserId, o.User.Number, o.User.AnotherNumber })
    .AsEnumerable() 
    .Select(o => (UserId: o.UserId, Number: o.Number, AnotherNumber: o.AnotherNumber))
    .ToList();

DoStuff(myListOfTuple);

public int DoStuff(List<(Guid userId, int Points, int SecurityLevel)> myTupleList) {

var things = myTupleList.Where(x => x.Number > 5 && x.UserId != 1234);

}

IncludeMembers in AutoMapper for mapping relations

Ola Johansson — Wed, 22 Mar 2023 10:11:20 +0000

Sometimes you need to grab a value from a relations table, as in this case the sortorder of the specific relation between a "list" and an "item".

Using Automapper i have always had issues with this and usually just been lazy and mapped the other properties manually or used the AfterMap feature.

But today i found out about the IncludeMembers method. It's super simple and you just include the inner property and automapper will treat it just like it's "merged" with the actual source.

CreateMap<ListItemRelation, ItemForCustomList>()
   .IncludeMembers(s => s.Item)
   .ForMember(dest => dest.SortOrder, o => o.MapFrom(src => src.Sortorder)));

Git Setup

Ola Johansson — Wed, 22 Feb 2023 07:35:20 +0000

Just a list of git commands i use.

git config --global alias.ac '!git add -A && git commit -m'

git config --global core.editor "code --wait"

Deep copy object in JS / ES6

Ola Johansson — Thu, 29 Dec 2022 09:45:08 +0000

This is a thing I'm running into pretty often. In a test or whatnot i want clean data for each test. I usually just use the spread syntax.

const mockEvent = {...testData.events.defaultEventRegularSite }

But the problem with this is that it actually just do a shallow copy. If you want to get a totally clean object this wont work if the object has more nested properties.

If you want a deep copy, you can use JSON like this.

const mockEvent = JSON.parse(
   JSON.stringify(testData.events.defaultEventRegularSite)
);

Reference: Stack Overflow

Deploy a storybook via Azure Devops to Azure Static Web App

Ola Johansson — Tue, 11 Oct 2022 07:27:42 +0000

I've spent the morning trying to deploy my static storybook to a Azure Static Web App. I've found a few blog posts about it but they seemed a bit outdated.

Finally i figured out that you could just do everything with the AzureStaticWebApp pipeline task.

For me it worked to just add this command to a pipeline.

- task: AzureStaticWebApp@0
  inputs:
    app_build_command: 'yarn build-storybook'
    output_location: '/storybook-static'
    skip_app_build: false
    is_static_export: true
    azure_static_web_apps_api_token: '$(deployment-token)'

You will need to add a $(deployment-token) variable that you will find on your static web app in Azure, but otherwise that was all i needed, no need to run any custom yarn commands and so on.

Test dynamic class names from CSS Modules in Cypress

Ola Johansson — Fri, 23 Sep 2022 08:11:29 +0000

Sometimes you want to test that a element in your code get the correct CSS class. I use CSS Modules so it's impossible to know the exact class name when you writing the test.

Sometimes i have worked around this issue by asserting directly against the actual css i.e

    cy.findByText(/my text/gi)
      .should("have.css", "background-color", "rgb(60, 99, 132)")
      .should("have.attr", "href")
      .and("include", "about");

This works, but usually it's not really the color your after but if for example a element is active or focused or something.

And today i did some digging and finally found how to do this. Really simple tbh.

    cy.findByText(/my text/gi)
      .invoke("attr", "class")
      .should("contain", "selected");

    cy.findByText(/my text/gi)
      .should("have.attr", "href")
      .and("include", "about");

Note that i use Testing Library for Cypress to get that "findByText" method. But this should also work for regular cypress "cy.get" commands.

Reference: Github Issue Comment

Import and @use from absolute paths in Next.JS

Ola Johansson — Fri, 16 Sep 2022 07:54:53 +0000

I have ignored my relative paths imports in JS and for my Sass / Scss stuff for years. Today i finally decided to take a look and see how this could be solved.

Node / Typescript

So instead of having imports like

import colors from "../../css/colors.module.scss";

import colors from "../css/colors.module.scss";

that are really hard to copy-paste and also looks pretty ugly we can have this.

import colors from "@/css/colors.module.scss";

no matter where i am in the project. To fix this all you need is to add this to your tsconfig.js

  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/css/*": ["css/*"]
    }
   }

Reference: Next.JS Documentation

For Scss @use / @import

And the same thing for Sass, all you have to add is

const path = require("path");
const moduleExports = {
  sassOptions: {
    includePaths: [path.join(__dirname, "css/")],
  },
}

and then you can go from

@use "../../css/colors.module.scss";

@use "colors.module.scss";

The Sass version works a bit different since there you just add a "global path". It will always look in the "same path" first but then it will look in the global.

Reference: Stack Overflow

Issues with :hover, visibility and clicks in Cypress

Ola Johansson — Tue, 30 Aug 2022 06:56:22 +0000

I had some issues with my tests this morning and ever since I've started to use Cypress i have had various issues with hover states and clicks.

Sometimes it works to just use click({force: true})
Sometimes it works to use .trigger("show")
And sometimes none of these works.

I'm not 100% sure why it works or doesn't work but in this case i think it had to do with me using "visibility" instead of "display" in my CSS and that i had a transition that had some delay on showing the element that i wanted to click.

I have used this great cypress-real-events package before and it seems to have helped this time as well. This library adds a "realHover()" event that works with CSS.

What finally worked for me in this case was this.

      it("should work to report spam", function () {
        cy.visit("/software/arch-linux/about/");

        cy.intercept(
          {
            url: "https://hooks.slack.com/services/**",
          },
          { test: "hej" }
        ).as("post-to-slack");

        cy.on("window:confirm", () => true);

        cy.findByTestId("app-comment-89111")
          .realHover() // Seems i need this
          .within(() => {
            cy.findByTestId("report-spam")
              .realHover() // AND this, not sure why.
              .should("have.css", "visibility", "visible") // without this my transitions seems to mess and caused flakyness to the test.
              .click();
          });

        cy.wait("@post-to-slack");
      });
    });

As usual with my post these are mainly notes to myself, this blog post really help me this time so if you want more details go here.

Trying to parse "accept-language" header, beware of extra spaces

Ola Johansson — Wed, 24 Aug 2022 06:41:51 +0000

For some reason i've decided to parse this header myself the other day, shouldn't be that hard i supposed. And it wasn't that hard and everything was working perfectly locally.

Then i deployed this to my prod and things started to act weird. Only one language was detected and so forth. Finally i noticed that in prod my header string looked like this.

"sv, fr; q=0.9, en; q=0.8, no; q=0.7"

and locally it looked like this

"sv,fr;q=0.9,en;q=0.8,no;q=0.7"

I'm not sure why and I'm not sure what is more correct. But i just needed to add some trim to my parsing method and now things works.

Match a CSS Class in Cypress

Ola Johansson — Wed, 24 Aug 2022 06:32:00 +0000

Another "note to self" post. Sometimes it's really hard to figure out how to assert stuff in various JS testing frameworks. Today i just wanted to check if a certain element had a CSS Class, and since i use CSS Modules i can't use "have.class" because i need to match the name. So according to Cypress documentation this is how you do it. Note that I'm also using Cypress Testing Library, i.e. the "findByText" part of this code.

        cy.findByText(/english/i).should(($s) => {
          expect($s).to.have.length(1);
          const className = $s[0].className;
          expect(className).to.match(/LanguageList_highlighted/gi);
        });

Tbh it feels a bit complicated and it would of course be nice if you could just do something like cy.findByText(/english/i).should("match.class", /LanguageList_highlighted/gi). If anyone know a simpler way of doing this, let me know.

Make your self-signed certificate trusted by Chrome (and Firefox)

Ola Johansson — Wed, 17 Aug 2022 12:56:59 +0000

These instructions are for Windows and works for me™ in Chrome.

Create a self-signed certificate with a DnsName

Create a new certificate with powershell

New-SelfSignedCertificate -DnsName localhost -CertStoreLocation cert:\LocalMachine\My

The DnsName is important and if you use a custom domain via a host file you should add the domain you use there.

Make sure you use this certificate on your localhost

Export the certificate from Chrome

Go to your localhost website and open up the inspector
Under the security tab, click the "View Certificate" button.
Go to the details tab in the dialog and click "Copy to file"
Follow the wizard and choose the Cryptographic Message Syntax Standard - PKCS #7 (i do not think the "Include all checkbox" is important)
Save it somewhere.

Import the certificate to the "Trusted Root Certification Authorites"

Go to Chrome Settings
Click advanced at the bottom
Click the Manage Certificates link to open the certificate dialog
Click import
Follow the wizard and pick your exorted certificate file
Click browse and choose "Trusted Root Certification Authorites"
Done!

After this you should restart Chrome and you should not get any warnings.

All this information was collected at various places in this Stack Overflow question: https://stackoverflow.com/questions/7580508/getting-chrome-to-accept-self-signed-localhost-certificate

Bonus - Make it work in Firefox as well

Apparently Firefox doesn't use the global windows store for certificates. But it's easy to fix.

In Firefox, type 'about:config' in the address bar
If prompted, accept any warnings
Right-click to create a new boolean value, and enter 'security.enterprise_roots.enabled' as the Name
Set the value to 'true'

Credits to this post for this info.

Notes about Cloudflare cache and json

Ola Johansson — Mon, 18 Jul 2022 07:43:43 +0000

I have spent a lot of time trying to understand how to setup cache for json and API requests in Cloudflare lately and finally i have made some progress. This is not a step by step guide but mostly a "notes to self" post so i can make some more sense of it all.

If workers are active on a route page rules are ignored. Took me a while to realize this.
Cloudflare only execute ONE page rule per request, so make sure the rules are in the correct order and you don't have any "catch all" rule at the top.
Also note that the above note is not applied to workers route, with workers the routes is matched by how detailed they are. I.e domain.com/test is used even if domain.com/* exist and the order doesn't matter.

After you know this it should simply be to set a custom page rule on the path you want to cache with the option

Cache Level: Cache Everything