@digital-realty/ix-grid 1.0.6

package/src/test/ix-grid-column-filter.test.ts

@@ -0,0 +1,47 @@
+import { html } from 'lit';
+import { fixture, expect, elementUpdated } from '@open-wc/testing';
+import '../components/IxGridColumnFilter.js';
+
+const columns = [
+  {
+    name: 'firstName',
+    header: 'First name',
+    hidden: false,
+  },
+  {
+    name: 'lastName',
+    header: 'Last name',
+    hidden: true,
+  },
+  {
+    name: 'middleName',
+    header: 'Middle name',
+    hidden: false,
+  },
+];
+
+describe('IxGridColumnFilter', () => {
+  it('renders the grid column filter component', async () => {
+    const el = await fixture(
+      html`<ix-grid-column-filter></ix-grid-column-filter>`
+    );
+
+    expect(el).to.not.be.null;
+  });
+
+  it('renders the grid column filters list', async () => {
+    const el = await fixture(
+      html`<ix-grid-column-filter .columns=${columns}></ix-grid-column-filter>`
+    );
+
+    const list = el.shadowRoot?.querySelector('.list') as HTMLInputElement;
+
+    list.click();
+
+    await elementUpdated(el);
+
+    const options = el.shadowRoot?.querySelectorAll('ix-switch');
+
+    expect(options?.length).to.equal(3);
+  });
+});

package/src/test/ix-grid-row-filter.test.ts

@@ -0,0 +1,48 @@
+import { html } from 'lit';
+import { fixture, expect, elementUpdated } from '@open-wc/testing';
+import '../components/IxGridRowFilter.js';
+
+const columns = [
+  {
+    name: 'firstName',
+    header: 'First name',
+    filterable: true,
+  },
+  {
+    name: 'lastName',
+    header: 'Last name',
+    filterable: true,
+  },
+  {
+    name: 'middleName',
+    header: 'Middle name',
+    filterable: false,
+  },
+  {
+    name: 'email',
+    header: 'Email',
+    filterable: true,
+  },
+];
+
+describe('IxGridRowFilter', () => {
+  it('renders and popluates the grid row filter', async () => {
+    const el = await fixture(
+      html`<ix-grid-row-filter .columns=${columns}></ix-grid-row-filter>`
+    );
+
+    const openMenu = el.shadowRoot?.querySelector(
+      '.filter-button'
+    ) as HTMLInputElement;
+
+    openMenu.click();
+
+    await elementUpdated(el);
+
+    const options = el.shadowRoot?.querySelectorAll(
+      'select[data-v="firstName"] option'
+    );
+
+    expect(options?.length).to.equal(3);
+  });
+});

package/src/test/ix-grid.test.ts

@@ -0,0 +1,50 @@
+import { html } from 'lit';
+import { fixture, expect } from '@open-wc/testing';
+import { IxGrid } from '../IxGrid.js';
+import '../ix-grid.js';
+
+const rows = [
+  {
+    name: 'one',
+  },
+  {
+    name: 'two',
+  },
+  {
+    name: 'three',
+  },
+];
+
+const columns = [
+  {
+    name: 'one',
+    header: 'one',
+  },
+  {
+    name: 'two',
+    header: 'one',
+  },
+  {
+    name: 'three',
+    header: 'one',
+  },
+];
+
+describe('IxGrid', () => {
+  it('renders a grid', async () => {
+    const el = await fixture<IxGrid>(html`<ix-grid></ix-grid>`);
+
+    expect(el).to.not.be.null;
+  });
+
+  it('renders the correct number of rows', async () => {
+    const el = await fixture<IxGrid>(html`<ix-grid
+      columns=${columns}
+      rows=${rows}
+    ></ix-grid>`);
+
+    expect(rows.length).to.equal(3);
+
+    expect(el).to.not.be.null;
+  });
+});

package/src/test/ix-pagination.test.ts

@@ -0,0 +1,33 @@
+import { html } from 'lit';
+import { fixture, expect } from '@open-wc/testing';
+import '../components/IxPagination.js';
+
+describe('IxPagination', () => {
+  it('renders pagination', async () => {
+    const el = await fixture(html`<ix-pagination></ix-pagination>`);
+
+    expect(el).to.not.be.null;
+  });
+
+  it('renders pagination page size select', async () => {
+    const el = await fixture(html`<ix-pagination
+      .pageSizes=${[1, 2, 3]}
+    ></ix-pagination>`);
+
+    const pageSizeSelect = el?.shadowRoot?.querySelectorAll('ix-select-option');
+
+    expect(pageSizeSelect?.length).to.equal(3);
+  });
+
+  it('renders pagination range info', async () => {
+    const el = await fixture(html`<ix-pagination
+      pageSize="10"
+      page="2"
+      recordCount="99"
+    ></ix-pagination>`);
+
+    const pageRangeInfo = el?.shadowRoot?.querySelectorAll('p')[1];
+
+    expect(pageRangeInfo?.innerText).to.equal('11 - 20 of 99');
+  });
+});

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "es2018",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "lib": ["es2017", "dom"],
+    "strict": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    "inlineSources": true,
+    "rootDir": "./src",
+    "declaration": true,
+    "incremental": false,
+    "noImplicitAny": false
+  },
+  "include": ["src/**/*.ts"]
+}

package/web-dev-server.config.mjs

@@ -0,0 +1,27 @@
+// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
+
+/** Use Hot Module replacement by adding --hmr to the start command */
+const hmr = process.argv.includes('--hmr');
+
+export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
+  open: '/demo/',
+  /** Use regular watch mode if HMR is not enabled. */
+  watch: !hmr,
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto'
+
+  /** Set appIndex to enable SPA routing */
+  // appIndex: 'demo/index.html',
+
+  plugins: [
+    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
+    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
+  ],
+
+  // See documentation for all available options
+});

package/web-test-runner.config.mjs

@@ -0,0 +1,43 @@
+// import { playwrightLauncher } from '@web/test-runner-playwright';
+
+const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
+
+export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
+  /** Test files to run */
+  files: 'dist/test/**/*.test.js',
+
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
+  port: 8028,
+
+  /** Filter out lit dev mode logs */
+  filterBrowserLogs(log) {
+    for (const arg of log.args) {
+      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
+        return false;
+      }
+    }
+    return true;
+  },
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto',
+
+  /** Amount of browsers to run concurrently */
+  // concurrentBrowsers: 2,
+
+  /** Amount of test files per browser to test concurrently */
+  // concurrency: 1,
+
+  /** Browsers to run tests on */
+  // browsers: [
+  //   playwrightLauncher({ product: 'chromium' }),
+  //   playwrightLauncher({ product: 'firefox' }),
+  //   playwrightLauncher({ product: 'webkit' }),
+  // ],
+
+  // See documentation for all available options
+});