feat: migrate css property assertion (#251)

.grit/patterns/codecept_to_playwright.md

@@ -55,6 +55,21 @@ pattern convert_locators($page) {
         `I.dontSeeElement($element)` => `await expect($element).toBeHidden()`,
         `I.see($text, $target)` => `await expect($target).toContainText($text)`,
         `I.dontSee($text, $target)` => `await expect($target).not.toContainText($text)`,
+        `I.seeCssPropertiesOnElements($target, { $css })` as $orig where {
+            $css_assertions = [],
+            $css <: some bubble($target, $css_assertions) pair($key, $value) where {
+                or {
+                    and {
+                        $key <: string(),
+                        $string_key = $key,
+                    },
+                    $string_key = `'$key'`,
+                },
+                $css_assertions += `await expect($target).toHaveCSS($string_key, $value)`,
+            },
+            $css_assertions = join(list=$css_assertions, separator=`;\n`),
+            $orig => $css_assertions,
+        },
         `I.seeInField($value, $target)` => `await expect($target).toHaveValue($value)`,
         `I.seeTextEquals($text, $target)` => `await expect($target).toHaveText($text)`,
         `I.waitForElement($target, $timeout)` => `await $target.waitFor({ state: 'attached', timeout: $timeout * 1000 })`,
@@ -85,7 +100,12 @@ pattern convert_base_page() {
                 $value <: `($params) => $exp` where {
                     $pair => `$key($params) { return $exp }`,
                 },
-                $pair => `get $key() { return $value }`
+                $pair => `get $key() { return $value }`,
+            } where {
+                $pair <: not within method_definition(),
+                $pair <: not within pair() as $outer_pair where {
+                    $outer_pair <: not $pair,
+                }
             },
             method_definition($async, $static) as $method where {
                 $async <: false,
@@ -102,7 +122,7 @@ pattern convert_base_page() {
 
 pattern remove_commas() {
     or {
-        r"(?s)(get\s+\w+\s*\(\s*\)\s*\{[^}]*\})\s*,"($getter) => $getter,
+        r"(?s)(get\s+\w+\s*\(\s*\)\s*\{.*\})\s*,"($getter) => $getter,
         // Hack to remove the incorrect trailing comma
         `async $method($params) { $body }` => `async $method($params) {
     $body
@@ -205,6 +225,10 @@ export default {
   waitForGrit() {
     I.waitForVisible(this.studio.withText(this.message), 5);
     I.click(this.button('grit'), this.studio);
+    I.seeCssPropertiesOnElements(this.studio, {
+      'background-color': '#3570b6',
+      display: 'flex',
+    });
   },
 };
 ```
@@ -228,6 +252,8 @@ export default class Test extends BasePage {
       .and(this.page.locator(':has-text("this.message")'))
       .waitFor({ state: 'visible', timeout: 5 * 1000 });
     await this.studio.locator(this.button('grit')).click();
+    await expect(this.studio).toHaveCSS('background-color', '#3570b6');
+    await expect(this.studio).toHaveCSS('display', 'flex');
   }
 }
 ```
@@ -259,3 +285,50 @@ test('Trivial test', async ({ page, factory, context }) => {
   await projectPage.close();
 });
 ```
+
+## Does not convert inner object properties to getters
+
+```js
+// @file someFolder/test.js
+const { I } = inject();
+
+export default {
+  studio: locate('.studio'),
+  message: 'Hello world',
+
+  section: {
+    editor: locate('#editor'),
+    title: 'Apply a GritQL pattern',
+  },
+  someMethod() {
+    return {
+      foo: bar,
+    };
+  },
+};
+```
+
+```js
+// @file someFolder/test.js
+
+export default class Test extends BasePage {
+  get studio() {
+    return this.page.locator('.studio');
+  }
+  get message() {
+    return 'Hello world';
+  }
+
+  get section() {
+    return {
+      editor: this.page.locator('#editor'),
+      title: 'Apply a GritQL pattern',
+    };
+  }
+  async someMethod() {
+    return {
+      foo: bar,
+    };
+  }
+}
+```