-
Notifications
You must be signed in to change notification settings - Fork 24
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Preview Sites: Add
Clear button for expired sites with related styl…
…ing (#913) * Add `Clear` button for expired Preview sites * Update styling * Add tests * Update `Clear` button color to `text-a8c-blueberry` * Update expired site text to `text-[#757575]` * Sort preview sites to display the latest updated at the top of the list * Add a new variable for the `#757575` color to tailwind config file --------- Co-authored-by: Antonio Sejas <antonio@sejas.es>
- Loading branch information
1 parent
af558c5
commit 0428c01
Showing
6 changed files
with
142 additions
and
22 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
98 changes: 98 additions & 0 deletions
98
src/modules/preview-site/components/tests/preview-site-row.test.tsx
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,98 @@ | ||
| import { render, screen } from '@testing-library/react'; | ||
| import { useExpirationDate } from 'src/hooks/use-expiration-date'; | ||
| import { PreviewSiteRow } from '../preview-site-row'; | ||
|
|
||
| jest.mock( 'src/hooks/use-snapshots', () => ( { | ||
| useSnapshots: jest.fn().mockReturnValue( { | ||
| removeSnapshot: jest.fn(), | ||
| fetchSnapshotUsage: jest.fn(), | ||
| } ), | ||
| } ) ); | ||
|
|
||
| jest.mock( 'src/hooks/use-expiration-date', () => ( { | ||
| useExpirationDate: jest.fn().mockReturnValue( { | ||
| countDown: '5 days', | ||
| isExpired: false, | ||
| } ), | ||
| } ) ); | ||
|
|
||
| jest.mock( 'src/hooks/use-format-localized-timestamps', () => ( { | ||
| useFormatLocalizedTimestamps: jest.fn().mockReturnValue( { | ||
| formatRelativeTime: jest.fn().mockReturnValue( '2 hours' ), | ||
| } ), | ||
| } ) ); | ||
|
|
||
| describe( 'PreviewSiteRow', () => { | ||
| const mockSnapshot = { | ||
| atomicSiteId: 123, | ||
| localSiteId: 'db30ac2b-1d8f-4df2-a171-1b9ea3bc149d', | ||
| url: 'shad-of-cellos.wp.build', | ||
| date: 123456789, | ||
| name: 'Test Preview 1', | ||
| sequence: 1, | ||
| }; | ||
|
|
||
| const mockSelectedSite: StoppedSiteDetails = { | ||
| id: '456', | ||
| name: 'Test', | ||
| path: '/test/path', | ||
| phpVersion: '8.2', | ||
| running: false, | ||
| }; | ||
|
|
||
| beforeEach( () => { | ||
| jest.clearAllMocks(); | ||
| } ); | ||
|
|
||
| it( 'renders PreviewActionButtonsMenu when preview site is not expired', () => { | ||
| render( | ||
| <PreviewSiteRow | ||
| snapshot={ mockSnapshot } | ||
| selectedSite={ mockSelectedSite } | ||
| disabledUpdate={ false } | ||
| /> | ||
| ); | ||
|
|
||
| expect( screen.getByRole( 'button', { name: 'Preview actions' } ) ).toBeInTheDocument(); | ||
| expect( screen.queryByRole( 'button', { name: 'Clear' } ) ).not.toBeInTheDocument(); | ||
| } ); | ||
|
|
||
| it( 'renders Clear button instead of PreviewActionButtonsMenu when preview site is expired', () => { | ||
| ( useExpirationDate as jest.Mock ).mockReturnValueOnce( { | ||
| countDown: 'Expired', | ||
| isExpired: true, | ||
| } ); | ||
|
|
||
| render( | ||
| <PreviewSiteRow | ||
| snapshot={ mockSnapshot } | ||
| selectedSite={ mockSelectedSite } | ||
| disabledUpdate={ false } | ||
| /> | ||
| ); | ||
|
|
||
| expect( screen.queryByRole( 'button', { name: 'Preview actions' } ) ).not.toBeInTheDocument(); | ||
| expect( screen.getByRole( 'button', { name: 'Clear' } ) ).toBeInTheDocument(); | ||
| } ); | ||
|
|
||
| it( 'applies line-through style when preview site is expired', () => { | ||
| ( useExpirationDate as jest.Mock ).mockReturnValueOnce( { | ||
| countDown: 'Expired', | ||
| isExpired: true, | ||
| } ); | ||
|
|
||
| render( | ||
| <PreviewSiteRow | ||
| snapshot={ mockSnapshot } | ||
| selectedSite={ mockSelectedSite } | ||
| disabledUpdate={ false } | ||
| /> | ||
| ); | ||
|
|
||
| const siteName = screen.getByText( mockSnapshot.name ); | ||
| const siteUrl = screen.getByText( `https://${ mockSnapshot.url }` ); | ||
|
|
||
| expect( siteName.className ).toContain( 'line-through' ); | ||
| expect( siteUrl.className ).toContain( 'line-through' ); | ||
| } ); | ||
| } ); |
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