move history unit tests to e2e

graphql · Jun 21, 2023 · 70ce5bb · dimaMachina · Jun 21, 2023 · 70ce5bb
1 parent f078d1a
commit 70ce5bb
Show file tree

Hide file tree

Showing 9 changed files with 13 additions and 320 deletions.
diff --git a/packages/graphiql/cypress.config.ts b/packages/graphiql/cypress.config.ts
@@ -5,4 +5,6 @@ export default defineConfig({
     baseUrl: 'http://localhost:8080',
   },
   video: false,
+  viewportWidth: 1920,
+  viewportHeight: 1080
 });
diff --git a/packages/graphiql/cypress/e2e/docs.cy.ts b/packages/graphiql/cypress/e2e/docs.cy.ts
@@ -1,7 +1,7 @@
 import { version } from 'graphql/version';
 
 beforeEach(() => {
-  cy.visit('/');
+  cy.visit('');
 });
 
 describe('GraphiQL DocExplorer - button', () => {

diff --git a/packages/graphiql/cypress/e2e/errors.cy.ts b/packages/graphiql/cypress/e2e/errors.cy.ts
@@ -2,7 +2,7 @@ import { version } from 'graphql';
 
 describe('Errors', () => {
   it('Should show an error when the HTTP request fails', () => {
-    cy.visit('/?http-error=true');
+    cy.visit('?http-error=true');
     cy.assertQueryResult({
       errors: [
         {
@@ -21,14 +21,14 @@ describe('Errors', () => {
   });
 
   it('Should show an error when introspection fails', () => {
-    cy.visit('/?graphql-error=true');
+    cy.visit('?graphql-error=true');
     cy.assertQueryResult({
       errors: [{ message: 'Something unexpected happened...' }],
     });
   });
 
   it('Should show an error when the schema is invalid', () => {
-    cy.visit('/?bad=true');
+    cy.visit('?bad=true');
     /**
      * We can't use `cy.assertQueryResult` here because the stack contains line
      * and column numbers of the `graphiql.min.js` bundle which are not stable.

diff --git a/packages/graphiql/cypress/e2e/init.cy.ts b/packages/graphiql/cypress/e2e/init.cy.ts
@@ -36,7 +36,7 @@ describe('GraphiQL On Initialization', () => {
       '.graphiql-response',
       '.graphiql-editor-tool',
     ];
-    cy.visit('/');
+    cy.visit('');
     cy.get('.graphiql-query-editor').contains('# Welcome to GraphiQL');
     for (const cSelector of containers) {
       cy.get(cSelector).should('be.visible');
@@ -49,7 +49,7 @@ describe('GraphiQL On Initialization', () => {
     cy.assertQueryResult(mockSuccess);
   });
   it('Shows the expected error when the schema is invalid', () => {
-    cy.visit('/?bad=true');
+    cy.visit('?bad=true');
     cy.get('section.result-window').should(element => {
       expect(element.get(0).innerText).to.contain('Names must');
     });

diff --git a/packages/graphiql/cypress/e2e/keyboard.cy.ts b/packages/graphiql/cypress/e2e/keyboard.cy.ts
@@ -1,6 +1,6 @@
 describe('GraphiQL keyboard interactions', () => {
   it('Does not prevent the escape key from being handled outside the editor', () => {
-    cy.visit('/');
+    cy.visit('');
     const mockFn = cy.stub().as('escapeHandler');
     cy.document().then(doc => {
       doc.addEventListener('keydown', event => {
@@ -16,7 +16,7 @@ describe('GraphiQL keyboard interactions', () => {
   });
 
   it('Does prevent the escape key from being handled outside the editor if closing the autocomplete dialog', () => {
-    cy.visit('/');
+    cy.visit('');
     const mockFn = cy.stub().as('escapeHandler');
     cy.document().then(doc => {
       doc.addEventListener('keydown', event => {

diff --git a/packages/graphiql/cypress/e2e/tabs.cy.ts b/packages/graphiql/cypress/e2e/tabs.cy.ts
@@ -1,6 +1,6 @@
 describe('Tabs', () => {
   it('Should store editor contents when switching between tabs', () => {
-    cy.visit('/?query=');
+    cy.visit('?query=');
 
     // Assert that no tab visible when there's only one session
     cy.get('#graphiql-session-tab-0').should('not.exist');

diff --git a/packages/graphiql/src/components/__tests__/GraphiQL.spec.tsx b/packages/graphiql/src/components/__tests__/GraphiQL.spec.tsx
@@ -178,9 +178,7 @@ describe('GraphiQL', () => {
 
       await waitFor(() => {
         expect(
-          container.querySelector(
-            '.graphiql-query-editor .mockCodeMirror',
-          ),
+          container.querySelector('.graphiql-query-editor .mockCodeMirror'),
         ).toHaveValue('GraphQL Party!!');
       });
     });
@@ -730,284 +728,4 @@ describe('GraphiQL', () => {
       });
     });
   });
-
-  describe('history', () => {
-    it('defaults to closed history panel', async () => {
-      const { container } = render(<GraphiQL fetcher={noOpFetcher} />);
-
-      await waitFor(() => {
-        expect(
-          container.querySelector('.graphiql-history'),
-        ).not.toBeInTheDocument();
-      });
-    });
-
-    it('will save history item even when history panel is closed', async () => {
-      const { getByLabelText, container } = render(
-        <GraphiQL
-          query={mockQuery1}
-          variables={mockVariables1}
-          headers={mockHeaders1}
-          operationName={mockOperationName1}
-          fetcher={noOpFetcher}
-        />,
-      );
-      await act(async () => {
-          fireEvent.click(getByLabelText('Execute query (Ctrl-Enter)'));
-          fireEvent.click(getByLabelText('Show History'));
-
-
-      });
-
-      await waitFor(async () => {
-        expect(
-          container.querySelectorAll('.graphiql-history-items li'),
-        ).toHaveLength(1);
-      });
-    });
-
-    it('adds a history item when the execute query function button is clicked', async () => {
-      const { getByLabelText, container } = render(
-        <GraphiQL
-          query={mockQuery1}
-          variables={mockVariables1}
-          headers={mockHeaders1}
-          operationName={mockOperationName1}
-          fetcher={noOpFetcher}
-        />,
-      );
-
-      act(() => {
-        fireEvent.click(getByLabelText('Show History'));
-        fireEvent.click(getByLabelText('Execute query (Ctrl-Enter)'));
-      });
-
-      await waitFor(() => {
-        expect(
-          container.querySelectorAll('.graphiql-history-items li'),
-        ).toHaveLength(1);
-      });
-    });
-
-    it('will not save invalid queries', async () => {
-      const { getByLabelText, container } = render(
-        <GraphiQL query={mockBadQuery} fetcher={noOpFetcher} />,
-      );
-
-      act(() => {
-        fireEvent.click(getByLabelText('Show History'));
-        fireEvent.click(getByLabelText('Execute query (Ctrl-Enter)'));
-      });
-
-      await waitFor(() => {
-        expect(
-          container.querySelectorAll('.graphiql-history-items li'),
-        ).toHaveLength(0);
-      });
-    });
-
-    it('will save if there was not a previously saved query', async () => {
-      const { getByLabelText, container } = render(
-        <GraphiQL
-          fetcher={noOpFetcher}
-          operationName={mockOperationName1}
-          query={mockQuery1}
-          variables={mockVariables1}
-          headers={mockHeaders1}
-        />,
-      );
-
-      act(() => {
-        fireEvent.click(getByLabelText('Show History'));
-        fireEvent.click(getByLabelText('Execute query (Ctrl-Enter)'));
-      });
-
-      await waitFor(() => {
-        expect(
-          container.querySelectorAll('.graphiql-history-items li'),
-        ).toHaveLength(1);
-      });
-    });
-
-    it('will not save a query if the query is the same as previous query', async () => {
-      const { getByLabelText, findByLabelText, container } = render(
-        <GraphiQL
-          fetcher={noOpFetcher}
-          operationName={mockOperationName1}
-          query={mockQuery1}
-          variables={mockVariables1}
-          headers={mockHeaders1}
-        />,
-      );
-
-      act(() => {
-        fireEvent.click(getByLabelText('Show History'));
-        fireEvent.click(getByLabelText('Execute query (Ctrl-Enter)'));
-      });
-
-      await waitFor(() => {
-        expect(
-          container.querySelectorAll('.graphiql-history-items li'),
-        ).toHaveLength(1);
-      });
-
-      await act(async () => {
-        fireEvent.click(await findByLabelText('Execute query (Ctrl-Enter)'));
-      });
-
-      await waitFor(() => {
-        expect(
-          container.querySelectorAll('.graphiql-history-items li'),
-        ).toHaveLength(1);
-      });
-    });
-
-    it('will save if new query is different than previous query', async () => {
-      const { getByLabelText, container } = render(
-        <GraphiQL
-          fetcher={noOpFetcher}
-          operationName={mockOperationName1}
-          query={mockQuery1}
-          variables={mockVariables1}
-          headers={mockHeaders1}
-        />,
-      );
-
-      act(() => {
-        fireEvent.click(getByLabelText('Show History'));
-      });
-
-      const executeQueryButton = getByLabelText('Execute query (Ctrl-Enter)');
-
-      act(() => {
-        fireEvent.click(executeQueryButton);
-      });
-
-      await waitFor(() => {
-        expect(
-          container.querySelectorAll('.graphiql-history-item'),
-        ).toHaveLength(1);
-      });
-
-      act(() => {
-        fireEvent.change(
-          container.querySelector(
-            '[data-testid="query-editor"] .mockCodeMirror',
-          ),
-          {
-            target: { value: mockQuery2 },
-          },
-        );
-      });
-
-      act(() => {
-        fireEvent.click(executeQueryButton);
-      });
-
-      await waitFor(() => {
-        expect(
-          container.querySelectorAll('.graphiql-history-item'),
-        ).toHaveLength(2);
-      });
-    });
-
-    it('will save query if variables are different', async () => {
-      const { getByLabelText, container } = render(
-        <GraphiQL
-          fetcher={noOpFetcher}
-          operationName={mockOperationName1}
-          query={mockQuery1}
-          variables={mockVariables1}
-          headers={mockHeaders1}
-        />,
-      );
-
-      act(() => {
-        fireEvent.click(getByLabelText('Show History'));
-      });
-
-      const executeQueryButton = getByLabelText('Execute query (Ctrl-Enter)');
-
-      act(() => {
-        fireEvent.click(executeQueryButton);
-      });
-
-      await waitFor(() => {
-        expect(
-          container.querySelectorAll('.graphiql-history-item'),
-        ).toHaveLength(1);
-      });
-
-      act(() => {
-        fireEvent.change(
-          container.querySelector('[aria-label="Variables"] .mockCodeMirror'),
-          {
-            target: { value: mockVariables2 },
-          },
-        );
-      });
-
-      act(() => {
-        fireEvent.click(executeQueryButton);
-      });
-
-      await waitFor(() => {
-        expect(
-          container.querySelectorAll('.graphiql-history-item'),
-        ).toHaveLength(2);
-      });
-    });
-
-    it('will save query if headers are different', async () => {
-      const { getByLabelText, getByText, container } = render(
-        <GraphiQL
-          fetcher={noOpFetcher}
-          operationName={mockOperationName1}
-          query={mockQuery1}
-          variables={mockVariables1}
-          headers={mockHeaders1}
-          isHeadersEditorEnabled
-        />,
-      );
-
-      act(() => {
-        fireEvent.click(getByLabelText('Show History'));
-      });
-
-      const executeQueryButton = getByLabelText('Execute query (Ctrl-Enter)');
-
-      act(() => {
-        fireEvent.click(executeQueryButton);
-      });
-
-      await waitFor(() => {
-        expect(
-          container.querySelectorAll('.graphiql-history-item'),
-        ).toHaveLength(1);
-      });
-
-      act(() => {
-        fireEvent.click(getByText('Headers'));
-      });
-
-      act(() => {
-        fireEvent.change(
-          container.querySelector('[aria-label="Headers"] .mockCodeMirror'),
-          {
-            target: { value: mockHeaders2 },
-          },
-        );
-      });
-
-      act(() => {
-        fireEvent.click(executeQueryButton);
-      });
-
-      await waitFor(() => {
-        expect(
-          container.querySelectorAll('.graphiql-history-item'),
-        ).toHaveLength(2);
-      });
-    });
-  }); // history
 });