Add screenshotting

This commit is contained in:
Lei Nelissen
2022-06-15 11:45:38 +02:00
parent a402757c96
commit c19b9d8920
41 changed files with 736 additions and 192 deletions

View File

@@ -5,6 +5,7 @@ interface TouchableHandlerProps<T = number> {
id: T;
onPress: (id: T) => void;
onLongPress?: (id: T) => void;
testID?: string;
}
function TouchableStyles({ pressed }: { pressed: boolean }): ViewStyle {
@@ -23,7 +24,8 @@ function TouchableHandler<T>({
id,
onPress,
onLongPress,
children
children,
testID,
}: PropsWithChildren<TouchableHandlerProps<T>>): JSX.Element {
const handlePress = useCallback(() => {
return onPress(id);
@@ -38,6 +40,7 @@ function TouchableHandler<T>({
onPress={handlePress}
onLongPress={handleLongPress}
style={TouchableStyles}
testID={testID}
>
{children}
</Pressable>

View File

@@ -90,6 +90,7 @@ function Downloads() {
onPress={handleDeleteAllTracks}
disabled={!ids.length}
size="small"
testID="delete-all-tracks"
/>
</View>
{failedIds.length > 0 && (
@@ -128,7 +129,7 @@ function Downloads() {
<View style={{ marginRight: 12 }}>
<DownloadIcon trackId={item} />
</View>
<Button onPress={() => handleDelete(item)} size="small" icon={TrashIcon} />
<Button onPress={() => handleDelete(item)} size="small" icon={TrashIcon} testID={`delete-track-${item}`} />
{!entities[item]?.isComplete && (
<Button onPress={() => retryTrack(item)} size="small" icon={ArrowClockwise} style={{ marginLeft: 4 }} />
)}

View File

@@ -151,7 +151,7 @@ function NowPlaying() {
</Shadow>
</ShadowOverlay>
<ColoredBlurView style={{ borderRadius: 8 }}>
<InnerContainer onPress={openNowPlayingModal} activeOpacity={0.5}>
<InnerContainer onPress={openNowPlayingModal} activeOpacity={0.5} testID="open-player-modal">
<ShadowWrapper size="small">
<Cover source={{ uri: (track.artwork || '') as string }} style={defaultStyles.imageBackground} />
</ShadowWrapper>

View File

@@ -37,8 +37,8 @@ const NavigationHeader: React.FC = () => {
return (
<>
<ListButton onPress={handleAllAlbumsClick}>{t('all-albums')}</ListButton>
<ListButton onPress={handlePlaylistsClick}>{t('playlists')}</ListButton>
<ListButton onPress={handleAllAlbumsClick} testID="all-albums">{t('all-albums')}</ListButton>
<ListButton onPress={handlePlaylistsClick} testID="playlists">{t('playlists')}</ListButton>
<ListContainer>
<HeaderContainer>
<Header>{t('recent-albums')}</Header>
@@ -80,7 +80,7 @@ const RecentAlbums: React.FC = () => {
columnWrapperStyle={styles.columnWrapper}
ListHeaderComponent={NavigationHeader}
renderItem={({ item }) => (
<TouchableHandler id={item} onPress={selectAlbum}>
<TouchableHandler id={item} onPress={selectAlbum} testID={`select-album-${item}`}>
<AlbumItem>
<ShadowWrapper size="medium">
<AlbumImage source={{ uri: getImage(item) }} style={defaultStyles.imageBackground} />

View File

@@ -125,8 +125,8 @@ const TrackListView: React.FC<TrackListViewProps> = ({
<Header>{title}</Header>
<SubHeader>{artist}</SubHeader>
<WrappableButtonRow>
<WrappableButton title={playButtonText} icon={Play} onPress={playEntity} />
<WrappableButton title={shuffleButtonText} icon={Shuffle} onPress={shuffleEntity} />
<WrappableButton title={playButtonText} icon={Play} onPress={playEntity} testID="play-album" />
<WrappableButton title={shuffleButtonText} icon={Shuffle} onPress={shuffleEntity} testID="shuffle-album" />
</WrappableButtonRow>
<View style={{ marginTop: 8 }}>
{trackIds.map((trackId, i) =>
@@ -135,6 +135,7 @@ const TrackListView: React.FC<TrackListViewProps> = ({
id={i}
onPress={selectTrack}
onLongPress={longPressTrack}
testID={`play-track-${trackId}`}
>
<TrackContainer
isPlaying={currentTrack?.backendId === trackId || false}
@@ -183,12 +184,14 @@ const TrackListView: React.FC<TrackListViewProps> = ({
title={downloadButtonText}
onPress={downloadAllTracks}
disabled={downloadedTracks.length === trackIds.length}
testID="download-album"
/>
<WrappableButton
icon={Trash}
title={deleteButtonText}
onPress={deleteAllTracks}
disabled={downloadedTracks.length === 0}
testID="delete-album"
/>
</WrappableButtonRow>
</View>

View File

@@ -230,6 +230,7 @@ export default function Search() {
style={[defaultStyles.input, { marginBottom: 12 }]}
placeholder={t('search') + '...'}
icon
testID="search-input"
/>
<SearchIndicator width={14} height={14} fill={defaultStyles.textHalfOpacity.color} />
{isLoading && <Loading><ActivityIndicator /></Loading>}
@@ -293,7 +294,7 @@ export default function Search() {
}
return (
<TouchableHandler<string> id={album.Id} onPress={selectAlbum}>
<TouchableHandler<string> id={album.Id} onPress={selectAlbum} testID={`search-result-${album.Id}`}>
<SearchResult>
<ShadowWrapper>
<AlbumImage source={{ uri: getImage(album.Id) }} style={defaultStyles.imageBackground} />

View File

@@ -65,10 +65,10 @@ function Screens() {
headerShown: false,
})}
>
<Tab.Screen name="Music" component={Music} options={{ tabBarLabel: t('music') }} />
<Tab.Screen name="Search" component={Search} options={{ tabBarLabel: t('search') }} />
<Tab.Screen name="Downloads" component={Downloads} options={{ tabBarLabel: t('downloads')}} />
<Tab.Screen name="Settings" component={Settings} options={{ tabBarLabel: t('settings') }} />
<Tab.Screen name="Music" component={Music} options={{ tabBarLabel: t('music'), tabBarTestID: 'music-tab' }} />
<Tab.Screen name="Search" component={Search} options={{ tabBarLabel: t('search'), tabBarTestID: 'search-tab' }} />
<Tab.Screen name="Downloads" component={Downloads} options={{ tabBarLabel: t('downloads'), tabBarTestID: 'downloads-tab'}} />
<Tab.Screen name="Settings" component={Settings} options={{ tabBarLabel: t('settings'), tabBarTestID: 'settings-tab' }} />
</Tab.Navigator>
</>
);