generated from ooloo-io/reddit-timer-base
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* header task: first commit * header task: fixed missing default 'javascript' * header task: fixed default link: '/search/javascript' * header after first review * header fixing test * implemented unit test * header: before rebase after app-skeleton-review * resolved conflicts. Fixed unit tests * footer: initial commit * implemented Footer.js and Footer.style.js * footer: completed unit tests * hero-section: initial commit with with fixes from previous PR * hero-section: completed unit tests * hero-section: fixed linting issues in unit tests * hero-section: fixed Apps to have all unit tests pass * hero-section: added missing test descriptions in footer.js * hero-section: refactor components and file structure after review * info-section: initial commit * info-section: implemented About and How it works sections * info-section: fix link to https://ooloo.io/employers * info-section: implemented react-router-hash-link * info-section: fixed ooloo.io link * info-section: implemented unit tests * info-section: fixed linting errors * info-section: fixed linting errors * info-section: fix unit test using this: testing-library/dom-testing-library#477 (comment) * info-section: commit after review * subreddit-form: initial commit. Setup folder structure * subreddit-form: implement tests * subreddit-form: fix lint error in Header.js * subreddit-form: completed unit and e2e tests * subreddit-form: fixes and cleanup after review * load-the-data: initial commit: added LoadTheData.js * load-the-data: fetching data implemented. But unit test and e2e test filing * load-the-data: troubleshooting tests * load-the-data: continue troubleshooting tests * load-the-data: fix linting error * load-the-data: fix the code to fetch top 500 posts * load-the-data: troubleshooting unit test - 'invalid json response body at reason: Unexpected end of JSON input' * load-the-data: integration test passing * load-the-data: refactor code after review. still 1 test to fix in SearchPage.js * laod-the-data: all tests pass * heatmap: first commit: setup heatmap table * heatmap: implemented heatmap architecture * heatmap: implemented user timezone * heatmap: implemented hover, highlit and timezone * heatmap: completed implementation - start testing * heatmap: refactor component structure - set test skeleton * heatmap: complete integration tests * heatmap: complete. fix user timezone in tests * heatmap: refactor code after review * heatmap: fix all test errors. ready to merge pr * heatmap: fix last test errors. ready to merge pr * posts-table: e2e tests passing * posts-table: 2 integration tests remaining * posts-table: resolved conflicts * posts-table: fix lint issue * posts-table: fix lint issue * posts-table: implemented posts sorted by time created * post-table: refactor after review * Final refactor: cleaned up tests and set background color to white * readme: add project readme * readme: made header menu responsive on mobile device * readme: made header menu responsive on mobile device: fixe error * readme: implemented cell with deleted author and cell background colr scheme selection * readme: implemented postsTable display in modal window * pre-deployment: clean up styling - added tootips * readme: Completed features integration tests * readme: Completed Cypress e2e tests * readme: refactor for responsive form and footer. Added to readme * readme: added to readme * readme: 2nd push after rebase. clean up and fixes
- Loading branch information
Showing
38 changed files
with
3,067 additions
and
522 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import describeOnBranches from '../utils/describeOnBranches'; | ||
|
|
||
| describeOnBranches('readme')('Readme', () => { | ||
| before(() => { | ||
| cy.stubFetch(); | ||
| }); | ||
|
|
||
| beforeEach(() => { | ||
| cy.initMockRedditAPI(); | ||
| cy.visitWithStubbedFetch('/search/javascript'); | ||
| cy.waitForRedditRequests(); | ||
| }); | ||
|
|
||
| it('Has h2 headline "Color Scheme" and two radio buttons', () => { | ||
| cy.contains('Color Scheme'); | ||
|
|
||
| cy.get('[type="radio"]').check('hourBackgroundDefault'); | ||
| cy.get('[type="radio"]').check('hourBackground1'); | ||
| }); | ||
|
|
||
| it('Has h2 headline "Show Posts in Modal Window" and one checkbox to choose how to display posts table', () => { | ||
| // click Sunday 6 am, the "5" in the heatmap | ||
| cy.contains(/^5$/) | ||
| .click(); | ||
|
|
||
| cy.get('#viewInModal').check(); | ||
| cy.get('[data-testid="postsModal"]').get('[data-cy="closeModal"]').click(); | ||
| cy.get('#viewInModal').uncheck(); | ||
| }); | ||
| }); |
Binary file not shown.
.png){kind=link}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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,128 @@ | ||
| import React from 'react'; | ||
| import { MemoryRouter, Route } from 'react-router-dom'; | ||
| import { | ||
| render, screen, waitFor, within, | ||
| } from '@testing-library/react'; | ||
| import userEvent from '@testing-library/user-event'; | ||
| import '@testing-library/jest-dom/extend-expect'; | ||
|
|
||
| import App from '../app'; | ||
|
|
||
| const setup = (initialPath = '/') => { | ||
| let history; | ||
|
|
||
| const view = render( | ||
| <MemoryRouter initialEntries={[initialPath]}> | ||
| <App /> | ||
| <Route | ||
| path="*" | ||
| render={(props) => { | ||
| history = props.history; | ||
| return null; | ||
| }} | ||
| /> | ||
| </MemoryRouter>, | ||
| ); | ||
|
|
||
| return { ...view, history }; | ||
| }; | ||
|
|
||
| describe('feature #1: choose heatmap color scheme', () => { | ||
| it('heatmap shows color scheme choices', async () => { | ||
| setup('/search/javascript'); | ||
|
|
||
| screen.getByText('loading-spinner.svg'); | ||
|
|
||
| expect(await screen.findByRole('heading', { name: 'Color Scheme' })).toBeInTheDocument(); | ||
|
|
||
| // default color schelme | ||
| const defaultColorScheme = screen.getByLabelText('default'); | ||
| // choco color scheme | ||
| const chocoColorScheme = screen.getByLabelText('choco'); | ||
|
|
||
| // select choco color scheme | ||
| userEvent.click(chocoColorScheme); | ||
| expect(chocoColorScheme.checked).toBe(true); | ||
| expect(defaultColorScheme.checked).toBe(false); | ||
|
|
||
| const chocoHeatmap = await screen.findByTestId('heatmap'); | ||
| expect(chocoHeatmap).toMatchSnapshot(); | ||
|
|
||
| // switch back to default color scheme | ||
| userEvent.click(defaultColorScheme); | ||
| expect(defaultColorScheme.checked).toBe(true); | ||
| expect(chocoColorScheme.checked).toBe(false); | ||
|
|
||
| const defaultHeatmap = await screen.findByTestId('heatmap'); | ||
| expect(defaultHeatmap).toMatchSnapshot(); | ||
| }); | ||
| }); | ||
|
|
||
| describe('feature #2: optionally display posts table in modal', () => { | ||
| it('shows posts table on the page when a cell is clicked and modal option is not checked', async () => { | ||
| setup('/search/javascript'); | ||
|
|
||
| screen.getByText('loading-spinner.svg'); | ||
| await waitFor(() => expect(screen.queryByText('loading-spinner.svg')).not.toBeInTheDocument()); | ||
|
|
||
| const heatmap = screen.getByTestId('heatmap'); | ||
| const cells = await within(heatmap).findAllByRole('button'); | ||
| const cellToClick = cells[1]; | ||
|
|
||
| const selectDisplayInModal = screen.getByLabelText('Show Posts in Modal Window'); | ||
| expect(selectDisplayInModal.checked).toBe(false); | ||
|
|
||
| expect(screen.queryByRole('table')).not.toBeInTheDocument(); | ||
|
|
||
| userEvent.click(cellToClick); | ||
| expect(screen.getByRole('table')).toBeInTheDocument(); | ||
| expect(screen.queryByTestId('postsModal')).toBeNull(); | ||
| }); | ||
|
|
||
| it('shows posts table in a modal window when a cell is clicked and modal option checked', async () => { | ||
| setup('/search/javascript'); | ||
|
|
||
| screen.getByText('loading-spinner.svg'); | ||
| await waitFor(() => expect(screen.queryByText('loading-spinner.svg')).not.toBeInTheDocument()); | ||
|
|
||
| const heatmap = screen.getByTestId('heatmap'); | ||
| const cells = await within(heatmap).findAllByRole('button'); | ||
| const cellToClick = cells[1]; | ||
|
|
||
| const selectDisplayInModal = screen.getByLabelText('Show Posts in Modal Window'); | ||
| expect(selectDisplayInModal.checked).toBe(false); | ||
|
|
||
| userEvent.click(selectDisplayInModal); | ||
| expect(selectDisplayInModal.checked).toBe(true); | ||
| userEvent.click(cellToClick); | ||
|
|
||
| const modalWindow = screen.getByTestId('postsModal'); | ||
| expect(modalWindow).toBeInTheDocument(); | ||
| expect(within(modalWindow).getByRole('table')).toBeInTheDocument(); | ||
|
|
||
| const closeModalButton = within(modalWindow).getByRole('button'); | ||
| userEvent.click(closeModalButton); | ||
| expect(screen.queryByTestId('postsModal')).toBeNull(); | ||
| expect(screen.queryByRole('table')).not.toBeInTheDocument(); | ||
| }); | ||
| }); | ||
|
|
||
| describe('feature #3', () => { | ||
| it('shows a cell has a red dotted border if cell contains deleted author', async () => { | ||
| setup('/search/javascript'); | ||
|
|
||
| const heatmap = await screen.findByTestId('heatmap'); | ||
| const cells = await within(heatmap).findAllByText('3'); | ||
| const cellWithDeletdAuthor = cells[4]; | ||
|
|
||
| userEvent.click(cellWithDeletdAuthor); | ||
| const table = screen.getByRole('table'); | ||
|
|
||
| const rowWithDeletedUser = within(table).getAllByRole('row')[2]; | ||
| const authorCell = within(rowWithDeletedUser).getAllByRole('cell')[4]; | ||
|
|
||
| expect(authorCell.innerHTML).toBe('[deleted]'); | ||
| // screen.debug(cellWithDeletdAuthor); | ||
| expect(cellWithDeletdAuthor.getAttribute('style')).toEqual('border: 1px dotted red;'); | ||
| }); | ||
| }); |
Oops, something went wrong.