test: configure visual regression tests with chromatic

Author: balzss

.github/workflows/visual-regression.yml

@@ -0,0 +1,62 @@
+name: "Chromatic"
+
+on: [pull_request]
+
+jobs:
+  cypress:
+    name: Run Cypress for visual regression testing
+    runs-on: ubuntu-latest
+    container:
+      image: cypress/browsers:latest
+      options: --user 1001
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Build InstUI
+        run: npm ci && npm run bootstrap
+      - name: Install dependencies
+        run: npm ci
+        working-directory: regression-test
+      - name: Run Cypress tests
+        uses: cypress-io/github-action@v6
+        env:
+          ELECTRON_EXTRA_LAUNCH_ARGS: "--remote-debugging-port=9222"
+        with:
+          start: npm run dev
+          working-directory: regression-test
+      - name: Upload cypress artifact for chromatic
+      - uses: actions/upload-artifact@v4
+        with:
+          name: test-results
+          path: regression-test/cypress/downloads
+          retention-days: 30
+
+  chromatic:
+    name: Run Chromatic
+    needs: cypress
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22.12.0
+      - name: Install dependencies
+        run: npm ci
+        working-directory: regression-test
+      - name: Download Cypress test results
+        uses: actions/download-artifact@v4
+        with:
+          name: test-results
+          path: regression-test/cypress/downloads
+      - name: Run Chromatic
+        uses: chromaui/action@latest
+        with:
+          cypress: true
+          projectToken: ${{ secrets.CHROMATIC_APP_CODE }}
+          workingDir: regression-test
+        env:
+          CHROMATIC_ARCHIVE_LOCATION: ./cypress/downloads

.github/workflows/vrt.yml

@@ -34,3 +34,6 @@ npm-debug.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# cypress
+/cypress/downloads

regression-test/.gitignore

@@ -20,12 +20,14 @@
  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
- */ import { defineConfig } from 'cypress'
+ */
+import { defineConfig } from 'cypress'
+import { installPlugin } from '@chromatic-com/cypress'
 
 export default defineConfig({
   e2e: {
     setupNodeEvents(on, config) {
-      // implement node event listeners here
+      installPlugin(on, config)
     }
   }
 })

regression-test/cypress.config.ts

@@ -20,31 +20,10 @@
  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
- */ describe('regression test', () => {
-  it('open dialog subpage', () => {
-    cy.visit('http://localhost:3000')
-    cy.get('a').contains('dialog').click()
-    cy.get('button').click()
-    cy.get('body').should('contain', 'Full name')
-    cy.get('[class$="closeButton"]').click()
-  })
-
-  it('open alert subpage', () => {
-    cy.visit('http://localhost:3000')
-    cy.get('a').contains('alert').click()
-    cy.get('body').should('contain', 'Sample info text')
-  })
+ */
 
-  it('open breadcrumb subpage', () => {
-    cy.visit('http://localhost:3000')
-    cy.get('a').contains('breadcrumb').click()
-    cy.get('body').should('contain', 'Rabbit Is Rich')
-    cy.get('body').contains('The Rabbit Novels').click()
-    const redirect = 'https://instructure.design'
-    cy.origin(redirect, { args: { redirect } }, ({ redirect }) => {
-      cy.location().should((loc) => {
-        loc.href.includes(redirect)
-      })
-    })
+describe('visual regression test', () => {
+  it('check button', () => {
+    cy.visit('http://localhost:3000/button')
   })
 })

regression-test/cypress/e2e/spec.cy.ts

@@ -20,7 +20,9 @@
  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
- */ // ***********************************************************
+ */
+
+// ***********************************************************
 // This example support/e2e.ts is processed and
 // loaded automatically before your test files.
 //
@@ -38,5 +40,7 @@
 // Import commands.js using ES2015 syntax:
 import './commands'
 
+import '@chromatic-com/cypress/support'
+
 // Alternatively you can use CommonJS syntax:
 // require('./commands')