Merge pull request #18 from KevinBatdorf/update-testing-flow

Add e2e login tests

.github/workflows/cypress.yml

@@ -1,6 +1,6 @@
 name: Run Cypress test suite
 on:
-    push:
+    pull_request:
     workflow_dispatch:
     # schedule:
     # At 08:00 on Thursday.
@@ -32,13 +32,4 @@ jobs:
               uses: cypress-io/github-action@v4
               env:
                   GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-            - uses: actions/upload-artifact@v2
-              if: always()
-              with:
-                  name: cypress-screenshots
-                  path: cypress/screenshots
-            - uses: actions/upload-artifact@v2
-              if: failure()
-              with:
-                  name: cypress-videos
-                  path: cypress/videos
+                  API_TOKEN: ${{ secrets.API_TOKEN }}

.gitignore

@@ -9,3 +9,5 @@ cypress/videos/**/*
 !cypress/videos/**/.gitkeep
 cypress/downloads/**/*
 cypress/downloads/**/.gitkeep
+
+.env

cypress.config.ts

@@ -1,12 +1,13 @@
 import { defineConfig } from 'cypress';
+import * as dotenv from 'dotenv';
+
+dotenv.config();
 
 export default defineConfig({
     e2e: {
-        // We've imported your old cypress plugins here.
-        // You may want to clean this up later by importing these.
-        setupNodeEvents(on, config) {
-            return require('./cypress/plugins/index.js')(on, config);
-        },
-        defaultCommandTimeout: 60000,
+        // defaultCommandTimeout: 60000,
+    },
+    env: {
+        API_TOKEN: process.env.API_TOKEN,
     },
 });

cypress/e2e/login.cy.js

@@ -0,0 +1,38 @@
+context('Login checks', () => {
+    it('The wrong API key will show an error', () => {
+        // Adds our block
+        cy.addOurBlock();
+
+        // Click the login with nothing entered
+        cy.get('[data-cy="login-button"]').should('exist').click();
+
+        // See no error
+        cy.get('[data-cy="login-error"]').should('not.exist');
+
+        // Type in random stuff and click login
+        cy.get('#replicate-api-key').type('random');
+        cy.get('[data-cy="login-button"]').should('exist').click();
+
+        // See error
+        cy.get('[data-cy="login-error"]').should('exist');
+
+        cy.closeModal();
+    });
+
+    it('Successful login will show the select screen', () => {
+        // Adds our block
+        cy.addOurBlock();
+
+        // Confirm model screen is not there
+        cy.get('[data-cy="model-screen"]').should('not.exist');
+
+        // Type in real API Token
+        cy.get('#replicate-api-key').type(Cypress.env('API_TOKEN'));
+        cy.get('[data-cy="login-button"]').should('exist').click();
+
+        // See model select screen
+        cy.get('[data-cy="model-select"]').should('exist');
+
+        cy.closeModal();
+    });
+});

cypress/e2e/starting-up.cy.js

@@ -0,0 +1,13 @@
+context('Starting up', () => {
+    afterEach(() => {
+        cy.window().then((win) => {
+            expect(win.console.error).to.have.callCount(0);
+        });
+    });
+
+    it('The image block is inserted', () => {
+        // Adds our block
+        cy.addOurBlock();
+        cy.closeModal();
+    });
+});

cypress/support/block.js

@@ -0,0 +1,31 @@
+export const closeOurModal = () => {
+    const modalButton =
+        '.stable-diffusion-editor.stable-diffusion-modal button[aria-label="Close"]';
+    cy.get(modalButton).click();
+
+    // Check the core image block is there
+    cy.getPostContent('.wp-block[class$="wp-block-image"]').should('not.exist');
+};
+
+export const maybeLogin = () => {
+    cy.get('body').then((body) => {
+        if (body.find('[data-cy="login-button"]').length > 0) {
+            cy.get('#replicate-api-key').type(Cypress.env('API_TOKEN'));
+            cy.get('[data-cy="login-button"]').should('exist').click();
+
+            // See model select screen
+            cy.get('[data-cy="model-screen"]').should('exist');
+        }
+    });
+};
+
+export const maybeLogout = () => {
+    cy.get('.stable-diffusion-modal').should('exist');
+    cy.get('body').then((body) => {
+        if (body.find('[data-cy="logout"]').length > 0) {
+            cy.get('[data-cy="logout"]').click();
+            cy.get('[data-cy="login-button"').should('exist');
+        }
+    });
+    cy.get('[data-cy="login-screen"]').should('exist');
+};

cypress/support/commands.js

@@ -1,4 +1,5 @@
 import { BLOCK_CONTAINER } from '../constants';
