-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Add testing framework * Test query period picking behaviour
- Loading branch information
Showing
24 changed files
with
8,335 additions
and
2,311 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| { | ||
| "clearMocks": true, | ||
| "coverageDirectory": "coverage", | ||
| "coverageProvider": "v8", | ||
| "testEnvironment": "jsdom", | ||
| "globals": { | ||
| "BUILD_EXTRA": true | ||
| }, | ||
| "setupFiles": ["<rootDir>/test-utils/set-fixed-timezone.ts"], | ||
| "setupFilesAfterEnv": [ | ||
| "<rootDir>/test-utils/extend-expect.ts", | ||
| "<rootDir>/test-utils/reset-state.ts" | ||
| ], | ||
| "transform": { | ||
| "^.+.[tj]sx?$": ["ts-jest", {}] | ||
| }, | ||
| "moduleNameMapper": { | ||
| "d3": "<rootDir>/node_modules/d3/dist/d3.min.js" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,182 @@ | ||
| /** @format */ | ||
|
|
||
| import React from 'react' | ||
| import { render, screen } from '@testing-library/react' | ||
| import userEvent from '@testing-library/user-event' | ||
| import DatePicker from './datepicker' | ||
| import { TestContextProviders } from '../../test-utils/app-context-providers' | ||
| import { stringifySearch } from './util/url' | ||
| import { useNavigate } from 'react-router-dom' | ||
| import { getRouterBasepath } from './router' | ||
|
|
||
| const domain = 'picking-query-dates.test' | ||
| const periodStorageKey = `period__${domain}` | ||
|
|
||
| test('if no period is stored, loads with default value of "Last 30 days", all expected options are present', async () => { | ||
| expect(localStorage.getItem(periodStorageKey)).toBe(null) | ||
| render(<DatePicker />, { | ||
| wrapper: (props) => ( | ||
| <TestContextProviders siteOptions={{ domain }} {...props} /> | ||
| ) | ||
| }) | ||
|
|
||
| await userEvent.click(screen.getByText('Last 30 days')) | ||
|
|
||
| expect(screen.getByTestId('datemenu')).toBeVisible() | ||
| expect(screen.getAllByRole('link').map((el) => el.textContent)).toEqual( | ||
| [ | ||
| ['Today', 'D'], | ||
| ['Yesterday', 'E'], | ||
| ['Realtime', 'R'], | ||
| ['Last 7 Days', 'W'], | ||
| ['Last 30 Days', 'T'], | ||
| ['Month to Date', 'M'], | ||
| ['Last Month', ''], | ||
| ['Year to Date', 'Y'], | ||
| ['Last 12 months', 'L'], | ||
| ['All time', 'A'] | ||
| ].map((a) => a.join('')) | ||
| ) | ||
| expect(screen.getByText('Custom Range').textContent).toEqual( | ||
| ['Custom Range', 'C'].join('') | ||
| ) | ||
| expect(screen.getByText('Compare').textContent).toEqual( | ||
| ['Compare', 'X'].join('') | ||
| ) | ||
| }) | ||
|
|
||
| test('user can select a new period and its value is stored', async () => { | ||
| render(<DatePicker />, { | ||
| wrapper: (props) => ( | ||
| <TestContextProviders siteOptions={{ domain }} {...props} /> | ||
| ) | ||
| }) | ||
|
|
||
| await userEvent.click(screen.getByText('Last 30 days')) | ||
| expect(screen.getByTestId('datemenu')).toBeVisible() | ||
| await userEvent.click(screen.getByText('All time')) | ||
| expect(screen.queryByTestId('datemenu')).toBeNull() | ||
| expect(localStorage.getItem(periodStorageKey)).toBe('all') | ||
| }) | ||
|
|
||
| test('stored period "all" is respected, and Compare option is not present for it in menu', async () => { | ||
| localStorage.setItem(periodStorageKey, 'all') | ||
|
|
||
| render(<DatePicker />, { | ||
| wrapper: (props) => ( | ||
| <TestContextProviders siteOptions={{ domain }} {...props} /> | ||
| ) | ||
| }) | ||
|
|
||
| await userEvent.click(screen.getByText('All time')) | ||
| expect(screen.getByTestId('datemenu')).toBeVisible() | ||
| expect(screen.queryByText('Compare')).toBeNull() | ||
| }) | ||
|
|
||
| test.each([ | ||
| [{ period: 'all' }, 'All time'], | ||
| [{ period: 'month' }, 'Month to Date'], | ||
| [{ period: 'year' }, 'Year to Date'] | ||
| ])( | ||
| 'the query period from search %p is respected and stored', | ||
| async (searchRecord, buttonText) => { | ||
| const startUrl = `${getRouterBasepath({ domain, shared: false })}${stringifySearch(searchRecord)}` | ||
|
|
||
| render(<DatePicker />, { | ||
| wrapper: (props) => ( | ||
| <TestContextProviders | ||
| siteOptions={{ domain }} | ||
| routerProps={{ initialEntries: [startUrl] }} | ||
| {...props} | ||
| /> | ||
| ) | ||
| }) | ||
|
|
||
| expect(screen.getByText(buttonText)).toBeVisible() | ||
| expect(localStorage.getItem(periodStorageKey)).toBe(searchRecord.period) | ||
| } | ||
| ) | ||
|
|
||
| test.each([ | ||
| [ | ||
| { period: 'custom', from: '2024-08-10', to: '2024-08-20' }, | ||
| '10 Aug - 20 Aug' | ||
| ], | ||
| [{ period: 'realtime' }, 'Realtime'] | ||
| ])( | ||
| 'the query period from search %p is respected but not stored', | ||
| async (searchRecord, buttonText) => { | ||
| const startUrl = `${getRouterBasepath({ domain, shared: false })}${stringifySearch(searchRecord)}` | ||
|
|
||
| render(<DatePicker />, { | ||
| wrapper: (props) => ( | ||
| <TestContextProviders | ||
| siteOptions={{ domain }} | ||
| routerProps={{ initialEntries: [startUrl] }} | ||
| {...props} | ||
| /> | ||
| ) | ||
| }) | ||
| expect(screen.getByText(buttonText)).toBeVisible() | ||
| expect(localStorage.getItem(periodStorageKey)).toBe(null) | ||
| } | ||
| ) | ||
|
|
||
| test.each([ | ||
| ['all', '7d', 'Last 7 days'], | ||
| ['30d', 'month', 'Month to Date'] | ||
| ])( | ||
| 'if the stored period is %p but query period is %p, query is respected and the stored period is overwritten', | ||
| async (storedPeriod, queryPeriod, buttonText) => { | ||
| localStorage.setItem(periodStorageKey, storedPeriod) | ||
| const startUrl = `${getRouterBasepath({ domain, shared: false })}${stringifySearch({ period: queryPeriod })}` | ||
|
|
||
| render(<DatePicker />, { | ||
| wrapper: (props) => ( | ||
| <TestContextProviders | ||
| siteOptions={{ domain, shared: false }} | ||
| routerProps={{ | ||
| initialEntries: [startUrl] | ||
| }} | ||
| {...props} | ||
| /> | ||
| ) | ||
| }) | ||
|
|
||
| await userEvent.click(screen.getByText(buttonText)) | ||
| expect(screen.getByTestId('datemenu')).toBeVisible() | ||
| expect(localStorage.getItem(periodStorageKey)).toBe(queryPeriod) | ||
| } | ||
| ) | ||
|
|
||
| test('going back resets the stored query period to previous value', async () => { | ||
| const BrowserBackButton = () => { | ||
| const navigate = useNavigate() | ||
| return ( | ||
| <button data-testid="browser-back" onClick={() => navigate(-1)}></button> | ||
| ) | ||
| } | ||
| render( | ||
| <> | ||
| <DatePicker /> | ||
| <BrowserBackButton /> | ||
| </>, | ||
| { | ||
| wrapper: (props) => ( | ||
| <TestContextProviders siteOptions={{ domain }} {...props} /> | ||
| ) | ||
| } | ||
| ) | ||
|
|
||
| await userEvent.click(screen.getByText('Last 30 days')) | ||
| await userEvent.click(screen.getByText('Year to Date')) | ||
| expect(localStorage.getItem(periodStorageKey)).toBe('year') | ||
|
|
||
| await userEvent.click(screen.getByText('Year to Date')) | ||
| await userEvent.click(screen.getByText('Month to Date')) | ||
| expect(localStorage.getItem(periodStorageKey)).toBe('month') | ||
|
|
||
| await userEvent.click(screen.getByTestId('browser-back')) | ||
| expect(screen.getByText('Year to Date')).toBeVisible() | ||
| expect(localStorage.getItem(periodStorageKey)).toBe('year') | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.