diff --git a/src/test/SettingsPage/SettingsPage.test.tsx b/src/test/SettingsPage/SettingsPage.test.tsx index 610b31c..88024ff 100644 --- a/src/test/SettingsPage/SettingsPage.test.tsx +++ b/src/test/SettingsPage/SettingsPage.test.tsx @@ -52,7 +52,6 @@ describe('Testing for settings page', () => { waitForElementToBeRemoved(() => { expect(screen.queryByTestId('overlay')).toBeNull(); }).catch(() => {}); - screen.debug(); }); it('Should open confirm modal and close it after clicking corresponding buttons', async () => { render(); diff --git a/src/test/docsComponent/SomeTotallyCompletelyDiffFile.test.tsx b/src/test/docsComponent/SomeTotallyCompletelyDiffFile.test.tsx index a6287cb..5bc6a07 100644 --- a/src/test/docsComponent/SomeTotallyCompletelyDiffFile.test.tsx +++ b/src/test/docsComponent/SomeTotallyCompletelyDiffFile.test.tsx @@ -1,135 +1,140 @@ -import { act, fireEvent, render, screen, waitForElementToBeRemoved } from '@testing-library/react'; +// import { act, fireEvent, render, screen, waitForElementToBeRemoved } from '@testing-library/react'; import { describe, expect, it } from 'vitest'; -import App from '@/app/App'; +// import App from '@/app/App'; describe('Testing for docs component', () => { - it('Should render docs components after clicking on show docs btn', async () => { - render(); - const showDocsBtn = screen.getByText('show docs'); - expect(screen.queryByTestId('overlay')).toBeNull(); - expect(screen.queryByText('Docs')).toBeNull(); - expect(screen.queryByText('A GraphQL schema provides a root type for each kind of operation')).toBeNull(); - await act(async () => { - fireEvent.click(showDocsBtn); + // it('Should render docs components after clicking on show docs btn', async () => { + // render(); + // const showDocsBtn = screen.getByText('show docs'); + // expect(screen.queryByTestId('overlay')).toBeNull(); + // expect(screen.queryByText('Docs')).toBeNull(); + // expect(screen.queryByText('A GraphQL schema provides a root type for each kind of operation')).toBeNull(); + // await act(async () => { + // fireEvent.click(showDocsBtn); + // }); + // expect(await screen.findByTestId('overlay')).toBeInTheDocument(); + // expect(await screen.findByText('Docs')).toBeInTheDocument(); + // expect( + // await screen.findByText('A GraphQL schema provides a root type for each kind of operation.'), + // ).toBeInTheDocument(); + // }); + // it('Should close docs section after clicking on overlay', async () => { + // render(); + // const showDocsBtn = screen.getByText('show docs'); + // expect(screen.queryByTestId('overlay')).toBeNull(); + // expect(screen.queryByText('Docs')).toBeNull(); + // expect(screen.queryByText('A GraphQL schema provides a root type for each kind of operation')).toBeNull(); + // await act(async () => { + // fireEvent.click(showDocsBtn); + // }); + // const overlay = await screen.findByTestId('overlay'); + // expect(overlay).toBeInTheDocument(); + // expect(await screen.findByText('Docs')).toBeInTheDocument(); + // expect( + // await screen.findByText('A GraphQL schema provides a root type for each kind of operation.'), + // ).toBeInTheDocument(); + // await act(async () => { + // fireEvent.click(overlay); + // }); + // waitForElementToBeRemoved(() => { + // expect(overlay).toBeNull(); + // expect(screen.queryByText('Docs')).toBeNull(); + // expect(screen.queryByText('A GraphQL schema provides a root type for each kind of operation.')).toBeNull(); + // }).catch(() => {}); + // }); + // it('Should close docs section after clicking on close docs button', async () => { + // render(); + // const showDocsBtn = screen.getByText('show docs'); + // expect(screen.queryByTestId('overlay')).toBeNull(); + // expect(screen.queryByText('Docs')).toBeNull(); + // expect(screen.queryByText('A GraphQL schema provides a root type for each kind of operation')).toBeNull(); + // await act(async () => { + // fireEvent.click(showDocsBtn); + // }); + // const closeDocsBtn = await screen.findByText('closeDocs'); + // expect(await screen.findByTestId('overlay')).toBeInTheDocument(); + // expect(await screen.findByText('Docs')).toBeInTheDocument(); + // expect( + // await screen.findByText('A GraphQL schema provides a root type for each kind of operation.'), + // ).toBeInTheDocument(); + // await act(async () => { + // fireEvent.click(closeDocsBtn); + // }); + // waitForElementToBeRemoved(() => { + // expect(screen.queryByTestId('overlay')).toBeNull(); + // expect(screen.queryByText('Docs')).toBeNull(); + // expect(screen.queryByText('A GraphQL schema provides a root type for each kind of operation.')).toBeNull(); + // }).catch(() => {}); + // }); + // it('Should navigate and display info about proper type after cliking on that type', async () => { + // render(); + // const showDocsBtn = screen.getByText('show docs'); + // await act(async () => { + // fireEvent.click(showDocsBtn); + // }); + // const booleanTypeLink = await screen.findByText('Boolean'); + // expect(booleanTypeLink).toBeInTheDocument(); + // await act(async () => { + // fireEvent.click(booleanTypeLink); + // }); + // expect(await screen.findByText('The `Boolean` scalar type represents `true` or `false`.')).toBeInTheDocument(); + // }); + // it('Should navigate and display info about proper info about root type after cliking on that type', async () => { + // render(); + // const showDocsBtn = screen.getByText('show docs'); + // await act(async () => { + // fireEvent.click(showDocsBtn); + // }); + // const RootTypeLink = await screen.findByText('Root'); + // await act(async () => { + // fireEvent.click(RootTypeLink); + // }); + // expect(await screen.findByText('Fields:')).toBeInTheDocument(); + // }); + // it('Should navigate and display info about proper info about root type after cliking on that type and all following clicked types as well as navigating back', async () => { + // render(); + // const showDocsBtn = screen.getByText('show docs'); + // await act(async () => { + // fireEvent.click(showDocsBtn); + // }); + // const RootTypeLink = await screen.findByText('Root'); + // await act(async () => { + // fireEvent.click(RootTypeLink); + // }); + // expect(await screen.findByText('Fields:')).toBeInTheDocument(); + // const filmsLink = await screen.findByText('Film'); + // expect(filmsLink).toBeInTheDocument(); + // await act(async () => { + // fireEvent.click(filmsLink); + // }); + // expect(await screen.findByText('Implements:')).toBeInTheDocument(); + // const nodeTypeLink = await screen.findByText('Node'); + // expect(nodeTypeLink).toBeInTheDocument(); + // await act(async () => { + // fireEvent.click(nodeTypeLink); + // }); + // expect(await screen.findByText('Implementations')).toBeInTheDocument(); + // const backToFilmBtn = await screen.findByRole('button', { name: 'Film' }); + // await act(async () => { + // fireEvent.click(backToFilmBtn); + // }); + // const backToRootBtn = await screen.findByRole('button', { name: 'Root' }); + // await act(async () => { + // fireEvent.click(backToRootBtn); + // }); + // const backToDocsBtn = await screen.findByRole('button', { name: 'Docs' }); + // await act(async () => { + // fireEvent.click(backToDocsBtn); + // }); + // expect(await screen.findByText('Docs')).toBeInTheDocument(); + // expect( + // await screen.findByText('A GraphQL schema provides a root type for each kind of operation.'), + // ).toBeInTheDocument(); + // }); + describe('Testing the authorized login page route', () => { + it('fake', () => { + expect(1).toBe(1); }); - expect(await screen.findByTestId('overlay')).toBeInTheDocument(); - expect(await screen.findByText('Docs')).toBeInTheDocument(); - expect( - await screen.findByText('A GraphQL schema provides a root type for each kind of operation.'), - ).toBeInTheDocument(); - }); - it('Should close docs section after clicking on overlay', async () => { - render(); - const showDocsBtn = screen.getByText('show docs'); - expect(screen.queryByTestId('overlay')).toBeNull(); - expect(screen.queryByText('Docs')).toBeNull(); - expect(screen.queryByText('A GraphQL schema provides a root type for each kind of operation')).toBeNull(); - await act(async () => { - fireEvent.click(showDocsBtn); - }); - const overlay = await screen.findByTestId('overlay'); - expect(overlay).toBeInTheDocument(); - expect(await screen.findByText('Docs')).toBeInTheDocument(); - expect( - await screen.findByText('A GraphQL schema provides a root type for each kind of operation.'), - ).toBeInTheDocument(); - await act(async () => { - fireEvent.click(overlay); - }); - waitForElementToBeRemoved(() => { - expect(overlay).toBeNull(); - expect(screen.queryByText('Docs')).toBeNull(); - expect(screen.queryByText('A GraphQL schema provides a root type for each kind of operation.')).toBeNull(); - }).catch(() => {}); - }); - it('Should close docs section after clicking on close docs button', async () => { - render(); - const showDocsBtn = screen.getByText('show docs'); - expect(screen.queryByTestId('overlay')).toBeNull(); - expect(screen.queryByText('Docs')).toBeNull(); - expect(screen.queryByText('A GraphQL schema provides a root type for each kind of operation')).toBeNull(); - await act(async () => { - fireEvent.click(showDocsBtn); - }); - const closeDocsBtn = await screen.findByText('closeDocs'); - expect(await screen.findByTestId('overlay')).toBeInTheDocument(); - expect(await screen.findByText('Docs')).toBeInTheDocument(); - expect( - await screen.findByText('A GraphQL schema provides a root type for each kind of operation.'), - ).toBeInTheDocument(); - await act(async () => { - fireEvent.click(closeDocsBtn); - }); - waitForElementToBeRemoved(() => { - expect(screen.queryByTestId('overlay')).toBeNull(); - expect(screen.queryByText('Docs')).toBeNull(); - expect(screen.queryByText('A GraphQL schema provides a root type for each kind of operation.')).toBeNull(); - }).catch(() => {}); - }); - it('Should navigate and display info about proper type after cliking on that type', async () => { - render(); - const showDocsBtn = screen.getByText('show docs'); - await act(async () => { - fireEvent.click(showDocsBtn); - }); - const booleanTypeLink = await screen.findByText('Boolean'); - expect(booleanTypeLink).toBeInTheDocument(); - await act(async () => { - fireEvent.click(booleanTypeLink); - }); - expect(await screen.findByText('The `Boolean` scalar type represents `true` or `false`.')).toBeInTheDocument(); - }); - it('Should navigate and display info about proper info about root type after cliking on that type', async () => { - render(); - const showDocsBtn = screen.getByText('show docs'); - await act(async () => { - fireEvent.click(showDocsBtn); - }); - const RootTypeLink = await screen.findByText('Root'); - await act(async () => { - fireEvent.click(RootTypeLink); - }); - expect(await screen.findByText('Fields:')).toBeInTheDocument(); - }); - it('Should navigate and display info about proper info about root type after cliking on that type and all following clicked types as well as navigating back', async () => { - render(); - const showDocsBtn = screen.getByText('show docs'); - await act(async () => { - fireEvent.click(showDocsBtn); - }); - const RootTypeLink = await screen.findByText('Root'); - await act(async () => { - fireEvent.click(RootTypeLink); - }); - expect(await screen.findByText('Fields:')).toBeInTheDocument(); - const filmsLink = await screen.findByText('Film'); - expect(filmsLink).toBeInTheDocument(); - await act(async () => { - fireEvent.click(filmsLink); - }); - expect(await screen.findByText('Implements:')).toBeInTheDocument(); - const nodeTypeLink = await screen.findByText('Node'); - expect(nodeTypeLink).toBeInTheDocument(); - await act(async () => { - fireEvent.click(nodeTypeLink); - }); - expect(await screen.findByText('Implementations')).toBeInTheDocument(); - const backToFilmBtn = await screen.findByRole('button', { name: 'Film' }); - await act(async () => { - fireEvent.click(backToFilmBtn); - }); - const backToRootBtn = await screen.findByRole('button', { name: 'Root' }); - await act(async () => { - fireEvent.click(backToRootBtn); - }); - const backToDocsBtn = await screen.findByRole('button', { name: 'Docs' }); - await act(async () => { - fireEvent.click(backToDocsBtn); - }); - expect(await screen.findByText('Docs')).toBeInTheDocument(); - expect( - await screen.findByText('A GraphQL schema provides a root type for each kind of operation.'), - ).toBeInTheDocument(); }); }); diff --git a/src/test/docsComponent/separateTestPartOne.test.tsx b/src/test/docsComponent/separateTestPartOne.test.tsx new file mode 100644 index 0000000..48ddce9 --- /dev/null +++ b/src/test/docsComponent/separateTestPartOne.test.tsx @@ -0,0 +1,46 @@ +import { act, fireEvent, render, screen, waitForElementToBeRemoved } from '@testing-library/react'; +import { describe, expect, it } from 'vitest'; + +import App from '@/app/App'; + +describe('Testing for docs component', () => { + it('Should render docs components after clicking on show docs btn', async () => { + render(); + const showDocsBtn = screen.getByText('show docs'); + expect(screen.queryByTestId('overlay')).toBeNull(); + expect(screen.queryByText('Docs')).toBeNull(); + expect(screen.queryByText('A GraphQL schema provides a root type for each kind of operation')).toBeNull(); + await act(async () => { + fireEvent.click(showDocsBtn); + }); + expect(await screen.findByTestId('overlay')).toBeInTheDocument(); + expect(await screen.findByText('Docs')).toBeInTheDocument(); + expect( + await screen.findByText('A GraphQL schema provides a root type for each kind of operation.'), + ).toBeInTheDocument(); + }); + it('Should close docs section after clicking on overlay', async () => { + render(); + const showDocsBtn = screen.getByText('show docs'); + expect(screen.queryByTestId('overlay')).toBeNull(); + expect(screen.queryByText('Docs')).toBeNull(); + expect(screen.queryByText('A GraphQL schema provides a root type for each kind of operation')).toBeNull(); + await act(async () => { + fireEvent.click(showDocsBtn); + }); + const overlay = await screen.findByTestId('overlay'); + expect(overlay).toBeInTheDocument(); + expect(await screen.findByText('Docs')).toBeInTheDocument(); + expect( + await screen.findByText('A GraphQL schema provides a root type for each kind of operation.'), + ).toBeInTheDocument(); + await act(async () => { + fireEvent.click(overlay); + }); + waitForElementToBeRemoved(() => { + expect(overlay).toBeNull(); + expect(screen.queryByText('Docs')).toBeNull(); + expect(screen.queryByText('A GraphQL schema provides a root type for each kind of operation.')).toBeNull(); + }).catch(() => {}); + }); +}); diff --git a/src/test/docsComponent/separateTestPartThree.test.tsx b/src/test/docsComponent/separateTestPartThree.test.tsx new file mode 100644 index 0000000..7932353 --- /dev/null +++ b/src/test/docsComponent/separateTestPartThree.test.tsx @@ -0,0 +1,59 @@ +import { act, fireEvent, render, screen } from '@testing-library/react'; +import { describe, expect, it } from 'vitest'; + +import App from '@/app/App'; + +describe('Testing for docs component', () => { + it('Should navigate and display info about proper info about root type after cliking on that type', async () => { + render(); + const showDocsBtn = screen.getByText('show docs'); + await act(async () => { + fireEvent.click(showDocsBtn); + }); + const RootTypeLink = await screen.findByText('Root'); + await act(async () => { + fireEvent.click(RootTypeLink); + }); + expect(await screen.findByText('Fields:')).toBeInTheDocument(); + }); + it('Should navigate and display info about proper info about root type after cliking on that type and all following clicked types as well as navigating back', async () => { + render(); + const showDocsBtn = screen.getByText('show docs'); + await act(async () => { + fireEvent.click(showDocsBtn); + }); + const RootTypeLink = await screen.findByText('Root'); + await act(async () => { + fireEvent.click(RootTypeLink); + }); + expect(await screen.findByText('Fields:')).toBeInTheDocument(); + const filmsLink = await screen.findByText('Film'); + expect(filmsLink).toBeInTheDocument(); + await act(async () => { + fireEvent.click(filmsLink); + }); + expect(await screen.findByText('Implements:')).toBeInTheDocument(); + const nodeTypeLink = await screen.findByText('Node'); + expect(nodeTypeLink).toBeInTheDocument(); + await act(async () => { + fireEvent.click(nodeTypeLink); + }); + expect(await screen.findByText('Implementations')).toBeInTheDocument(); + const backToFilmBtn = await screen.findByRole('button', { name: 'Film' }); + await act(async () => { + fireEvent.click(backToFilmBtn); + }); + const backToRootBtn = await screen.findByRole('button', { name: 'Root' }); + await act(async () => { + fireEvent.click(backToRootBtn); + }); + const backToDocsBtn = await screen.findByRole('button', { name: 'Docs' }); + await act(async () => { + fireEvent.click(backToDocsBtn); + }); + expect(await screen.findByText('Docs')).toBeInTheDocument(); + expect( + await screen.findByText('A GraphQL schema provides a root type for each kind of operation.'), + ).toBeInTheDocument(); + }); +}); diff --git a/src/test/docsComponent/separateTestPartTwo.test.tsx b/src/test/docsComponent/separateTestPartTwo.test.tsx new file mode 100644 index 0000000..adb45a9 --- /dev/null +++ b/src/test/docsComponent/separateTestPartTwo.test.tsx @@ -0,0 +1,44 @@ +import { act, fireEvent, render, screen, waitForElementToBeRemoved } from '@testing-library/react'; +import { describe, expect, it } from 'vitest'; + +import App from '@/app/App'; + +describe('Testing for docs component', () => { + it('Should close docs section after clicking on close docs button', async () => { + render(); + const showDocsBtn = screen.getByText('show docs'); + expect(screen.queryByTestId('overlay')).toBeNull(); + expect(screen.queryByText('Docs')).toBeNull(); + expect(screen.queryByText('A GraphQL schema provides a root type for each kind of operation')).toBeNull(); + await act(async () => { + fireEvent.click(showDocsBtn); + }); + const closeDocsBtn = await screen.findByText('closeDocs'); + expect(await screen.findByTestId('overlay')).toBeInTheDocument(); + expect(await screen.findByText('Docs')).toBeInTheDocument(); + expect( + await screen.findByText('A GraphQL schema provides a root type for each kind of operation.'), + ).toBeInTheDocument(); + await act(async () => { + fireEvent.click(closeDocsBtn); + }); + waitForElementToBeRemoved(() => { + expect(screen.queryByTestId('overlay')).toBeNull(); + expect(screen.queryByText('Docs')).toBeNull(); + expect(screen.queryByText('A GraphQL schema provides a root type for each kind of operation.')).toBeNull(); + }).catch(() => {}); + }); + it('Should navigate and display info about proper type after cliking on that type', async () => { + render(); + const showDocsBtn = screen.getByText('show docs'); + await act(async () => { + fireEvent.click(showDocsBtn); + }); + const booleanTypeLink = await screen.findByText('Boolean'); + expect(booleanTypeLink).toBeInTheDocument(); + await act(async () => { + fireEvent.click(booleanTypeLink); + }); + expect(await screen.findByText('The `Boolean` scalar type represents `true` or `false`.')).toBeInTheDocument(); + }); +});