From f18991cd92c8d6b2aa45750cee75da7b45818f5d Mon Sep 17 00:00:00 2001 From: Flacial Date: Mon, 15 Aug 2022 19:01:46 +0400 Subject: [PATCH 01/20] test: Update snapshots --- .../__snapshots__/storyshots.test.js.snap | 964 ++---------------- .../__snapshots__/DropdownMenu.test.js.snap | 194 ++-- .../__snapshots__/AdminNewAlert.test.js.snap | 112 +- 3 files changed, 207 insertions(+), 1063 deletions(-) diff --git a/__tests__/__snapshots__/storyshots.test.js.snap b/__tests__/__snapshots__/storyshots.test.js.snap index 485ee26fa..76a7d1fc3 100644 --- a/__tests__/__snapshots__/storyshots.test.js.snap +++ b/__tests__/__snapshots__/storyshots.test.js.snap @@ -4744,842 +4744,81 @@ exports[`Storyshots Components/DiffView Default 1`] = ` `; exports[`Storyshots Components/DropdownMenu Basic 1`] = ` -Array [ -
-
- -
-
, -
-
- - Lessons - -
-
- - Users - -
-
- - Alerts0 - -
-
, -] -`; - -exports[`Storyshots Components/DropdownMenu Colors 1`] = ` -Array [ -
-
-
- -
-
-
-
- - Lessons - -
-
- - Users - -
-
- - Alerts0 - -
-
-
, -
-
-
- -
-
-
-
- - Lessons - -
-
- - Users - -
-
- - Alerts0 - -
-
-
, -
-
-
- -
-
-
-
- - Lessons - -
-
- - Users - -
-
- - Alerts0 - -
-
-
, -
-
-
- -
-
-
-
- - Lessons - -
-
- - Users - -
-
- - Alerts0 - -
-
-
, -
-
-
- -
-
-
-
- - Lessons - -
-
- - Users - -
-
- - Alerts0 - -
-
-
, -
-
-
- -
-
-
-
- - Lessons - -
-
- - Users - -
-
- - Alerts0 - -
-
-
, -] -`; - -exports[`Storyshots Components/DropdownMenu Directions 1`] = ` -
-
-
-
- -
-
-
-
- - Lessons - -
-
- - Users - -
-
- - Alerts0 - -
-
-
-
+ -
-
-
-
- - Lessons - -
-
- - Users - -
-
- - Alerts0 - -
-
- - -
-
-
- -
-
-
-
- - Lessons - -
-
- - Users - -
-
- - Alerts0 - -
-
-
+ viewBox="0 0 16 16" + width={17} + /> + `; exports[`Storyshots Components/DropdownMenu With Separators 1`] = ` -Array [ -
-
- -
-
, -
+
, -] + + `; exports[`Storyshots Components/Error Internal 1`] = ` @@ -7588,47 +6827,40 @@ exports[`Storyshots Components/FormCard Basic 1`] = ` Swiggity swag
-
- -
-
-
-
- -
- + Lolzz +
- -
-
+ +
- -
- -
- -
-
- +
@@ -107,60 +72,31 @@ exports[`MdInput Component Should change value of testBtnOnClick upon click 1`] exports[`MdInput Component Should render divider when an item is null 1`] = `
- -
-
-
- -
- -
- -
-
- -
+ + +
`; diff --git a/components/admin/alerts/__snapshots__/AdminNewAlert.test.js.snap b/components/admin/alerts/__snapshots__/AdminNewAlert.test.js.snap index dfb0c967b..3e47a25b2 100644 --- a/components/admin/alerts/__snapshots__/AdminNewAlert.test.js.snap +++ b/components/admin/alerts/__snapshots__/AdminNewAlert.test.js.snap @@ -79,43 +79,31 @@ exports[`AdminLewAlert component Should create new alert 1`] = ` Type
- -
-
-
- -
-
- -
+ + +
-
- -
-
-
-
- -
- + + +
Date: Mon, 15 Aug 2022 19:01:58 +0400 Subject: [PATCH 02/20] feat: Refactor DropdownMenu Makes it possible to set the selected item as the active one --- components/DropdownMenu.test.js | 9 +++ components/DropdownMenu.tsx | 85 +++++++++------------ scss/dropDown.module.scss | 44 +++++++++++ stories/components/DropdownMenu.stories.tsx | 39 +--------- 4 files changed, 90 insertions(+), 87 deletions(-) diff --git a/components/DropdownMenu.test.js b/components/DropdownMenu.test.js index 7b67e6a7b..97c4f130e 100644 --- a/components/DropdownMenu.test.js +++ b/components/DropdownMenu.test.js @@ -2,6 +2,9 @@ import React from 'react' import { render, fireEvent, screen, waitFor } from '@testing-library/react' import { DropdownMenu } from './DropdownMenu' +// Imported to be able to use expect(...).toBeInTheDocument() +import '@testing-library/jest-dom' + const dropdownMenuItems = [ { title: 'Lessons', path: '/admin/lessons', as: 'button' }, null, @@ -22,6 +25,12 @@ describe('MdInput Component', () => { expect(container).toMatchSnapshot() }) + test('Should display default title when no title is passed', () => { + const { queryByText } = render() + + expect(queryByText('None')).toBeInTheDocument() + }) + test('Should change value of testBtnOnClick upon click', () => { dropdownMenuItems[0].onClick = val => (testBtnOnClick = val) diff --git a/components/DropdownMenu.tsx b/components/DropdownMenu.tsx index e3d38e3f1..3352d0a36 100644 --- a/components/DropdownMenu.tsx +++ b/components/DropdownMenu.tsx @@ -1,8 +1,8 @@ -import React from 'react' -import DropdownButton from 'react-bootstrap/DropdownButton' +import React, { useState } from 'react' import Dropdown from 'react-bootstrap/Dropdown' import styles from '../scss/dropDown.module.scss' import { DropDirection } from 'react-bootstrap/esm/DropdownContext' +import { ChevronRightIcon } from '@primer/octicons-react' //a null item indicates a dropdown divider export type Item = { @@ -14,62 +14,49 @@ export type Item = { type DropDownMenuProps = { drop?: DropDirection - items: Item[] - title: string - size?: 'sm' | 'lg' | undefined - variant?: - | 'primary' - | 'secondary' - | 'success' - | 'info' - | 'warning' - | 'danger' - | 'none' + items?: Item[] | null + title?: string //changes the underlying component CSS base class name //https://react-bootstrap.github.io/components/dropdowns/#api bsPrefix?: string } +const ChevronRight = () => + export const DropdownMenu: React.FC = ({ - drop = 'down', - variant = 'none', - title, - size, items, - bsPrefix + title, + bsPrefix = '' }) => { - const menuItems = items.map((item: Item, itemsIndex: number) => - !item ? ( - - ) : ( -
- item.onClick && item.onClick(item.title)} - bsPrefix={bsPrefix} - > - {item.title} - -
- ) - ) + const [activeItem, setActiveItem] = useState({ title }) return ( - <> -
- - {menuItems} - -
-
{menuItems}
- + + + {activeItem.title || 'None'} + + + + + {items?.map((item, index) => + item ? ( + { + item?.onClick?.(item) + + setActiveItem({ + title: item?.title + }) + }} + > + {item?.title} + + ) : ( + + ) + )} + + ) } diff --git a/scss/dropDown.module.scss b/scss/dropDown.module.scss index aefe3315d..e43d5da54 100644 --- a/scss/dropDown.module.scss +++ b/scss/dropDown.module.scss @@ -2,6 +2,50 @@ @use '_variables.module.scss'; @import 'colors.module.scss'; +.dropdown { + display: flex; + column-gap: 13px; + padding: 8px 16px; + background: white; + border: 1px solid hsl(220, 13%, 91%); + box-shadow: 0px 1px 2px hsla(215, 28%, 17%, 0.08); + border-radius: 4px; + align-items: center; + color: variables.$dark; + + &:hover { + background-color: white; + border: 1px solid hsl(216, 4%, 75%); + color: variables.$dark; + } + + &:active, + &:focus, + &:focus:active { + background-color: hsla(0, 0%, 95%, 0.695); + box-shadow: none; + border: 1px solid hsl(216, 4%, 65%); + color: variables.$dark; + } + + & .dropdown__menu { + width: 100%; + } + + & svg { + transform: rotate(90deg); + transition: transform 0.15s ease-in; + } + + // Means the dropdown is opened + &[aria-expanded='true'] { + & svg { + transform: rotate(-90deg); + transition: transform 0.2s ease-out; + } + } +} + .nav-user-toggle { display: flex; text-decoration: none; diff --git a/stories/components/DropdownMenu.stories.tsx b/stories/components/DropdownMenu.stories.tsx index a8f638cd4..cb68afb0b 100644 --- a/stories/components/DropdownMenu.stories.tsx +++ b/stories/components/DropdownMenu.stories.tsx @@ -5,6 +5,7 @@ export default { component: DropdownMenu, title: 'Components/DropdownMenu' } + const dropdownMenuItems = [ { title: 'Lessons', path: '/admin/lessons' }, { title: 'Users', path: '/admin/users' }, @@ -23,15 +24,6 @@ const separatedMenu = [ { title: 'Alerts4', path: '/admin/alerts' } ] -const variants: any[] = [ - 'Primary', - 'Success', - 'Danger', - 'Info', - 'Warning', - 'None' -] - export const Basic: React.FC = () => ( ) @@ -39,32 +31,3 @@ export const Basic: React.FC = () => ( export const _WithSeparators: React.FC = () => ( ) - -export const Colors = () => { - return variants.map((variant: any, i: number) => ( -
- -
- )) -} - -export const Directions = () => { - const directions = ['Left', 'Down', 'Up', 'Right'].map( - (direction: any, i: number) => ( -
- -
- ) - ) - - return
{directions}
-} From 1f227f2ff0a2e02ba5352c964025e3334ee17b6e Mon Sep 17 00:00:00 2001 From: Flacial Date: Tue, 16 Aug 2022 17:46:48 +0400 Subject: [PATCH 03/20] feat: Create QueryInfo component --- components/QueryInfo/QueryInfo.test.js | 116 +++++++++++++++++++++++ components/QueryInfo/QueryInfo.tsx | 54 +++++++++++ components/QueryInfo/index.tsx | 1 + scss/queryInfo.module.scss | 35 +++++++ stories/components/QueryInfo.stories.tsx | 65 +++++++++++++ 5 files changed, 271 insertions(+) create mode 100644 components/QueryInfo/QueryInfo.test.js create mode 100644 components/QueryInfo/QueryInfo.tsx create mode 100644 components/QueryInfo/index.tsx create mode 100644 scss/queryInfo.module.scss create mode 100644 stories/components/QueryInfo.stories.tsx diff --git a/components/QueryInfo/QueryInfo.test.js b/components/QueryInfo/QueryInfo.test.js new file mode 100644 index 000000000..d2262a816 --- /dev/null +++ b/components/QueryInfo/QueryInfo.test.js @@ -0,0 +1,116 @@ +import React from 'react' +import QueryInfo from './' +import { render, screen } from '@testing-library/react' + +// Imported to be able to use .toBeInTheDocument() +import '@testing-library/jest-dom' + +describe('QueryInfo component', () => { + it('should display successful state', () => { + expect.assertions(1) + + render( + Submitted successfully} + /> + ) + + expect(screen.getByText('Submitted successfully')).toBeInTheDocument() + }) + + it('should display loading state', () => { + expect.assertions(1) + + render( + Submitted successfully} + /> + ) + + expect(screen.getByText('Loading message...')).toBeInTheDocument() + }) + + it('should display error state', () => { + expect.assertions(1) + + render( + Submitted successfully} + /> + ) + + expect( + screen.getByText('An error occurred because of: Missing arguments') + ).toBeInTheDocument() + }) + + it('should set default success message', () => { + expect.assertions(1) + + render( + + ) + + expect( + screen.getByText('Submitted the item successfully!') + ).toBeInTheDocument() + }) + + it('should render nothing when there is no data, error, and loading', () => { + expect.assertions(2) + + render( + + ) + + expect( + screen.queryByText('Submitted the item successfully!') + ).not.toBeInTheDocument() + expect(screen.queryByText('Loading message...')).not.toBeInTheDocument() + }) +}) diff --git a/components/QueryInfo/QueryInfo.tsx b/components/QueryInfo/QueryInfo.tsx new file mode 100644 index 000000000..1dbb90927 --- /dev/null +++ b/components/QueryInfo/QueryInfo.tsx @@ -0,0 +1,54 @@ +import { CheckCircleIcon, AlertFillIcon } from '@primer/octicons-react' +import React from 'react' +import { Spinner } from 'react-bootstrap' +import styles from '../../scss/queryInfo.module.scss' + +type QueryInfo = { + data: any + loading: boolean + error: string + texts: { + loading: string + errorTitle: string + } + DataMessage?: () => JSX.Element +} + +const QueryInfo = ({ data, loading, error, texts, DataMessage }: QueryInfo) => { + if (loading) { + return ( +
+ + {texts.loading} +
+ ) + } + + if (error) { + return ( +
+ + + {texts.errorTitle}: {error} + +
+ ) + } + + if (data) { + return ( +
+ + {DataMessage ? ( + + ) : ( + Submitted the item successfully! + )} +
+ ) + } + + return <> +} + +export default QueryInfo diff --git a/components/QueryInfo/index.tsx b/components/QueryInfo/index.tsx new file mode 100644 index 000000000..b2454455e --- /dev/null +++ b/components/QueryInfo/index.tsx @@ -0,0 +1 @@ +export { default } from './QueryInfo' diff --git a/scss/queryInfo.module.scss b/scss/queryInfo.module.scss new file mode 100644 index 000000000..5894249b4 --- /dev/null +++ b/scss/queryInfo.module.scss @@ -0,0 +1,35 @@ +@use '_variables.module'; + +@mixin message($bg, $color) { + display: flex; + align-items: center; + column-gap: 5px; + background: #ffbbc1; + width: fit-content; + padding: 5px 15px; + border-radius: 8px; + background-color: rgba($color: $bg, $alpha: 0.2); + + @if $color { + color: $color; + } @else { + color: $bg; + } +} + +.success { + // Local variable + $color: adjust-color( + $color: variables.$success, + $blackness: 15% + ); + @include message(variables.$success, $color); +} + +.error { + @include message(variables.$danger, variables.$danger); +} + +.loading { + @include message(variables.$mute, variables.$mute); +} diff --git a/stories/components/QueryInfo.stories.tsx b/stories/components/QueryInfo.stories.tsx new file mode 100644 index 000000000..2682911f1 --- /dev/null +++ b/stories/components/QueryInfo.stories.tsx @@ -0,0 +1,65 @@ +import { get } from 'lodash' +import React from 'react' +import QueryInfo from '../../components/QueryInfo' + +export default { + component: QueryInfo, + title: 'Component/QueryInfo' +} + +const updateModule = { + name: 'Functions in JS' +} + +const addModule = null + +export const Basic = () => ( + ( + + {updateModule ? 'Updated' : 'Added'} the module{' '} + + {get(addModule, 'name') || get(updateModule, 'name') || ''} + {' '} + successfully! + + )} + /> +) + +export const _WithError = () => ( + +) + +export const _WithLoading = () => ( + +) From a660aab721c4aa98d032ab6d8e134fc548cd3721 Mon Sep 17 00:00:00 2001 From: Flacial Date: Tue, 16 Aug 2022 17:47:05 +0400 Subject: [PATCH 04/20] refactor: Remove component code from AdminLessonInputs --- .../AdminLessonInputs/AdminLessonInputs.tsx | 67 +++++++------------ .../adminLessonInputs.module.scss | 36 ---------- 2 files changed, 24 insertions(+), 79 deletions(-) diff --git a/components/admin/lessons/AdminLessonInputs/AdminLessonInputs.tsx b/components/admin/lessons/AdminLessonInputs/AdminLessonInputs.tsx index 19fb6b995..231a353fc 100644 --- a/components/admin/lessons/AdminLessonInputs/AdminLessonInputs.tsx +++ b/components/admin/lessons/AdminLessonInputs/AdminLessonInputs.tsx @@ -7,15 +7,14 @@ import { } from '../../../../graphql' import { formChange } from '../../../../helpers/formChange' import { FormCard, MD_INPUT, Option, TextField } from '../../../FormCard' -import { AlertFillIcon, CheckCircleIcon } from '@primer/octicons-react' import styles from './adminLessonInputs.module.scss' -import { Spinner } from 'react-bootstrap' import { get } from 'lodash' import { ApolloError, OperationVariables, ApolloQueryResult } from '@apollo/client' +import QueryInfo from '../../../QueryInfo' type Module = { id: number; name: string; content: string; order: number } @@ -148,49 +147,31 @@ const AdminModuleInputs = ({ } } - const QueryStateMessage = () => { - if (loading) { - return ( -
- - Adding the module... -
- ) - } - - if (errorMsg) { - return ( -
- - Failed to add the module: {errorMsg} -
- ) - } - - if (data) { - const updateModule = get(data, 'updateModule') - const addModule = get(data, 'addModule') - - return ( -
- - - {updateModule ? 'Updated' : 'Added'} the module{' '} - - {get(addModule, 'name') || get(updateModule, 'name') || ''} - {' '} - successfully! - -
- ) - } - - return <> - } - return (
- + { + const updateModule = get(data, 'updateModule') + const addModule = get(data, 'addModule') + + return ( + + {updateModule ? 'Updated' : 'Added'} the module{' '} + + {get(addModule, 'name') || get(updateModule, 'name') || ''} + {' '} + successfully! + + ) + }} + /> Date: Tue, 16 Aug 2022 17:48:28 +0400 Subject: [PATCH 05/20] test: Update snapshot --- .../__snapshots__/storyshots.test.js.snap | 86 +++++++++++++++++++ 1 file changed, 86 insertions(+) diff --git a/__tests__/__snapshots__/storyshots.test.js.snap b/__tests__/__snapshots__/storyshots.test.js.snap index 485ee26fa..523adb707 100644 --- a/__tests__/__snapshots__/storyshots.test.js.snap +++ b/__tests__/__snapshots__/storyshots.test.js.snap @@ -1,5 +1,91 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Storyshots Component/QueryInfo Basic 1`] = ` +
+ + Updated + the module + + + Functions in JS + + + successfully! + +
+`; + +exports[`Storyshots Component/QueryInfo With Error 1`] = ` +
+ + Failed to find the lesson because of + : + JavaScript is not related to Java! + +
+`; + +exports[`Storyshots Component/QueryInfo With Loading 1`] = ` +
+
+ + Sending the request... + +
+`; + exports[`Storyshots Components/AdditionalResources Basic 1`] = `
Date: Wed, 17 Aug 2022 04:49:54 +0400 Subject: [PATCH 06/20] refactor: Add generic Data type --- components/QueryInfo/QueryInfo.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/components/QueryInfo/QueryInfo.tsx b/components/QueryInfo/QueryInfo.tsx index 1dbb90927..456267e26 100644 --- a/components/QueryInfo/QueryInfo.tsx +++ b/components/QueryInfo/QueryInfo.tsx @@ -3,8 +3,8 @@ import React from 'react' import { Spinner } from 'react-bootstrap' import styles from '../../scss/queryInfo.module.scss' -type QueryInfo = { - data: any +type QueryInfo = { + data: T loading: boolean error: string texts: { @@ -14,7 +14,13 @@ type QueryInfo = { DataMessage?: () => JSX.Element } -const QueryInfo = ({ data, loading, error, texts, DataMessage }: QueryInfo) => { +const QueryInfo = ({ + data, + loading, + error, + texts, + DataMessage +}: QueryInfo) => { if (loading) { return (
From ead58b3db72202dfcef2d93c5d885cb61c50d06c Mon Sep 17 00:00:00 2001 From: Flacial Date: Wed, 17 Aug 2022 06:03:37 +0400 Subject: [PATCH 07/20] refactor: Remove OR operator --- .../admin/lessons/AdminLessonInputs/AdminLessonInputs.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/admin/lessons/AdminLessonInputs/AdminLessonInputs.tsx b/components/admin/lessons/AdminLessonInputs/AdminLessonInputs.tsx index 231a353fc..1d9e6f8a3 100644 --- a/components/admin/lessons/AdminLessonInputs/AdminLessonInputs.tsx +++ b/components/admin/lessons/AdminLessonInputs/AdminLessonInputs.tsx @@ -165,7 +165,7 @@ const AdminModuleInputs = ({ {updateModule ? 'Updated' : 'Added'} the module{' '} - {get(addModule, 'name') || get(updateModule, 'name') || ''} + {get(addModule, 'name') || get(updateModule, 'name')} {' '} successfully! From fe5072c44585e28fdf2a7104b53c913a8dad66ac Mon Sep 17 00:00:00 2001 From: Flacial Date: Thu, 18 Aug 2022 23:01:34 +0400 Subject: [PATCH 08/20] feat: Hide notification after 4 seconds --- components/QueryInfo/QueryInfo.test.js | 67 +++++++++++++++++++++++- components/QueryInfo/QueryInfo.tsx | 16 +++++- stories/components/QueryInfo.stories.tsx | 32 +++++++++-- 3 files changed, 109 insertions(+), 6 deletions(-) diff --git a/components/QueryInfo/QueryInfo.test.js b/components/QueryInfo/QueryInfo.test.js index d2262a816..f685d4810 100644 --- a/components/QueryInfo/QueryInfo.test.js +++ b/components/QueryInfo/QueryInfo.test.js @@ -1,6 +1,6 @@ import React from 'react' import QueryInfo from './' -import { render, screen } from '@testing-library/react' +import { render, screen, act, waitFor } from '@testing-library/react' // Imported to be able to use .toBeInTheDocument() import '@testing-library/jest-dom' @@ -11,6 +11,7 @@ describe('QueryInfo component', () => { render( { render( { render( { render( { render( { ).not.toBeInTheDocument() expect(screen.queryByText('Loading message...')).not.toBeInTheDocument() }) + + it('should hide successful message after 4 seconds', async () => { + expect.assertions(1) + + jest.useFakeTimers() + jest.spyOn(global, 'setTimeout') + + render( + Submitted successfully} + /> + ) + + act(() => jest.advanceTimersByTime(4000)) + + await waitFor(() => { + expect( + screen.queryByText('Submitted successfully') + ).not.toBeInTheDocument() + }) + }) + + it('should hide error message after 4 seconds', async () => { + expect.assertions(1) + + jest.useFakeTimers() + jest.spyOn(global, 'setTimeout') + + render( + Submitted successfully} + /> + ) + + act(() => jest.advanceTimersByTime(4000)) + + await waitFor(() => { + expect( + screen.queryByText('An error occurred because of: Missing arguments') + ).not.toBeInTheDocument() + }) + }) }) diff --git a/components/QueryInfo/QueryInfo.tsx b/components/QueryInfo/QueryInfo.tsx index 456267e26..0994121b2 100644 --- a/components/QueryInfo/QueryInfo.tsx +++ b/components/QueryInfo/QueryInfo.tsx @@ -1,5 +1,5 @@ import { CheckCircleIcon, AlertFillIcon } from '@primer/octicons-react' -import React from 'react' +import React, { useEffect, useState } from 'react' import { Spinner } from 'react-bootstrap' import styles from '../../scss/queryInfo.module.scss' @@ -12,6 +12,7 @@ type QueryInfo = { errorTitle: string } DataMessage?: () => JSX.Element + hide?: boolean } const QueryInfo = ({ @@ -19,8 +20,13 @@ const QueryInfo = ({ loading, error, texts, - DataMessage + DataMessage, + hide = true }: QueryInfo) => { + const [x, setX] = useState(false) + + useEffect(() => setX(false), [data, error]) + if (loading) { return (
@@ -30,7 +36,11 @@ const QueryInfo = ({ ) } + if (x) return <> + if (error) { + if (hide) setTimeout(() => setX(true), 4000) + return (
@@ -42,6 +52,8 @@ const QueryInfo = ({ } if (data) { + if (hide) setTimeout(() => setX(true), 4000) + return (
diff --git a/stories/components/QueryInfo.stories.tsx b/stories/components/QueryInfo.stories.tsx index 2682911f1..6a902e204 100644 --- a/stories/components/QueryInfo.stories.tsx +++ b/stories/components/QueryInfo.stories.tsx @@ -24,12 +24,11 @@ export const Basic = () => ( loading: 'Sending the request...', errorTitle: 'Failed to find the text because of' }} + hide={false} DataMessage={() => ( {updateModule ? 'Updated' : 'Added'} the module{' '} - - {get(addModule, 'name') || get(updateModule, 'name') || ''} - {' '} + {get(addModule, 'name') || get(updateModule, 'name')}{' '} successfully! )} @@ -47,6 +46,7 @@ export const _WithError = () => ( loading: 'Sending the request...', errorTitle: 'Failed to find the lesson because of' }} + hide={false} /> ) @@ -61,5 +61,31 @@ export const _WithLoading = () => ( loading: 'Sending the request...', errorTitle: 'Failed to find the lesson because of' }} + hide={false} /> ) + +export const _WithHide = () => ( + // hide prop is optional and it's true by default +
+

Hides after 4 seconds

+ ( + + {updateModule ? 'Updated' : 'Added'} the module{' '} + {get(addModule, 'name') || get(updateModule, 'name')}{' '} + successfully! + + )} + /> +
+) From 5308b2cf5247d0fa7077684f663efd05e6bfa861 Mon Sep 17 00:00:00 2001 From: Flacial Date: Thu, 18 Aug 2022 23:07:12 +0400 Subject: [PATCH 09/20] test: Update snapshots --- .../__snapshots__/storyshots.test.js.snap | 44 +++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/__tests__/__snapshots__/storyshots.test.js.snap b/__tests__/__snapshots__/storyshots.test.js.snap index 0379c1380..9d6244b02 100644 --- a/__tests__/__snapshots__/storyshots.test.js.snap +++ b/__tests__/__snapshots__/storyshots.test.js.snap @@ -73,6 +73,50 @@ exports[`Storyshots Component/QueryInfo With Error 1`] = `
`; +exports[`Storyshots Component/QueryInfo With Hide 1`] = ` +
+

