Skip to content

Instantly share code, notes, and snippets.

View mydatahack's full-sized avatar

mydatahack

View GitHub Profile
@mydatahack
mydatahack / MyIllustration.scss
Created October 14, 2021 03:48
MyIllustration.scss
.scalableSvg {
width: 100%;
height: auto;
display: block;
}
@mydatahack
mydatahack / IllustrationContainer.scss
Created October 14, 2021 03:45
IllustrationContainer.scss
.small {
width: 57px;
height: 57px;
}
.medium {
width: 114px;
height: 114px;
}
@mydatahack
mydatahack / IllustrationContainer.jsx
Created October 14, 2021 03:44
IllustrationContainer.tsx
import React from 'react';
import styles from './styles.scss';
export enum IllustrationSize {
Small = 'small',
Medium = 'medium',
Large = 'large',
}
export type IllustrationContainerProps = {
@mydatahack
mydatahack / MyButton.test.jsx
Created October 14, 2021 03:24
MyButton.test.jsx
// mock async function first
const someAsyncFunc = jest.fn().mockResolvedValue({ success: true });
jest.spyOn(hooks, 'someHook').mockImplementation(() => ({ someAsyncFunc }));
...
await act(async() => {
wrapper
.findWhere((node) => node.text() === 'Elenberg Fraser')
.find('button')
@mydatahack
mydatahack / MyButton.jsx
Created October 14, 2021 03:23
MyButton
export const MyButton = () => {
const { someAsyncFunc } = someHook();
const handleClick = () => {
await someAsyncFunc();
window.open(link, '_blank');
}
return (
<button role="link" onClick={handleClick}>
@mydatahack
mydatahack / jest-data-provider-pattern.test.js
Created October 13, 2021 05:36
jest-data-provider-pattern
const getAnimal = (sound) => {
switch(sound) {
case 'meow':
return 'Cat';
case 'woof':
return 'Dog';
case 'pawoo':
return 'Elephant';
default:
return 'Human';
@mydatahack
mydatahack / preview-head-sb-customfont.html
Created April 24, 2021 01:43
preview-head-sb-customfont.html
<style>
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: url('fonts/Lato/Lato-Regular.ttf') format('truetype');
}
.custom-font {
font-family: 'Lato';
@mydatahack
mydatahack / webpack-config-push-custom-font-sb.js
Created April 24, 2021 01:42
webpack-config-push-custom-font-sb.js
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = async ({ config }) => {
// fonts
config.plugins.push(
new CopyWebpackPlugin({patterns: [
{
from: path.resolve(__dirname, '../src/fonts/Lato'),
to: 'fonts/Lato'
},
@mydatahack
mydatahack / wrapper-test.jsx
Created April 23, 2021 23:33
wrapper-test.jsx
import React from 'react';
import { mount, shallow } from 'enzyme';
import Wrapper from '.';
describe('<Wrapper />', () => {
test('renders with correct className with mount', () => {
const wrapper = mount(<Wrapper>Children here</Wrapper>);
console.log(wrapper.debug());
expect(wrapper.find('div').hasClass('wrapper')).toBeTruthy();
});
@mydatahack
mydatahack / shallow-rendered.html
Created April 23, 2021 23:32
shallow-rendered.html
<div className="wrapper">
Children here
</div>