Add regression test to attribute-behavior fixture

.circleci/config.yml

@@ -236,6 +236,62 @@ jobs:
             RELEASE_CHANNEL: experimental
           command: ./scripts/circleci/run_devtools_e2e_tests.js
 
+  run_fixtures_attribute-behavior_tests:
+    docker: *docker
+    environment: *environment
+    steps:
+      - checkout
+      - attach_workspace:
+          at: .
+      - restore_cache:
+          name: Restore yarn cache
+          keys:
+            - v2-yarn_cache_fixtures_attribute-behavior-{{ arch }}-{{ checksum "yarn.lock" }}
+      - run:
+          name: Install dependencies
+          working_directory: fixtures/attribute-behavior
+          command: |
+            # --ignore-optional is required to work around https://github.com/yarnpkg/yarn/pull/7273 on Linux.
+            yarn install --ignore-optional --frozen-lockfile --cache-folder ~/.cache/yarn
+            if [ $? -ne 0 ]; then
+              yarn install --ignore-optional --frozen-lockfile --cache-folder ~/.cache/yarn
+            fi
+          environment:
+          # If we start needing the Electron binary, please ensure the binary is cached in CI following https://www.electronjs.org/docs/latest/tutorial/installation
+            ELECTRON_SKIP_BINARY_DOWNLOAD: 1
+      - save_cache:
+          name: Save yarn cache
+          key: v2-yarn_cache_fixtures_attribute-behavior-{{ arch }}-{{ checksum "yarn.lock" }}
+          paths:
+            - ~/.cache/yarn
+      - run:
+          working_directory: fixtures/attribute-behavior
+          name: Playwright install deps
+          command: |
+            npx playwright install
+            sudo npx playwright install-deps
+      - run:
+          working_directory: fixtures/attribute-behavior
+          command: cp ../../build/oss-experimental/react/umd/react.development.js public/ && cp ../../build/oss-experimental/react-dom/umd/react-dom.development.js public/ && cp ../../build/oss-experimental/react-dom/umd/react-dom-server.browser.development.js public/
+      - run:
+          name: Run tests
+          working_directory: fixtures/attribute-behavior
+          command: yarn test
+
+      - run:
+          name: Check if snapshot is unchanged
+          working_directory: fixtures/attribute-behavior
+          command: |
+            git diff --exit-code HEAD -- AttributeTableSnapshot.md
+
+      - store_artifacts:
+          path: fixtures/attribute-behavior/AttributeTableSnapshot.md
+      - store_artifacts:
+          path: fixtures/attribute-behavior/playwright-report
+      - store_artifacts:
+          path: fixtures/attribute-behavior/test-results
+
+
   run_devtools_tests_for_versions:
     docker: *docker
     environment: *environment
@@ -516,6 +572,9 @@ workflows:
       - run_devtools_e2e_tests:
           requires:
             - build_devtools_and_process_artifacts
+      - run_fixtures_attribute-behavior_tests:
+          requires:
+            - yarn_build
 
   devtools_regression_tests:
     unless: << pipeline.parameters.prerelease_commit_sha >>

fixtures/attribute-behavior/.gitignore

@@ -5,6 +5,8 @@
 
 # testing
 /coverage
+/playwright-report
+/test-results
 
 # production
 /build

fixtures/attribute-behavior/README.md