+import { closeOurModal, maybeLogin, maybeLogout } from './block';
 import {
     addBlock,
     closeWelcomeGuide,
@@ -8,7 +9,7 @@ import {
     setPostContent,
     wpDataSelect,
 } from './gutenberg';
-import { login, logout } from './login-logout';
+import { wplogin, wplogout } from './login-logout';
 import {
     visitPageEditor,
     visitAdminPage,
@@ -30,9 +31,9 @@ Cypress.Commands.add('visitNewPageEditor', (query, skipWelcomeGuide) =>
 
 // Login logout
 Cypress.Commands.add('loginUser', (username, password) =>
-    login(username, password),
+    wplogin(username, password),
 );
-Cypress.Commands.add('logoutUser', () => logout());
+Cypress.Commands.add('logoutUser', () => wplogout());
 
 // Gutenberg
 Cypress.Commands.add('closeWelcomeGuide', () => closeWelcomeGuide());
@@ -54,3 +55,14 @@ Cypress.Commands.add('wpDataSelect', (store, selector, ...parameters) =>
 // Manage plugins
 Cypress.Commands.add('installPlugin', (slug) => installPlugin(slug));
 Cypress.Commands.add('uninstallPlugin', (slug) => uninstallPlugin(slug));
+
+// Our stuff
+Cypress.Commands.add('addOurBlock', () => {
+    cy.addBlock('stable-diffusion');
+    // Check the core image block is there
+    cy.getPostContent('.wp-block[class$="wp-block-image"]').should('exist');
+    cy.maybeLogout();
+});
+Cypress.Commands.add('closeModal', () => closeOurModal());
+Cypress.Commands.add('maybeLogin', () => maybeLogin());
+Cypress.Commands.add('maybeLogout', () => maybeLogout());

cypress/support/globals.js

@@ -7,11 +7,6 @@ Cypress.Cookies.defaults({
 Cypress.on('window:before:load', (win) => {
     cy.spy(win.console, 'error');
 });
-afterEach(() => {
-    cy.window().then((win) => {
-        expect(win.console.error).to.have.callCount(0);
-    });
-});
 
 beforeEach(() => {
     cy.loginUser();

cypress/support/login-logout.js

@@ -1,4 +1,4 @@
-export const login = (username = 'admin', password = 'password') => {
+export const wplogin = (username = 'admin', password = 'password') => {
     cy.log('Login with username: ' + username + ' and password: ' + password);
     cy.visitLoginPage()
         .get('#user_login')
@@ -9,7 +9,7 @@ export const login = (username = 'admin', password = 'password') => {
         .click();
 };
 
-export const logout = () => {
+export const wplogout = () => {
     cy.visitAdminPage();
     cy.get('#wp-admin-bar-logout a').click({ force: true });
 };

package.json

@@ -27,6 +27,7 @@
         "@wordpress/url": "^3.17.0",
         "autoprefixer": "^10.4.9",
         "cypress": "^10.7.0",
+        "dotenv": "^16.0.2",
         "eslint": "^8.23.0",
         "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-cypress": "^2.12.1",

src/layouts/DialogWithImage.tsx

@@ -6,6 +6,7 @@ type ModalProps = {
     onClose: () => void;
     title: string;
     open: boolean;
+    testingId?: string;
     children: React.ReactNode;
     initialFocus: React.RefObject<HTMLElement>;
     image: {
@@ -18,6 +19,7 @@ export const DialogWithImageModal = ({
     title,
     onClose,
     open,
+    testingId,
     initialFocus,
     image,
     children,
@@ -26,6 +28,7 @@ export const DialogWithImageModal = ({
         <Dialog
             className="stable-diffusion-editor stable-diffusion-modal"
             initialFocus={initialFocus}
+            data-cy={testingId}
             open={open}
             onClose={onClose}>
             <div className="absolute mx-auto w-full h-full overflow-hidden md:p-8 md:flex justify-center items-center z-high">

src/views/Login.tsx

@@ -49,6 +49,7 @@ export const Login = ({ onClose }: LoginProps) => {
     return (
         <DialogWithImageModal
             open={true}
+            testingId="login-screen"
             onClose={onClose}
             title={__('Login', 'stable-diffusion')}
             image={{
@@ -81,13 +82,16 @@ export const Login = ({ onClose }: LoginProps) => {
                                     className="w-full h-10 rounded-none border border-gray-900 focus:outline-none focus:ring-1 ring-offset-1 ring-wp-theme-500 focus:shadow-none"
                                 />
                                 {errorMsg && (
-                                    <p className="text-red-500 m-0">
+                                    <p
+                                        data-cy="login-error"
+                                        className="text-red-500 m-0">
                                         {errorMsg}
                                     </p>
                                 )}
                             </div>
                             <button
                                 type="button"
+                                data-cy="login-button"
                                 className="h-10 px-4 bg-gray-900 text-white rounded-none border border-gray-900 focus:outline-none focus:ring-1 ring-offset-1 ring-wp-theme-500 cursor-pointer focus:shadow-none"
                                 disabled={loading}
                                 onClick={() => {

src/views/ModelSelect.tsx

@@ -23,6 +23,7 @@ export const ModalSelect = ({ onClose, open }: ModalProps) => {
     return (
         <DialogWithImageModal
             open={open}
+            testingId="model-select"
             initialFocus={initialFocus}
             onClose={onClose}
             title={__('Select Model', 'stable-diffusion')}
@@ -44,6 +45,7 @@ export const ModalSelect = ({ onClose, open }: ModalProps) => {
                 {/* Temporary logout button */}
                 {Boolean(apiToken) && (
                     <button
+                        data-cy="logout"
                         className="relative z-30 text-white bg-transparent focus:outline-none focus:ring-1 ring-offset-1 ring-wp-theme-500 focus:shadow-none opacity-80 hover:opacity-100"
                         onClick={logout}>
                         {__('Logout', 'stable-diffusion')}