Merge pull request #61 from KevinBatdorf/redo-api-key-prompt

Refactor auth and decouple modal

.eslintrc

@@ -22,7 +22,7 @@
     },
     "ignorePatterns": ["node_modules/", "pkg/", "build/"],
     "parser": "@typescript-eslint/parser",
-    "plugins": [],
+    "plugins": ["no-only-tests"],
     "rules": {
         "require-await": "error",
         "quotes": ["error", "single", { "avoidEscape": true }],
@@ -33,8 +33,8 @@
         "semi": ["error", "always"],
         "space-in-parens": ["error", "never"],
         "key-spacing": ["error", { "afterColon": true }],
+        "no-only-tests/no-only-tests": "warn",
         "space-infix-ops": ["error"],
-        "@typescript-eslint/no-unused-vars": ["error"],
         "space-before-function-paren": [
             "error",
             {

.github/workflows/cypress-main.yml

@@ -0,0 +1,97 @@
+name: Run Cypress on main
+on:
+    push:
+        branches:
+          - main
+    workflow_dispatch:
+    schedule:
+    # At 08:00 daily
+    - cron: "0 8 * * *"
+jobs:
+  generate_file_list:
+    name: Generate file list
+    runs-on: ubuntu-latest
+    outputs:
+        spec: ${{ steps.list_files.outputs.spec }}
+    steps:
+        - name: Checkout code
+          uses: actions/checkout@v3
+        - name: List Files
+          id: list_files
+          run: |
+              # List all the .cy.js files in the cypress/e2e directory
+              # and output their file names without the extension
+              ls cypress/e2e/*.cy.js | xargs -I{} basename {} .cy.js | jq -Rrs "split(\"\n\") | map(select(length > 0)) | tojson" | tee /tmp/spec.json
+              echo "spec=$(cat /tmp/spec.json)" >> "$GITHUB_OUTPUT"
+  npm_install:
+    name: Install Node modules
+    runs-on: ubuntu-latest
+    steps:
+        - name: Checkout code
+          uses: actions/checkout@v3
+        - name: Cache node modules
+          uses: actions/cache@v3
+          id: cache-node-modules
+          with:
+              path: node_modules
+              key: ${{ runner.os }}-node-modules-${{ hashFiles('**/package-lock.json') }}
+        - name: Install npm dependencies
+          if: steps.cache-node-modules.outputs.cache-hit != 'true'
+          run: npm ci
+
+  test:
+      name: WordPress ${{ matrix.wp-version }} (${{ matrix.spec }})
+      needs: [generate_file_list, npm_install]
+      concurrency:
+          group: cypress - ${{ github.event.pull_request.number || github.ref }} - ${{ matrix.wp-version }} - ${{ matrix.spec }}
+          cancel-in-progress: true
+      runs-on: ubuntu-latest
+      strategy:
+          fail-fast: false
+          matrix:
+              wp-version: [null, 'Next']
+              spec: ${{ fromJson(needs.generate_file_list.outputs.spec) }}
+      steps:
+          - name: Clone repo
+            uses: actions/checkout@v3
+          - name: Set up node
+            uses: actions/setup-node@v3
+          - name: Node modules cache
+            uses: actions/cache@v3
+            id: cache-node-modules
+            with:
+                path: node_modules
+                key: ${{ runner.os }}-node-modules-${{ hashFiles('**/package-lock.json') }}
+          - name: Install npm dependencies
+            if: steps.cache-node-modules.outputs.cache-hit != 'true'
+            run: npm ci
+
+          - name: Build
+            run: |
+                npx eslint --max-warnings 0 .
+                npm run build
+
+          - name: Get Latest WP Branch
+            if: ${{ matrix.wp-version }}
+            run: |
+                echo "branch=$(curl -L -H "Accept: application/vnd.github+json" -H "X-GitHub-Api-Version: 2022-11-28" https://api.github.com/repos/WordPress/WordPress/branches\?per_page\=100 | jq '.[].name' | awk '/-branch/' | sort -V | tail -n1 | tr -d '"')" >> $GITHUB_ENV
+          - name: Maybe remove .wp-env.json
+            if: ${{ matrix.wp-version }}
+            run: rm .wp-env.json
+          - name: Maybe change WP version
+            uses: jsdaniell/[email protected]
+            if: ${{ matrix.wp-version }}
+            with:
+                name: '.wp-env.json'
+                json: '{"core": "WordPress/WordPress#${{ env.branch }}", "plugins":["."]}'
+          - name: Start server
+            run: |
+                npx wp-env start
+                echo "WordPress version: `wp-env run cli core version`"
+          - name: Cypress run
+            uses: cypress-io/github-action@v5
+            with:
+              browser: chrome
+              spec: cypress/e2e/${{ matrix.spec }}.cy.js
+            env:
+                GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/cypress-push.yml

@@ -0,0 +1,77 @@
+name: Run Cypress on push
+on:
+    push:
+        branches-ignore:
+            - main
+    workflow_dispatch:
+jobs:
+    prepare_spec_files:
+        name: Prepage file list
+        runs-on: ubuntu-latest
+        outputs:
+            spec: ${{ steps.files.outputs.spec }}
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v3
+            - name: Files
+              id: files
+              run: |
+                  # All the .cy.js files in the cypress/e2e directory in an array
+                  ls cypress/e2e/*.cy.js | xargs -I{} basename {} .cy.js | jq -Rrs "split(\"\n\") | map(select(length > 0)) | tojson" | tee /tmp/spec.json
+                  echo "spec=$(cat /tmp/spec.json)" >> "$GITHUB_OUTPUT"
+    npm_install:
+        name: Install Node modules
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v3
+            - name: Cache node modules
+              uses: actions/cache@v3
+              id: cache-node-modules
+              with:
+                  path: node_modules
+                  key: ${{ runner.os }}-node-modules-${{ hashFiles('**/package-lock.json') }}
+            - name: Install npm dependencies
+              if: steps.cache-node-modules.outputs.cache-hit != 'true'
+              run: npm ci
+
+    test:
+        name: WordPress (${{ matrix.spec }})
+        needs: [prepare_spec_files, npm_install]
+        concurrency:
+            group: cypress - ${{ github.event.pull_request.number || github.ref }} - ${{ matrix.spec }}
+            cancel-in-progress: true
+        runs-on: ubuntu-latest
+        strategy:
+            fail-fast: false
+            matrix:
+                spec: ${{ fromJson(needs.prepare_spec_files.outputs.spec) }}
+        steps:
+            - name: Clone repo
+              uses: actions/checkout@v3
+            - name: Restore node modules cache
+              uses: actions/cache@v3
+              with:
+                  path: node_modules
+                  key: ${{ runner.os }}-node-modules-${{ hashFiles('**/package-lock.json') }}
+                  restore-keys: ${{ runner.os }}-node-modules-
+
+            - name: Install wasm-pack
+              uses: jetli/[email protected]
+
+            - name: Build
+              run: |
+                  npx eslint --max-warnings 0 .
+                  npm run build
+            - name: Start server
+              run: |
+                  npx wp-env start
+                  echo "WordPress version: `wp-env run cli core version`"
+
+            - name: Cypress run
+              uses: cypress-io/github-action@v5
+              with:
+                  browser: chrome
+                  spec: cypress/e2e/${{ matrix.spec }}.cy.js
+              env:
+                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

cypress/e2e/filters/image-modal.cy.js

@@ -0,0 +1,48 @@
+beforeEach(() => {
+    cy.resetDatabase();
+    cy.clearBrowserStorage();
+    cy.loginUser();
+    cy.visitNewPageEditor();
+
+    cy.loginToApi();
+    cy.addBlock('core/image');
+    // focus the block
+    cy.get('.wp-block[class$="wp-block-image"]').click();
+    cy.get('.wp-block[class$="wp-block-image"]').should('have.focus');
+    // open the modal
+    cy.get('button[aria-label="Generate AI Image"]').click();
+});
+afterEach(() => {
+    cy.closeModal();
+    cy.logoutUser();
+});
+
+context('Image filter modal', () => {
+    it('Can add an image', () => {
+        cy.get('[data-cy="login-screen"]').should('not.exist');
+        cy.get('[data-cy="modal-controls"]').should('exist');
+
+        // TODO: add a fixture with an image that can be actually imported
+    });
+
+    it('Can switch between models', () => {
+        // Should see the stable diffusion model
+        cy.get('[data-cy="modal-controls"]').should(
+            'contain',
+            'Stable Diffusion V2',
+        );
+
+        cy.get('[data-cy="modal-controls"]').contains('Switch Models').click();
+
+        cy.get('[data-cy="modal-switch"]').should('exist');
+
+        cy.get('[data-cy="model-switch-grid"] button')
+            .contains('lambdal/text-to-pokemon')
+            .click();
+
+        cy.get('[data-cy="modal-controls"]').should(
+            'contain',
+            'Text to Pokémon',
+        );
+    });
+});

cypress/e2e/login.cy.js

@@ -1,38 +1,59 @@
-context('Login checks', () => {
-    it('The wrong API key will show an error', () => {
-        // Adds our block
-        cy.addOurBlock();
+beforeEach(() => {
+    cy.resetDatabase();
+    cy.clearBrowserStorage();
+    cy.loginUser();
+});
+afterEach(() => {
+    cy.logoutUser();
+});
 
-        // Click the login with nothing entered
-        cy.get('[data-cy="login-button"]').should('exist').click();
+context('Login checks', () => {
+    it('The login prompt can be opened from plugins API Key', () => {
+        cy.visitAdminPage('plugins.php');
+        cy.get('[data-cy="api-token-action"]').should('exist').click();
+        cy.get('[data-cy="login-screen"]').should('exist');
+    });
 
+    it('Can log in properly', () => {
+        cy.openLoginPrompt();
         // 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');
+        // Try to login with no api token
         cy.get('[data-cy="login-button"]').should('exist').click();
-
         // See error
         cy.get('[data-cy="login-error"]').should('exist');
-
-        cy.closeModal();
+        // Enter any token
+        cy.get('#replicate-api-key').type('123');
+        // Login accepts any token, it will force relogin later if it fails
+        cy.get('[data-cy="login-button"]').should('exist').click();
+        // See no error
+        cy.get('[data-cy="login-error"]').should('not.exist');
+        // Modal shoudl be closed
+        cy.get('[data-cy="login-screen"]').should('not.exist');
+        // See toast success
+        cy.get('[data-cy="login-success-toast"]')
+            .should('exist')
+            .contains('The token was successfully saved.');
     });
 
-    it('Successful login will show the stable diffusion screen', () => {
-        // Adds our block
-        cy.addOurBlock();
-
-        // Confirm model screen is not there
-        cy.get('[data-cy="model-screen"]').should('not.exist');
+    it('Opening the modal should prompt login', () => {
+        cy.visitNewPageEditor();
+        cy.addBlock('core/image');
+        cy.get('button[aria-label="Generate AI Image"]').click();
 
-        // Type in real API Token
-        cy.get('#replicate-api-key').type(Cypress.env('API_TOKEN'));
+        cy.get('[data-cy="login-screen"]').should('exist');
+        // Type wrong token
+        cy.get('#replicate-api-key').type('123');
         cy.get('[data-cy="login-button"]').should('exist').click();
 
-        // See model select screen
-        cy.get('[data-cy="model-screen"]').should('exist');
+        // Prompt leaves
+        cy.get('[data-cy="login-screen"]').should('not.exist');
 
-        cy.closeModal();
+        // prompt should show again
+        cy.get('[data-cy="login-screen"]').should('exist');
+        cy.get('[data-cy="login-screen"]').should(
+            'contain',
+            'Please log in to continue',
+        );
     });
 });