Skip to content

Commit

Permalink
move history unit tests to e2e
Browse files Browse the repository at this point in the history
  • Loading branch information
acao committed Jun 21, 2023
1 parent f078d1a commit 1ed4ef7
Show file tree
Hide file tree
Showing 10 changed files with 202 additions and 292 deletions.
2 changes: 2 additions & 0 deletions packages/graphiql/cypress.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,6 @@ export default defineConfig({
baseUrl: 'http://localhost:8080',
},
video: false,
viewportWidth: 1920,
viewportHeight: 1080
});
2 changes: 1 addition & 1 deletion packages/graphiql/cypress/e2e/docs.cy.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { version } from 'graphql/version';

beforeEach(() => {
cy.visit('/');
cy.visit('');
});

describe('GraphiQL DocExplorer - button', () => {
Expand Down
6 changes: 3 additions & 3 deletions packages/graphiql/cypress/e2e/errors.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
{
Expand All @@ -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.
Expand Down
189 changes: 189 additions & 0 deletions packages/graphiql/cypress/e2e/history.cy.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,189 @@
import {
mockQuery1,
mockVariables1,
mockOperationName1,

Check failure on line 4 in packages/graphiql/cypress/e2e/history.cy.ts

View workflow job for this annotation

GitHub Actions / Lint

'mockOperationName1' is defined but never used. Allowed unused vars must match /^React$/u
mockBadQuery,
mockQuery2,
mockVariables2,
mockHeaders1,
mockHeaders2,
} from '../fixtures/fixtures';

describe('history', () => {
beforeEach(() => {

});
it('defaults to closed history panel', () => {
cy.visit('');

cy.get('.graphiql-history').should('not.exist');
});

it('will save history item even when history panel is closed', () => {
cy.visit('?query={test}');
cy.clickExecuteQuery();
cy.get('button[aria-label="Show History"]').click();
cy.get('ul.graphiql-history-items').should('have.length', 1);
});

it('will save history item even when history panel is closed', () => {
cy.visit('?query={test}');
cy.clickExecuteQuery();
cy.get('button[aria-label="Show History"]').click();
cy.get('ul.graphiql-history-items li').should('have.length', 1);
});

it('will not save invalid queries', () => {
cy.visit(`?query=${mockBadQuery}`);
cy.get('button[aria-label="Show History"]').click();
cy.clickExecuteQuery();
cy.get('ul.graphiql-history-items li').should('have.length', 0);
});

it('will save if new query is different than previous query', () => {
cy.visit(`?query=${mockQuery1}&headers=${mockHeaders1}`);
cy.get('button[aria-label="Show History"]').click();
cy.clickExecuteQuery();
cy.get('ul.graphiql-history-items li').should('have.length', 1);

cy.visit(`?query=${mockQuery2}&headers=${mockHeaders1}`);
cy.clickExecuteQuery();
cy.get('button[aria-label="Show History"]').click();
cy.get('ul.graphiql-history-items li').should('have.length', 2);
});

it('will not save if new query is the same as previous query', () => {
cy.visit(`?query=${mockQuery1}&headers=${mockHeaders1}`);
cy.get('button[aria-label="Show History"]').click();
cy.clickExecuteQuery();
cy.get('ul.graphiql-history-items li').should('have.length', 1);

cy.visit(`?query=${mockQuery1}&headers=${mockHeaders1}`);
cy.clickExecuteQuery();
cy.get('button[aria-label="Show History"]').click();
cy.get('ul.graphiql-history-items li').should('have.length', 1);
});

it('will save query if the variables change', () => {
cy.visit(`?query=${mockQuery1}&headers=${mockHeaders1}&variables=${mockVariables1}`);
cy.get('button[aria-label="Show History"]').click();
cy.clickExecuteQuery();
cy.get('ul.graphiql-history-items li').should('have.length', 1);

cy.visit(`?query=${mockQuery1}&headers=${mockHeaders1}&variables=${mockVariables2}`);
cy.clickExecuteQuery();
cy.get('button[aria-label="Show History"]').click();
cy.get('ul.graphiql-history-items li').should('have.length', 2);
});

it('will save query if the headers change', () => {
cy.visit(`?query=${mockQuery1}&headers=${mockHeaders1}`);
cy.get('button[aria-label="Show History"]').click();
cy.clickExecuteQuery();
cy.get('ul.graphiql-history-items li').should('have.length', 1);

cy.visit(`?query=${mockQuery1}&headers=${mockHeaders2}`);
cy.clickExecuteQuery();
cy.get('button[aria-label="Show History"]').click();
cy.get('ul.graphiql-history-items li').should('have.length', 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
4 changes: 2 additions & 2 deletions packages/graphiql/cypress/e2e/init.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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');
});
Expand Down
4 changes: 2 additions & 2 deletions packages/graphiql/cypress/e2e/keyboard.cy.ts
Original file line number Diff line number Diff line change
@@ -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 => {
Expand All @@ -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 => {
Expand Down
2 changes: 1 addition & 1 deletion packages/graphiql/cypress/e2e/tabs.cy.ts
Original file line number Diff line number Diff line change
@@ -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');
Expand Down
Loading

0 comments on commit 1ed4ef7

Please sign in to comment.