test(css): convert to playwright tests

Author: brandyscarney

core/package.json

@@ -90,8 +90,7 @@
     "prerender.e2e": "node scripts/testing/prerender.js",
     "prettier": "prettier \"./src/**/*.{html,ts,tsx,js,jsx}\"",
     "start": "npm run build.css && stencil build --dev --watch --serve",
-    "test": "npm run test.css && npm run test.spec && npm run test.e2e",
-    "test.css": "sh -c 'for f in src/css/test/*.mjs; do node \"$f\"; done'",
+    "test": "npm run test.spec && npm run test.e2e",
     "test.spec": "stencil test --spec --max-workers=2",
     "test.e2e": "npx playwright test",
     "test.e2e.update-snapshots": "npm run test.e2e -- --update-snapshots='changed'",

core/src/css/test/display.e2e.ts

@@ -0,0 +1,48 @@
+import { test, expect } from '@playwright/test';
+import fs from 'fs';
+import path from 'path';
+
+test.describe('display css utility classes', () => {
+  let css: string;
+
+  test.beforeAll(() => {
+    css = fs.readFileSync(path.resolve(__dirname, '../../../css/display.css'), 'utf8');
+  });
+
+  const INFIXES = ['', '-sm', '-md', '-lg', '-xl'];
+
+  // TODO(FW-6697): remove `ion-hide classes` test
+  test('ion-hide classes', () => {
+    expect(css).toContain('.ion-hide');
+
+    const values = ['up', 'down'];
+
+    for (const value of values) {
+      for (const infix of INFIXES) {
+        expect(css).toContain(`.ion-hide${infix}-${value}`);
+      }
+    }
+  });
+
+  test('ion-display classes', () => {
+    const values = [
+      'none',
+      'inline',
+      'inline-block',
+      'block',
+      'flex',
+      'inline-flex',
+      'grid',
+      'inline-grid',
+      'table',
+      'table-cell',
+      'table-row',
+    ];
+
+    for (const value of values) {
+      for (const infix of INFIXES) {
+        expect(css).toContain(`.ion-display${infix}-${value}`);
+      }
+    }
+  });
+});

core/src/css/test/display.test.mjs

@@ -0,0 +1,100 @@
+import { test, expect } from '@playwright/test';
+import fs from 'fs';
+import path from 'path';
+
+test.describe('flex-utils css utility classes', () => {
+  let css: string;
+
+  test.beforeAll(() => {
+    css = fs.readFileSync(path.resolve(__dirname, '../../../css/flex-utils.css'), 'utf8');
+  });
+
+  const INFIXES = ['', '-sm', '-md', '-lg', '-xl'];
+
+  test('align-content classes', () => {
+    const values = ['start', 'end', 'center', 'between', 'around', 'stretch'];
+    for (const value of values) {
+      for (const infix of INFIXES) {
+        expect(css).toContain(`.ion-align-content${infix}-${value}`);
+      }
+    }
+  });
+
+  test('align-items classes', () => {
+    const values = ['start', 'center', 'end', 'stretch', 'baseline'];
+    for (const value of values) {
+      for (const infix of INFIXES) {
+        expect(css).toContain(`.ion-align-items${infix}-${value}`);
+      }
+    }
+  });
+
+  test('align-self classes', () => {
+    const values = ['start', 'end', 'center', 'stretch', 'baseline', 'auto'];
+    for (const value of values) {
+      for (const infix of INFIXES) {
+        expect(css).toContain(`.ion-align-self${infix}-${value}`);
+      }
+    }
+  });
+
+  test('justify-content classes', () => {
+    const values = ['start', 'center', 'end', 'around', 'between', 'evenly'];
+    for (const value of values) {
+      for (const infix of INFIXES) {
+        expect(css).toContain(`.ion-justify-content${infix}-${value}`);
+      }
+    }
+  });
+
+  test('flex-direction classes', () => {
+    const values = ['row', 'row-reverse', 'column', 'column-reverse'];
+    for (const value of values) {
+      for (const infix of INFIXES) {
+        expect(css).toContain(`.ion-flex${infix}-${value}`);
+      }
+    }
+  });
+
+  test('flex-wrap classes', () => {
+    const values = ['wrap', 'nowrap', 'wrap-reverse'];
+    // TODO(FW-6697): remove all `ion-wrap-*` expects
+    for (const value of values) {
+      expect(css).toContain(`.ion-${value}`);
+    }
+    for (const value of values) {
+      for (const infix of INFIXES) {
+        expect(css).toContain(`.ion-flex${infix}-${value}`);
+      }
+    }
+  });
+
+  test('flex-fill classes', () => {
+    const values = ['1', 'auto', 'initial', 'none'];
+    for (const value of values) {
+      for (const infix of INFIXES) {
+        expect(css).toContain(`.ion-flex${infix}-${value}`);
+      }
+    }
+  });
+
+  test('flex-grow and flex-shrink classes', () => {
+    const values = ['grow', 'shrink'];
+    for (const value of values) {
+      for (const infix of INFIXES) {
+        expect(css).toContain(`.ion-flex${infix}-${value}-0`);
+        expect(css).toContain(`.ion-flex${infix}-${value}-1`);
+      }
+    }
+  });
+
+  test('flex-order classes', () => {
+    for (const infix of INFIXES) {
+      expect(css).toContain(`.ion-order${infix}-first`);
+      expect(css).toContain(`.ion-order${infix}-last`);
+      for (let i = 0; i <= 12; i++) {
+        expect(css).toContain(`.ion-order${infix}-${i}`);
+      }
+    }
+  });
+});