Skip to content

Commit

Permalink
Merge pull request #173 from oss-slu/170-dark-mode
Browse files Browse the repository at this point in the history 
170 dark mode
  • Loading branch information
@yashb196
yashb196 authored Oct 8, 2024
2 parents ba02a20 + 370ceaa commit 01d6687
Show file tree
Hide file tree
Showing 3 changed files with 81 additions and 54 deletions.
2 changes: 1 addition & 1 deletion __tests__/HomeScreen.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ afterEach(() => {
console.error.mockRestore();
});

describe('AddNoteScreen', () => {
describe('HomeScreen', () => {
it('renders without crashing', () => {
const routeMock = { params: { untitledNumber: 1 } };
const { getByTestId } = render(<HomeScreen route={routeMock as any} />);
Expand Down
43 changes: 27 additions & 16 deletions __tests__/MoreScreen.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,37 @@
import React from 'react';
import { render, fireEvent } from '@testing-library/react-native';
import { render, fireEvent, waitFor } from '@testing-library/react-native';
import { Provider } from 'react-redux';
import configureStore from 'redux-mock-store';
import MorePage from '../lib/screens/MorePage';
import moxios from 'moxios';
import { User } from '../lib/models/user_class';
import { Linking } from 'react-native';
import { useTheme } from '../lib/components/ThemeProvider';

// Mock the ThemeProvider
// Create a mock Redux store
const mockStore = configureStore([]);
const store = mockStore({
navigation: {
navState: 'more', // Add mock navigation state if needed
},
theme: {
darkMode: false, // Add mock theme state if needed
},
});

// Mock the ThemeProvider with spies
jest.mock('../lib/components/ThemeProvider', () => ({
useTheme: () => ({
useTheme: jest.fn(() => ({
theme: {
primaryColor: '#ffffff',
text: '#000000',
secondaryColor: '#f0f0f0',
logout: '#ff0000',
logoutText: '#ffffff',
},
isDarkmode: false, // Mock initial state for dark mode
isDarkmode: false, // Initial value of isDarkmode
toggleDarkmode: jest.fn(), // Mock the toggleDarkmode function
}),
})),
}));

// Mock the User class
Expand All @@ -33,17 +45,6 @@ jest.mock('../lib/models/user_class', () => {
};
});

// Create a mock Redux store
const mockStore = configureStore([]);
const store = mockStore({
navigation: {
navState: 'more', // Add mock navigation state if needed
},
theme: {
darkMode: false, // Add mock theme state if needed
},
});

beforeAll(() => {
// Suppress console logs during tests
jest.spyOn(console, 'log').mockImplementation(() => {});
Expand Down Expand Up @@ -105,4 +106,14 @@ describe('MorePage', () => {
"mailto:[email protected]?subject=Bug%20Report%20on%20'Where's%20Religion%3F'&body=Please%20provide%20details%20of%20your%20issue%20you%20are%20facing%20here."
);
});
it('renders the "Logout" button', () => {
const { getByText } = render(
<Provider store={store}>
<MorePage />
</Provider>
);

// Check if the "Logout" button is rendered
expect(getByText('Logout')).toBeTruthy();
});
});
90 changes: 53 additions & 37 deletions lib/screens/MorePage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,10 +57,11 @@ export default function MorePage() {
}
};


return (
<>
<View style={styles.header}>
<Text style={styles.headText}>Where's Religion</Text>
<View style={[styles.header, { backgroundColor: theme.background }]}>
<Text style={[styles.headText, { color: theme.text }]}>Where's Religion</Text>
</View>
<SafeAreaView>
<ScrollView contentContainerStyle={styles.container}>
Expand All @@ -72,15 +73,15 @@ export default function MorePage() {
</View>

<View>
<Text style={styles.headerText}>Resources</Text>
<Text style={[styles.headerText, { color: theme.text }]}>Resources</Text>
<TouchableOpacity
onPress={() =>
Linking.openURL(
"http://lived-religion-dev.rerum.io/deer-lr/dashboard.html"
)
}
>
<Text style={styles.text}>Our Website</Text>
<Text style={[styles.text, { color: theme.text }]}>Our Website</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() =>
Expand All @@ -89,7 +90,7 @@ export default function MorePage() {
)
}
>
<Text style={styles.text}>Guide to Ethnography</Text>
<Text style={[styles.text, { color: theme.text }]}>Guide to Ethnography</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() =>
Expand All @@ -98,53 +99,53 @@ export default function MorePage() {
)
}
>
<Text style={styles.text}>Guide to Coding</Text>
<Text style={[styles.text, { color: theme.text }]}>Guide to Coding</Text>
</TouchableOpacity>
<TouchableOpacity key="Email" onPress={handleEmail}>
<Text style={styles.text}>Report a Bug</Text>
<Text style={[styles.text, { color: theme.text }]}>Report a Bug</Text>
</TouchableOpacity>

<Text style={styles.headerText}>Meet our Team</Text>
<Text style={styles.text}>Insert Team Photo</Text>
<Text style={styles.text}>Insert Team Message</Text>
<Text style={[styles.headerText, { color: theme.text }]}>Meet our Team</Text>
<Text style={[styles.text, { color: theme.text }]}>Insert Team Photo</Text>
<Text style={[styles.text, { color: theme.text }]}>Insert Team Message</Text>

<Text style={styles.headerText}>Frequently Asked Questions</Text>
<Text style={[styles.headerText, { color: theme.text }]}>Frequently Asked Questions</Text>
</View>

<Text style={styles.headerText}>What can users do?</Text>
<Text style={styles.text}>
<Text style={[styles.headerText, { color: theme.text }]}>What can users do?</Text>
<Text style={[styles.text, { color: theme.text }]}>
Explore religious traditions, find places of worship, engage in
meaningful discussions.
</Text>

<Text style={styles.headerText}>Who is it for?</Text>
<Text style={styles.text}>
<Text style={[styles.headerText, { color: theme.text }]}>Who is it for?</Text>
<Text style={[styles.text, { color: theme.text }]}>
Scholars, students, believers, and the curious about the world's
religions.
</Text>

<Text style={styles.headerText}>What's unique?</Text>
<Text style={styles.text}>
<Text style={[styles.headerText, { color: theme.text }]}>What's unique?</Text>
<Text style={[styles.text, { color: theme.text }]}>
Provides a modern method to capture experiences using the devices
that are with us every day.
</Text>

<Text style={styles.headerText}>Our Mission</Text>
<Text style={styles.text}>
<Text style={[styles.headerText, { color: theme.text }]}>Our Mission</Text>
<Text style={[styles.text, { color: theme.text }]}>
Connect people of diverse religious backgrounds, beliefs, and
practices.
</Text>

<Text style={styles.headerText}>Why use 'Where's Religion?'</Text>
<Text style={styles.text}>
<Text style={[styles.headerText, { color: theme.text }]}>Why use 'Where's Religion?'</Text>
<Text style={[styles.text, { color: theme.text }]}>
Explore religious traditions, find places of worship, engage in
meaningful discussions.
</Text>

<View style={styles.textContainer}>
<View style={styles.buttonContainer}>
<View style={styles.switchContainer}>
<Text style={styles.switchText}>Dark Mode</Text>
<View style={[styles.switchContainer, { backgroundColor: theme.background }]}>
<Text style={[styles.switchText, { color: theme.text }]}>Dark Mode</Text>
<Switch
testID="dark-mode-switch"
trackColor={{
Expand All @@ -158,20 +159,35 @@ export default function MorePage() {
</View>
</View>
</View>
<View style={styles.logoutContainer}>
<TouchableOpacity
key="Logout"
style={styles.logout}
onPress={onLogoutPress}
>
<Text style={styles.logoutText}>Logout</Text>
<Ionicons
name={"log-out-outline"}
size={30}
color={theme.primaryColor}
/>
</TouchableOpacity>
</View>
<View style={[styles.logoutContainer, { backgroundColor: theme.background }]}>
<TouchableOpacity
key="Logout"
style={[
styles.logout,
{
backgroundColor: isDarkmode ? 'white' : 'black',
},
]}
onPress={onLogoutPress}
>
<Text
style={[
styles.logoutText,
{
color: isDarkmode ? 'black' : 'white',
},
]}
>
Logout
</Text>
<Ionicons
name={"log-out-outline"}
size={30}
color={isDarkmode ? 'black' : 'white'}
/>
</TouchableOpacity>
</View>

</ScrollView>
</SafeAreaView>
</>
Expand Down

0 comments on commit 01d6687

Please sign in to comment.