From 970fa1ace2fc1213d9449987abc3f760743024b6 Mon Sep 17 00:00:00 2001 From: Jose Bravo Date: Wed, 1 Dec 2021 15:57:14 +0100 Subject: [PATCH 1/2] feat: Allow user to filter by token --- src/screens/TokensListScreen.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/screens/TokensListScreen.tsx b/src/screens/TokensListScreen.tsx index 1a8b0168..450bf471 100644 --- a/src/screens/TokensListScreen.tsx +++ b/src/screens/TokensListScreen.tsx @@ -80,8 +80,10 @@ export const TokensListScreen = ({ route, navigation }: Props) => { const filteredTokens = useMemo(() => { if (search.length > 1) { - return tokens.filter(({ description }) => - description.toLowerCase().includes(search.toLowerCase()) + return tokens.filter( + ({ token, description }) => + description.toLowerCase().includes(search.toLowerCase()) || + token.toLowerCase().includes(search.toLowerCase()) ) } else { return tokens @@ -112,6 +114,7 @@ export const TokensListScreen = ({ route, navigation }: Props) => { accessibilityLabel="Search" placeholder="Search..." placeholderTextColor={theme.colors.disabled} + autoCorrect={false} mode="outlined" value={search} onChangeText={setSearch} From 33fa348ee07737a5a6c5983824942ad007c88093 Mon Sep 17 00:00:00 2001 From: Jose Bravo Date: Wed, 1 Dec 2021 17:52:17 +0100 Subject: [PATCH 2/2] Add tests --- src/screens/TokensListScreen.test.tsx | 112 ++++++++++++++++++ .../TokensListScreen.test.tsx.snap.android | 101 ++++++++++++++++ .../TokensListScreen.test.tsx.snap.ios | 101 ++++++++++++++++ 3 files changed, 314 insertions(+) create mode 100644 src/screens/TokensListScreen.test.tsx create mode 100644 src/screens/TokensListScreen.test.tsx.snap.android create mode 100644 src/screens/TokensListScreen.test.tsx.snap.ios diff --git a/src/screens/TokensListScreen.test.tsx b/src/screens/TokensListScreen.test.tsx new file mode 100644 index 00000000..c5872e8f --- /dev/null +++ b/src/screens/TokensListScreen.test.tsx @@ -0,0 +1,112 @@ +import React from 'react' +import { NativeStackScreenProps } from 'react-native-screens/native-stack' +import { fireEvent } from '@testing-library/react-native' + +import { getMockedNavigation, renderWithTheme } from '../../test/utils' +import { MainStackParamList } from '../Main' +import { Secret } from '../types' +import * as hooks from '../hooks/use-secret-selector' + +import { TokensListScreen } from './TokensListScreen' + +const secret: Secret = { + _id: 'id', + secret: 'secret', + uid: 'uid', + tokens: [], + account: 'account', + issuer: '', +} + +jest.mock('@react-navigation/core', () => ({ + useIsFocused: jest.fn().mockReturnValue(true), +})) + +describe('TokensListScreen', () => { + afterEach(() => { + jest.clearAllMocks() + }) + + beforeEach(() => { + jest.spyOn(hooks, 'useSecretSelector').mockImplementation(() => secret) + }) + + const setup = () => { + const props = { + navigation: getMockedNavigation<'TokensList'>(), + route: { params: { secretId: secret._id } }, + } as unknown as NativeStackScreenProps + return renderWithTheme() + } + + it('should match snapshot when there are no tokens', () => { + const view = setup() + expect(view).toMatchSnapshot() + }) + + it('should display an empty list when there are no tokens', () => { + const { getByText } = setup() + expect(getByText('No Tokens')).toBeTruthy() + expect( + getByText('Create a new token and it will appear here.') + ).toBeTruthy() + }) + + it('should display a list with two tokens when there are two tokens', () => { + jest.spyOn(hooks, 'useSecretSelector').mockImplementation(() => ({ + ...secret, + tokens: [ + { token: 'token1', description: 'description of token 1' }, + { token: 'token2', description: 'description of token 2' }, + ], + })) + + const { queryByText } = setup() + + expect(queryByText('No Tokens')).toBeFalsy() + expect(queryByText('description of token 1')).toBeTruthy() + expect(queryByText('description of token 2')).toBeTruthy() + }) + + it('should be able to filter by description', () => { + jest.spyOn(hooks, 'useSecretSelector').mockImplementation(() => ({ + ...secret, + tokens: [ + { token: '17526hkkdoeuagk122', description: 'My github token' }, + { token: '17adsdsdakdoeuagk122', description: 'My NPM token' }, + ], + })) + + const { queryByText, getByA11yLabel } = setup() + + const input = getByA11yLabel('Search') + fireEvent.changeText(input, 'github') + expect(queryByText('My github token')).toBeTruthy() + expect(queryByText('My NPM token')).toBeFalsy() + + fireEvent.changeText(input, 'token') + expect(queryByText('My github token')).toBeTruthy() + expect(queryByText('My NPM token')).toBeTruthy() + }) + + it('should be able to filter by token', () => { + jest.spyOn(hooks, 'useSecretSelector').mockImplementation(() => ({ + ...secret, + tokens: [ + { token: '17526hkkdoeuagk122', description: 'My github token' }, + { token: '17adsdsdakdoeuagk122', description: 'My NPM token' }, + ], + })) + + const { queryByText, getByA11yLabel } = setup() + + const input = getByA11yLabel('Search') + fireEvent.changeText(input, 'hkkdoeuagk') + expect(queryByText('My github token')).toBeTruthy() + expect(queryByText('My NPM token')).toBeFalsy() + + fireEvent.changeText(input, '17') + expect(queryByText('My github token')).toBeTruthy() + expect(queryByText('My NPM token')).toBeTruthy() + }) +}) diff --git a/src/screens/TokensListScreen.test.tsx.snap.android b/src/screens/TokensListScreen.test.tsx.snap.android new file mode 100644 index 00000000..703d5096 --- /dev/null +++ b/src/screens/TokensListScreen.test.tsx.snap.android @@ -0,0 +1,101 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`TokensListScreen should match snapshot when there are no tokens 1`] = ` + + + + + No Tokens + + + Create a new token and it will appear here. + + + + +`; diff --git a/src/screens/TokensListScreen.test.tsx.snap.ios b/src/screens/TokensListScreen.test.tsx.snap.ios new file mode 100644 index 00000000..32ae8da9 --- /dev/null +++ b/src/screens/TokensListScreen.test.tsx.snap.ios @@ -0,0 +1,101 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`TokensListScreen should match snapshot when there are no tokens 1`] = ` + + + + + No Tokens + + + Create a new token and it will appear here. + + + + +`;