Posts
Test vue component event emits
const WrapperComponent = { components: { ChildComponent, }, methods: { onUpdate: jest.fn(), }, template: '<child-component @onUpdate="onUpdate" />', }; describe('ChildComponent', () => { let wrapper; beforeEach(() => { wrapper = mount(WrapperComponent, {}); }); afterEach(() => { wrapper.destroy(); }); it('emits onUpdate event', async () => { const spy = jest.spyOn(WrapperComponent.methods, 'onUpdate'); // do something that would make child component emit the 'onUpdate' event expect(spy).toHaveBeenCalled(); }); });
Posts
Square loading favicon in Typescript
Based on rpsthecoder’s square loading favicon image/svg+xml in JavaScript, but now in proper Typescript.
/** * Square loading favicon in Typescript * Author: Drikus Roor * Original author: https://github.com/rpsthecoder/square-loading-favicon */ interface IFavicon extends Element { href: string; } export function animateFavicon() { const canvas = document.querySelector("canvas"); if (!canvas) { return; } const context = canvas.getContext("2d"); if (context) { const favicon = document.
Posts
How to mock a GuzzleHttp client that makes a request to a third-party API in a Laravel feature test?
In a Laravel project I have a feature test in which I test an internal endpoint. The endpoint has a Controller calls a method on a Service. The Service then tries to call a third-party endpoint. It is this third-party endpoint that I would like to mock.
I have looked at Guzzle’s documentation, but it seems like image/svg+xml the MockHandler strategy requires you to execute the http request inside of the test, which is not wat I want in my test.
Posts
Where is Gitlab's test coverage parsing setting
Today, I wanted to set the regular expression for my test coverage results in Gitlab.
According to Gitlab’s documentation image/svg+xml , I should be able to do that in the test coverage parsing setting in my project settings, by navigating to Settings > CI/CD > General pipelines.
Problem However, I could not find the setting there. So where can I set the regular expression for the test coverage parsing setting in Gitlab?
Posts
Easy Node.js Mysql database table seeder
First, install npm dependencies:
npm i mysql2 @faker-js/faker dotenv Run the script with the command
node ./index.js Don’t forget to add the mysql db credentials to your .env file and of course edit the getSeedQuery function if you want to use it for your own table.
const mysql = require("mysql2"); const { faker } = require("@faker-js/faker"); require("dotenv").config(); function getSeedQuery(amount = 10000) { return Array.from({ length: amount }) .map(() => { const date = faker.
Posts
Handle imports without extensions in Vue.js 2
If you want to import your Vue components in the following way, so without a .vue or .js extension:
import CrazyComponent from '@/components/CrazyComponent'; // instead of import CrazyComponent from '@/components/CrazyComponent.vue'; There are some things you have to configure. I will outline these things below:
Rollup Add the following to your rollup.config.js:
nodeResolve({ browser: true, jsnext: true, main: true, extensions: ['.js', '.vue'] }), ESLint Add the following to your eslintrc.
Posts
Use aliases in Vue.js imports
I don’t like to do relative imports like this:
import CrazyComponent from "../../components/CrazyComponent"; Instead, I like to import my components (stores, helpers, models, etc.) like this:
import CrazyComponent from "@/components/CrazyComponent"; You might want to configure some stuff to make this possible. I will outline these configurations below:
ESLint First, install eslint-import-resolver-custom-alias:
npm install eslint-import-resolver-custom-alias --save-dev In your eslintrc.js or the eslintConfig section in your package.json, add the following resolver under "import/resolver".
Posts
Setup Gitlab token for private composer packages
Have you ever received the following error?
[Composer\Downloader\TransportException] The "https://gitlab.my-gitlab-instance.com/api/v4/group/666/-/packages/composer/packages.json" file could not be downloaded (HTTP/2 404 ): {"message":"404 Group Not Found"} I have, and it has kept me from doing my work several times. The readme files of several projects give some attention to this issue, but you might not be working in those specific projects when you encounter these terrible issues. This is why I wrote this short instructions post on Confluence; hopefully Confluence’s search feature will find this post everytime I (or you) run into the same ol' story and forget how to solve it.
Posts
Turn off Oblivion head bobbing
Every now and then I like to play my beloved Oblivion. To keep things interesting I have installed quite some mods over the years. At one point, however, my head started bobbing while walking and it seemed like I was in crouching mode when standing still. The problem persisted even until after I installed all my mods. Eventually I found the culprit, but to help other possible victims, I will list possible solutions to the problem of not being able to turn off head bobbing:
Posts
How to set the homepage cover image in the Ananke theme for Hugo
It is quite straightforward to set the cover image in Hugo’s Ananke theme. We store an image in the images folder of a post and set the featured_image variable to the images/cover.jpg path. The folder structure for a post then looks like this:
content - posts - first-post - images - cover.jpg - index.md And the post’s front matter image/svg+xml in first-post/index.md would look like this: