sarah Posts - Answer Overflow

sarah

•Created by sarah on 9/17/2023 in #front-end

Has anyone set up unit testing for web components created with Preact?

I'm working on a project converting React components to Preact (using preact/compat). We're also providing web component versions of our Preact components using preact-custom-element (https://github.com/preactjs/preact-custom-element), which seems to be the recommended approach (https://preactjs.com/guide/v10/web-components/#creating-a-web-component). We've successfully set up our unit test infrastructure to test both React and Preact components (we're using testing-library and did the aliasing for Jest as seen in Preact's docs - https://preactjs.com/guide/v10/getting-started/#aliasing-in-jest). We'd like to have unit tests for the generated web components as well, but I'm finding conflicting information about this. I've seen some resources say testing-library/preact also tests web components and I just need to be mindful to use @testing-library/user-event for testing user events and @testing-library/dom for shadow dom testing. Other resources say I have to have explicit hydration steps set up in our unit tests to test the web components by importing hydrate from Preact. If I need to provide additional steps for hydration and such, is there recommended Jest aliasing for web components?

1 replies

KPCKevin Powell - Community

•Created by sarah on 8/16/2023 in #front-end

How do you make a website using “boring” tech these days

My frontend career basically kicked off when JAMstack became a buzzword, so most of my time experience is in static site generators and JS frameworks. I used to work with devs who used things like Grunt and Gulp to build websites before static site gens and frameworks were everywhere and I’m curious about this way of working. Are Grunt/Gulp still good options (ie, are they being maintained?) to making a site or are there more modern tools (like ViteJS) that can accomplish the same things?

1 replies

KPCKevin Powell - Community

•Created by sarah on 2/2/2023 in #front-end

Is there a good way to resize checkbox and radio button inputs for Safari?

I need to double the size of the checkboxes and radio button inputs for this design system project I'm working on. I'm unable to find a solution that works across all browsers (Safari is giving me grief). My markup's pretty straight-forward:

<input type="checkbox" id="foo" />
<label for="foo">Checkbox example</label>
<br>
<input type="radio" id="bar" />
<label for="bar">Radio example</label>

<input type="checkbox" id="foo" />
<label for="foo">Checkbox example</label>
<br>
<input type="radio" id="bar" />
<label for="bar">Radio example</label>

I've attempted the following CSS solutions:

/* Works in Chrome and Firefox */
/* Safari shows an increase in size of bounding box, but input itself doesn't change size */ 
input[type="checkbox"],
input[type="radio"] {
  height: 2em;
  width: 2em;
}

/* Works in Chrome and Firefox */
/* Safari: Input increases to correct size, but it's really blurry */
input[type="checkbox"],
input[type="radio"] {
  transform: scale(2,2); /* I also tried the `scale: 2;` property */
}

/* Works in Chrome and Firefox */
/* Safari shows an increase in size of bounding box, but input itself doesn't change size */ 
input[type="checkbox"],
input[type="radio"] {
  height: 2em;
  width: 2em;
}

/* Works in Chrome and Firefox */
/* Safari: Input increases to correct size, but it's really blurry */
input[type="checkbox"],
input[type="radio"] {
  transform: scale(2,2); /* I also tried the `scale: 2;` property */
}

I'd hate to have to create a custom checkbox/radio button just to increase its size. It seems like their should be a simple way to resize this element in Safari and I'm hoping I'm just missing something.

1 replies

Gaming

Programming