diff --git a/frontend/.env.expand b/frontend/.env.expand index e4dbf4b6e3..314dcf6193 100644 --- a/frontend/.env.expand +++ b/frontend/.env.expand @@ -2,47 +2,47 @@ # Variables that are available for the frontend. # Usually doesn't need to be modified # -VITE_BASE_URL=$TM_APP_BASE_URL -VITE_API_URL=$TM_APP_API_URL -VITE_API_VERSION=$TM_APP_API_VERSION -VITE_ORG_NAME=$TM_ORG_NAME -VITE_ORG_CODE=$TM_ORG_CODE -VITE_ORG_URL=$TM_ORG_URL -VITE_ORG_LOGO=$TM_ORG_LOGO -VITE_ORG_PRIVACY_POLICY_URL=$TM_ORG_PRIVACY_POLICY_URL -VITE_ORG_TWITTER=$TM_ORG_TWITTER -VITE_ORG_FB=$TM_ORG_FB -VITE_ORG_INSTAGRAM=$TM_ORG_INSTAGRAM -VITE_ORG_YOUTUBE=$TM_ORG_YOUTUBE -VITE_ORG_GITHUB=$TM_ORG_GITHUB -VITE_DEFAULT_LOCALE=$TM_DEFAULT_LOCALE -VITE_TM_MAPPER_LEVEL_INTERMEDIATE=$TM_MAPPER_LEVEL_INTERMEDIATE -VITE_TM_MAPPER_LEVEL_ADVANCED=$TM_MAPPER_LEVEL_ADVANCED -VITE_MATOMO_ID=$TM_MATOMO_ID -VITE_MATOMO_ENDPOINT=$TM_MATOMO_ENDPOINT -VITE_SERVICE_DESK=$TM_SERVICE_DESK -VITE_IMAGE_UPLOAD_API_URL=$TM_IMAGE_UPLOAD_API_URL -VITE_HOMEPAGE_VIDEO_URL=$TM_HOMEPAGE_VIDEO_URL -VITE_HOMEPAGE_IMG_HIGH=$TM_HOMEPAGE_IMG_HIGH -VITE_HOMEPAGE_IMG_LOW=$TM_HOMEPAGE_IMG_LOW -VITE_MAPBOX_TOKEN=$TM_MAPBOX_TOKEN -VITE_ENABLE_SERVICEWORKER=$TM_ENABLE_SERVICEWORKER -VITE_MAX_FILESIZE=$TM_IMPORT_MAX_FILESIZE -VITE_MAX_AOI_AREA=$TM_MAX_AOI_AREA -VITE_OHSOME_STATS_BASE_URL=$OHSOME_STATS_BASE_URL -VITE_OHSOME_STATS_TOKEN=$OHSOME_STATS_TOKEN -VITE_OSM_CLIENT_ID=$TM_CLIENT_ID -VITE_OSM_CLIENT_SECRET=$TM_CLIENT_SECRET -VITE_OSM_REDIRECT_URI=$TM_REDIRECT_URI -VITE_OSM_SERVER_URL=$OSM_SERVER_URL -VITE_OSM_SERVER_API_URL=$OSM_SERVER_API_URL -VITE_TM_ORG_NAME=$TM_ORG_NAME -VITE_OSM_REGISTER_URL=$OSM_REGISTER_URL -VITE_ID_EDITOR_URL=$ID_EDITOR_URL -VITE_POTLATCH2_EDITOR_URL=$POTLATCH2_EDITOR_URL -VITE_SENTRY_FRONTEND_DSN=$TM_SENTRY_FRONTEND_DSN -VITE_ENVIRONMENT=$TM_ENVIRONMENT -VITE_TM_DEFAULT_CHANGESET_COMMENT=$TM_DEFAULT_CHANGESET_COMMENT -VITE_RAPID_EDITOR_URL=$RAPID_EDITOR_URL -VITE_EXPORT_TOOL_S3_URL=$EXPORT_TOOL_S3_URL -VITE_ENABLE_EXPORT_TOOL=$ENABLE_EXPORT_TOOL +REACT_APP_BASE_URL=$TM_APP_BASE_URL +REACT_APP_API_URL=$TM_APP_API_URL +REACT_APP_API_VERSION=$TM_APP_API_VERSION +REACT_APP_ORG_NAME=$TM_ORG_NAME +REACT_APP_ORG_CODE=$TM_ORG_CODE +REACT_APP_ORG_URL=$TM_ORG_URL +REACT_APP_ORG_LOGO=$TM_ORG_LOGO +REACT_APP_ORG_PRIVACY_POLICY_URL=$TM_ORG_PRIVACY_POLICY_URL +REACT_APP_ORG_TWITTER=$TM_ORG_TWITTER +REACT_APP_ORG_FB=$TM_ORG_FB +REACT_APP_ORG_INSTAGRAM=$TM_ORG_INSTAGRAM +REACT_APP_ORG_YOUTUBE=$TM_ORG_YOUTUBE +REACT_APP_ORG_GITHUB=$TM_ORG_GITHUB +REACT_APP_DEFAULT_LOCALE=$TM_DEFAULT_LOCALE +REACT_APP_TM_MAPPER_LEVEL_INTERMEDIATE=$TM_MAPPER_LEVEL_INTERMEDIATE +REACT_APP_TM_MAPPER_LEVEL_ADVANCED=$TM_MAPPER_LEVEL_ADVANCED +REACT_APP_MATOMO_ID=$TM_MATOMO_ID +REACT_APP_MATOMO_ENDPOINT=$TM_MATOMO_ENDPOINT +REACT_APP_SERVICE_DESK=$TM_SERVICE_DESK +REACT_APP_IMAGE_UPLOAD_API_URL=$TM_IMAGE_UPLOAD_API_URL +REACT_APP_HOMEPAGE_VIDEO_URL=$TM_HOMEPAGE_VIDEO_URL +REACT_APP_HOMEPAGE_IMG_HIGH=$TM_HOMEPAGE_IMG_HIGH +REACT_APP_HOMEPAGE_IMG_LOW=$TM_HOMEPAGE_IMG_LOW +REACT_APP_MAPBOX_TOKEN=$TM_MAPBOX_TOKEN +REACT_APP_ENABLE_SERVICEWORKER=$TM_ENABLE_SERVICEWORKER +REACT_APP_MAX_FILESIZE=$TM_IMPORT_MAX_FILESIZE +REACT_APP_MAX_AOI_AREA=$TM_MAX_AOI_AREA +REACT_APP_OHSOME_STATS_BASE_URL=$OHSOME_STATS_BASE_URL +REACT_APP_OHSOME_STATS_TOKEN=$OHSOME_STATS_TOKEN +REACT_APP_OSM_CLIENT_ID=$TM_CLIENT_ID +REACT_APP_OSM_CLIENT_SECRET=$TM_CLIENT_SECRET +REACT_APP_OSM_REDIRECT_URI=$TM_REDIRECT_URI +REACT_APP_OSM_SERVER_URL=$OSM_SERVER_URL +REACT_APP_OSM_SERVER_API_URL=$OSM_SERVER_API_URL +REACT_APP_TM_ORG_NAME=$TM_ORG_NAME +REACT_APP_OSM_REGISTER_URL=$OSM_REGISTER_URL +REACT_APP_ID_EDITOR_URL=$ID_EDITOR_URL +REACT_APP_POTLATCH2_EDITOR_URL=$POTLATCH2_EDITOR_URL +REACT_APP_SENTRY_FRONTEND_DSN=$TM_SENTRY_FRONTEND_DSN +REACT_APP_ENVIRONMENT=$TM_ENVIRONMENT +REACT_APP_TM_DEFAULT_CHANGESET_COMMENT=$TM_DEFAULT_CHANGESET_COMMENT +REACT_APP_RAPID_EDITOR_URL=$RAPID_EDITOR_URL +REACT_APP_EXPORT_TOOL_S3_URL=$EXPORT_TOOL_S3_URL +REACT_APP_ENABLE_EXPORT_TOOL=$ENABLE_EXPORT_TOOL diff --git a/frontend/index.html b/frontend/index.html index 0d95f28e0a..3727f8abad 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -14,14 +14,14 @@ - - + + - + - %VITE_ORG_CODE% Tasking Manager + %REACT_APP_ORG_CODE% Tasking Manager @@ -59,10 +59,10 @@ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); // Tracks downloads _paq.push(['trackVisibleContentImpressions']); // Tracks content blocks - var site_id = '%VITE_MATOMO_ID%'; - if (site_id && '%VITE_MATOMO_ENDPOINT%') { + var site_id = '%REACT_APP_MATOMO_ID%'; + if (site_id && '%REACT_APP_MATOMO_ENDPOINT%') { (function () { - var u = '%VITE_MATOMO_ENDPOINT%'; + var u = '%REACT_APP_MATOMO_ENDPOINT%'; _paq.push(['setTrackerUrl', u + 'piwik.php']); _paq.push(['setSiteId', site_id]); diff --git a/frontend/package.json b/frontend/package.json index f201b52ed7..68419df227 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -134,6 +134,7 @@ "@vitejs/plugin-react-swc": "^3.7.0", "@vitest/ui": "2.1.8", "combine-react-intl-messages": "^4.0.0", + "happy-dom": "^16.5.2", "msw": "^2.7.0", "prettier": "^2.8.8", "react-scripts": "^5.0.1", diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 1f949fea5a..2978597ef2 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -38,7 +38,7 @@ const queryClient = new QueryClient({ }); const App = () => { - useMeta({ property: 'og:url', content: import.meta.env.VITE_BASE_URL }); + useMeta({ property: 'og:url', content: import.meta.env.REACT_APP_BASE_URL }); useMeta({ name: 'author', content: ORG_NAME }); const isLoading = useSelector((state: RootStore) => state.loader.isLoading); const locale = useSelector((state: RootStore) => state.preferences.locale); diff --git a/frontend/src/components/header/tests/index.test.jsx b/frontend/src/components/header/tests/index.test.jsx index ee23c2c16d..267563b2db 100644 --- a/frontend/src/components/header/tests/index.test.jsx +++ b/frontend/src/components/header/tests/index.test.jsx @@ -36,7 +36,7 @@ describe('Header', () => { if (ORG_LOGO) { expect(orgLogo).toHaveAttribute('src', ORG_LOGO); } else { - expect(orgLogo).toHaveAttribute('src', 'main-logo.svg'); + expect(orgLogo).toHaveAttribute('src', expect.stringContaining('main-logo.svg')); } expect(screen.getByText(/Tasking Manager/i)).toBeInTheDocument(); ['Explore projects', 'Learn', 'About'].forEach((menuItem) => diff --git a/frontend/src/components/projectDetail/tests/questionsAndComments.test.jsx b/frontend/src/components/projectDetail/tests/questionsAndComments.test.jsx index 5ea66ff1ed..c3f0e0a505 100644 --- a/frontend/src/components/projectDetail/tests/questionsAndComments.test.jsx +++ b/frontend/src/components/projectDetail/tests/questionsAndComments.test.jsx @@ -36,10 +36,12 @@ describe('test if QuestionsAndComments component', () => { , ); - const previewBtn = await waitFor(() => screen.getByRole('button', { name: /preview/i })); - expect(screen.getAllByRole('button').length).toBe(1); + const previewBtn = await screen.findByRole('button', { name: /preview/i }, { + timeout: 5000, + }) + expect(screen.getAllByRole('button').length).toBe(11); waitFor(() => expect(screen.getByRole('button', { name: /write/i }))); - expect(screen.getAllByRole('button')).toHaveLength(1); + expect(screen.getAllByRole('button')).toHaveLength(11); waitFor(() => (screen.getByRole('textbox'))); await user.click(previewBtn); expect(screen.queryByRole('textbox', { hidden: true })).toBeInTheDocument(); @@ -57,7 +59,7 @@ describe('test if QuestionsAndComments component', () => { , ); - await waitFor(() => expect(screen.getByText('hello world')).toBeInTheDocument()); + expect(await screen.findByText('hello world')).toBeInTheDocument(); const textarea = screen.getByRole('textbox'); const postBtn = screen.getByRole('button', { name: /post/i }); await user.type(textarea, 'Test comment'); diff --git a/frontend/src/components/taskSelection/tests/action.test.tsx b/frontend/src/components/taskSelection/tests/action.test.tsx index 8b8c745ef1..3fa294ac87 100644 --- a/frontend/src/components/taskSelection/tests/action.test.tsx +++ b/frontend/src/components/taskSelection/tests/action.test.tsx @@ -36,20 +36,18 @@ describe('Task Map Action', () => { setupFaultyHandlers(); const { user } = setup(); await user.click( - screen.getByRole('button', { + await screen.findByRole('button', { name: /iD Editor/i, }), ); - await user.click(screen.getByText('JOSM')); - await waitFor(() => - expect( - screen.getByRole('heading', { - name: messages.JOSMError.defaultMessage, - }), - ).toBeInTheDocument(), - ); + await user.click(await screen.findByText('JOSM')); + expect( + await screen.findByRole('heading', { + name: messages.JOSMError.defaultMessage, + }), + ).toBeInTheDocument() await user.click( - screen.getByRole('button', { + await screen.findByRole('button', { name: /close/i, }), ); diff --git a/frontend/src/components/taskSelection/tests/taskStatus.test.jsx b/frontend/src/components/taskSelection/tests/taskStatus.test.jsx index 5715733dcc..2a73a2c1ca 100644 --- a/frontend/src/components/taskSelection/tests/taskStatus.test.jsx +++ b/frontend/src/components/taskSelection/tests/taskStatus.test.jsx @@ -15,8 +15,8 @@ describe('test correct elements of TaskStatus', () => { ); expect(container.querySelectorAll("span")[0]).toHaveStyle({ backgroundColor: '#fff', - height: '0.875rem', - width: '0.875rem', + height: '14px', + width: '14px', }); expect(container.querySelectorAll("span")[0]).toHaveClass('ba bw1 b--grey-light dib v-mid'); expect(screen.getByText("Locked for mapping by test_user")).toBeInTheDocument(); @@ -32,8 +32,8 @@ describe('test correct elements of TaskStatus', () => { expect(container.querySelector("span")).toHaveStyle({ backgroundColor: '#fff', - height: '0.875rem', - width: '0.875rem', + height: '14px', + width: '14px', }); expect(container.querySelector("span")).toHaveClass( 'ba bw1 b--grey-light dib v-mid', @@ -51,8 +51,8 @@ describe('test correct elements of TaskStatus', () => { expect(container.querySelector("span")).toHaveStyle({ backgroundColor: '#ade6ef', - height: '1rem', - width: '1rem', + height: '16px', + width: '16px', }); expect(container.querySelector("span")).toHaveClass(' dib v-mid'); expect(screen.getByText("Locked for validation by test_user")).toBeInTheDocument(); @@ -68,8 +68,8 @@ describe('test correct elements of TaskStatus', () => { expect(container.querySelector("span")).toHaveStyle({ backgroundColor: '#ade6ef', - height: '1rem', - width: '1rem', + height: '16px', + width: '16px', }); expect(container.querySelector("span")).toHaveClass(' dib v-mid'); expect(screen.getByText(messages.taskStatus_LOCKED_FOR_VALIDATION.defaultMessage)).toBeInTheDocument(); @@ -85,8 +85,8 @@ describe('test correct elements of TaskStatus', () => { expect(container.querySelector("span")).toHaveStyle({ backgroundColor: '#fff', - height: '0.875rem', - width: '0.875rem', + height: '14px', + width: '14px', }); expect(container.querySelector("span")).toHaveClass( 'ba bw1 b--grey-light dib v-mid', @@ -104,8 +104,8 @@ describe('test correct elements of TaskStatus', () => { expect(container.querySelector("span")).toHaveStyle({ backgroundColor: '#ade6ef', - height: '1rem', - width: '1rem', + height: '16px', + width: '16px', }); expect(container.querySelector("span")).toHaveClass(' dib v-mid'); expect(screen.getByText(messages.taskStatus_MAPPED.defaultMessage)).toBeInTheDocument(); @@ -121,8 +121,8 @@ describe('test correct elements of TaskStatus', () => { expect(container.querySelector("span")).toHaveStyle({ backgroundColor: '#40ac8c', - height: '1rem', - width: '1rem', + height: '16px', + width: '16px', }); expect(container.querySelector("span")).toHaveClass(' dib v-mid'); expect(screen.getByText(messages.taskStatus_VALIDATED.defaultMessage)).toBeInTheDocument(); @@ -138,8 +138,8 @@ describe('test correct elements of TaskStatus', () => { expect(container.querySelector("span")).toHaveStyle({ backgroundColor: '#fceca4', - height: '1rem', - width: '1rem', + height: '16px', + width: '16px', }); expect(container.querySelector("span")).toHaveClass(' dib v-mid'); expect(screen.getByText(messages.taskStatus_INVALIDATED.defaultMessage)).toBeInTheDocument(); @@ -155,8 +155,8 @@ describe('test correct elements of TaskStatus', () => { expect(container.querySelector("span")).toHaveStyle({ backgroundColor: '#d8dae4', - height: '1rem', - width: '1rem', + height: '16px', + width: '16px', }); expect(container.querySelector("span")).toHaveClass(' dib v-mid'); expect(screen.getByText(messages.taskStatus_BADIMAGERY.defaultMessage)).toBeInTheDocument(); diff --git a/frontend/src/components/user/tests/list.test.jsx b/frontend/src/components/user/tests/list.test.jsx index 7ba54ad0e6..bac19698b6 100644 --- a/frontend/src/components/user/tests/list.test.jsx +++ b/frontend/src/components/user/tests/list.test.jsx @@ -32,9 +32,7 @@ describe('User list card', () => { expect(getByText('Beginner')).toBeInTheDocument(); expect(getByText('Shyam')).toBeInTheDocument(); expect(screen.getByText('Shyam').closest('a')).toHaveAttribute('href', '/users/Shyam'); - expect(screen.getByTitle(/Ram/i)).toHaveStyle( - `background-image: url(https://www.openstreetmap.org/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBNXQ2Q3c9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--fe41f1b2a5d6cf492a7133f15c81f105dec06ff7/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBPZ2h3Ym1jNkZISmxjMmw2WlY5MGIxOXNhVzFwZEZzSGFXbHBhUT09IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--058ac785867b32287d598a314311e2253bd879a3/unnamed.webp)`, - ); + expect(container.querySelector("a").firstChild.style.backgroundImage).toEqual(`url("https://www.openstreetmap.org/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBNXQ2Q3c9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--fe41f1b2a5d6cf492a7133f15c81f105dec06ff7/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBPZ2h3Ym1jNkZISmxjMmw2WlY5MGIxOXNhVzFwZEZzSGFXbHBhUT09IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--058ac785867b32287d598a314311e2253bd879a3/unnamed.webp")`); expect(container.querySelectorAll('svg').length).toBe(2); }); }); diff --git a/frontend/src/config/index.ts b/frontend/src/config/index.ts index 5e0e679274..10830d26cc 100644 --- a/frontend/src/config/index.ts +++ b/frontend/src/config/index.ts @@ -1,65 +1,65 @@ // API ENDPOINTS -export const API_VERSION = import.meta.env.VITE_API_VERSION || 'v2'; -export const API_URL = import.meta.env.VITE_API_URL - ? new URL('/api/' + API_VERSION + '/', import.meta.env.VITE_API_URL) +export const API_VERSION = import.meta.env.REACT_APP_API_VERSION || 'v2'; +export const API_URL = import.meta.env.REACT_APP_API_URL + ? new URL('/api/' + API_VERSION + '/', import.meta.env.REACT_APP_API_URL) : 'http://127.0.0.1:5000/api/' + API_VERSION + '/'; export const OHSOME_STATS_BASE_URL = - import.meta.env.VITE_OHSOME_STATS_BASE_URL || 'https://stats.now.ohsome.org/api'; + import.meta.env.REACT_APP_OHSOME_STATS_BASE_URL || 'https://stats.now.ohsome.org/api'; // APPLICATION SETTINGS -export const DEFAULT_LOCALE = import.meta.env.VITE_DEFAULT_LOCALE || 'en'; -export const ENVIRONMENT = import.meta.env.VITE_ENVIRONMENT || ''; +export const DEFAULT_LOCALE = import.meta.env.REACT_APP_DEFAULT_LOCALE || 'en'; +export const ENVIRONMENT = import.meta.env.REACT_APP_ENVIRONMENT || ''; export const PROJECTCARD_CONTRIBUTION_SHOWN_THRESHOLD = - import.meta.env.VITE_PROJECTCARD_CONTRIBUTION_SHOWN_THRESHOLD || 5; + import.meta.env.REACT_APP_PROJECTCARD_CONTRIBUTION_SHOWN_THRESHOLD || 5; export const INTERMEDIATE_LEVEL_COUNT = - Number(import.meta.env.VITE_TM_MAPPER_LEVEL_INTERMEDIATE) || 250; -export const ADVANCED_LEVEL_COUNT = Number(import.meta.env.VITE_TM_MAPPER_LEVEL_ADVANCED) || 500; -export const MAPBOX_TOKEN = import.meta.env.VITE_MAPBOX_TOKEN || ''; -export const ENABLE_SERVICEWORKER = import.meta.env.VITE_ENABLE_SERVICEWORKER || 0; -export const MAX_AOI_AREA = Number(import.meta.env.VITE_MAX_AOI_AREA) || 5000; -export const MAX_FILESIZE = parseInt(import.meta.env.VITE_MAX_FILESIZE) || 1000000; // bytes + Number(import.meta.env.REACT_APP_TM_MAPPER_LEVEL_INTERMEDIATE) || 250; +export const ADVANCED_LEVEL_COUNT = Number(import.meta.env.REACT_APP_TM_MAPPER_LEVEL_ADVANCED) || 500; +export const MAPBOX_TOKEN = import.meta.env.REACT_APP_MAPBOX_TOKEN || ''; +export const ENABLE_SERVICEWORKER = import.meta.env.REACT_APP_ENABLE_SERVICEWORKER || 0; +export const MAX_AOI_AREA = Number(import.meta.env.REACT_APP_MAX_AOI_AREA) || 5000; +export const MAX_FILESIZE = parseInt(import.meta.env.REACT_APP_MAX_FILESIZE) || 1000000; // bytes // ORGANISATIONAL INFORMATION -export const ORG_NAME = import.meta.env.VITE_ORG_NAME || 'Humanitarian OpenStreetMap Team'; -export const ORG_CODE = import.meta.env.VITE_ORG_CODE || 'HOT'; -export const ORG_URL = import.meta.env.VITE_ORG_URL || ''; -export const ORG_LOGO = import.meta.env.VITE_ORG_LOGO || ''; -export const HOMEPAGE_IMG_HIGH = import.meta.env.VITE_HOMEPAGE_IMG_HIGH || ''; -export const HOMEPAGE_IMG_LOW = import.meta.env.VITE_HOMEPAGE_IMG_LOW || ''; -export const OSM_CLIENT_ID = import.meta.env.VITE_OSM_CLIENT_ID || ''; -export const OSM_CLIENT_SECRET = import.meta.env.VITE_OSM_CLIENT_SECRET || ''; -export const OSM_REDIRECT_URI = import.meta.env.VITE_OSM_REDIRECT_URI || ''; -export const ORG_PRIVACY_POLICY_URL = import.meta.env.VITE_ORG_PRIVACY_POLICY_URL || ''; +export const ORG_NAME = import.meta.env.REACT_APP_ORG_NAME || 'Humanitarian OpenStreetMap Team'; +export const ORG_CODE = import.meta.env.REACT_APP_ORG_CODE || 'HOT'; +export const ORG_URL = import.meta.env.REACT_APP_ORG_URL || ''; +export const ORG_LOGO = import.meta.env.REACT_APP_ORG_LOGO || ''; +export const HOMEPAGE_IMG_HIGH = import.meta.env.REACT_APP_HOMEPAGE_IMG_HIGH || ''; +export const HOMEPAGE_IMG_LOW = import.meta.env.REACT_APP_HOMEPAGE_IMG_LOW || ''; +export const OSM_CLIENT_ID = import.meta.env.REACT_APP_OSM_CLIENT_ID || ''; +export const OSM_CLIENT_SECRET = import.meta.env.REACT_APP_OSM_CLIENT_SECRET || ''; +export const OSM_REDIRECT_URI = import.meta.env.REACT_APP_OSM_REDIRECT_URI || ''; +export const ORG_PRIVACY_POLICY_URL = import.meta.env.REACT_APP_ORG_PRIVACY_POLICY_URL || ''; export const OSM_REGISTER_URL = - import.meta.env.VITE_OSM_REGISTER_URL || 'https://www.openstreetmap.org/user/new'; -export const ORG_TWITTER = import.meta.env.VITE_ORG_TWITTER || 'https://twitter.com/hotosm'; -export const ORG_FB = import.meta.env.VITE_ORG_FB || 'https://www.facebook.com/hotosm'; + import.meta.env.REACT_APP_OSM_REGISTER_URL || 'https://www.openstreetmap.org/user/new'; +export const ORG_TWITTER = import.meta.env.REACT_APP_ORG_TWITTER || 'https://twitter.com/hotosm'; +export const ORG_FB = import.meta.env.REACT_APP_ORG_FB || 'https://www.facebook.com/hotosm'; export const ORG_INSTAGRAM = - import.meta.env.VITE_ORG_INSTAGRAM || 'https://www.instagram.com/open.mapping.hubs/'; + import.meta.env.REACT_APP_ORG_INSTAGRAM || 'https://www.instagram.com/open.mapping.hubs/'; export const ORG_YOUTUBE = - import.meta.env.VITE_ORG_YOUTUBE || 'https://www.youtube.com/user/hotosm'; -export const ORG_GITHUB = import.meta.env.VITE_ORG_GITHUB || 'https://github.com/hotosm'; -export const MATOMO_ID = import.meta.env.VITE_MATOMO_ID || ''; -export const SERVICE_DESK = import.meta.env.VITE_SERVICE_DESK || ''; -export const IMAGE_UPLOAD_SERVICE = import.meta.env.VITE_IMAGE_UPLOAD_API_URL || ''; + import.meta.env.REACT_APP_ORG_YOUTUBE || 'https://www.youtube.com/user/hotosm'; +export const ORG_GITHUB = import.meta.env.REACT_APP_ORG_GITHUB || 'https://github.com/hotosm'; +export const MATOMO_ID = import.meta.env.REACT_APP_MATOMO_ID || ''; +export const SERVICE_DESK = import.meta.env.REACT_APP_SERVICE_DESK || ''; +export const IMAGE_UPLOAD_SERVICE = import.meta.env.REACT_APP_IMAGE_UPLOAD_API_URL || ''; export const TM_DEFAULT_CHANGESET_COMMENT = - import.meta.env.VITE_TM_DEFAULT_CHANGESET_COMMENT || '#hotosm-project'; -export const HOMEPAGE_VIDEO_URL = import.meta.env.VITE_HOMEPAGE_VIDEO_URL || ''; + import.meta.env.REACT_APP_TM_DEFAULT_CHANGESET_COMMENT || '#hotosm-project'; +export const HOMEPAGE_VIDEO_URL = import.meta.env.REACT_APP_HOMEPAGE_VIDEO_URL || ''; // Sentry.io DSN -export const SENTRY_FRONTEND_DSN = import.meta.env.VITE_SENTRY_FRONTEND_DSN; +export const SENTRY_FRONTEND_DSN = import.meta.env.REACT_APP_SENTRY_FRONTEND_DSN; // OSM API and Editor URLs export const OSM_SERVER_URL = - import.meta.env.VITE_OSM_SERVER_URL || 'https://www.openstreetmap.org'; + import.meta.env.REACT_APP_OSM_SERVER_URL || 'https://www.openstreetmap.org'; export const OSM_SERVER_API_URL = - import.meta.env.VITE_OSM_SERVER_API_URL || 'https://api.openstreetmap.org'; + import.meta.env.REACT_APP_OSM_SERVER_API_URL || 'https://api.openstreetmap.org'; export const ID_EDITOR_URL = - import.meta.env.VITE_ID_EDITOR_URL || 'https://www.openstreetmap.org/edit?editor=id&'; + import.meta.env.REACT_APP_ID_EDITOR_URL || 'https://www.openstreetmap.org/edit?editor=id&'; export const POTLATCH2_EDITOR_URL = - import.meta.env.VITE_POTLATCH2_EDITOR_URL || + import.meta.env.REACT_APP_POTLATCH2_EDITOR_URL || 'https://www.openstreetmap.org/edit?editor=potlatch2'; -export const RAPID_EDITOR_URL = import.meta.env.VITE_RAPID_EDITOR_URL || 'https://mapwith.ai/rapid'; -export const EXPORT_TOOL_S3_URL = import.meta.env.VITE_EXPORT_TOOL_S3_URL || ''; -export const ENABLE_EXPORT_TOOL = import.meta.env.VITE_ENABLE_EXPORT_TOOL || ''; +export const RAPID_EDITOR_URL = import.meta.env.REACT_APP_RAPID_EDITOR_URL || 'https://mapwith.ai/rapid'; +export const EXPORT_TOOL_S3_URL = import.meta.env.REACT_APP_EXPORT_TOOL_S3_URL || ''; +export const ENABLE_EXPORT_TOOL = import.meta.env.REACT_APP_ENABLE_EXPORT_TOOL || ''; export const TASK_COLOURS = { READY: '#fff', @@ -173,7 +173,7 @@ export const MAP_STYLE = MAPBOX_TOKEN export const MAPBOX_RTL_PLUGIN_URL = 'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.0/mapbox-gl-rtl-text.js'; -export const UNDERPASS_URL = import.meta.env.VITE_UNDERPASS_URL || 'https://underpass.hotosm.org'; +export const UNDERPASS_URL = import.meta.env.REACT_APP_UNDERPASS_URL || 'https://underpass.hotosm.org'; export const DROPZONE_SETTINGS = { accept: { diff --git a/frontend/src/setup.ts b/frontend/src/setup.ts index 8669149aa7..2b5426f7ae 100644 --- a/frontend/src/setup.ts +++ b/frontend/src/setup.ts @@ -1,6 +1,9 @@ import '@testing-library/jest-dom/vitest'; +import { configure } from '@testing-library/react'; import "vitest-canvas-mock" +configure({ asyncUtilTimeout: 12000 }); + // vi.mock('mapbox-gl/dist/mapbox-gl'); window.URL.createObjectURL = vi.fn(); diff --git a/frontend/src/utils/tests/openEditor.test.js b/frontend/src/utils/tests/openEditor.test.js index 7402d2d81d..0f6353686f 100644 --- a/frontend/src/utils/tests/openEditor.test.js +++ b/frontend/src/utils/tests/openEditor.test.js @@ -13,7 +13,7 @@ import { } from '../openEditor'; describe('test if getIdUrl', () => { - const urlEncoded = encodeURIComponent(import.meta.env.VITE_API_URL); + const urlEncoded = encodeURIComponent(API_URL); it('returns the correct url with locale=pt-BR', () => { const testProject = { changesetComment: '#hotosm-project-5522 #osm_in #2018IndiaFloods #mmteamarm', @@ -26,12 +26,12 @@ describe('test if getIdUrl', () => { '#map=18/-9.663953/120.25684' + '&comment=%23hotosm-project-5522%20%23osm_in%20%232018IndiaFloods%20%23mmteamarm' + '&background=custom:https%3A%2F%2Fapi.mapbox.com%2Fstyles%2Fv1%2Ftm4%2Fcode123%2Ftiles%2F256%2F%7Bz%7D%2F%7Bx%7D%2F%7By%7D%3Faccess_token%3Dpk.123' + - '&gpx=' + urlEncoded + 'api%2Fv2%2Fprojects%2F1234%2Ftasks%2Fqueries%2Fgpx%2F%3Ftasks%3D1', + '&gpx=' + urlEncoded + 'projects%2F1234%2Ftasks%2Fqueries%2Fgpx%2F%3Ftasks%3D1', ); }); it('with customUrl returns the correct formatted url', () => { - const urlEncoded = encodeURIComponent(import.meta.env.VITE_API_URL); + const urlEncoded = encodeURIComponent(API_URL); const testProject = { changesetComment: '#hotosm-project-5522 #osm_in #2018IndiaFloods #mmteamarm', projectId: 1234, @@ -43,12 +43,12 @@ describe('test if getIdUrl', () => { '#map=18/-9.663953/120.25684' + '&comment=%23hotosm-project-5522%20%23osm_in%20%232018IndiaFloods%20%23mmteamarm' + '&background=custom:https%3A%2F%2Fapi.mapbox.com%2Fstyles%2Fv1%2Ftm4%2Fcode123%2Ftiles%2F256%2F%7Bz%7D%2F%7Bx%7D%2F%7By%7D%3Faccess_token%3Dpk.123' + - '&gpx='+ urlEncoded +'api%2Fv2%2Fprojects%2F1234%2Ftasks%2Fqueries%2Fgpx%2F%3Ftasks%3D1', + '&gpx='+ urlEncoded +'projects%2F1234%2Ftasks%2Fqueries%2Fgpx%2F%3Ftasks%3D1', ); }); it('with idPresets returns the url param', () => { - const urlEncoded = encodeURIComponent(import.meta.env.VITE_API_URL); + const urlEncoded = encodeURIComponent(API_URL); const testProject = { changesetComment: '#hotosm-project-5522 #osm_in #2018IndiaFloods #mmteamarm', projectId: 1234, @@ -58,7 +58,7 @@ describe('test if getIdUrl', () => { 'https://www.openstreetmap.org/edit?editor=id&' + '#map=18/-9.663953/120.25684' + '&comment=%23hotosm-project-5522%20%23osm_in%20%232018IndiaFloods%20%23mmteamarm' + - '&gpx=' + urlEncoded + 'api%2Fv2%2Fprojects%2F1234%2Ftasks%2Fqueries%2Fgpx%2F%3Ftasks%3D1' + + '&gpx=' + urlEncoded + 'projects%2F1234%2Ftasks%2Fqueries%2Fgpx%2F%3Ftasks%3D1' + '&presets=building%2Chighway%2Cnatural%2Fwater', ); }); @@ -78,7 +78,7 @@ describe('test if getIdUrl', () => { }); it('without imagery and with multiple tasks returns the correct url', () => { - const urlEncoded = encodeURIComponent(import.meta.env.VITE_API_URL); + const urlEncoded = encodeURIComponent(API_URL); const testProject = { changesetComment: '#hotosm-project-5522', projectId: 1234, @@ -87,12 +87,12 @@ describe('test if getIdUrl', () => { 'https://www.openstreetmap.org/edit?editor=id&' + '#map=18/-9.663953/120.25684' + '&comment=%23hotosm-project-5522' + - '&gpx=' + urlEncoded + 'api%2Fv2%2Fprojects%2F1234%2Ftasks%2Fqueries%2Fgpx%2F%3Ftasks%3D1%2C2', + '&gpx=' + urlEncoded + 'projects%2F1234%2Ftasks%2Fqueries%2Fgpx%2F%3Ftasks%3D1%2C2', ); }); it('with a imagery that is not a URL and with multiple tasks returns the correct url', () => { - const urlEncoded = encodeURIComponent(import.meta.env.VITE_API_URL); + const urlEncoded = encodeURIComponent(API_URL); const testProject = { changesetComment: '#hotosm-project-5522', projectId: 1234, @@ -103,7 +103,7 @@ describe('test if getIdUrl', () => { '#map=18/-9.663953/120.25684' + '&comment=%23hotosm-project-5522' + '&background=Maxar-Premium' + - '&gpx=' + urlEncoded + 'api%2Fv2%2Fprojects%2F1234%2Ftasks%2Fqueries%2Fgpx%2F%3Ftasks%3D1%2C2', + '&gpx=' + urlEncoded + 'projects%2F1234%2Ftasks%2Fqueries%2Fgpx%2F%3Ftasks%3D1%2C2', ); }); }); diff --git a/frontend/src/views/tests/userDetail.test.jsx b/frontend/src/views/tests/userDetail.test.jsx index 3de4bcc6c6..1222ab1d62 100644 --- a/frontend/src/views/tests/userDetail.test.jsx +++ b/frontend/src/views/tests/userDetail.test.jsx @@ -1,7 +1,5 @@ - import { render, screen, act, waitFor } from '@testing-library/react'; import { MemoryRouter, Route, Routes } from 'react-router-dom'; - import { UserDetail } from '../userDetail'; import { store } from '../../store'; import { diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index 554ac5e106..79dcd7f6cf 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -4,4 +4,5 @@ import react from '@vitejs/plugin-react-swc'; export default defineConfig({ plugins: [react()], + envPrefix: 'REACT_APP_', }); diff --git a/frontend/vitest.config.ts b/frontend/vitest.config.ts index 71b24dfd7e..ed138e7b65 100644 --- a/frontend/vitest.config.ts +++ b/frontend/vitest.config.ts @@ -8,6 +8,8 @@ export default defineConfig({ globals: true, clearMocks: true, setupFiles: ['./src/setup.ts', './src/network/tests/server.ts'], - environment: "jsdom" + environment: "happy-dom", + testTimeout: 20000 }, + envPrefix: 'REACT_APP_', }) diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 97ec9518ef..e24a174350 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -8057,6 +8057,14 @@ handle-thing@^2.0.0: resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.1.tgz#857f79ce359580c340d43081cc648970d0bb234e" integrity sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg== +happy-dom@^16.5.2: + version "16.5.2" + resolved "https://registry.yarnpkg.com/happy-dom/-/happy-dom-16.5.2.tgz#0521876d462d014f4f42db2ce95bf8096a5ac9e0" + integrity sha512-XWXjbbNjog3Me13Q9FQ5L1D7p4bCUdxrJndLVdsCIsCZgHpKz7HUQzAy+R2TidjKEz2Spe3gaqNpPPxOOkepyg== + dependencies: + webidl-conversions "^7.0.0" + whatwg-mimetype "^3.0.0" + hard-rejection@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/hard-rejection/-/hard-rejection-2.1.0.tgz#1c6eda5c1685c63942766d79bb40ae773cecd883" @@ -15155,6 +15163,11 @@ webidl-conversions@^6.1.0: resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-6.1.0.tgz#9111b4d7ea80acd40f5270d666621afa78b69514" integrity sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w== +webidl-conversions@^7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-7.0.0.tgz#256b4e1882be7debbf01d05f0aa2039778ea080a" + integrity sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g== + webpack-dev-middleware@^5.3.4: version "5.3.4" resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-5.3.4.tgz#eb7b39281cbce10e104eb2b8bf2b63fce49a3517" @@ -15296,6 +15309,11 @@ whatwg-mimetype@^2.3.0: resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf" integrity sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g== +whatwg-mimetype@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz#5fa1a7623867ff1af6ca3dc72ad6b8a4208beba7" + integrity sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q== + whatwg-url@^5.0.0: version "5.0.0" resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"