Make the Dashboard tab configurable, and implement new components

package.cordovabuild.json

@@ -139,7 +139,7 @@
     "cordova-custom-config": "^5.1.1",
     "cordova-plugin-ibeacon": "git+https://github.com/louisg1337/cordova-plugin-ibeacon.git",
     "core-js": "^2.5.7",
-    "e-mission-common": "git+https://github.com/JGreenlee/e-mission-common.git#0.4.4",
+    "e-mission-common": "github:JGreenlee/e-mission-common#semver:0.5.1",
     "enketo-core": "^6.1.7",
     "enketo-transformer": "^4.0.0",
     "fast-xml-parser": "^4.2.2",

package.serve.json

@@ -65,7 +65,7 @@
     "chartjs-adapter-luxon": "^1.3.1",
     "chartjs-plugin-annotation": "^3.0.1",
     "core-js": "^2.5.7",
-    "e-mission-common": "git+https://github.com/JGreenlee/e-mission-common.git#0.4.4",
+    "e-mission-common": "github:JGreenlee/e-mission-common#semver:0.5.1",
     "enketo-core": "^6.1.7",
     "enketo-transformer": "^4.0.0",
     "fast-xml-parser": "^4.2.2",

www/__tests__/Carousel.test.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { View } from 'react-native';
+import Carousel from '../js/components/Carousel';
+
+describe('Carousel component', () => {
+  const child1 = <View testID="child1">Child 1</View>;
+  const child2 = <View testID="child2">Child 2</View>;
+  const cardWidth = 100;
+  const cardMargin = 10;
+
+  it('renders children correctly', () => {
+    const { getByTestId } = render(
+      <Carousel cardWidth={cardWidth} cardMargin={cardMargin}>
+        {child1}
+        {child2}
+      </Carousel>,
+    );
+
+    const renderedChild1 = getByTestId('child1');
+    const renderedChild2 = getByTestId('child2');
+
+    expect(renderedChild1).toBeTruthy();
+    expect(renderedChild2).toBeTruthy();
+  });
+});

www/__tests__/DateSelect.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react-native';
+import DateSelect from '../js/diary/list/DateSelect';
+
+jest.mock('react-native-safe-area-context', () => ({
+  useSafeAreaInsets: () => ({ bottom: 30, left: 0, right: 0, top: 30 }),
+}));
+jest.spyOn(React, 'useState').mockImplementation((initialValue) => [initialValue, jest.fn()]);
+jest.spyOn(React, 'useEffect').mockImplementation((effect: () => void) => effect());
+
+describe('DateSelect', () => {
+  it('renders correctly', () => {
+    const onChooseMock = jest.fn();
+    const { getByText } = render(<DateSelect mode="range" onChoose={onChooseMock} />);
+
+    expect(screen.getByTestId('button-container')).toBeTruthy();
+    expect(screen.getByTestId('button')).toBeTruthy();
+  });
+});

www/__tests__/appTheme.test.ts

@@ -0,0 +1,22 @@
+import { getTheme } from '../js/appTheme';
+
+describe('getTheme', () => {
+  it('should return the right theme with place', () => {
+    const theme = getTheme('place');
+    expect(theme.colors.elevation.level1).toEqual('#cbe6ff');
+  });
+
+  it('should return the right theme with untracked', () => {
+    const theme = getTheme('untracked');
+    expect(theme.colors.primary).toEqual('#8c4a57');
+    expect(theme.colors.primaryContainer).toEqual('#e3bdc2');
+    expect(theme.colors.elevation.level1).toEqual('#f8ebec');
+  });
+
+  it('should return the right theme with draft', () => {
+    const theme = getTheme('draft');
+    expect(theme.colors.primary).toEqual('#616971');
+    expect(theme.colors.primaryContainer).toEqual('#b6bcc2');
+    expect(theme.colors.background).toEqual('#eef1f4');
+  });
+});