diff --git a/.github/workflows/cypress-firefox.yml b/.github/workflows/cypress-firefox.yml new file mode 100644 index 00000000..ce32f4bd --- /dev/null +++ b/.github/workflows/cypress-firefox.yml @@ -0,0 +1,15 @@ +name: E2E Firefox +on: [pull_request] +jobs: + test: + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@v4 + - uses: actions/setup-node@v4 + with: + node-version: 20.x + cache: "npm" + - run: npm ci + - run: npm run build + - run: npm run test:cypress:firefox diff --git a/.github/workflows/cypress.yml b/.github/workflows/cypress.yml index f9a40a29..0a82637f 100644 --- a/.github/workflows/cypress.yml +++ b/.github/workflows/cypress.yml @@ -1,20 +1,14 @@ -name: Run Cypress +name: E2E Chrome on: [pull_request] jobs: test: runs-on: ubuntu-latest - strategy: - matrix: - node-version: [20.x] - steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: - node-version: ${{ matrix.node-version }} + node-version: 20.x cache: "npm" - run: npm ci - run: npm test - - \ No newline at end of file diff --git a/cypress.config.ts b/cypress.config.ts index ea6efc6b..56a98996 100644 --- a/cypress.config.ts +++ b/cypress.config.ts @@ -2,14 +2,8 @@ import { defineConfig } from "cypress"; export default defineConfig({ video: false, - chromeWebSecurity: false, viewportHeight: 800, 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); - }, baseUrl: "http://localhost:8787/", }, }); diff --git a/cypress/e2e/homeScreen.cy.ts b/cypress/e2e/homeScreen.cy.ts index c542b93f..bf0942d7 100644 --- a/cypress/e2e/homeScreen.cy.ts +++ b/cypress/e2e/homeScreen.cy.ts @@ -89,7 +89,8 @@ describe('Home Screen', () => { } }); cy.openWebchat(); - cy.get('.webchat-homescreen-content').should('have.css', 'background', 'none repeat scroll 50% 50% / cover padding-box border-box, rgba(0, 0, 0, 0) radial-gradient(204.5% 136.79% at 0.53% 95.79%, rgb(237, 236, 249) 0%, rgb(191, 186, 255) 31.77%, rgb(33, 82, 227) 65.63%, rgb(5, 48, 158) 100%) repeat scroll 50% 50% / cover padding-box border-box'); + cy.get('.webchat-homescreen-content') + .should('have.css', 'background-image', 'none, radial-gradient(204.5% 136.79% at 0.53% 95.79%, rgb(237, 236, 249) 0%, rgb(191, 186, 255) 31.77%, rgb(33, 82, 227) 65.63%, rgb(5, 48, 158) 100%)'); }); it('has specified background gradient when configured', () => { @@ -105,7 +106,7 @@ describe('Home Screen', () => { } }); cy.openWebchat(); - cy.get('.webchat-homescreen-content').should('have.css', 'background', 'none repeat scroll 50% 50% / cover padding-box border-box, rgba(0, 0, 0, 0) linear-gradient(to right, rgb(255, 0, 0), rgb(0, 0, 255)) repeat scroll 50% 50% / cover padding-box border-box'); + cy.get('.webchat-homescreen-content').should('have.css', 'background-image', 'none, linear-gradient(to right, rgb(255, 0, 0), rgb(0, 0, 255))'); }); it('has the specified background color when configured', () => { diff --git a/cypress/e2e/message-colors.cy.ts b/cypress/e2e/message-colors.cy.ts index 45adda49..ca6e6951 100644 --- a/cypress/e2e/message-colors.cy.ts +++ b/cypress/e2e/message-colors.cy.ts @@ -19,7 +19,7 @@ describe('Message Color Variants', () => { it('renders a "text with buttons"', () => { cy.receiveMessageFixture('buttons'); - cy.get('.webchat-buttons-template-root .chat-bubble').should('have.css', 'background', 'rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box'); + cy.get('.webchat-buttons-template-root .chat-bubble').should('have.css', 'background-color', 'rgb(255, 255, 255)'); cy.get('.webchat-buttons-template-root .chat-bubble').should('have.css', 'color', 'rgb(28, 28, 28)'); }); @@ -95,7 +95,7 @@ describe('Message Color Variants', () => { it('renders a "text with buttons"', () => { cy.receiveMessageFixture('buttons'); - cy.get('.webchat-buttons-template-root .chat-bubble').should('have.css', 'background', 'rgb(232, 235, 255) none repeat scroll 0% 0% / auto padding-box border-box'); + cy.get('.webchat-buttons-template-root .chat-bubble').should('have.css', 'background-color', 'rgb(232, 235, 255)'); cy.get('.webchat-buttons-template-root .chat-bubble').should('have.css', 'color', 'rgba(26, 26, 26, 0.95)'); }); @@ -106,7 +106,7 @@ describe('Message Color Variants', () => { cy.receiveMessage(text, data, source); cy.get('.webchat-quick-reply-template-root .chat-bubble') - .should('have.css', 'background', 'rgb(232, 235, 255) none repeat scroll 0% 0% / auto padding-box border-box'); + .should('have.css', 'background-color', 'rgb(232, 235, 255)'); }); }); diff --git a/cypress/e2e/sourceColorMapping.cy.ts b/cypress/e2e/sourceColorMapping.cy.ts index 2a08691a..0b9dc229 100644 --- a/cypress/e2e/sourceColorMapping.cy.ts +++ b/cypress/e2e/sourceColorMapping.cy.ts @@ -21,7 +21,7 @@ describe('Source Color Mapping', () => { cy.receiveMessage('bot message', {}, 'bot'); - cy.get('.webchat-message-row.bot .chat-bubble').should('have.css', 'background', 'rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box'); + cy.get('.webchat-message-row.bot .chat-bubble').should('have.css', 'background-color', 'rgb(255, 255, 255)'); }); it('should render agent messages as "neutral" by default', () => { @@ -29,7 +29,7 @@ describe('Source Color Mapping', () => { cy.receiveMessage('agent message', {}, 'agent'); - cy.get('.webchat-message-row.agent .chat-bubble').should('have.css', 'background', 'rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box'); + cy.get('.webchat-message-row.agent .chat-bubble').should('have.css', 'background-color', 'rgb(255, 255, 255)'); }); it('should render user messages as "neutral" if configures in sourceColorMapping', () => { diff --git a/package.json b/package.json index 27a668f5..227fe482 100644 --- a/package.json +++ b/package.json @@ -13,9 +13,12 @@ "update-license": "node update-license.js", "dev": "webpack-dev-server --config webpack.dev.js --host 0.0.0.0", "cypress:open": "cypress open --e2e --browser chrome", + "cypress:open:firefox": "cypress open --e2e --browser firefox", "cypress:serve": "http-server -a localhost -p 8787 dist/", "cypress:run": "cypress run", + "cypress:run:firefox": "cypress run --browser firefox", "test:cypress": "run-p -r cypress:serve cypress:run", + "test:cypress:firefox": "run-p -r cypress:serve cypress:run:firefox", "test": "npm run test:cypress", "pretest": "npm run build", "prettier:check": "prettier --check --config .prettierrc.json src/",