test: and pull_request_target branches-ignore (#27728)

* test: and pull_request_target branches-ignore

* remove symbolsymbol

* use jest-puppeteer fix more launch

* increase timeout

.github/workflows/ui.yml

@@ -2,6 +2,9 @@ name: UI
 
 on:
   pull_request_target:
+    # fix merge commit trigger
+    branches-ignore:
+      - master
   push:
     branches:
       - master

.jest.image.js

@@ -12,7 +12,6 @@ module.exports = {
     '\\.(jpg|png|gif|svg)$': './node_modules/@ant-design/tools/lib/jest/imagePreprocessor',
   },
   testRegex: 'image\\.test\\.(j|t)s$',
-  testEnvironment: 'node',
   transformIgnorePatterns,
   snapshotSerializers: ['enzyme-to-json/serializer'],
   globals: {
@@ -20,4 +19,6 @@ module.exports = {
       tsConfigFile: './tsconfig.test.json',
     },
   },
+  preset: 'jest-puppeteer',
+  testTimeout: 10000,
 };

docker-compose.yml

@@ -11,6 +11,7 @@ services:
       - './jest-stare:/app/jest-stare'
       - './dist:/app/dist'
       - '.jest.image.js:/app/.jest.image.js'
+      - './jest-puppeteer.config.js:/app/jest-puppeteer.config.js'
       - './imageSnapshots:/app/imageSnapshots'
       - './imageDiffSnapshots:/app/imageDiffSnapshots'
     entrypoint: "jest --config .jest.image.js --no-cache -i"

jest-puppeteer.config.js

@@ -0,0 +1,13 @@
+// jest-puppeteer.config.js
+module.exports = {
+  launch: {
+    args: [
+      // Required for Docker version of Puppeteer
+      '--no-sandbox',
+      '--disable-setuid-sandbox',
+      // This will write shared memory files into /tmp instead of /dev/shm,
+      // because Docker’s default for /dev/shm is 64MB
+      '--disable-dev-shm-usage',
+    ],
+  },
+};

package.json

@@ -162,6 +162,7 @@
     "@types/enzyme": "^3.10.5",
     "@types/gtag.js": "^0.0.3",
     "@types/jest": "^26.0.0",
+    "@types/jest-environment-puppeteer": "^4.4.0",
     "@types/jest-image-snapshot": "^4.1.0",
     "@types/lodash": "^4.14.139",
     "@types/puppeteer": "^5.4.0",
@@ -223,6 +224,7 @@
     "intersection-observer": "^0.11.0",
     "jest": "^26.0.0",
     "jest-image-snapshot": "^4.0.0",
+    "jest-puppeteer": "^4.4.0",
     "jquery": "^3.4.1",
     "jsdom": "^16.0.0",
     "jsonml.js": "^0.1.0",

tests/shared/imageTest.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 // Reference: https://github.com/ant-design/ant-design/pull/24003#discussion_r427267386
 // eslint-disable-next-line import/no-unresolved
-import puppeteer, { Browser, Page } from 'puppeteer';
 import { configureToMatchImageSnapshot } from 'jest-image-snapshot';
 import ReactDOMServer from 'react-dom/server';
 import glob from 'glob';
@@ -17,42 +16,20 @@ expect.extend({ toMatchImageSnapshot });
 
 // eslint-disable-next-line jest/no-export
 export default function imageTest(component: React.ReactElement) {
-  describe(`Image test`, () => {
-    let browser: Browser;
-    let page: Page;
+  it('component image screenshot should correct', async () => {
+    MockDate.set(moment('2016-11-22').valueOf());
+    await page.goto(`file://${process.cwd()}/tests/index.html`);
+    await page.addStyleTag({ path: `${process.cwd()}/dist/antd.css` });
+    const html = ReactDOMServer.renderToString(component);
+    await page.evaluate(innerHTML => {
+      document.querySelector('#root')!.innerHTML = innerHTML;
+    }, html);
 
-    beforeAll(async () => {
-      MockDate.set(moment('2016-11-22').valueOf());
-      browser = await puppeteer.launch({
-        args: [
-          // Required for Docker version of Puppeteer
-          '--no-sandbox',
-          '--disable-setuid-sandbox',
-          // This will write shared memory files into /tmp instead of /dev/shm,
-          // because Docker’s default for /dev/shm is 64MB
-          '--disable-dev-shm-usage',
-        ],
-      });
-      page = await browser.newPage();
-      await page.goto(`file://${process.cwd()}/tests/index.html`);
-      await page.addStyleTag({ path: `${process.cwd()}/dist/antd.css` });
-    });
+    const image = await page.screenshot();
 
-    afterAll(() => {
-      browser.close();
-      MockDate.reset();
-    });
+    expect(image).toMatchImageSnapshot();
 
-    it('component image screenshot should correct', async () => {
-      const html = ReactDOMServer.renderToString(component);
-      await page.evaluate(innerHTML => {
-        document.querySelector('#root')!.innerHTML = innerHTML;
-      }, html);
-
-      const image = await page.screenshot();
-
-      expect(image).toMatchImageSnapshot();
-    });
+    MockDate.reset();
   });
 }