Skip to content

Instantly share code, notes, and snippets.

View xiongemi's full-sized avatar
🏠
Working from home

Emily Xiong xiongemi

🏠
Working from home
View GitHub Profile
@xiongemi
xiongemi / loading-state.component.ts
Created August 4, 2020 04:17
loading state ng-zorro exmple
<nz-card
*ngIf="!hasError"
class="w-100"
[nzLoading]="!post"
[nzTitle]="post?.title"
[nzActions]="[actionLike, actionDislike, actionComment]"
>
<p nz-typography>
{{ post?.message }}
</p>
@xiongemi
xiongemi / .eslintrc.json
Created November 14, 2020 23:05
eslint import
{
"plugins": ["import"],
"extends": [
"plugin:import/errors",
"plugin:import/warnings",
"plugin:import/typescript",
],
"rules": {
"import/no-unresolved": "off",
"import/named": "warn",
@xiongemi
xiongemi / gist:8ad7681e01f0a10abe7a7d6e8217c8e5
Created November 15, 2020 06:02
eslintrc.json jsx-a11y
"plugins": ["jsx-a11y"],
"extends": [
"plugin:jsx-a11y/recommended"
],
@xiongemi
xiongemi / app.spec.tsx
Last active November 15, 2020 06:44
unit testing for accessibility using jest-axe
import { render } from '@testing-library/react';
import { axe } from 'jest-axe';
import React from 'react';
import App from './app';
describe('App', () => {
test('should not have accessibility violations', async () => {
const { container } = render(<App />);
@xiongemi
xiongemi / smart-component.spec.tsx
Last active January 11, 2021 22:39
setup mock store for unit testing
import { render } from '@testing-library/react';
import React from 'react';
import { Provider } from 'react-redux';
import configureStore from 'redux-mock-store';
const mockStore = configureStore([]);
describe('...', () => {
let store;
@xiongemi
xiongemi / countries.service.ts
Last active November 26, 2020 05:06
countries service file
import { CountriesResponse } from './models/countries-response.interface';
async function getCountries(): Promise<CountriesResponse> {
const response = await fetch(...);
if (response.ok) {
return response.json();
}
throw response;
}
@xiongemi
xiongemi / countries.service.spec.ts
Last active December 1, 2020 03:02
unit test for country serivce
import fetchMock from 'jest-fetch-mock';
import { countriesService } from './countries.service';
import { mockCountriesResponse } from './models/countries-response.mock';
describe('Countries Service', () => {
afterEach(() => {
fetchMock.resetMocks();
});
@xiongemi
xiongemi / quotes.spec.tsx
Created November 26, 2020 07:41
actual unit test file for smart component
import { render } from '@testing-library/react';
import { mockQuotePerLeg } from '@white-label-airline/services/quotes';
import {
FetchStatus,
initialQuotesState,
quotesSlice,
} from '@white-label-airline/store';
import { axe } from 'jest-axe';
import React from 'react';
import { Provider } from 'react-redux';
@xiongemi
xiongemi / smart-component.spec.ts
Created December 1, 2020 03:03
template for smart component unit test
describe('initial state', () => {
beforeEach(() => {
store = mockStore({<intial state>});
store.dispatch = jest.fn();
});
it('should show loading spinner');
});
describe('state with success fetch status', () => {
beforeEach(() => {
@xiongemi
xiongemi / countries.slice.spec.ts
Created December 1, 2020 03:05
unit test for reducer
import { mockCountry } from '@white-label-airline/services/countries';
import { FetchStatus } from '../models/fetch-status.enum';
import { countriesSlice } from './countries.slice';
import { initialCountriesState } from './models/countries-state.initial';
describe('Countries Slice', () => {
it('should reset state when get countries', () => {
const action = countriesSlice.actions.getCountries();