Added some actual e2e tests

README.md

@@ -44,7 +44,7 @@ Learn more about the application's structure by [reading this doc](./ARCHITECTUR
 ## Todo
 
 - Probably more optimizations to the webpack configs
-- Get e2e test working for multiple affected apps both locally and in CI pipeline
+- Get e2e test working for multiple affected apps in CI pipeline
 - Look into [redux-dynamic-modules](https://github.com/Microsoft/redux-dynamic-modules)
 - Look into [single-spa](https://single-spa.js.org/) if even needed
 - Keep an eye on [HMR](https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/126)

apps/admin/cypress.json

@@ -0,0 +1,15 @@
+{
+ "baseUrl": "http:https://localhost:1336",
+ "fileServerFolder": ".",
+ "fixturesFolder": "../../shared/types/src/fixtures",
+ "integrationFolder": "./cypress/integration",
+ "modifyObstructiveCode": false,
+ "supportFile": "./cypress/support/index.ts",
+ "screenshotOnRunFailure": true,
+ "trashAssetsBeforeRuns": true,
+ "video": true,
+ "videosFolder": "./cypress/dist/videos",
+ "screenshotsFolder": "./cypress/dist/screenshots",
+ "chromeWebSecurity": false,
+ "projectId": "3mcgfk"
+}

apps/admin/cypress/integration/mutations.spec.ts

@@ -0,0 +1,71 @@
+import { contactsFixture, authFixture, ContactType, IContact } from '@fake-company/types';
+
+describe('mutations', () => {
+ beforeEach(() => {
+ cy.visit('/');
+ cy.intercept('GET', '/api/auth', authFixture);
+ cy.intercept('GET', '/api/contacts/*', (req) =>
+ req.reply(contactsFixture.find(({ id }) => id === req.url.split('/').pop()) as IContact)
+ );
+ });
+
+ it('should add a contact', () => {
+ cy.intercept('GET', '/api/contacts', contactsFixture);
+ cy.intercept('POST', '/api/contacts', {
+ id: '9478e897-5731-4fa2-a2dc-7c1adccc53a2',
+ name: 'Foo Bar Baz',
+ rating: 5,
+ type: ContactType.Client
+ });
+
+ cy.findAllByRole('button', { name: 'Add Contacts' }).first().click();
+
+ cy.url().should('equal', 'http:https://localhost:1336/admin/add');
+
+ cy.findByRole('button', { name: 'Submit' }).should('be.disabled');
+ cy.findByRole('textbox').type('Foo Bar');
+ cy.findByRole('textbox').clear();
+ cy.findByText('Name is a required field.').should('exist');
+ cy.findByRole('textbox').type('Foo Bar Baz');
+ cy.findByTestId('type').click();
+ cy.findAllByRole('option').first().click();
+ cy.findByRole('button', { name: 'Submit' }).click();
+
+ cy.url().should('equal', 'http:https://localhost:1336/admin/');
+ });
+
+ it('should edit a contact', () => {
+ cy.intercept('GET', '/api/contacts', contactsFixture);
+ cy.intercept('PUT', '/api/contacts', { ...contactsFixture[0], name: 'Foo Bar' });
+
+ cy.findAllByRole('button', { name: 'Edit' }).first().click();
+
+ cy.url().should('equal', 'http:https://localhost:1336/admin/edit/89222b2d-8d06-41ff-82cf-c989dd90de24');
+
+ cy.findByRole('textbox').clear();
+ cy.findByText('Name is a required field.').should('exist');
+ cy.findByRole('button', { name: 'Submit' }).should('be.disabled');
+ cy.findByRole('textbox').type('Foo Bar');
+ cy.findByRole('button', { name: 'Submit' }).click();
+
+ cy.url().should('equal', 'http:https://localhost:1336/admin/');
+ });
+
+ it('should delete a contact', () => {
+ let interceptCount = 0;
+
+ cy.intercept('DELETE', '/api/contacts/89222b2d-8d06-41ff-82cf-c989dd90de24', { statusCode: 200 });
+ cy.intercept('/api/contacts', (req) => {
+ if (interceptCount === 0) {
+ interceptCount += 1;
+ req.reply(contactsFixture);
+ } else {
+ req.reply(contactsFixture.filter(({ id }) => id !== '89222b2d-8d06-41ff-82cf-c989dd90de24'));
+ }
+ });
+
+ cy.findAllByRole('button', { name: 'Delete' }).first().click();
+ cy.wait(2000);
+ cy.findByRole('row', { name: 'Chad Williams' }).should('not.exist');
+ });
+});

apps/admin/cypress/integration/queries.spec.ts

@@ -0,0 +1,34 @@
+import { contactsFixture, authFixture, IContact } from '@fake-company/types';
+
+describe('queries', () => {
+ beforeEach(() => {
+ cy.visit('/');
+ cy.intercept('GET', '/api/auth', authFixture);
+ cy.intercept('GET', '/api/contacts/*', (req) =>
+ req.reply(contactsFixture.find(({ id }) => id === req.url.split('/').pop()) as IContact)
+ );
+ cy.intercept('GET', '/api/contacts', contactsFixture);
+ });
+
+ it('should contain app name in toolbar', () => {
+ cy.findByRole('heading').should('contain', 'Admin');
+ });
+
+ it('should have some nav links', () => {
+ cy.findAllByRole('button', { name: 'View Contacts' }).should('exist');
+ cy.findAllByRole('button', { name: 'Add Contacts' }).should('exist');
+ });
+
+ it('should have have a table with contacts', () => {
+ cy.findByRole('table', { name: 'simple table' }).should('exist');
+ cy.findAllByRole('link').should('have.length', 5);
+ cy.findAllByRole('row').first().should('contain', 'Type');
+ });
+
+ it('should allow you to view a single contact', () => {
+ cy.findAllByRole('link').last().click();
+ cy.url().should('equal', 'http:https://localhost:1336/admin/fd546b4e-747d-448f-abaf-b0d119bae119');
+ cy.findByText('Chloe Martinez').should('exist');
+ cy.findByText('Customer').should('exist');
+ });
+});

apps/admin/cypress/support/commands.ts

@@ -0,0 +1 @@
+import '@testing-library/cypress/add-commands';

apps/admin/cypress/support/index.ts

@@ -0,0 +1 @@
+import './commands';

apps/admin/cypress/tsconfig.json

@@ -0,0 +1,7 @@
+{
+ "extends": "../../../tsconfig.app.json",
+ "compilerOptions": {
+ "sourceMap": false
+ },
+ "include": ["**/*.ts", "**/*.js"]
+}

apps/admin/package.json

@@ -7,7 +7,11 @@
  "scripts": {
  "start": "webpack serve --mode=development",
  "build": "webpack --mode=production",
- "test": "echo 'No test found'"
+ "test": "echo 'No test found'",
+ "e2e": "wait-on http-get:https://localhost:1336 && pnpm run cypress-open",
+ "e2e-ci": "wait-on http-get:https://localhost:1336 && pnpm run cypress-run",
+ "cypress-open": "cypress open",
+ "cypress-run": "cypress run"
  },
  "dependencies": {
  "@material-ui/core": "4.11.3",

apps/connect/cypress.json

@@ -0,0 +1,15 @@
+{
+ "baseUrl": "http:https://localhost:1337",
+ "fileServerFolder": ".",
+ "fixturesFolder": "../../shared/types/src/fixtures",
+ "integrationFolder": "./cypress/integration",
+ "modifyObstructiveCode": false,
+ "supportFile": "./cypress/support/index.ts",
+ "screenshotOnRunFailure": true,
+ "trashAssetsBeforeRuns": true,
+ "video": true,
+ "videosFolder": "./cypress/dist/videos",
+ "screenshotsFolder": "./cypress/dist/screenshots",
+ "chromeWebSecurity": false,
+ "projectId": "73ueoy"
+}