@@ -28,3 +28,11 @@ Right now, we use a purple outline to call out cases where the assigned property
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
 You can find the guide for how to do things in a CRA [here](https://github.com/facebook/create-react-app/blob/main/packages/cra-template/template/README.md).
+
+
+## Tests
+
+### end-to-end
+
+End-to-end tests are written for [Playwright](https://playwright.dev/).
+For local debugging, run `yarn test --ui`.

fixtures/attribute-behavior/__tests__/__e2e__/regression.test.js

@@ -0,0 +1,18 @@
+import {test, expect} from '@playwright/test';
+
+test(
+  'AttributeTableSnapshot is unchanged',
+  async ({page}) => {
+    test.setTimeout(1 * 60_000);
+    await page.goto('/');
+
+    await expect(page).toHaveTitle('Ready', {timeout: 1 * 60_000});
+
+    const downloadPromise = page.waitForEvent('download');
+    await page.getByText('Save latest results to a file').click();
+    const download = await downloadPromise;
+
+    await download.saveAs('AttributeTableSnapshot.md');
+  },
+  {timeout: 6 * 60_000}
+);

fixtures/attribute-behavior/package.json

@@ -10,6 +10,9 @@
     "react-scripts": "1.0.11",
     "react-virtualized": "^9.9.0"
   },
+  "devDependencies": {
+    "@playwright/test": "^1.41.2"
+  },
   "optionalDependencies": {
     "fsevents": "1.2.13"
   },
@@ -21,7 +24,7 @@
       "cp ../../build/oss-experimental/react/umd/react.development.js public/ && cp ../../build/oss-experimental/react-dom/umd/react-dom.development.js public/ && cp ../../build/oss-experimental/react-dom/umd/react-dom-server.browser.development.js public/",
     "dev": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
+    "test": "playwright test",
     "eject": "react-scripts eject"
   }
 }

fixtures/attribute-behavior/playwright.config.js

@@ -0,0 +1,31 @@
+import {defineConfig, devices} from '@playwright/test';
+
+const isCI = process.env.CI === '1';
+
+export default defineConfig({
+  // relative to this configuration file.
+  testDir: '__tests__/__e2e__',
+  fullyParallel: true,
+  // Fail the build on CI if you accidentally left test.only in the source code.
+  forbidOnly: !isCI,
+  retries: isCI ? 2 : 0,
+  // Opt out of parallel tests on CI.
+  workers: isCI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    baseURL: 'http://127.0.0.1:3000',
+
+    trace: 'on-first-retry',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: {...devices['Desktop Chrome']},
+    },
+  ],
+  webServer: {
+    command: 'yarn dev',
+    url: 'http://127.0.0.1:3000',
+    reuseExistingServer: !isCI,
+  },
+});

fixtures/attribute-behavior/yarn.lock

@@ -2,6 +2,13 @@
 # yarn lockfile v1
 
 
+"@playwright/test@^1.41.2":
+  version "1.41.2"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.41.2.tgz#bd9db40177f8fd442e16e14e0389d23751cdfc54"
+  integrity sha512-qQB9h7KbibJzrDpkXkYvsmiDJK14FULCCZgEcoe2AvFAS64oCirWTwzTlAYEbKaRxWs5TFesE1Na6izMv3HfGg==
+  dependencies:
+    playwright "1.41.2"
+
 abab@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.3.tgz#b81de5f7274ec4e756d797cd834f303642724e5d"
@@ -2705,7 +2712,7 @@ fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
 
-fsevents@1.1.2, fsevents@1.2.13, fsevents@^1.0.0:
+fsevents@1.1.2, fsevents@1.2.13, fsevents@2.3.2, fsevents@^1.0.0:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.13.tgz#f325cb0455592428bcf11b383370ef70e3bfcc38"
   integrity sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==
@@ -4621,6 +4628,20 @@ pkg-dir@^2.0.0:
   dependencies:
     find-up "^2.1.0"
 
+playwright-core@1.41.2:
+  version "1.41.2"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.41.2.tgz#db22372c708926c697acc261f0ef8406606802d9"
+  integrity sha512-VaTvwCA4Y8kxEe+kfm2+uUUw5Lubf38RxF7FpBxLPmGe5sdNkSg5e3ChEigaGrX7qdqT3pt2m/98LiyvU2x6CA==
+
+playwright@1.41.2:
+  version "1.41.2"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.41.2.tgz#4e760b1c79f33d9129a8c65cc27953be6dd35042"
+  integrity sha512-v0bOa6H2GJChDL8pAeLa/LZC4feoAMbSQm1/jF/ySsWWoaNItvrMP7GEkvEEFyCTUYKMxjQKaTSg5up7nR6/8A==
+  dependencies:
+    playwright-core "1.41.2"
+  optionalDependencies:
+    fsevents "2.3.2"
+
 pluralize@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-4.0.0.tgz#59b708c1c0190a2f692f1c7618c446b052fd1762"