+ Hides after 4 seconds +

+
+ + Updated + the module + + + Functions in JS + + + successfully! + +
+
+`; + exports[`Storyshots Component/QueryInfo With Loading 1`] = `
Date: Mon, 22 Aug 2022 06:18:51 +0400 Subject: [PATCH 10/20] feat: Use Alert component for messages --- components/QueryInfo/QueryInfo.test.js | 42 +++--------------- components/QueryInfo/QueryInfo.tsx | 44 +++++++++---------- .../AdminLessonInputs/AdminLessonInputs.tsx | 25 +++++------ scss/queryInfo.module.scss | 9 ++-- stories/components/QueryInfo.stories.tsx | 31 +++---------- 5 files changed, 48 insertions(+), 103 deletions(-) diff --git a/components/QueryInfo/QueryInfo.test.js b/components/QueryInfo/QueryInfo.test.js index f685d4810..118ed6e5c 100644 --- a/components/QueryInfo/QueryInfo.test.js +++ b/components/QueryInfo/QueryInfo.test.js @@ -19,9 +19,8 @@ describe('QueryInfo component', () => { error={''} texts={{ loading: 'Loading message...', - errorTitle: 'An error occurred because of' + data: 'Submitted successfully' }} - DataMessage={() => Submitted successfully} /> ) @@ -41,9 +40,8 @@ describe('QueryInfo component', () => { error={''} texts={{ loading: 'Loading message...', - errorTitle: 'An error occurred because of' + data: 'Submitted successfully' }} - DataMessage={() => Submitted successfully} /> ) @@ -63,37 +61,13 @@ describe('QueryInfo component', () => { error={'Missing arguments'} texts={{ loading: 'Loading message...', - errorTitle: 'An error occurred because of' + data: 'Submitted successfully' }} - DataMessage={() => Submitted successfully} /> ) expect( - screen.getByText('An error occurred because of: Missing arguments') - ).toBeInTheDocument() - }) - - it('should set default success message', () => { - expect.assertions(1) - - render( - - ) - - expect( - screen.getByText('Submitted the item successfully!') + screen.getByText('An error occurred. Please try again.') ).toBeInTheDocument() }) @@ -108,7 +82,7 @@ describe('QueryInfo component', () => { error={''} texts={{ loading: 'Loading message...', - errorTitle: 'An error occurred because of' + data: 'Submitted successfully' }} /> ) @@ -134,9 +108,8 @@ describe('QueryInfo component', () => { error={''} texts={{ loading: 'Loading message...', - errorTitle: 'An error occurred because of' + data: 'Submitted successfully' }} - DataMessage={() => Submitted successfully} /> ) @@ -164,9 +137,8 @@ describe('QueryInfo component', () => { error={'Missing arguments'} texts={{ loading: 'Loading message...', - errorTitle: 'An error occurred because of' + data: 'Submitted successfully' }} - DataMessage={() => Submitted successfully} /> ) diff --git a/components/QueryInfo/QueryInfo.tsx b/components/QueryInfo/QueryInfo.tsx index 0994121b2..1273b0b27 100644 --- a/components/QueryInfo/QueryInfo.tsx +++ b/components/QueryInfo/QueryInfo.tsx @@ -1,7 +1,7 @@ -import { CheckCircleIcon, AlertFillIcon } from '@primer/octicons-react' import React, { useEffect, useState } from 'react' import { Spinner } from 'react-bootstrap' import styles from '../../scss/queryInfo.module.scss' +import Alert from '../Alert' type QueryInfo = { data: T @@ -9,9 +9,8 @@ type QueryInfo = { error: string texts: { loading: string - errorTitle: string + data: string } - DataMessage?: () => JSX.Element hide?: boolean } @@ -20,12 +19,11 @@ const QueryInfo = ({ loading, error, texts, - DataMessage, hide = true }: QueryInfo) => { - const [x, setX] = useState(false) + const [isHidden, setHidden] = useState(false) - useEffect(() => setX(false), [data, error]) + useEffect(() => setHidden(false), [data, error]) if (loading) { return ( @@ -36,33 +34,33 @@ const QueryInfo = ({ ) } - if (x) return <> + if (isHidden) return <> if (error) { - if (hide) setTimeout(() => setX(true), 4000) + if (hide) setTimeout(() => setHidden(true), 4000) return ( -
- - - {texts.errorTitle}: {error} - -
+ ) } if (data) { - if (hide) setTimeout(() => setX(true), 4000) + if (hide) setTimeout(() => setHidden(true), 4000) return ( -
- - {DataMessage ? ( - - ) : ( - Submitted the item successfully! - )} -
+ ) } diff --git a/components/admin/lessons/AdminLessonInputs/AdminLessonInputs.tsx b/components/admin/lessons/AdminLessonInputs/AdminLessonInputs.tsx index 1d9e6f8a3..0262f0c2a 100644 --- a/components/admin/lessons/AdminLessonInputs/AdminLessonInputs.tsx +++ b/components/admin/lessons/AdminLessonInputs/AdminLessonInputs.tsx @@ -147,6 +147,15 @@ const AdminModuleInputs = ({ } } + const dataText = () => { + const updateModule = get(data, 'updateModule') + const addModule = get(data, 'addModule') + + return `${updateModule ? 'Updated' : 'Added'} the item ${ + get(addModule, 'name') || get(updateModule, 'name') + } successfully!` + } + return (
{ - const updateModule = get(data, 'updateModule') - const addModule = get(data, 'addModule') - - return ( - - {updateModule ? 'Updated' : 'Added'} the module{' '} - - {get(addModule, 'name') || get(updateModule, 'name')} - {' '} - successfully! - - ) + data: dataText() }} /> ( ( error={''} texts={{ loading: 'Sending the request...', - errorTitle: 'Failed to find the text because of' + data: 'Update the module successfully!' }} hide={false} - DataMessage={() => ( - - {updateModule ? 'Updated' : 'Added'} the module{' '} - {get(addModule, 'name') || get(updateModule, 'name')}{' '} - successfully! - - )} /> ) @@ -44,7 +30,7 @@ export const _WithError = () => ( error={'JavaScript is not related to Java!'} texts={{ loading: 'Sending the request...', - errorTitle: 'Failed to find the lesson because of' + data: '' }} hide={false} /> @@ -59,14 +45,14 @@ export const _WithLoading = () => ( error={''} texts={{ loading: 'Sending the request...', - errorTitle: 'Failed to find the lesson because of' + data: '' }} hide={false} /> ) export const _WithHide = () => ( - // hide prop is optional and it's true by default + // "hide" prop is optional and it's true by default

Hides after 4 seconds

( error={''} texts={{ loading: 'Sending the request...', - errorTitle: 'Failed to find the text because of' + data: 'Hiding in 4 seconds' }} - DataMessage={() => ( - - {updateModule ? 'Updated' : 'Added'} the module{' '} - {get(addModule, 'name') || get(updateModule, 'name')}{' '} - successfully! - - )} />
) From 3651e30646f1d3384d3dcd27bdca0ef786101277 Mon Sep 17 00:00:00 2001 From: Flacial Date: Mon, 22 Aug 2022 06:37:13 +0400 Subject: [PATCH 11/20] test: Update snapshots --- .../__snapshots__/storyshots.test.js.snap | 145 ++++++------------ 1 file changed, 51 insertions(+), 94 deletions(-) diff --git a/__tests__/__snapshots__/storyshots.test.js.snap b/__tests__/__snapshots__/storyshots.test.js.snap index b421cbb60..4f510d96b 100644 --- a/__tests__/__snapshots__/storyshots.test.js.snap +++ b/__tests__/__snapshots__/storyshots.test.js.snap @@ -2,74 +2,47 @@ exports[`Storyshots Component/QueryInfo Basic 1`] = `
- - Updated - the module - - - Functions in JS - - - successfully! - +
+
+ +
+ Update the module successfully! +
`; exports[`Storyshots Component/QueryInfo With Error 1`] = `
- - Failed to find the lesson because of - : - JavaScript is not related to Java! - +
+
+ +
+ An error occurred. Please try again. +
`; @@ -79,40 +52,24 @@ exports[`Storyshots Component/QueryInfo With Hide 1`] = ` Hides after 4 seconds

- - Updated - the module - - - Functions in JS - - - successfully! - +
+
+ +
+ Hiding in 4 seconds +
`; From fa9310704bd5bb2074bc490c1fc76e6687562d99 Mon Sep 17 00:00:00 2001 From: Flacial Date: Mon, 22 Aug 2022 06:37:32 +0400 Subject: [PATCH 12/20] test: Update assertions --- .../AdminLessonInputs/AdminLessonInputs.test.js | 14 +++++++++----- .../AdminLessonInputs/AdminLessonInputs.tsx | 2 +- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/components/admin/lessons/AdminLessonInputs/AdminLessonInputs.test.js b/components/admin/lessons/AdminLessonInputs/AdminLessonInputs.test.js index 4537e0b0d..1d32a6c63 100644 --- a/components/admin/lessons/AdminLessonInputs/AdminLessonInputs.test.js +++ b/components/admin/lessons/AdminLessonInputs/AdminLessonInputs.test.js @@ -134,7 +134,7 @@ describe('AdminLessonInputs component', () => { await waitFor(() => expect( - container.querySelector('.octicon-check-circle') + getByText('Added the item Functions successfully!') ).toBeInTheDocument() ) }) @@ -168,7 +168,7 @@ describe('AdminLessonInputs component', () => { await waitFor(() => expect( - container.querySelector('.octicon-check-circle') + getByText('Updated the item Functions successfully!') ).toBeInTheDocument() ) }) @@ -189,7 +189,9 @@ describe('AdminLessonInputs component', () => { await userEvent.click(submit) await waitFor(() => - expect(container.querySelector('.octicon-alert-fill')).toBeInTheDocument() + expect( + getByText('An error occurred. Please try again.') + ).toBeInTheDocument() ) }) @@ -213,7 +215,9 @@ describe('AdminLessonInputs component', () => { await userEvent.click(submit) await waitFor(() => - expect(container.querySelector('.octicon-alert-fill')).toBeInTheDocument() + expect( + getByText('An error occurred. Please try again.') + ).toBeInTheDocument() ) }) @@ -458,7 +462,7 @@ describe('AdminLessonInputs component', () => { await userEvent.click(submit) await waitFor(() => - expect(getByText('Updated the module successfully!')).toBeInTheDocument() + expect(getByText('Updated the item successfully!')).toBeInTheDocument() ) }) }) diff --git a/components/admin/lessons/AdminLessonInputs/AdminLessonInputs.tsx b/components/admin/lessons/AdminLessonInputs/AdminLessonInputs.tsx index 0262f0c2a..89447b6ca 100644 --- a/components/admin/lessons/AdminLessonInputs/AdminLessonInputs.tsx +++ b/components/admin/lessons/AdminLessonInputs/AdminLessonInputs.tsx @@ -152,7 +152,7 @@ const AdminModuleInputs = ({ const addModule = get(data, 'addModule') return `${updateModule ? 'Updated' : 'Added'} the item ${ - get(addModule, 'name') || get(updateModule, 'name') + get(addModule, 'name') || get(updateModule, 'name') || '' } successfully!` } From 82bb67ead2c8416f107668895eb427d1d4eed023 Mon Sep 17 00:00:00 2001 From: Flacial Date: Mon, 22 Aug 2022 06:43:59 +0400 Subject: [PATCH 13/20] refactor: Remove unused classes --- scss/queryInfo.module.scss | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/scss/queryInfo.module.scss b/scss/queryInfo.module.scss index fbb864b05..c84243876 100644 --- a/scss/queryInfo.module.scss +++ b/scss/queryInfo.module.scss @@ -18,19 +18,6 @@ } } -.success { - // Local variable - $color: adjust-color( - $color: variables.$success, - $blackness: 15% - ); - @include message(variables.$success, $color); -} - -.error { - @include message(variables.$danger, variables.$danger); -} - .loading { @include message(variables.$mute, variables.$mute); } From cfa061471492e9ec8791b706814562d272c36532 Mon Sep 17 00:00:00 2001 From: Flacial Date: Wed, 24 Aug 2022 04:32:06 +0400 Subject: [PATCH 14/20] Remove dismissing after x logic --- components/QueryInfo/QueryInfo.test.js | 58 ------------------------ components/QueryInfo/QueryInfo.tsx | 22 ++++----- stories/components/QueryInfo.stories.tsx | 18 -------- 3 files changed, 10 insertions(+), 88 deletions(-) diff --git a/components/QueryInfo/QueryInfo.test.js b/components/QueryInfo/QueryInfo.test.js index 118ed6e5c..70da67730 100644 --- a/components/QueryInfo/QueryInfo.test.js +++ b/components/QueryInfo/QueryInfo.test.js @@ -92,62 +92,4 @@ describe('QueryInfo component', () => { ).not.toBeInTheDocument() expect(screen.queryByText('Loading message...')).not.toBeInTheDocument() }) - - it('should hide successful message after 4 seconds', async () => { - expect.assertions(1) - - jest.useFakeTimers() - jest.spyOn(global, 'setTimeout') - - render( - - ) - - act(() => jest.advanceTimersByTime(4000)) - - await waitFor(() => { - expect( - screen.queryByText('Submitted successfully') - ).not.toBeInTheDocument() - }) - }) - - it('should hide error message after 4 seconds', async () => { - expect.assertions(1) - - jest.useFakeTimers() - jest.spyOn(global, 'setTimeout') - - render( - - ) - - act(() => jest.advanceTimersByTime(4000)) - - await waitFor(() => { - expect( - screen.queryByText('An error occurred because of: Missing arguments') - ).not.toBeInTheDocument() - }) - }) }) diff --git a/components/QueryInfo/QueryInfo.tsx b/components/QueryInfo/QueryInfo.tsx index 1273b0b27..591657ea3 100644 --- a/components/QueryInfo/QueryInfo.tsx +++ b/components/QueryInfo/QueryInfo.tsx @@ -1,4 +1,5 @@ -import React, { useEffect, useState } from 'react' +import { get } from 'lodash' +import React from 'react' import { Spinner } from 'react-bootstrap' import styles from '../../scss/queryInfo.module.scss' import Alert from '../Alert' @@ -12,6 +13,10 @@ type QueryInfo = { data: string } hide?: boolean + dismiss?: { + onDismissError?: (id: number) => void + onDismissData?: (id: number) => void + } } const QueryInfo = ({ @@ -19,12 +24,8 @@ const QueryInfo = ({ loading, error, texts, - hide = true + dismiss }: QueryInfo) => { - const [isHidden, setHidden] = useState(false) - - useEffect(() => setHidden(false), [data, error]) - if (loading) { return (
@@ -34,11 +35,7 @@ const QueryInfo = ({ ) } - if (isHidden) return <> - if (error) { - if (hide) setTimeout(() => setHidden(true), 4000) - return ( ({ type: 'urgent', id: 1 }} + onDismiss={get(dismiss, 'onDismissError')} + key={error} /> ) } if (data) { - if (hide) setTimeout(() => setHidden(true), 4000) - return ( ({ type: 'info', id: 2 }} + onDismiss={get(dismiss, 'onDismissData')} /> ) } diff --git a/stories/components/QueryInfo.stories.tsx b/stories/components/QueryInfo.stories.tsx index 0f757042e..910a9efc0 100644 --- a/stories/components/QueryInfo.stories.tsx +++ b/stories/components/QueryInfo.stories.tsx @@ -50,21 +50,3 @@ export const _WithLoading = () => ( hide={false} /> ) - -export const _WithHide = () => ( - // "hide" prop is optional and it's true by default -
-

Hides after 4 seconds

- -
-) From 4c5313813a6f1c20799a389843ed35afb7990a31 Mon Sep 17 00:00:00 2001 From: Flacial Date: Wed, 24 Aug 2022 04:32:19 +0400 Subject: [PATCH 15/20] refactor: Update component props --- .../AdminLessonInputs.test.js | 69 +++++++++++++++++-- .../AdminLessonInputs/AdminLessonInputs.tsx | 17 ++++- 2 files changed, 80 insertions(+), 6 deletions(-) diff --git a/components/admin/lessons/AdminLessonInputs/AdminLessonInputs.test.js b/components/admin/lessons/AdminLessonInputs/AdminLessonInputs.test.js index 1d32a6c63..713d80726 100644 --- a/components/admin/lessons/AdminLessonInputs/AdminLessonInputs.test.js +++ b/components/admin/lessons/AdminLessonInputs/AdminLessonInputs.test.js @@ -109,7 +109,7 @@ describe('AdminLessonInputs component', () => { it('Should add module', async () => { expect.assertions(1) - const { getByText, getByTestId, container } = render( + const { getByText, getByTestId } = render( { it('Should update module', async () => { expect.assertions(1) - const { getByText, getByTestId, container } = render( + const { getByText, getByTestId } = render( { it('Should display error message if inputs are empty', async () => { expect.assertions(1) - const { getByText, getByTestId, container } = render( + const { getByText, getByTestId } = render( @@ -198,7 +198,7 @@ describe('AdminLessonInputs component', () => { it('Should display error message if network or GraphQL error', async () => { expect.assertions(1) - const { getByText, getByTestId, container } = render( + const { getByText, getByTestId } = render( @@ -465,4 +465,65 @@ describe('AdminLessonInputs component', () => { expect(getByText('Updated the item successfully!')).toBeInTheDocument() ) }) + + it('Should dismiss success message', async () => { + // expect.assertions(1) + + const { getByText, getByTestId, queryByText } = render( + + {}} + /> + + ) + + await userEvent.type(getByTestId('input0'), 'Functions', { + delay: 1 + }) + await userEvent.type(getByTestId('input2'), '1', { + delay: 1 + }) + await userEvent.type(getByTestId('textbox'), 'Functions are cool', { + delay: 1 + }) + + const submit = getByText('ADD MODULE') + await userEvent.click(submit) + + await userEvent.click(getByTestId('dismiss-info')) + + // TODO: Not implemented yet. Refer to issue #2215 + // await waitFor(() => + // expect( + // queryByText('Added the item Functions successfully!') + // ).not.toBeInTheDocument() + // ) + }) + + it('Should dismiss error message', async () => { + expect.assertions(1) + + const { getByText, getByTestId, queryByText } = render( + + + + ) + + await userEvent.clear(getByTestId('input0')) + await userEvent.clear(getByTestId('textbox')) + + const submit = getByText('ADD MODULE') + await userEvent.click(submit) + + await userEvent.click(getByTestId('dismiss-urgent')) + + // This is working compared to line 500 because the error state is set to "" + await waitFor(() => + expect( + queryByText('An error occurred. Please try again.') + ).not.toBeInTheDocument() + ) + }) }) diff --git a/components/admin/lessons/AdminLessonInputs/AdminLessonInputs.tsx b/components/admin/lessons/AdminLessonInputs/AdminLessonInputs.tsx index 89447b6ca..36f79f479 100644 --- a/components/admin/lessons/AdminLessonInputs/AdminLessonInputs.tsx +++ b/components/admin/lessons/AdminLessonInputs/AdminLessonInputs.tsx @@ -8,7 +8,7 @@ import { import { formChange } from '../../../../helpers/formChange' import { FormCard, MD_INPUT, Option, TextField } from '../../../FormCard' import styles from './adminLessonInputs.module.scss' -import { get } from 'lodash' +import { get, isEqual } from 'lodash' import { ApolloError, OperationVariables, @@ -95,6 +95,12 @@ const AdminModuleInputs = ({ }) : useAddModuleMutation({ variables: mutationVariables }) + const [dataDiff, setDataDiff] = useState(data) + useEffect( + () => setDataDiff(prev => (isEqual(data, prev) ? undefined : data)), + [data] + ) + const [errorMsg, setErrorMsg] = useState(get(error, 'message', '')) const handleChange = async (value: string, propertyIndex: number) => { @@ -159,13 +165,20 @@ const AdminModuleInputs = ({ return (
{ + setErrorMsg('') + setDataDiff(undefined) + }, + onDismissData: () => {} + }} /> Date: Wed, 24 Aug 2022 04:32:49 +0400 Subject: [PATCH 16/20] test: Update snapshots --- .../__snapshots__/storyshots.test.js.snap | 28 ------------------- 1 file changed, 28 deletions(-) diff --git a/__tests__/__snapshots__/storyshots.test.js.snap b/__tests__/__snapshots__/storyshots.test.js.snap index 4f510d96b..8d73cdb3e 100644 --- a/__tests__/__snapshots__/storyshots.test.js.snap +++ b/__tests__/__snapshots__/storyshots.test.js.snap @@ -46,34 +46,6 @@ exports[`Storyshots Component/QueryInfo With Error 1`] = `
`; -exports[`Storyshots Component/QueryInfo With Hide 1`] = ` -
-

- Hides after 4 seconds -

-
-
-
- -
- Hiding in 4 seconds -
-
-
-`; - exports[`Storyshots Component/QueryInfo With Loading 1`] = `
Date: Thu, 1 Sep 2022 20:05:36 -0700 Subject: [PATCH 17/20] Remove full page load link from confirm/[token] page --- __tests__/pages/__snapshots__/reset.test.js.snap | 1 - pages/confirm/[token].tsx | 7 ++++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/__tests__/pages/__snapshots__/reset.test.js.snap b/__tests__/pages/__snapshots__/reset.test.js.snap index 7d1d52315..0d9394044 100644 --- a/__tests__/pages/__snapshots__/reset.test.js.snap +++ b/__tests__/pages/__snapshots__/reset.test.js.snap @@ -245,7 +245,6 @@ exports[`ResetPassword Page Should render confirm success on success 1`] = ` Continue to dashboard diff --git a/pages/confirm/[token].tsx b/pages/confirm/[token].tsx index 6ee0a3704..ec22df836 100644 --- a/pages/confirm/[token].tsx +++ b/pages/confirm/[token].tsx @@ -2,6 +2,7 @@ import { useMutation } from '@apollo/client' import React from 'react' import { useRouter } from 'next/router' import { Formik, Form, Field } from 'formik' +import Link from 'next/link' import UPDATE_PASSWORD from '../../graphql/queries/updatePassword' import NavLink from '../../components/NavLink' import Input from '../../components/Input' @@ -16,9 +17,9 @@ const initialValues = { const ConfirmSuccess: React.FC = () => ( - - Continue to dashboard - + + Continue to dashboard + ) From 8b10b845aec40ce9f1e87d13c129ef52d9a2018e Mon Sep 17 00:00:00 2001 From: Flacial Date: Sat, 3 Sep 2022 14:45:33 +0400 Subject: [PATCH 18/20] feat: Set dimissable alerts --- components/QueryInfo/QueryInfo.test.js | 2 +- components/QueryInfo/QueryInfo.tsx | 1 - scss/queryInfo.module.scss | 1 - stories/components/QueryInfo.stories.tsx | 39 +++++++++++++++++++++--- 4 files changed, 36 insertions(+), 7 deletions(-) diff --git a/components/QueryInfo/QueryInfo.test.js b/components/QueryInfo/QueryInfo.test.js index 70da67730..92e1e9181 100644 --- a/components/QueryInfo/QueryInfo.test.js +++ b/components/QueryInfo/QueryInfo.test.js @@ -1,6 +1,6 @@ import React from 'react' import QueryInfo from './' -import { render, screen, act, waitFor } from '@testing-library/react' +import { render, screen } from '@testing-library/react' // Imported to be able to use .toBeInTheDocument() import '@testing-library/jest-dom' diff --git a/components/QueryInfo/QueryInfo.tsx b/components/QueryInfo/QueryInfo.tsx index 591657ea3..37ebdc71f 100644 --- a/components/QueryInfo/QueryInfo.tsx +++ b/components/QueryInfo/QueryInfo.tsx @@ -12,7 +12,6 @@ type QueryInfo = { loading: string data: string } - hide?: boolean dismiss?: { onDismissError?: (id: number) => void onDismissData?: (id: number) => void diff --git a/scss/queryInfo.module.scss b/scss/queryInfo.module.scss index c84243876..2266b5054 100644 --- a/scss/queryInfo.module.scss +++ b/scss/queryInfo.module.scss @@ -8,7 +8,6 @@ padding: 0.75rem 1.25rem; border-radius: 0.25rem; margin-bottom: 0; - margin-top: 1rem; @if $color { color: $color; diff --git a/stories/components/QueryInfo.stories.tsx b/stories/components/QueryInfo.stories.tsx index 910a9efc0..48998597f 100644 --- a/stories/components/QueryInfo.stories.tsx +++ b/stories/components/QueryInfo.stories.tsx @@ -17,11 +17,27 @@ export const Basic = () => ( loading: 'Sending the request...', data: 'Update the module successfully!' }} - hide={false} /> ) -export const _WithError = () => ( +export const BasicWithDismiss = () => ( + {} + }} + /> +) + +export const Error = () => ( ( loading: 'Sending the request...', data: '' }} - hide={false} + /> +) + +export const ErrorWithDismiss = () => ( + {} + }} /> ) @@ -47,6 +79,5 @@ export const _WithLoading = () => ( loading: 'Sending the request...', data: '' }} - hide={false} /> ) From c06b6c0fbf72a25c5249a1dd748def3009461301 Mon Sep 17 00:00:00 2001 From: Flacial Date: Sat, 3 Sep 2022 14:45:49 +0400 Subject: [PATCH 19/20] test: Update test case --- .../AdminLessonInputs.test.js | 22 +++++++++---------- 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/components/admin/lessons/AdminLessonInputs/AdminLessonInputs.test.js b/components/admin/lessons/AdminLessonInputs/AdminLessonInputs.test.js index 713d80726..2316ad86f 100644 --- a/components/admin/lessons/AdminLessonInputs/AdminLessonInputs.test.js +++ b/components/admin/lessons/AdminLessonInputs/AdminLessonInputs.test.js @@ -467,9 +467,9 @@ describe('AdminLessonInputs component', () => { }) it('Should dismiss success message', async () => { - // expect.assertions(1) + expect.assertions(1) - const { getByText, getByTestId, queryByText } = render( + const { getByText, getByTestId, queryByText, getByLabelText } = render( { const submit = getByText('ADD MODULE') await userEvent.click(submit) - await userEvent.click(getByTestId('dismiss-info')) + await userEvent.click(getByLabelText('Close alert')) - // TODO: Not implemented yet. Refer to issue #2215 - // await waitFor(() => - // expect( - // queryByText('Added the item Functions successfully!') - // ).not.toBeInTheDocument() - // ) + await waitFor(() => + expect( + queryByText('Added the item Functions successfully!') + ).not.toBeInTheDocument() + ) }) it('Should dismiss error message', async () => { expect.assertions(1) - const { getByText, getByTestId, queryByText } = render( + const { getByText, getByTestId, queryByText, getByLabelText } = render( @@ -517,9 +516,8 @@ describe('AdminLessonInputs component', () => { const submit = getByText('ADD MODULE') await userEvent.click(submit) - await userEvent.click(getByTestId('dismiss-urgent')) + await userEvent.click(getByLabelText('Close alert')) - // This is working compared to line 500 because the error state is set to "" await waitFor(() => expect( queryByText('An error occurred. Please try again.') From eda5b8edc82bfc3d41b8ababae227a09e8b03e2a Mon Sep 17 00:00:00 2001 From: Flacial Date: Sat, 3 Sep 2022 14:45:57 +0400 Subject: [PATCH 20/20] test: Update snapshots --- .../__snapshots__/storyshots.test.js.snap | 64 ++++++++++++++++++- 1 file changed, 61 insertions(+), 3 deletions(-) diff --git a/__tests__/__snapshots__/storyshots.test.js.snap b/__tests__/__snapshots__/storyshots.test.js.snap index 318bf3667..4b76d7a0e 100644 --- a/__tests__/__snapshots__/storyshots.test.js.snap +++ b/__tests__/__snapshots__/storyshots.test.js.snap @@ -2,7 +2,7 @@ exports[`Storyshots Component/QueryInfo Basic 1`] = `
`; -exports[`Storyshots Component/QueryInfo With Error 1`] = ` +exports[`Storyshots Component/QueryInfo Basic With Dismiss 1`] = ` +
+
+`; + +exports[`Storyshots Component/QueryInfo Error 1`] = `
`; +exports[`Storyshots Component/QueryInfo Error With Dismiss 1`] = ` +
+
+`; + exports[`Storyshots Component/QueryInfo With Loading 1`] = `