~repos /atoms-element

#js

git clone https://pyrossh.dev/repos/atoms-element.git

A simple web component library for defining your custom elements. It works on both client and server.

Readme
|
Commits
|
Files
70ecbda7 — Peter John

4 years ago 
fix tests
Files changed (2) hide show
  1. __snapshots__/index.test.js.snap +4 -4
  2. index.test.js +33 -43
__snapshots__/index.test.js.snap CHANGED
@@ -36,14 +36,14 @@ exports[`compileTw 1`] = `
36
36
  "
37
37
  `;
38
38
 
39
- exports[`createElement with attrs and state 1`] = `
39
+ exports[`createElement with attrs and hooks 1`] = `
40
40
  "
41
+ <div>
41
42
  <div>
42
- <div>
43
- <span>perPage: 5</span> </div> </div> <span>Count: 3</span> <button>Set</button> "
43
+ <span>perPage: 5</span> </div> </div> <span>Count: 3</span> <button>Set</button> "
44
44
  `;
45
45
 
46
- exports[`createElement without attrs and state 1`] = `" <div></div>"`;
46
+ exports[`createElement without attrs 1`] = `" <div></div>"`;
47
47
 
48
48
  exports[`createPage 1`] = `
49
49
  "
index.test.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { expect, test, jest } from '@jest/globals';
2
- import { getElement, createElement, createPage, createState, html, renderHtml, unsafeHTML, css, compileTw } from './index.js';
2
+ import { getElement, createElement, createPage, createReducer, html, renderHtml, unsafeHTML, css, compileTw, useReducer } from './index.js';
3
3
 
4
4
  global.__DEV = true;
5
5
 
@@ -100,9 +100,9 @@ test('render multi template', async () => {
100
100
  expect(res).toMatchSnapshot();
101
101
  });
102
102
 
103
- test('createState', () => {
103
+ test('createReducer', () => {
104
- const countState = createState({
104
+ const countReducer = createReducer({
105
- state: {
105
+ initial: {
106
106
  count: 0,
107
107
  },
108
108
  reducer: {
@@ -111,24 +111,21 @@ test('createState', () => {
111
111
  },
112
112
  });
113
113
  const mock = jest.fn();
114
- countState.subscribe(mock);
114
+ countReducer.subscribe(mock);
115
- countState.increment(4);
115
+ countReducer.actions.increment(4);
116
- expect(countState.getValue().count).toEqual(4);
116
+ expect(countReducer.getValue().count).toEqual(4);
117
117
  expect(mock).toBeCalledWith({ count: 4 });
118
- countState.decrement(1);
118
+ countReducer.actions.decrement(1);
119
- expect(countState.getValue().count).toEqual(3);
119
+ expect(countReducer.getValue().count).toEqual(3);
120
120
  expect(mock).toBeCalledWith({ count: 3 });
121
- countState.decrement(2);
121
+ countReducer.actions.decrement(2);
122
- expect(countState.getValue().count).toEqual(1);
122
+ expect(countReducer.getValue().count).toEqual(1);
123
123
  expect(mock).toBeCalledWith({ count: 1 });
124
124
  });
125
125
 
126
- test('createElement without attrs and state', async () => {
126
+ test('createElement without attrs', async () => {
127
- createElement({
128
- name: 'base-element',
127
+ createElement({ url: '/base-element.js' }, () => {
129
- render: () => {
130
- return html` <div></div> `;
128
+ return html` <div></div> `;
131
- },
132
129
  });
133
130
  const Clazz = getElement('base-element');
134
131
  const instance = new Clazz();
@@ -136,34 +133,27 @@ test('createElement without attrs and state', async () => {
136
133
  expect(res).toMatchSnapshot();
137
134
  });
138
135
 
139
- test('createElement with attrs and state', async () => {
136
+ test('createElement with attrs and hooks', async () => {
140
- createElement({
141
- name: 'base-element',
137
+ createElement({ url: '/base-element.js' }, ({ perPage }) => {
138
+ const { count, actions } = useReducer({
142
- attrs: {
139
+ initial: {
143
- perPage: '',
140
+ count: 3,
144
- },
141
+ },
145
- state: {
142
+ reducer: {
146
- count: 3,
143
+ setValue: (state, v) => ({ ...state, count: v }),
147
- },
144
+ },
148
- reducer: {
149
- setValue: (state, v) => ({ ...state, count: v }),
150
- },
145
+ });
151
- render: ({ attrs, state, actions }) => {
152
- const { perPage } = attrs;
153
- const { count } = state;
154
-
155
- return html`
146
+ return html`
147
+ <div>
156
148
  <div>
157
- <div>
158
- <span>perPage: ${perPage}</span>
149
+ <span>perPage: ${perPage}</span>
159
- </div>
160
- </div>
161
- <span>Count: ${count}</span>
162
- </div>
163
- <button @click=${actions.setValue}>Set</button>
164
150
  </div>
151
+ </div>
152
+ <span>Count: ${count}</span>
153
+ </div>
154
+ <button @click=${actions.setValue}>Set</button>
155
+ </div>
165
- `;
156
+ `;
166
- },
167
157
  });
168
158
  const Clazz = getElement('base-element');
169
159
  const instance = new Clazz({ perPage: 5 });